Angular 路由器出口茉莉花测试

Question

我正在使用 RouterTestingModule 通过 Jasmine 规范测试网络应用程序导航，但是在嵌套 fixture.whenStable().then(() => {}) 时遇到问题。

例如：我单击一个 link，然后单击另一个 link，然后单击另一个 link，每次 router-outlet 都会更改它显示的组件。到目前为止，这是我想测试的唯一方法（没有 e2e 测试）是遵循以下模式：

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

但这种编写测试的方式有点疯狂。我想尝试 fakeAsync 与 tick() 和 flush() 但这没有帮助，因为组件没有出现（渲染）代替 router-outlet.

有没有办法在没有嵌套承诺结构的情况下完成我的测试？ fakeAsync 对我的情况有帮助吗？

Answer 1

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

Angular 路由器出口茉莉花测试

Angular router-outlet jasmine test

asynchronous

jasmine

typescript

router-outlet

angular