# Angular Testing

> Write Angular component tests using TestBed, ComponentHarness, and HttpTestingController with proper signal input handling. Use when writing component tests, mocking HTTP calls, or testing signal inputs.

- Skill: `hoangnguyen0403/angular-testing` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add hoangnguyen0403/angular-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hoangnguyen0403/angular-testing/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: HoangNguyen0403 (https://skillmd.com/u/hoangnguyen0403)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/hoangnguyen0403/angular-testing

---

# Testing

## **Priority: P1 (HIGH)**

## 1. Query via Component Harnesses

- Use `ComponentHarness` (e.g., `MatButtonHarness`) not CSS selectors — stable across DOM changes.
- `loader.getHarness(MatButtonHarness)` + `await button.click()`. Never query by CSS class.

See [harness pattern](references/harness-pattern.md) for ComponentHarness examples.

## 2. Mock HTTP with HttpTestingController

- `provideHttpClientTesting()` not manual HttpClient mocks.
- Call `expectOne`, `.flush(mockData)`, `verify()` in `afterEach`.

See [harness pattern](references/harness-pattern.md) for HttpTestingController examples.

## 3. Test Signal Inputs Correctly

- `fixture.componentRef.setInput('name', value)` — not direct assignment.
- `fixture.detectChanges()` after `setInput()`.
- Signals sync — no `fakeAsync` needed for most signal-driven tests.

## 4. Choose Your Test Runner

- Angular v20+: **Vitest** via `@angular/build:unit-test` — faster, native ESM, no Karma. Configure in `angular.json`.
- Jasmine/Karma still supported for existing projects.
- Standalone: import directly in `TestBed.configureTestingModule({ imports: [StandaloneComponent] })`.

## Anti-Patterns

- **No DOM CSS selectors**: Query via `ComponentHarness`, not CSS class strings.
- **No manual HttpClient mock**: Use `provideHttpClientTesting()` + `HttpTestingController`.
- **No direct @Input() assignment**: Use `fixture.componentRef.setInput()` for signal inputs.

## References

- [Harness Pattern](references/harness-pattern.md)

## Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- Never query by CSS class
- native ESM

- Additional task-grounded exact anchors: ComponentHarness