How to test app/root component in Angular 6

Question

Recently I have 2 failed test cases related to the app component. When I use fixture.detectChanges() the test case failed with an error "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'isValid: undefined'. Current value: 'isValid: true'".

It seems fixture.detectChanges() cannot work properly with the app component.

Here is my spec file:

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');
  });
});

Here is my app component:

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;
  }
}

Here is the failed message:

The code should be pretty straightforward. I am currently debugging the test case call "should render header". All the mock data and functions are clearly defined. I have no idea why it failed like this.

Please help. Please also give me some suggestions/corrections for testing the root component.

Thanks in advance!

Answer 1

I found the issue. It is a component called ProgressJourneyContainerComponent not correctly initialized. It is a sub-component of the App/Root component.