🧪 Advanced Testing in Angular – Was Profis wirklich testen

Unit-Tests sind Pflicht.
Aber echte Profis wissen: Was du testest – und wie – macht den Unterschied.

In diesem Beitrag erfährst du:

Welche Tests du wirklich brauchst
Wie du mit Spies, Mocks und Signals testest
Und wie du dein Test-Setup auf Profi-Niveau bringst

🔍 1. Teste Verhalten, nicht Implementierung

Falsch:

expect(component.service.callApi).toHaveBeenCalled();

Richtig:

expect(component.isLoading()).toBeTrue();

👉 Teste was passiert, nicht wie es intern passiert.

🧪 2. Angular Testbed – Wann ja, wann nein?

Verwende TestBed für:

Komponenten mit Template
Services mit DI (z. B. HTTP, Router, Store)

Nutze nur pure Unit-Tests (ohne TestBed) für:

Pipes
reine Funktionen
Models und Use Cases

🔄 3. Spies vs. Mocks – der Unterschied

🔸 Spy:

const spy = jasmine.createSpy();
spy.and.returnValue(of(true));

Ideal für: Beobachten von Methoden, Call Counts, Parametern

🔹 Mock-Klasse:

class MockAuthService {
  isLoggedIn() {
    return of(true);
  }
}

Ideal für: Kontrollierte Umgebung + Logik-Simulation

🧠 4. Signals testen – einfach & reaktiv

it('should update full name', () => {
  const first = signal('Ada');
  const last = signal('Lovelace');
  const full = computed(() => `${first()} ${last()}`);

  first.set('Alan');
  last.set('Turing');

  expect(full()).toBe('Alan Turing');
});

✅ Kein ChangeDetectorRef, kein async Pipe – pure Funktionalität testen.

🧰 5. Nützliches Setup für Tests

jest oder karma mit angular-preset
@testing-library/angular für Benutzerverhalten
ts-mockito oder jest.fn() für elegantes Mocking
test-utils.ts für Standard-Mocks und Test-Wrapper

⚠️ Don't do this

❌ fixture.detectChanges() in jedem Test ohne Grund
❌ fakeAsync überall – lieber mit waitForAsync und async/await
❌ den ganzen Store mocken – lieber isoliert das Feature testen

✅ Fazit

Teste das Verhalten deiner App – nicht die Details der Implementierung
Nutze Mocks & Spies strategisch
Signals machen Tests einfacher & robuster
Mach’s testbar, bevor du’s testest

📍 Nächster Beitrag: ⚡ Angular Signals im Enterprise-Einsatz – Patterns, die du brauchst