angular unit test ngOninit

Question

The testbed config is

  TestBed.configureTestingModule({
            declarations: [ EditPersorgaComponent, ArrayFromIntPipe, TeamFilterPipe ],
            schemas: [ NO_ERRORS_SCHEMA ],
            imports: [  HttpClientModule, NgbModule.forRoot(), TranslateModule.forRoot({
                loader: {
                  provide: TranslateLoader,
                  useFactory: HttpLoaderFactory,
                  deps: [HttpClient]
                }
              })],
            providers: [
                { provide: Renderer2, useValue: renderer2Stub },
                { provide: NavigationService, useValue: navigationServiceStub },
                { provide: DatepickerFormater, useValue: datepickerFormaterStub },
                { provide: NgbModal, useValue: ngbModalStub },
                { provide: PersorgaService, useValue: persorgaServiceStub },
                { provide: ActivatedRoute, useValue: activatedRouteStub },
                { provide: ActionsSubject, useValue: actionsSubjectStub },
                { provide: ToasterService, useValue: toasterServiceStub },
                { provide: TranslateService, useValue: translateServiceStub },
                { provide: AppConfirmService, useValue: appConfirmServiceStub }
            ]
        });
        fixture = TestBed.createComponent(EditPersorgaComponent);
        comp = fixture.componentInstance;
    });

I want to test ngOninit in Angular 2+

  ngOnInit() {
    this.navigationService.menuStore$.dispatch(new SetFromArray({
      widgetName: 'elementPersonalOrg', data: NavigationService.getMenuElement('elementPersonalOrg').sub
    }));

    this.selectedDate = this.dpFormatter.convertToNgbDateStruct(new Date());
  }

I tried unit test

describe('ngOnInit', () => {
    it('makes expected calls', async( () => {
        const navigationServiceStub: NavigationService = fixture.debugElement.injector.get(NavigationService);
        spyOn(navigationServiceStub, 'menuStore$');
        comp.ngOnInit();
        expect(navigationServiceStub.menuStore$).toHaveBeenCalled();
    }));
});

I am getting errors like

TypeError: Cannot read property 'id' of undefined Failed: Cannot read property 'debugElement' of undefined

can somebody please help me with this. THank you

Answer 1

After your component instance you need to set the ID for something that your component requires on load. This is often done in a beforeEach outside of the beforeeach the testbed configuring is done.

If you have a route for this page that requires an id of some sort, this could be it and would need to be handled before you configure the test bed. Without seeing your component, this is hard to answer.

Look at your component and see what items load oninit. Also, I suggest remove NO_ERRORS_SCHEMA. This will hide actual errors that you likely do not want hidden.

Another possibility is timing when its compiling the component. Try adding the fakeAsync to the beforeeach that your TestBed configuration is in first.

beforeEach(async(() => { // testbed configure here   }));