Tester les signaux et le code asynchrone
Testez les comportements réactifs et asynchrones
Tester les signaux et le code asynchrone est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
L’asynchrone est la partie la plus difficile des tests
Les composants réels effectuent des opérations asynchrones : minuteurs, promesses, HTTP, champs de saisie avec temporisation. Les tests doivent contrôler le temps afin que les assertions s’exécutent une fois le travail asynchrone terminé. Angular fournit fakeAsync, tick et flush pour contrôler le temps de manière déterministe.
Tester un signal
Un signal se lit comme une fonction. Le tester est simple : appelez le signal, vérifiez la valeur, modifiez-le, puis vérifiez à nouveau.
it('increments the count signal', () => {
const fixture = TestBed.createComponent(CounterComponent);
const c = fixture.componentInstance;
expect(c.count()).toBe(0);
c.increment();
expect(c.count()).toBe(1);
});Les signaux calculés se mettent à jour automatiquement
Un computed est recalculé lorsque ses dépendances changent. Dans un test, modifiez le signal source, puis lisez le signal calculé : aucun recalcul manuel n’est nécessaire.
expect(c.doubled()).toBe(0);
c.count.set(5);
expect(c.doubled()).toBe(10); // computed(() => c.count() * 2)Les signaux et le DOM
Pour voir un changement de signal se refléter dans le modèle, appelez detectChanges() après l’avoir mis à jour, comme pour tout autre état.
c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');Présentation de fakeAsync
Entourez un test de fakeAsync pour entrer dans un environnement temporel simulé. Les minuteurs et les microtâches sont placés en file d’attente au lieu de s’exécuter, et vous les faites avancer manuellement. Les tests asynchrones deviennent ainsi synchrones et fiables.
import { fakeAsync, tick } from '@angular/core/testing';
it('loads after delay', fakeAsync(() => {
// timers are now under your control
}));Faire avancer le temps avec tick
tick(ms) fait avancer l’horloge virtuelle et exécute les minuteurs programmés dans cet intervalle.
it('fires after 1s', fakeAsync(() => {
let done = false;
setTimeout(() => (done = true), 1000);
expect(done).toBe(false);
tick(1000);
expect(done).toBe(true);
}));flush pour tous les minuteurs en attente
Lorsque vous ne connaissez pas le délai exact, flush() vide toutes les macrotâches en attente jusqu’à ce que la file soit vide.
import { fakeAsync, flush } from '@angular/core/testing';
it('completes debounced search', fakeAsync(() => {
component.search('ang');
flush(); // run all timers (e.g. debounceTime)
expect(component.results().length).toBeGreaterThan(0);
}));Tester les promesses avec fakeAsync
Les promesses se résolvent sous forme de microtâches. Dans fakeAsync, appelez flushMicrotasks() (ou tick()) pour les terminer avant de vérifier le résultat.
import { fakeAsync, flushMicrotasks } from '@angular/core/testing';
it('resolves promise', fakeAsync(() => {
let v: number | undefined;
Promise.resolve(42).then((n) => (v = n));
flushMicrotasks();
expect(v).toBe(42);
}));L’assistant async / waitForAsync
Pour les tests qui doivent attendre une opération asynchrone réelle sans contrôler le temps, entourez le corps de waitForAsync et utilisez fixture.whenStable().
import { waitForAsync } from '@angular/core/testing';
it('settles', waitForAsync(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(fixture.componentInstance.ready()).toBe(true);
});
}));Tester effect()
Un effect s’exécute de manière asynchrone après la modification des signaux qu’il lit. Pour observer son résultat, lancez la détection des changements (ou utilisez flush) afin que l’effet s’exécute, puis vérifiez l’effet secondaire.
c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);Piège courant : des minuteurs restants
Si un test fakeAsync se termine alors que des minuteurs sont encore en file d’attente, Angular lève une erreur. Appelez toujours tick/flush pour les exécuter, ou supprimez les intervalles dans ngOnDestroy, afin que l’horloge virtuelle soit vide à la fin du test.
Vérification rapide
Choisissez l’outil adapté à un délai connu.
Récapitulatif
Les signaux se testent comme de simples fonctions (appelez-les pour les lire, utilisez set pour les modifier et detectChanges pour le DOM). Pour l’asynchrone, fakeAsync fournit une horloge virtuelle que vous faites avancer avec tick, que vous videz avec flush et qui permet de terminer les promesses avec flushMicrotasks. Ne laissez jamais de minuteurs en attente.
Questions Fréquemment Posées
La leçon « Tester les signaux et le code asynchrone » est-elle gratuite ?
Oui — le texte complet de « Tester les signaux et le code asynchrone » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Tester les signaux et le code asynchrone » ?
Testez les comportements réactifs et asynchrones Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Tester les signaux et le code asynchrone » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- TestBed et appareils de test de composants
- Tester les entrées, les sorties et le DOM
- Simuler les services et les dépendances
- Tester les signaux et le code asynchrone