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 followMethod_Scenario_ExpectedBehaviorand adhere strictly to Arrange-Act-Assert.[WEB-TEST-02]Accessible Harnesses & User Actions: Query UI components viaComponentHarness(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 usingprovideHttpClientTesting()+HttpTestingControllerrather 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 titlefix(...)must introduce a test reproducing the defect prior to the fix.
Implementation Guidelines
- Query via Component Harnesses (
[WEB-TEST-02]): UseComponentHarness(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 withprovideHttpClientTesting()+HttpTestingControllerrather than manual mocks. CallexpectOne,.flush(mockData), andverify()inafterEach. - Signal Inputs (
[WEB-TEST-03]): Usefixture.componentRef.setInput('name', value)+fixture.detectChanges(), not direct assignment. Signals sync — nofakeAsyncneeded for most signal-driven tests. - Test Runner: Angular v20+ defaults to Vitest via
@angular/build:unit-test(faster, native ESM, no Karma). Configure inangular.json. Jasmine/Karma still supported. Standalone: import directly inTestBed.configureTestingModule({ imports: [StandaloneComponent] }).
Anti-Patterns
[WEB-TEST-01]Vague test names: Banish non-descriptive names or mixed AAA phases; followMethod_Scenario_ExpectedBehavior.[WEB-TEST-02]Raw CSS selectors / DOM traversal: Query viaComponentHarnessor accessible roles, not CSS class strings.[WEB-TEST-03]Testing private state: Never inspect internal properties or use direct@Input()assignment; usesetInput().[WEB-TEST-04]Manual HttpClient mocks: Always mock the network boundary withprovideHttpClientTesting()+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
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