Angular Component Test Writer

Testing

by HoangNguyen0403 · MIT license · ★ 569 on GitHub

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.

---
name: angular-testing
description: 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.
metadata:
  triggers:
    files:
    - '**/*.spec.ts'
    keywords:
    - TestBed
    - ComponentFixture
    - TestHarness
    - provideHttpClientTesting
---
# Testing

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

## Core Philosophy

Overview

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

Manual install (npx, ZIP)

Claude Codenpx skills add HoangNguyen0403/agent-skills-standard --skill angular-testing -g -a claude-code

Claude Code (degit)npx degit HoangNguyen0403/agent-skills-standard/skills/angular/angular-testing#develop ~/.claude/skills/angular-testing

Claude.ai / desktopZip the folder and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

SKILL.md3.6 KB

Read SKILL.md here

HoangNguyen0403/develop1 file shown

SKILL.md3.6 KB

Browse every file on GitHub↗

SKILL.md

Show the full text56 lines

angular-testing/SKILL.md56 lines · 3.6 KB

PreviewCode

Outline

RawView on GitHub

Testing

Priority: P1 (HIGH)

Core Philosophy

Coverage is diagnostic and project-configured; verify risk-weighted critical paths rather than padding code for an arbitrary percentage.

Core Rule Anchors

[WEB-TEST-01] Tripartite Naming & AAA Cadence: Test names must follow Method_Scenario_ExpectedBehavior and adhere strictly to Arrange-Act-Assert.
[WEB-TEST-02] Accessible Harnesses & User Actions: Query UI components via ComponentHarness (e.g. MatButtonHarness) or accessible queries; strictly ban raw CSS class selectors or arbitrary DOM traversal.
[WEB-TEST-03] Ban on Component Private State & Property Inspection: Never inspect component private state or internal properties directly. Assert on visible DOM state, output events, or harness query outcomes.
[WEB-TEST-04] HTTP Boundary Mocking: Intercept HTTP requests at the boundary using provideHttpClientTesting() + HttpTestingController rather than mocking internal services or methods. Tests must verify true component data flow.
[WEB-TEST-05] Bug-First Regression Lock: Every PR resolving a bug ticket or with title fix(...) must introduce a test reproducing the defect prior to the fix.

Implementation Guidelines

Query via Component Harnesses ([WEB-TEST-02]): Use ComponentHarness (e.g. MatButtonHarness) not CSS selectors. loader.getHarness(MatButtonHarness) + await button.click(). Never query by CSS class. See harness pattern.
Mock HTTP ([WEB-TEST-04]): Intercept with provideHttpClientTesting() + HttpTestingController rather than manual mocks. Call expectOne, .flush(mockData), and verify() in afterEach.
Signal Inputs ([WEB-TEST-03]): Use fixture.componentRef.setInput('name', value) + fixture.detectChanges(), not direct assignment. Signals sync — no fakeAsync needed for most signal-driven tests.
Test Runner: Angular v20+ defaults to Vitest via @angular/build:unit-test (faster, native ESM, no Karma). Configure in angular.json. Jasmine/Karma still supported. Standalone: import directly in TestBed.configureTestingModule({ imports: [StandaloneComponent] }).

Anti-Patterns

[WEB-TEST-01] Vague test names: Banish non-descriptive names or mixed AAA phases; follow Method_Scenario_ExpectedBehavior.
[WEB-TEST-02] Raw CSS selectors / DOM traversal: Query via ComponentHarness or accessible roles, not CSS class strings.
[WEB-TEST-03] Testing private state: Never inspect internal properties or use direct @Input() assignment; use setInput().
[WEB-TEST-04] Manual HttpClient mocks: Always mock the network boundary with provideHttpClientTesting() + HttpTestingController.
[WEB-TEST-05] Bug fix without reproduction test: Ban bug fix PRs lacking defect regression tests.
Coverage padding: Never write low-value tests solely to meet an arbitrary percentage.

