Test af inputs, outputs og DOM
Kontrollér den gengivne output og hændelser.
Test af inputs, outputs og DOM er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.
Test af komponentens kontrakt
Komponenter kommunikerer gennem inputs (data ind), outputs (hændelser ud) og den gengivne DOM. Gode komponenttests driver disse tre overflader og kontrollerer det synlige resultat, ikke interne implementeringsdetaljer.
Angivelse af et input
Tildel en værdi til komponentinstansens input-egenskab, og kald derefter detectChanges() for at gengive igen. Med signal-inputs angiver du værdien via fixture.componentRef.setInput().
fixture.componentInstance.label = 'Save';
fixture.detectChanges();
// signal inputs:
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();Læsning af DOM med querySelector
Brug fixture.nativeElement.querySelector() til at finde gengivne elementer og kontrollere deres tekst eller attributter.
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();
const btn = fixture.nativeElement.querySelector('button');
expect(btn.textContent.trim()).toBe('Save');DebugElement og By.css
fixture.debugElement.query(By.css(...)) returnerer en wrapper af typen DebugElement. Dens .nativeElement er DOM-noden, og du får mere omfattende forespørgsler, der fungerer på tværs af platforme.
import { By } from '@angular/platform-browser';
const de = fixture.debugElement.query(By.css('.title'));
expect(de.nativeElement.textContent).toContain('Hello');queryAll til lister
Brug queryAll til gentagne elementer (f.eks. en @for-løkke) for at hente alle match og kontrollere antallet.
const items = fixture.debugElement.queryAll(By.css('li'));
expect(items.length).toBe(3);
expect(items[0].nativeElement.textContent).toContain('First');Simulering af et klik
Udløs DOM-hændelser for at teste interaktion. Brug triggerEventHandler på et DebugElement, eller kald den oprindelige .click(), og kald derefter detectChanges().
const btn = fixture.debugElement.query(By.css('button'));
btn.triggerEventHandler('click');
fixture.detectChanges();
expect(fixture.componentInstance.count).toBe(1);Test af en output-hændelse
Abonnér på komponentens output (en EventEmitter eller et output-signal), før du udløser den handling, der skal udsende det.
let emitted: string | undefined;
fixture.componentInstance.saved.subscribe((v: string) => (emitted = v));
fixture.debugElement.query(By.css('button')).triggerEventHandler('click');
expect(emitted).toBe('done');Kontrol af attributter og klasser
Du kan kontrollere betingede klasser og attributter, der afhænger af inputs.
fixture.componentRef.setInput('active', true);
fixture.detectChanges();
const el = fixture.nativeElement.querySelector('.tab');
expect(el.classList.contains('active')).toBe(true);Opdatering af formularinputs
Hvis du vil teste tekstfelter, skal du angive inputfeltets værdi og udsende en input-hændelse, så Angular-bindinger opdateres.
const input = fixture.nativeElement.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(fixture.componentInstance.text).toBe('hello');Hvorfor detectChanges skal kaldes efter hver ændring
Både zonebaserede tests og tests uden zoner kræver et eksplicit detectChanges(), efter at du ændrer tilstanden, fordi testen kører uden for Angulars automatiske tick. Hvis du glemmer det, er det den hyppigste årsag til, at "min kontrol ser forældet DOM".
Test adfærd, ikke interne detaljer
Foretræk at kontrollere gengivet output og udsendte hændelser frem for private felter. Det gør tests robuste: en ændring af interne detaljer bør ikke ødelægge en test, der stadig giver den samme synlige adfærd for brugeren.
Hurtigt tjek
Hvilken API giver dig et DebugElement?
Opsummering
Du styrede inputs via setInput, læste DOM'en med querySelector og By.css, opsamlede outputs ved at abonnere og simulerede klik- og inputhændelser. Kald altid detectChanges() efter en ændring, og kontrollér den synlige adfærd for brugeren.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 38
- Lektioner
- 144
Ofte stillede spørgsmål
Er lektionen “Test af inputs, outputs og DOM” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Test af inputs, outputs og DOM”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Test af inputs, outputs og DOM”?
Kontrollér den gengivne output og hændelser. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Angular Academy?
Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Test af inputs, outputs og DOM”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Angular Academy-lektion?
Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- TestBed og komponent-fixtures
- Test af inputs, outputs og DOM
- Mocking af services og afhængigheder
- Test af signals og asynkron kode