javascript / expert
Snippet
Testen der Signal-Interoperabilität mit fakeAsync und flush
Beim Testen von Angular-Signals, die von asynchronen Quellen wie RxJS-Observables abhängen (via toSignal), ist 'fakeAsync' unerlässlich. Es ermöglicht die Simulation des Zeitverlaufs ('tick') und stellt sicher, dass alle intern geplanten Aufgaben abgeschlossen sind ('flush'), bevor Assertions gemacht werden.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { fakeAsync, tick, flush } from '@angular/core/testing';import { toSignal } from '@angular/core/rxjs-interop';import { of, delay } from 'rxjs';it('should capture delayed RxJS values in a signal', fakeAsync(() => {const source$ = of('success').pipe(delay(1000));const sig = toSignal(source$, { initialValue: 'loading' });expect(sig()).toBe('loading');tick(1000); // Advance virtual timeexpect(sig()).toBe('success');flush(); // Ensure all microtasks are cleared}));
angular
Erklärung
1
fakeAsync(() => { ... })
Umschließt den Test in einer Zone, in der timerbasierte asynchrone Operationen synchron ablaufen.
2
tick(1000);
Simuliert den Ablauf von 1 Sekunde in der virtuellen Uhr, was den RxJS-Delay auslöst.
3
toSignal(source$, { initialValue: 'loading' })
Konvertiert ein Observable in ein Signal, was ein sorgfältiges Timing-Management in Tests erfordert.