使用fakeAsync测试Angular组件时debounceTime后tap未触发

组件代码 #

export class AppComponent implements OnInit {
    loading = true;

    data$?: Observable<string>;

    readonly control = new FormControl<string>('DATA', {nonNullable: true})
    readonly DEBOUNCE_MS = 500;

    ngOnInit(): void {
        this.data$ = this.control.valueChanges.pipe(
            startWith(this.control.value),
            tap((x) => {
                this.loading = true;
            }),
            debounceTime(this.DEBOUNCE_MS),
            tap((x) => {
                this.loading = false;
            }),
        );
    }
}

模板代码 #

@let data = data$ | async ;

@if (!loading) {
    <div data-testing-id="data">{{ data }}</div>
}

测试用例 #

it(`with fake async`, fakeAsync(() => { // 该测试会失败
    fixture.detectChanges();
    tick(component.DEBOUNCE_MS + 10);
    fixture.detectChanges();

    expect(pageObject.data).toBeTruthy();
}));

it(`with fake async and whenStable`, fakeAsync(() => { // 该测试可行
    fixture.detectChanges();

    expect(component.loading).toEqual(true);

    fixture.whenStable().then(() => {
        expect(component.loading).toEqual(false);
        expect(pageObject.data.nativeElement.textContent).toEqual('DATA');
    });
}));

it(`with real async`, async () => { // 该测试也可行
    fixture.detectChanges();

    await realDelay(component.DEBOUNCE_MS);
    fixture.detectChanges();

    expect(pageObject.data).toBeTruthy();
});

问题现象 #

移除debounceTime操作符后测试一切正常，但保留它时，第一个测试用例里的tick无法触发debounceTime之后的第二个tap，导致loading始终为true，测试断言不成立。原以为fakeAsync配合tick可以模拟定时器解决这类问题，但实际无效。虽然用真实Promise延迟的方式可以工作，但感觉是权宜之计，需要明确tick不足以处理该场景的原因。

原因解析 #

核心问题出在Angularasync管道与fakeAsync的机制交互上：

1. async管道订阅Observable时，会将订阅逻辑包装在Angular变更检测周期内，且依赖NgZone调度异步任务。
2. debounceTime内部使用RxJS的asyncScheduler，在fakeAsync环境下会被替换为TestScheduler，但两者的调度衔接存在缺口：
   • 第一次fixture.detectChanges()触发ngOnInit，Observable被async管道订阅，startWith发出值后第一个tap将loading设为true，随后进入debounceTime等待。
   • tick(500+10)仅推进了虚拟定时器的时间，但没有主动触发async管道对应的Observable订阅回调执行——async管道的更新需要Angular确认异步任务完成，而tick只处理了定时器时间，未同步触发Angular内部的异步任务完成通知。
3. fixture.whenStable()能正常工作，是因为它会等待所有Angular调度的异步任务（包括RxJS由asyncScheduler调度的任务）全部完成后再执行回调，此时debounceTime后的逻辑已执行，loading状态被正确更新。

简言之，fakeAsync+tick只处理了定时器时间推进，却没有触发async管道订阅带来的Angular异步任务完成流程，而whenStable()会等待这些任务结束，因此能拿到正确状态。

内容的提问来源于stack exchange，提问作者simple2k