Angular Testing: Mock Clocks und fakeAsync für zeitbasierte Tests

TL;DR: Angular’s fakeAsync und Mock Clock APIs revolutionieren das Testing zeitbasierter Logik. Statt auf echte Timer zu warten, simulierst du Zeit mit tick() und mockDate(). Tests laufen bis zu 100x schneller und sind dabei deterministisch und wartbar. Timer-basierte Tests waren schon immer eine Herausforderung in Angular-Projekten. Das Angular Team zeigt in einem ausführlichen Blog-Post von Andrew Scott, wie moderne Mock Clock APIs und die verbesserte fakeAsync-Zone das Testing von zeitabhängigem Code fundamental vereinfachen.

Die wichtigsten Punkte

• 📅 Vollständig rückwärtskompatibel seit Angular 9+
• 🎯 Alle Angular-Entwickler mit Timer-basierter Logik
• 💡 Komplette Kontrolle über Zeit in Tests
• 🔧 Tech-Stack: fakeAsync, tick(), flush(), jasmine.clock()
• ⚡ Bis zu 100x schnellere Testausführung

Was bedeutet das für Angular-Entwickler?

Zeitbasierte Tests sind in modernen Angular-Anwendungen allgegenwärtig. Ob es um debounced Inputs, Animationen, Polling-Mechanismen oder einfache setTimeout-Aufrufe geht - die neuen Mock Clock APIs lösen gleich mehrere Schmerzpunkte:

Das Problem mit herkömmlichen Timer-Tests

Früher mussten Angular-Entwickler mit echten Wartezeiten arbeiten:

// ❌ Alter Ansatz - langsam und unzuverlässig
it("should update after delay", (done) => {
  component.startTimer();
  setTimeout(() => {
    expect(component.value).toBe(42);
    done();
  }, 5000); // Test wartet wirklich 5 Sekunden!
});

Diese Tests waren nicht nur langsam, sondern auch anfällig für Race Conditions und schwer zu debuggen.

Die Lösung: fakeAsync und tick()

Mit fakeAsync wird die Zeit simuliert:

// ✅ Neuer Ansatz - schnell und deterministisch
it("should update after delay", fakeAsync(() => {
  component.startTimer();
  tick(5000); // Zeit wird simuliert - läuft sofort!
  expect(component.value).toBe(42);
}));

Technische Details

Die fakeAsync Zone im Detail

Die fakeAsync-Zone bietet drei Hauptfunktionen zur präzisen Zeitkontrolle:

• tick(ms): Simuliert das Voranschreiten der Zeit um eine bestimmte Anzahl von Millisekunden
• flush(): Leert alle ausstehenden Timer (Macro- und Microtasks) auf einmal
• flushMicrotasks(): Führt nur Microtasks aus (z.B. Promise-Auflösungen)

Mock Clock API für Date-Objekte

Ein häufiges Problem war, dass fakeAsync nicht die JavaScript Date-API mockt. Die Lösung: Jasmine’s Mock Clock:

beforeEach(() => {
  jasmine.clock().install();
});
afterEach(() => {
  jasmine.clock().uninstall();
});
it("should use mocked Date", fakeAsync(() => {
  const fixedDate = new Date(2025, 0, 1);
  jasmine.clock().mockDate(fixedDate);
  expect(Date.now()).toBe(fixedDate.getTime());
  tick(1000);
  expect(Date.now()).toBe(fixedDate.getTime() + 1000);
}));

Praktisches Beispiel: Debounced Input Testing

Ein häufiger Use Case in Angular-Formularen:

it("should debounce user input", fakeAsync(() => {
  const input = fixture.debugElement.query(By.css("input"));
  // User tippt mehrmals
  input.nativeElement.value = "A";
  input.nativeElement.dispatchEvent(new Event("input"));
  fixture.detectChanges();
  input.nativeElement.value = "An";
  input.nativeElement.dispatchEvent(new Event("input"));
  fixture.detectChanges();
  input.nativeElement.value = "Ang";
  input.nativeElement.dispatchEvent(new Event("input"));
  fixture.detectChanges();
  // Nur 200ms vergehen - noch kein API-Call
  tick(200);
  expect(apiService.search).not.toHaveBeenCalled();
  // Nach weiteren 100ms (300ms debounce time) wird API aufgerufen
  tick(100);
  expect(apiService.search).toHaveBeenCalledWith("Ang");
  expect(apiService.search).toHaveBeenCalledTimes(1);
}));

