我有一个 Angular 模块,其中包含列表、卡片、详细信息和编辑组件。
列表模板将如下所示:
<own-list>
<button [routerLink]="['/', 'mod', 'create']" data-testid="new-request">Create</button>
<own-card *ngFor="let elem of elements" [routerLink]="['/', 'mod', elem.id]"></own-card>
<own-list>
测试点击卡片时会进入其详细信息页面:
test('it should navigate to detail when clicking a card', fakeAsync(() => {
const cardElems = rootFixture.debugElement.queryAll(By.css('own-card'));
// Navigate to top card detail
cardElems[0].nativeElement.click();
tick();
fixture.detectChanges();
// Check route is correct
expect(location.path()).toBe(`/mod/${sortedElements[0].id}`);
}));
工作正常。
测试点击创建按钮进入编辑时:
test('it should navigate to edit when clicking new request', fakeAsync(() => {
const debugCreateBtn = rootFixture.debugElement.query(By.css(`[data-testid="new-request"]`));
// Navigate to edit
debugCreateBtn.nativeElement.click();
tick();
fixture.detectChanges();
// Check route is correct
expect(location.path()).toBe(`/mod/create`);
}));
失败并显示
1 periodic timer(s) still in the queue
。
如果我这样添加
flush
:
test('it should navigate to edit when clicking new request', fakeAsync(() => {
const debugCreateBtn = rootFixture.debugElement.query(By.css(`[data-testid="new-request"]`));
// Navigate to edit
debugCreateBtn.nativeElement.click();
tick();
fixture.detectChanges();
flush(); // <-- new flush
// Check route is correct
expect(location.path()).toBe(`/mod/create`);
}));
效果很好。
如果我切换到
triggerEventHandler
:
test('it should navigate to edit when clicking new request', fakeAsync(() => {
const debugCreateBtn = rootFixture.debugElement.query(By.css(`[data-testid="new-request"]`));
// Navigate to edit
// Run in ngZone to avoid warning
fixture.ngZone.run(() => debugCreateBtn.triggerEventHandler('click', { button: 0 }));
tick();
fixture.detectChanges();
// Check route is correct
expect(location.path()).toBe(`/mod/create`);
}));
然后就可以工作了,无需冲洗。
有人可以解释为什么它在每种情况下有效或无效吗?
flushMicrotasks
刷新待处理的微任务,tick
刷新待处理的微任务并进度时间,flush
刷新待处理的微任务,宏任务并进度时间,所有这些都在fakeAsync
的上下文中。
像
click
这样的原生事件是宏任务。没有将 triggerEventHandler
设置为 EventEmitter
的 async
和 true
使用 微任务。