Angular Academy · Lezione

Testare input, output e DOM

Verificare l'output renderizzato e gli eventi

Testare input, output e DOM è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 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.

Testare il contratto del componente

I componenti comunicano tramite input (dati in ingresso), output (eventi in uscita) e DOM renderizzato. I buoni test dei componenti interagiscono con queste tre superfici e verificano il risultato visibile, non i dettagli dell'implementazione interna.

Impostare un input

Assegni un valore alla proprietà di input dell'istanza del componente, quindi chiami detectChanges() per eseguire nuovamente il rendering. Con gli input signal, imposti il valore tramite fixture.componentRef.setInput().

fixture.componentInstance.label = 'Save';
fixture.detectChanges();
// signal inputs:
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();

Leggere il DOM con querySelector

Usi fixture.nativeElement.querySelector() per trovare gli elementi renderizzati e verificare il loro testo o i loro attributi.

fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();
const btn = fixture.nativeElement.querySelector('button');
expect(btn.textContent.trim()).toBe('Save');

DebugElement e By.css

fixture.debugElement.query(By.css(...)) restituisce un wrapper DebugElement. Il suo .nativeElement è il nodo DOM e consente query più avanzate, compatibili con diverse piattaforme.

import { By } from '@angular/platform-browser';

const de = fixture.debugElement.query(By.css('.title'));
expect(de.nativeElement.textContent).toContain('Hello');

queryAll per gli elenchi

Per gli elementi ripetuti (ad esempio in un ciclo @for), usi queryAll per ottenere tutte le corrispondenze e verificarne il numero.

const items = fixture.debugElement.queryAll(By.css('li'));
expect(items.length).toBe(3);
expect(items[0].nativeElement.textContent).toContain('First');

Simulare un clic

Attivi gli eventi DOM per testare l'interazione. Usi triggerEventHandler su un DebugElement oppure chiami .click() sul nodo nativo, quindi esegua detectChanges().

const btn = fixture.debugElement.query(By.css('button'));
btn.triggerEventHandler('click');
fixture.detectChanges();
expect(fixture.componentInstance.count).toBe(1);

Testare un evento di output

Si iscriva all'output del componente (un EventEmitter o un output signal) prima di attivare l'azione che dovrebbe emetterlo.

let emitted: string | undefined;
fixture.componentInstance.saved.subscribe((v: string) => (emitted = v));
fixture.debugElement.query(By.css('button')).triggerEventHandler('click');
expect(emitted).toBe('done');

Verificare attributi e classi

Può verificare le classi e gli attributi condizionali che dipendono dagli input.

fixture.componentRef.setInput('active', true);
fixture.detectChanges();
const el = fixture.nativeElement.querySelector('.tab');
expect(el.classList.contains('active')).toBe(true);

Aggiornare gli input dei moduli

Per testare i campi di testo, imposti il valore dell'input e distribuisca un evento input, così i binding di Angular vengono aggiornati.

const input = fixture.nativeElement.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(fixture.componentInstance.text).toBe('hello');

Perché usare detectChanges dopo ogni modifica

Sia i test basati su zone sia quelli zoneless richiedono una chiamata esplicita a detectChanges() dopo aver modificato lo stato, perché il test viene eseguito al di fuori del tick automatico di Angular. Dimenticarla è la causa principale del messaggio «la mia asserzione vede un DOM obsoleto».

Testare il comportamento, non gli interni

Preferisca verificare l'output renderizzato e gli eventi emessi anziché i campi privati. In questo modo i test rimangono resilienti: il refactoring degli elementi interni non interromperà un test se il comportamento visibile all'utente resta invariato.

Verifica rapida

Quale API fornisce un DebugElement?

Riepilogo

Ha gestito gli input tramite setInput, ha letto il DOM con querySelector e By.css, ha acquisito gli output sottoscrivendosi e ha simulato clic ed eventi input. Esegua sempre detectChanges() dopo una modifica e verifichi il comportamento visibile all'utente.

Domande Frequenti

La lezione «Testare input, output e DOM» è gratuita?

Sì — il testo completo di «Testare input, output e DOM» è 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 input, output e DOM»?

Verificare l'output renderizzato e gli eventi 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 2 di 4.

Quanto tempo richiede la lezione «Testare input, output e DOM»?

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