vendredi 26 octobre 2018

Jasmine: handle Promise.resolve().then inside ngOnInit

When my angular component is loaded it displays a modal (ng-bootstrap).

In my test i try to access this modal but i cant access it since it seems to be loaded after my test runs.

component.ts

ngOnInit() {
    Promise.resolve().then(() => { // promise is needed because of angular bug: https://github.com/angular/angular/issues/15634
      this.ciamModal = this.modalService.open(this.ciamcheck, {ariaLabelledBy: "modal-basic-title", keyboard: false});
      this.ciamModal.result.then((result) => {
        // will be closed from code
      }, (reason) => {
        this.router.navigate(["/somewhere"]);
      });
    });
  }

component.spec.ts

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [AppModule, AdminModule, SharedModule],
    providers: [
      {provide: APP_BASE_HREF, useValue: "/"},
      { provide: LOCALE_ID, useValue: "de" }
    ]
  })
  .compileComponents();

  fixture = TestBed.createComponent(UserCreatorComponent);
  component = fixture.componentInstance;
});

it("should display ciam lookup dialog", async((done) => {
  fixture.whenStable().then(() => {
    fixture.detectChanges();
    expect(fixture.debugElement.query(By.css("#modal-basic-title")).nativeElement.innerHTML).toContain("E-Mail");
  });
  component.ngOnInit();
}));

when running the test i get the following error message:

TypeError: Cannot read property 'nativeElement' of null
        at eval (webpack:///./src/app/admin/user-creator/user-creator.component.spec.ts?:117:95)
        at ZoneDelegate.invoke (webpack:///./node_modules/zone.js/dist/zone.js?:387:26)
        at AsyncTestZoneSpec.onInvoke (webpack:///./node_modules/zone.js/dist/zone-testing.js?:712:39)
        at ProxyZoneSpec.onInvoke (webpack:///./node_modules/zone.js/dist/zone-testing.js?:284:39)
        at ZoneDelegate.invoke (webpack:///./node_modules/zone.js/dist/zone.js?:386:32)
        at Zone.run (webpack:///./node_modules/zone.js/dist/zone.js?:137:43)
        at eval (webpack:///./node_modules/zone.js/dist/zone.js?:871:34)
        at ZoneDelegate.invokeTask (webpack:///./node_modules/zone.js/dist/zone.js?:420:31)
        at AsyncTestZoneSpec.onInvokeTask (webpack:///./node_modules/zone.js/dist/zone-testing.js?:696:25)
        at ProxyZoneSpec.onInvokeTask (webpack:///./node_modules/zone.js/dist/zone-testing.js?:315:39)
        at ZoneDelegate.invokeTask (webpack:///./node_modules/zone.js/dist/zone.js?:420:31)
        at AsyncTestZoneSpec.onInvokeTask (webpack:///./node_modules/zone.js/dist/zone-testing.js?:696:25)
        at ProxyZoneSpec.onInvokeTask (webpack:///./node_modules/zone.js/dist/zone-testing.js?:315:39)
    error properties: Object({ rejection: TypeError: Cannot read property 'nativeElement' of null, promise: [object Promise], zone: Zone({ _properties: Object({ ProxyZoneSpec: ProxyZoneSpec({ defaultSpecDelegate: null, name: 'ProxyZone', properties: <circular reference: Object>, propertyKeys: null, lastTaskState: Object({ microTask: false, macroTask: true, eventTask: true, change: 'microTask' }), isNeedToTriggerHasTask: false, tasks: [ ZoneTask({ _zone: <circular reference: Object>, runCount: 0, _zoneDelegates: [ ZoneDelegate({ _taskCounts: Object, zone: <circular reference: Object>, _parentDelegate: ZoneDelegate, _forkZS: <circular reference: Object>, _forkDlgt: ZoneDelegate, _forkCurrZone: <circular reference: Object>, _interceptZS: <circular reference: Object>, _interceptDlgt: ZoneDelegate, _interceptCurrZone: <circular reference: Object>, _invokeZS: <circular reference: Object>, _invokeDlgt: ZoneDelegate, _invokeCurrZone: <circular reference: Object>, _handleErrorZS: <circular reference: Object>, _h ...
    Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of null
        at resolvePromise (webpack:///./node_modules/zone.js/dist/zone.js?:813:31)
        at eval (webpack:///./node_modules/zone.js/dist/zone.js?:876:17)
        at ZoneDelegate.invokeTask (webpack:///./node_modules/zone.js/dist/zone.js?:419:36)
        at Zone.runTask (webpack:///./node_modules/zone.js/dist/zone.js?:187:47)
        at drainMicroTaskQueue (webpack:///./node_modules/zone.js/dist/zone.js?:594:35)

I already tried several different approaches with fakeAsync and tick() and without async with different variations - with the same or simmilar result as seen above.

Does somebody have a tip for me on how to do it right?

Aucun commentaire:

Enregistrer un commentaire