angular-testing_skill

Overview

This skill helps you write unit and integration tests for Angular v21+ apps using Vitest or Jasmine. It focuses on modern Angular patterns: signals, standalone components, OnPush change detection, TestBed, component harnesses, and HTTP testing. Use it to create reliable, fast tests and to mock dependencies or set up test infrastructure.

How this skill works

The skill generates test code and setup guidance that uses TestBed, standalone component imports, and Angular signals APIs. It provides examples for Vitest configuration and jasmine patterns, mocking services (including signal-based services), HTTP testing with HttpTestingController, and explicit change detection for OnPush components. It also covers async utilities (fakeAsync, waitForAsync) and test harness patterns.

When to use it

• Create unit tests for signal-based components and computed logic
• Write integration tests for components with OnPush change detection
• Mock services, including those exposing signals or computed values
• Set up Vitest test runner and tsconfig for Angular v21+ projects
• Test HTTP interactions with provideHttpClientTesting and HttpTestingController

Best practices

• Prefer Vitest for speed but keep Jasmine examples for legacy suites
• Use standalone imports in TestBed.configureTestingModule to simplify setup
• Mock services with signal properties when dependencies expose signals
• Call fixture.detectChanges() after input updates or signal changes for OnPush
• Verify no outstanding HTTP requests with httpMock.verify() in afterEach

Example use cases

• Generate a Vitest spec for a CounterComponent using signals and detectChanges
• Mock a UserService that exposes a user signal and assert UI changes
• Test a service that calls an API using provideHttpClientTesting and HttpTestingController
• Write an OnPush component test that uses componentRef.setInput to update signal inputs
• Create async debounce tests with fakeAsync and tick to control timers