Agent-Skills.md

Agent Skills: 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)

UncategorizedID: hoangnguyen0403/agent-skills-standard/angular-testing

Repository

hoangnguyen0403/agent-skills-standard
HoangNguyen0403License: Apache-2.0
362103

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/angular/angular-testing

Skill Files

Browse the full folder contents for angular-testing.

Download Skill

Loading file tree…

skills/angular/angular-testing/SKILL.md

Skill Metadata

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

Testing

Priority: P1 (HIGH)

1. Query via Component Harnesses

  • Always use ComponentHarness (e.g., MatButtonHarness) instead of CSS selectors — harnesses are stable across DOM changes.

See harness pattern for ComponentHarness examples.

2. Mock HTTP with HttpTestingController

  • Use provideHttpClientTesting() instead of manual HttpClient mocks.
  • Call expectOne, .flush(mockData), and verify() in afterEach.

See harness pattern for HttpTestingController examples.

3. Test Signal Inputs Correctly

  • Use fixture.componentRef.setInput('name', value) — do NOT assign directly.
  • Call fixture.detectChanges() after setInput().
  • Signals update synchronously — fakeAsync is usually not needed.

4. Choose Your Test Runner

  • Angular v20+ supports Vitest natively via @angular/build:unit-test. Faster, native ESM, no Karma needed.
  • Jasmine/Karma still supported for existing projects.

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