CODEWITHSUNDEEP
angulartypescriptasynchronousjasminerouter-outlet
MeIr
MeIr

Reputation: 7316

Angular router-outlet jasmine test

Im testing web-app navigation via Jasmine spec with RouterTestingModule however having trouble with nested fixture.whenStable().then(() => {}).

For example: I click on a link, then another link and then another link, each time router-outlet changes which component it displays. So far this is the only way I figured to test (without e2e tests) is to follow below pattern:

(component setup)
...
it('test name', async(() => {
 fixture.nativeElement.querySelector('.link').click();

 fixture.whenStable().then(() => {
   fixture.nativeElement.querySelector('.link2').click();

   fixture.whenStable().then(() => { 
     fixture.nativeElement.querySelector('.link3').click();

     fixture.whenStable().then(() => { 
        expect(fixture.nativeElement.querySelector('.element')).toBeTruthy();
     });
   });
 });
});

But this is a bit of an insane way of writing tests. I figure to try fakeAsync with tick() and flush() however it doesn't help, as component don't appear (render) in place of router-outlet.

Is there a way to accomplish my test without having a nested promise structure? Can fakeAsync help in my case?

Upvotes: 1

Views: 252

Answers (1)

Xesenix
Xesenix

Reputation: 2548

it('test name', async () => { // use actual async function to be able to use await
 fixture.nativeElement.querySelector('.link').click();

 await fixture.whenStable();
 fixture.nativeElement.querySelector('.link2').click();

 await fixture.whenStable();
 fixture.nativeElement.querySelector('.link3').click();

 await fixture.whenStable()
 expect(fixture.nativeElement.querySelector('.element')).toBeTruthy();
});

Upvotes: 1

Related Questions