Angular Testing

Testing

Priority: P1 (HIGH)

Principles

• Harnesses: Always use ComponentHarness (e.g., MatButtonHarness or custom ones) to interact with components via getHarness. Never query by CSS class or DOM/CSS selectors in tests — harnesses are stable and don't break when CSS classes change. Wait for await button.click() or similar calls.
• Provider Mocks: Use provideHttpClientTesting() instead of mocking HttpClient manually. Inject HttpTestingController to use expectOne, .flush(mockData), and verify() in afterEach. Never mock HttpClient directly.
• Signal Testing: Signals update synchronously — no fakeAsync needed usually.

Test Runner

Angular v20+ supports Vitest natively via @angular/build:unit-test builder in angular.json. Vitest is recommended for new projects as it is faster, native ESM, and no Karma needed. Jasmine/Karma still supported.

Signal Input Testing

Use fixture.componentRef.setInput('name', value) to set signal inputs in tests — do NOT assign component.name = value directly — this doesn't work for signal inputs. After setInput() call fixture.detectChanges() to trigger re-render.

Guidelines

• Avoid logic: Tests should just assert inputs and outputs.
• Spectator: Consider using libraries like @ngneat/spectator for cleaner boilerplate if allowed.
• Standalone: Import the standalone component directly in TestBed.configureTestingModule({ imports: [MyComponent] }).

Anti-Patterns

• No DOM CSS selectors: Query via ComponentHarness, not CSS class strings.
• No manual HttpClient mock: Use provideHttpClientTesting() + HttpTestingController.
• No @Input() in tests: Use fixture.componentRef.setInput() for signal inputs.

References

• Harness Pattern