References

Harness Pattern

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

1	---
2	name: angular-testing
3	description: 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.
4	metadata:
5	triggers:
6	files:
7	- '*/.spec.ts'
8	keywords:
9	- TestBed
10	- ComponentFixture
11	- TestHarness
12	- provideHttpClientTesting
13	---
14	# Testing
15
16	## Priority: P1 (HIGH)
17
18	## Core Philosophy
19
20	- Coverage is diagnostic and project-configured; verify risk-weighted critical paths rather than padding code for an arbitrary percentage.
21
22	## Core Rule Anchors
23
24	- `[WEB-TEST-01]` Tripartite Naming & AAA Cadence: Test names must follow `Method_Scenario_ExpectedBehavior` and adhere strictly to Arrange-Act-Assert.
25	- `[WEB-TEST-02]` Accessible Harnesses & User Actions: Query UI components via `ComponentHarness` (e.g. `MatButtonHarness`) or accessible queries; strictly ban raw CSS class selectors or arbitrary DOM traversal.
26	- `[WEB-TEST-03]` Ban on Component Private State & Property Inspection: Never inspect component private state or internal properties directly. Assert on visible DOM state, output events, or harness query outcomes.
27	- `[WEB-TEST-04]` HTTP Boundary Mocking: Intercept HTTP requests at the boundary using `provideHttpClientTesting()` + `HttpTestingController` rather than mocking internal services or methods. Tests must verify true component data flow.
28	- `[WEB-TEST-05]` Bug-First Regression Lock: Every PR resolving a bug ticket or with title `fix(...)` must introduce a test reproducing the defect prior to the fix.
29
30	## Implementation Guidelines
31
32	- Query via Component Harnesses (`[WEB-TEST-02]`): Use `ComponentHarness` (e.g. `MatButtonHarness`) not CSS selectors. `loader.getHarness(MatButtonHarness)` + `await button.click()`. Never query by CSS class. See [harness pattern](references/harness-pattern.md).
33	- Mock HTTP (`[WEB-TEST-04]`): Intercept with `provideHttpClientTesting()` + `HttpTestingController` rather than manual mocks. Call `expectOne`, `.flush(mockData)`, and `verify()` in `afterEach`.
34	- Signal Inputs (`[WEB-TEST-03]`): Use `fixture.componentRef.setInput('name', value)` + `fixture.detectChanges()`, not direct assignment. Signals sync — no `fakeAsync` needed for most signal-driven tests.
35	- Test Runner: Angular v20+ defaults to Vitest via `@angular/build:unit-test` (faster, native ESM, no Karma). Configure in `angular.json`. Jasmine/Karma still supported. Standalone: import directly in `TestBed.configureTestingModule({ imports: [StandaloneComponent] })`.
36
37	## Anti-Patterns
38
39	- `[WEB-TEST-01]` Vague test names: Banish non-descriptive names or mixed AAA phases; follow `Method_Scenario_ExpectedBehavior`.
40	- `[WEB-TEST-02]` Raw CSS selectors / DOM traversal: Query via `ComponentHarness` or accessible roles, not CSS class strings.
41	- `[WEB-TEST-03]` Testing private state: Never inspect internal properties or use direct `@Input()` assignment; use `setInput()`.
42	- `[WEB-TEST-04]` Manual HttpClient mocks: Always mock the network boundary with `provideHttpClientTesting()` + `HttpTestingController`.
43	- `[WEB-TEST-05]` Bug fix without reproduction test: Ban bug fix PRs lacking defect regression tests.
44	- Coverage padding: Never write low-value tests solely to meet an arbitrary percentage.
45
46	## References
47
48	- [Harness Pattern](references/harness-pattern.md)
49
50	## Canonical response anchors
51
52	When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
53	- Never query by CSS class
54	- native ESM
55
56	- Additional task-grounded exact anchors: ComponentHarness