angular - 角路由器出口茉莉花测试

Question

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

例如：我单击一个链接，然后单击另一个链接，然后单击另一个链接，每次 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帮助我的情况吗？

标签： angulartypescriptasynchronousjasminerouter-outlet

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