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.

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() in 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