Migration-Impact und Performance-Gains

Von done() zu fakeAsync

Die Migration von callback-basierten Tests zu fakeAsync ist straightforward: Vorher:

it("old pattern", (done) => {
  service.getData().subscribe((data) => {
    expect(data).toBeDefined();
    done();
  });
});

Nachher:

it("new pattern", fakeAsync(() => {
  let data;
  service.getData().subscribe((d) => (data = d));
  flush(); // Alle asynchronen Tasks abarbeiten
  expect(data).toBeDefined();
}));

Performance-Verbesserungen in Zahlen

• Echte Timer-Tests: 5 Sekunden Wartezeit = 5 Sekunden Testlaufzeit
• fakeAsync Tests: 5 Sekunden simuliert = ~5ms Testlaufzeit
• Resultat: 1000x schnellere Ausführung bei Timer-intensiven Test-Suites

Best Practices für Angular-Teams

1. Wann welche Methode verwenden?

• fakeAsync + tick(): Erste Wahl für Timer-basierte Tests
• flush(): Wenn alle Timer auf einmal ablaufen sollen
• flushMicrotasks(): Für Promise-basierte Logik ohne Timer
• async/await mit fixture.whenStable(): Nur wenn fakeAsync nicht funktioniert (z.B. echte HTTP-Calls)

2. Mock Clock Setup Pattern

describe("TimeComponent", () => {
  let originalTimeout: number;
  beforeEach(() => {
    originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 100;
    jasmine.clock().install();
  });
  afterEach(() => {
    jasmine.clock().uninstall();
    jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
  });
  // Tests hier...
});

3. Häufige Fallstricke vermeiden

⚠️ Wichtig: fakeAsync funktioniert nicht mit:

• Echten HTTP-Requests (nutze HttpTestingController)
• IndexedDB Operationen
• WebSocket-Verbindungen

Praktische Nächste Schritte

1. Audit deiner Test-Suite: Identifiziere langsame Timer-basierte Tests
2. Schrittweise Migration: Beginne mit den langsamsten Tests
3. Team-Schulung: Stelle sicher, dass alle Entwickler die neuen Patterns kennen
4. CI/CD-Optimierung: Misst die Performance-Verbesserung eurer Test-Pipeline

Integration in bestehende Projekte

Die Mock Clock APIs sind vollständig rückwärtskompatibel. Bestehende Tests funktionieren weiterhin, während neue Tests von den Performance-Vorteilen profitieren können:

// Karma-Konfiguration bleibt unverändert
// Jest-User müssen ggf. Timer-Mocks konfigurieren:
jest.useFakeTimers();

Fazit für Angular-Teams

Die Kombination aus fakeAsync und Mock Clock APIs macht zeitbasierte Tests in Angular nicht nur schneller, sondern auch zuverlässiger und wartbarer. Für Teams mit großen Test-Suites können die Performance-Gewinne die CI/CD-Pipeline dramatisch beschleunigen. Die APIs sind ausgereift, gut dokumentiert und production-ready für alle Angular-Versionen ab v9. ⚠️ Wichtiger Hinweis: Wie Andrew Scott im Original-Artikel betont, sollten Mock Clocks mit Bedacht eingesetzt werden. Sie können Tests auch fragil machen und echte Probleme verschleiern. Nicht jeder Test benötigt gemockte Zeit - isoliere zeitabhängige Logik gezielt und verwende Mock Clocks nur dort, wo sie echten Mehrwert bringen.

Quellen & Weiterführende Links

• 📰 Original-Artikel: Handling Time and Mock Clocks in Tests
• 📚 Angular Testing Documentation - fakeAsync
• 🎓 Angular Testing Workshop auf workshops.de
• 📖 Angular Testing Guide - Component Testing Scenarios
• 🔧 Jasmine Clock Documentation