如何在 Angular 6 中测试 app/root 组件

Question

最近我有 2 个与应用程序组件相关的失败测试用例。当我使用 fixture.detectChanges() 时，测试用例因错误 "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'isValid: undefined'. Current value: 'isValid: true'".

而失败

似乎fixture.detectChanges() 无法与应用程序组件一起正常工作。

这是我的规范文件：

import { ComponentFixture, TestBed, async } from '@angular/core/testing';

// Component
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { EmployerInfoComponent } from './components/employer-info/employer-info.component';
import { PayrollInfoComponent } from './components/payroll-info/payroll-info.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProgressJourneyContainerComponent } from './components/progress-journey-container/progress-journey-container.component';
import { StartReportComponent } from './components/start-report/start-report.component';
import { ReportInfoComponent } from './components/report-info/report-info.component';
import { ReportPayrollComponent } from './components/report-payroll/report-payroll.component';

// Module
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ProgressJourneyModule } from './modules/progress-journey/progress-journey.module';
import { HttpClientModule } from '@angular/common/http';
import { Ng2Webstorage } from 'ngx-webstorage';

// Service
import { EmployerService } from './services/employer/employer.service';
import { PayrollInfoService } from './services/payroll-info/payroll-info.service';
import { DashboardService } from './services/dashboard/dashboard.service';
import { UiConfigService } from './services/ui-config/ui-config.service';
import { MockUiConfigService } from './services/ui-config/mock-uiconfig.service';
import { EmployerCuService } from './services/employer-cu/employer-cu.service';
import { LoggerService } from './services/logger.service';

// Service Mock
import { MockDashboardService } from './services/dashboard/mock-dashboard.service';
import { MockPayrollInfoService } from './services/payroll-info/mock-payrollinfo.service';
import { MockEmployerService, mockEmployer } from './services/employer/mock-employer.service';
import { AppModule } from './app.module';

describe('AppComponent', () => {
  let comp: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      providers: [
        {
          provide: UiConfigService,
          useClass: MockUiConfigService
        },
        {
          provide: EmployerService,
          useClass: MockEmployerService
        },
        {
          provide: DashboardService,
          useClass: MockDashboardService
        },
        {
          provide: PayrollInfoService,
          useClass: MockPayrollInfoService
        }
      ],
      declarations: []
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    comp = fixture.componentInstance;
  });

  it('should return employer data', () => {
    // fixture.detectChanges();
    comp.ngOnInit();
    expect(comp.empData).toEqual(mockEmployer);
  });

  it('should render header', () => {
    fixture.detectChanges();
    // expect(fixture.nativeElement.textContent).toContain('Exit');
  });
});

这是我的应用组件：

import { Component, OnInit } from '@angular/core';
import { UiConfigService } from './services/ui-config/ui-config.service';
import { EmployerService } from './services/employer/employer.service';
import { LoggerService } from './services/logger.service';
import { LocalStorageService } from 'ngx-webstorage';
import { LocalDataService } from './services/local-data/local-data.service';
import { EmployerModel } from './models/employer.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [LocalDataService]
})

export class AppComponent implements OnInit {
  title = 'Reporting annual payroll';
  exitUrl: string;
  empData: EmployerModel = new EmployerModel;
  isStartReport: boolean;

  constructor(
    private uiConfigService: UiConfigService,
    private employerService: EmployerService,
    private loggerService: LoggerService,
    private localStorageService: LocalStorageService,
    private localDataService: LocalDataService
  ) {}

  ngOnInit() {
    this.loggerService.log('started calling getEmployer');

    this.uiConfigService.getUiConfig().subscribe(data => {
      this.exitUrl = data.exitUrl;
    });

    this.employerService.getEmployer().subscribe(data => {
      this.empData = data;
    });
    this.loggerService.log('finished calling getEmployer');

    this.localDataService.getJSON().subscribe(data => {
      this.localStorageService.store('staticData', data);
    });
  }

  startReportChanged(data: boolean) {
    this.isStartReport = data;
  }
}

这是失败的消息：

代码应该非常简单。我目前正在调试测试用例调用 "should render header"。所有的模拟数据和函数都有明确的定义。我不知道为什么会这样失败。

请帮忙。也请给我一些suggestions/corrections用于测试根组件。

提前致谢！

Answer 1

我发现了问题。这是一个名为 ProgressJourneyContainerComponent 的组件，未正确初始化。它是 App/Root 组件的子组件。

如何在 Angular 6 中测试 app/root 组件

How to test app/root component in Angular 6

angular

angular6

angular-test

angular-unit-test