Agent-skills-standard 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. (triggers: **/*.spec.ts, TestBed, ComponentFixture, TestHarness, provideHttpClientTesting)

install

source · Clone the upstream repo

git clone https://github.com/HoangNguyen0403/agent-skills-standard

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/HoangNguyen0403/agent-skills-standard "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/angular/angular-testing" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-angular-testing && rm -rf "$T"

manifest: skills/angular/angular-testing/SKILL.md

source content

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 for ComponentHarness examples.

2. Mock HTTP with HttpTestingController

```
provideHttpClientTesting()
```
not manual HttpClient mocks.

Call

expectOne

.flush(mockData)

verify()

afterEach

See harness pattern 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