Fake Clocks & Async Waits

## The component A product search waits for the user to stop typing before calling the API: ```ts import {Component, inject} from '@angular/core'; import {toSignal} from '@angular/core/rxjs-interop'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {debounceTime, distinctUntilChanged, switchMap} from 'rxjs'; import {ProductApi} from './product-api'; @Component({ selector: 'app-product-search', imports: [ReactiveFormsModule], template: ` <input [formControl]="query" /> <ul> @for (p of results(); track p.id) { <li>{{ p.name }}</li> } </ul> `, }) export class ProductSearch { private readonly api = inject(ProductApi); readonly query = new FormControl('', {nonNullable: true}); readonly results = toSignal( this.query.valueChanges.pipe( debounceTime(300), distinctUntilChanged(), switchMap((q) => this.api.search(q)), ), {initialValue: []}, ); } ``` `debounceTime(300)` delays each value by 300 ms and restarts the delay whenever a new value arrives, so only the last value in a burst reaches `switchMap`. ## What the test must prove 1. Nothing is searched while the user is still typing, or before 300 ms of silence. 2. Exactly the last value is searched once 300 ms have passed. 3. The results render. Real timers would make this slow and flaky. `fakeAsync` makes it instant and exact. ## The test ```ts import {TestBed, fakeAsync, tick} from '@angular/core/testing'; import {of} from 'rxjs'; it('searches only after 300 ms of silence', fakeAsync(() => { const calls: string[] = []; const fakeApi = { search: (q: string) => { calls.push(q); return of([{id: 1, name: 'SSD 1TB'}]); }, }; TestBed.configureTestingModule({providers: [{provide: ProductApi, useValue: fakeApi}]}); const fixture = TestBed.createComponent(ProductSearch); fixture.detectChanges(); const input: HTMLInputElement = fixture.nativeElement.querySelector('input'); input.value = 'ss'; input.dispatchEvent(new Event('input')); tick(200); input.value = 'ssd'; input.dispatchEvent(new Event('input')); // restarts the 300 ms window tick(299); expect(calls).toEqual([]); tick(1); fixture.detectChanges(); expect(calls).toEqual(['ssd']); expect(fixture.nativeElement.querySelectorAll('li').length).toBe(1); })); ``` ## Step by step - **`fakeAsync`** installs the fake clock. `debounceTime` uses RxJS's `asyncScheduler`, which schedules with `setInterval` and reads `Date.now()`; both are patched inside the fake zone, so the debounce runs on virtual time. - **`fixture.detectChanges()`** renders once so the `[formControl]` directive is attached to the input. In a zone-based test the fixture does not auto-detect unless you enable it. - **`dispatchEvent(new Event('input'))`** is how Angular's form directive learns the new value; setting `value` alone does nothing. - **`tick(200)` then a second value** proves the reset: the first value never reaches the API. - **`tick(299)`** stops one millisecond short of the deadline measured from the second keystroke. Asserting `calls` is still empty proves the delay is at least 300 ms. - **`tick(1)`** crosses the deadline: the debounce emits `'ssd'`, `switchMap` calls the fake API, the synchronous `of([...])` delivers results, and `toSignal`'s signal updates. - **`fixture.detectChanges()`** again renders the new list, since the view reads `results()`. ## Why tick and not flush here `tick(ms)` lets you assert **between** points in time — the whole point of a debounce test. `flush()` jumps to "no timers left" and returns how much time passed, which cannot show that nothing happened at 299 ms. There is a second reason, specific to RxJS: `flush()` stops when only **periodic** timers remain, and the async scheduler behind `debounceTime` uses `setInterval`, so `flush()` may leave the debounce unfired. ## Variations interviewers ask for | Variation | What to change | |---|---| | Duplicate query is ignored | Type `'ssd'` again after the search; `distinctUntilChanged` means `calls` stays `['ssd']` | | Slow API | Return `timer(500).pipe(map(() => [...]))` and `tick(500)` more before asserting | | Superseded request is cancelled | Type again while the slow API is pending; assert only the latest results render | | Empty query | Decide the rule (search or skip) and assert it explicitly | ## Common failures and what they mean - **`calls` is empty after `tick(1)`.** The input event never reached the form control: the fixture was not rendered before typing, or `value` was set without dispatching `input`. - **`calls` holds both values.** The debounce is not in the pipeline, or the two keystrokes were more than 300 ms apart in virtual time. - **The list is empty although `calls` is right.** Change detection did not run after the results arrived; call `detectChanges()`. - **An error about `zone.js/testing` being needed.** The suite runs without zone.js; the zone-free approach is required. ## Limits of this approach - It needs `zone.js` and `zone.js/testing`, and a runner that zone.js patches. The testing guide calls `fakeAsync` no longer recommended and states it cannot be used with Vitest. - In a zoneless suite the same test is written with the runner's fake timers, advancing time with the runner's API and awaiting the scheduled render.