Angular 单元测试用例在使用组件 ngOnInit 时失败答案

【问题标题】：Angular unit test case failing while using component ngOnInitAngular 单元测试用例在使用组件 ngOnInit 时失败
【发布时间】：2019-07-26 16:55:19
【问题描述】：

我正在使用 Angular 7 并且在使用 component.ngOnInit() 和 fixture.detectchanges() 时无法运行单元测试用例。如果删除 component.ngOnInit() 和 fixture.detectchanges() 则测试用例通过但我想检测间谍后的变化。

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppTestingModule, EffectsModule.forRoot([NodeEffects])],
      declarations: [SidenavComponent],
      schemas: [NO_ERRORS_SCHEMA],
      providers: [ApiNodesService]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SidenavComponent);
    component = fixture.componentInstance;
    browsingService = TestBed.get(BrowsingFilesService);
    apiNodesService = TestBed.get(ApiNodesService);
    appConfig = TestBed.get(AppConfigService);
    // appConfigSpy = spyOn(appConfig, 'get').and.returnValue([navItem]);
  });



  it('check getDocLibraries method is called', () => {
    spyOn(component, 'getDocLibraries');
    fixture.detectChanges();    
    component.ngOnInit();
    component.getDocLibraries();
    fixture.whenStable().then(data => {
      const debugUlElement = fixture.debugElement.query(By.css('ul.sidenav-menu_sub'));
      const nativeUlElement: HTMLUListElement = debugUlElement.nativeElement;
      expect(nativeUlElement.childElementCount).toEqual(1);
    });
  });
  });

错误信息： TypeError: Cannot convert undefined or null to object at Function.keys (<anonymous>) at SidenavComponent../src/app/components/sidenav/sidenav.component.ts.SidenavComponent.buildMenu (http://localhost:9876/src/app/components/sidenav/sidenav.component.ts?:93:19) at SidenavComponent../src/app/components/sidenav/sidenav.component.ts.SidenavComponent.ngOnInit (http://localhost:9876/src/app/components/sidenav/sidenav.component.ts?:76:28) at UserContext.<anonymous> (http://localhost:9876/src/app/components/sidenav/sidenav.component.spec.ts?:103:15)

【问题讨论】：

尝试将“fixture.detectChanges()”移到fixture.whenStable()之前
也许提供你的组件的代码？
我也添加了我收到的错误消息。

标签： angular jasmine angular-unit-test

【解决方案1】：

您应该将您的规范包装在 async 中，并将 detectChanges 移动到 whenStable 中。

  it('check getDocLibraries method is called', async(() => {
    spyOn(component, 'getDocLibraries');
    component.getDocLibraries();
    fixture.whenStable().then(()=> {
      fixture.detectChanges();
      const debugUlElement = fixture.debugElement.query(By.css('ul.sidenav-menu_sub'));
      const nativeUlElement: HTMLUListElement = debugUlElement.nativeElement;
      expect(nativeUlElement.childElementCount).toEqual(1);
    });
    component.ngOnInit();
  }));

注意：您有一组额外的 '});'最后？

你也可以使用 fakeAsync & tick 代替 async & whenStable

  it('check getDocLibraries method is called', fakeAsync(() => {
    spyOn(component, 'getDocLibraries');
    component.getDocLibraries();
    component.ngOnInit();
    tick();
    fixture.detectChanges();
    const debugUlElement = fixture.debugElement.query(By.css('ul.sidenav-menu_sub'));
    const nativeUlElement: HTMLUListElement = debugUlElement.nativeElement;
    expect(nativeUlElement.childElementCount).toEqual(1);
  }));

【讨论】：