Angular Academy · Lezione

Testare signal e codice asincrono

Testare i comportamenti reattivi e asincroni

Testare signal e codice asincrono è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

L'asincronia è la parte più difficile dei test

I componenti reali eseguono operazioni asincrone: timer, promise, HTTP e input con debounce. I test devono controllare il tempo affinché le asserzioni vengano eseguite dopo il completamento delle operazioni asincrone. Angular mette a disposizione fakeAsync, tick e flush per controllare il tempo in modo deterministico.

Testare un signal

Un signal si legge come una funzione. Testarlo è semplice: chiamate il signal e verificate il valore; aggiornatelo e verificate nuovamente.

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);
});

I signal computed si aggiornano automaticamente

Un computed viene ricalcolato quando cambiano le sue dipendenze. In un test modificate il signal sorgente, quindi leggete il computed: non è necessario ricalcolarlo manualmente.

expect(c.doubled()).toBe(0);
c.count.set(5);
expect(c.doubled()).toBe(10); // computed(() => c.count() * 2)

Signal e DOM

Per vedere nel template la modifica di un signal, chiamate detectChanges() dopo averlo aggiornato, come per qualsiasi altro stato.

c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');

Introduzione a fakeAsync

Racchiudete un test in fakeAsync per entrare in un fuso orario simulato. I timer e i microtask vengono messi in coda invece di essere eseguiti, e potete farli avanzare manualmente. In questo modo i test asincroni diventano sincroni e affidabili.

import { fakeAsync, tick } from '@angular/core/testing';

it('loads after delay', fakeAsync(() => {
  // timers are now under your control
}));

Far avanzare il tempo con tick

tick(ms) fa avanzare l'orologio virtuale, eseguendo tutti i timer pianificati entro quell'intervallo.

it('fires after 1s', fakeAsync(() => {
  let done = false;
  setTimeout(() => (done = true), 1000);
  expect(done).toBe(false);
  tick(1000);
  expect(done).toBe(true);
}));

flush per tutti i timer in sospeso

Quando non conoscete il ritardo esatto, flush() svuota ogni macrotask in sospeso finché la coda non è vuota.

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);
}));

Testare le promise con fakeAsync

Le promise vengono risolte come microtask. All'interno di fakeAsync, chiamate flushMicrotasks() (o tick()) per completarle prima delle asserzioni.

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'helper async / waitForAsync

Per i test che devono attendere una vera operazione asincrona senza controllare il tempo, racchiudete il corpo in waitForAsync e usate fixture.whenStable().

import { waitForAsync } from '@angular/core/testing';

it('settles', waitForAsync(() => {
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(fixture.componentInstance.ready()).toBe(true);
  });
}));

Testare effect()

Un effect viene eseguito in modo asincrono dopo la modifica dei signal che legge. Per osservarne il risultato, eseguite il rilevamento delle modifiche (o un flush) in modo che l'effect venga eseguito, quindi verificate l'effetto collaterale.

c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);

Problema comune: timer residui

Se un test fakeAsync termina con timer ancora in coda, Angular genera un errore. Eseguite sempre tick/flush oppure cancellate gli intervalli in ngOnDestroy, così l'orologio virtuale è vuoto al termine del test.

Verifica rapida

Scegliete lo strumento corretto per un ritardo noto.

Riepilogo

I signal si testano come semplici funzioni (chiamateli per leggerli, usate set per aggiornarli e detectChanges per il DOM). Per l'asincronia, fakeAsync fornisce un orologio virtuale che fate avanzare con tick, svuotate con flush e usate per completare le promise con flushMicrotasks. Non lasciate mai timer in sospeso.

Domande Frequenti

La lezione «Testare signal e codice asincrono» è gratuita?

Sì — il testo completo di «Testare signal e codice asincrono» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Testare signal e codice asincrono»?

Testare i comportamenti reattivi e asincroni Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Testare signal e codice asincrono»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy