Angular Academy · Lektion

Inputs, Outputs und DOM testen

Gerenderte Ausgaben und Ereignisse überprüfen

Inputs, Outputs und DOM testen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Den Komponentenvertrag testen

Komponenten kommunizieren über Inputs (Daten hinein), Outputs (Ereignisse hinaus) und das gerenderte DOM. Gute Komponententests steuern diese drei Schnittstellen und überprüfen das sichtbare Ergebnis statt interner Implementierungsdetails.

Einen Input setzen

Weisen Sie der Input-Eigenschaft der Komponenteninstanz einen Wert zu und rufen Sie anschließend detectChanges() auf, um die Ansicht neu zu rendern. Bei Signal-Inputs setzen Sie den Wert über fixture.componentRef.setInput().

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

Das DOM mit querySelector lesen

Verwenden Sie fixture.nativeElement.querySelector(), um gerenderte Elemente zu finden und deren Text oder Attribute zu überprüfen.

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

DebugElement und By.css

fixture.debugElement.query(By.css(...)) gibt einen DebugElement-Wrapper zurück. Sein .nativeElement ist der DOM-Knoten, und Sie erhalten erweiterte Abfragen, die plattformübergreifend funktionieren.

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

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

queryAll für Listen

Verwenden Sie für wiederholte Elemente (z. B. eine @for-Schleife) queryAll, um alle Treffer zu erhalten und deren Anzahl zu überprüfen.

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

Einen Klick simulieren

Lösen Sie DOM-Ereignisse aus, um Interaktionen zu testen. Verwenden Sie triggerEventHandler auf einem DebugElement oder rufen Sie das native .click() auf und anschließend detectChanges().

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

Ein Output-Ereignis testen

Abonnieren Sie den Output der Komponente (einen EventEmitter oder ein Output-Signal), bevor Sie die Aktion auslösen, die ihn ausgeben soll.

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

Attribute und Klassen überprüfen

Sie können bedingte Klassen und Attribute überprüfen, die von Inputs abhängen.

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

Formular-Inputs aktualisieren

Um Textfelder zu testen, setzen Sie den Input-Wert und lösen Sie ein input-Ereignis aus, damit Angular die Bindings aktualisiert.

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

Warum nach jeder Änderung detectChanges nötig ist

Sowohl zonenbasierte als auch zonenlose Tests erfordern nach einer Zustandsänderung ein explizites detectChanges(), da der Test außerhalb von Angulars automatischem Tick ausgeführt wird. Wird dies vergessen, ist das die häufigste Ursache dafür, dass eine Assertion ein veraltetes DOM sieht.

Verhalten statt Interna testen

Überprüfen Sie bevorzugt gerenderte Ausgaben und ausgegebene Ereignisse statt privater Felder. Dadurch bleiben Tests robust: Eine Umstrukturierung der Interna sollte einen Test nicht brechen, wenn das für den Benutzer sichtbare Verhalten gleich bleibt.

Kurze Überprüfung

Welche API gibt Ihnen ein DebugElement?

Zusammenfassung

Sie haben Inputs über setInput gesteuert, das DOM mit querySelector und By.css gelesen, Outputs durch Abonnieren erfasst und Klick- sowie Input-Ereignisse simuliert. Rufen Sie nach jeder Änderung immer detectChanges() auf und überprüfen Sie das für Benutzer sichtbare Verhalten.

Häufig gestellte Fragen

Ist die Lektion „Inputs, Outputs und DOM testen“ kostenlos?

Ja — der vollständige Text von „Inputs, Outputs und DOM testen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Inputs, Outputs und DOM testen“?

Gerenderte Ausgaben und Ereignisse überprüfen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Inputs, Outputs und DOM testen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy