Angular Academy · Lektion

Signals und asynchronen Code testen

Reaktives und asynchrones Verhalten testen

Signals und asynchronen Code testen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Asynchronität ist der schwierige Teil beim Testen

Echte Komponenten führen asynchrone Arbeiten aus: Timer, Promises, HTTP-Aufrufe und verzögerte Eingaben. Tests müssen die Zeit kontrollieren, damit Assertions erst ausgeführt werden, wenn die asynchrone Arbeit abgeschlossen ist. Angular stellt Ihnen dafür fakeAsync, tick und flush zur deterministischen Zeitsteuerung bereit.

Ein Signal testen

Ein Signal wird wie eine Funktion gelesen. Das Testen ist unkompliziert: Rufen Sie das Signal auf und überprüfen Sie den Wert; aktualisieren Sie es und überprüfen Sie ihn erneut.

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

Computed-Signale werden automatisch aktualisiert

Ein computed wird neu berechnet, wenn sich seine Abhängigkeiten ändern. Ändern Sie im Test das Quellsignal und lesen Sie anschließend das computed-Signal aus; eine manuelle Neuberechnung ist nicht erforderlich.

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

Signale und das DOM

Damit eine Änderung des Signals in der Vorlage sichtbar wird, rufen Sie nach der Aktualisierung detectChanges() auf – genau wie bei jedem anderen Zustand.

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

Einführung in fakeAsync

Umschließen Sie einen Test mit fakeAsync, um in eine simulierte Zeitzone zu wechseln. Timer und Microtasks werden in eine Warteschlange gestellt, statt ausgeführt zu werden, und Sie schreiten manuell voran. Dadurch werden asynchrone Tests synchron und zuverlässig.

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

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

Mit tick die Zeit voranbringen

tick(ms) stellt die virtuelle Uhr vor und führt alle Timer aus, die innerhalb dieses Zeitfensters geplant wurden.

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

flush für alle ausstehenden Timer

Wenn Sie die genaue Verzögerung nicht kennen, leert flush() alle ausstehenden Macrotasks, bis die Warteschlange leer ist.

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

Promises mit fakeAsync testen

Promises werden als Microtasks aufgelöst. Rufen Sie innerhalb von fakeAsync flushMicrotasks() (oder tick()) auf, um sie vor der Assertion abzuschließen.

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

Der async-/waitForAsync-Helper

Bei Tests, die auf echte asynchrone Vorgänge warten müssen, ohne die Zeit zu kontrollieren, umschließen Sie den Testkörper mit waitForAsync und verwenden Sie fixture.whenStable().

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

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

effect() testen

Ein effect wird asynchron ausgeführt, nachdem sich die von ihm gelesenen Signale ändern. Um das Ergebnis zu beobachten, führen Sie eine Änderungsdetektion aus (oder leeren Sie die Warteschlange mit flush), damit der Effekt ausgeführt wird, und überprüfen Sie anschließend den Seiteneffekt.

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

Häufige Fehlerquelle: übrig gebliebene Timer

Wenn ein fakeAsync-Test endet, während noch Timer in der Warteschlange stehen, gibt Angular einen Fehler aus. Führen Sie sie immer mit tick/flush aus oder löschen Sie Intervalle in ngOnDestroy, damit die virtuelle Uhr beim Abschluss des Tests leer ist.

Kurze Überprüfung

Wählen Sie für eine bekannte Verzögerung das passende Werkzeug.

Zusammenfassung

Signale werden wie einfache Funktionen getestet (zum Lesen aufrufen, mit set aktualisieren, für das DOM detectChanges verwenden). Für asynchrone Vorgänge stellt fakeAsync eine virtuelle Uhr bereit, die Sie mit tick voranbringen, mit flush leeren und mit flushMicrotasks zum Auflösen von Promises verwenden. Lassen Sie niemals Timer ausstehen.

Häufig gestellte Fragen

Ist die Lektion „Signals und asynchronen Code testen“ kostenlos?

Ja — der vollständige Text von „Signals und asynchronen Code 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 „Signals und asynchronen Code testen“?

Reaktives und asynchrones Verhalten testen 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 4 von 4.

Wie lange dauert die Lektion „Signals und asynchronen Code 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