skills.rest
Blotch-Smart-Frames
Blotch-Smart-FramesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

angular-testing

Write unit and integration tests for Angular v20+ applications using Vitest or Jasmine.

Updated Feb 9, 2026
Search Tags:#vitest#unit testing#angular#signals#mocking#jasmine#testbed
One-click install
npx skills add https://github.com/Blotch-Smart-Frames/Board --skill angular-testing-blotch-smart-frames
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-testing
Source: https://github.com/Blotch-Smart-Frames/Board/tree/main/packages/client/.claude/skills/angular-testing
Command: npx skills add https://github.com/Blotch-Smart-Frames/Board --skill angular-testing-blotch-smart-frames

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing tests for modern Angular applications requires handling signals, OnPush change detection, standalone components, and HTTP interactions, which differ significantly from older Jasmine/Karma patterns. This Skill provides ready-to-use testing patterns so you can test signal-based components, services, and resources correctly without trial and error. ## Core Features & Use Cases - Vitest and Jasmine Setup: Configure Angular v20+ native Vitest support via @angular/build, including migration guidance from Jasmine spies, clocks, and async patterns. - Signal-Aware Component Testing: Test signal inputs with setInput, computed values, OnPush components, and the new signal-based forms API. - Service and HTTP Testing: Mock dependencies with vi.fn(), verify HTTP requests with HttpTestingController, and test httpResource loading states. - Use Case: You are adding a feature to an Angular board app with signal-based state. Use this Skill to generate a TestBed spec that mocks the AuthService signal store, sets component inputs, and asserts rendered template output. ## Quick Start Write a Vitest unit test for my Angular standalone component that uses signal inputs and mocks its injected service.

Frequently Asked Questions about angular-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test Angular signal-based components with Vitest?▼

Create the component with TestBed.createComponent, set signal inputs using fixture.componentRef.setInput, then call fixture.detectChanges and assert against the DOM or signal values. Import describe, it, and expect from vitest instead of relying on Jasmine globals.

How to migrate Angular tests from Jasmine to Vitest?▼

Replace jasmine.createSpy with vi.fn(), spyOn with vi.spyOn, and jasmine.clock with vi.useFakeTimers and vi.advanceTimersByTime. Angular v20+ supports Vitest natively through the @angular/build:unit-test builder configured in angular.json.

Does Angular v20 support Vitest natively?▼

Yes, Angular v20+ provides native Vitest support through the @angular/build package. Configure the test architect with the @angular/build:unit-test builder in angular.json and install vitest and jsdom as dev dependencies.

How do I test Angular services that make HTTP requests?▼

Provide both provideHttpClient and provideHttpClientTesting in TestBed, inject HttpTestingController, then use expectOne to match the request URL and flush mock response data. Call httpMock.verify in afterEach to ensure no outstanding requests remain.

Why is my OnPush component test not updating the template?▼

OnPush components require explicit change detection after updating inputs. Use fixture.componentRef.setInput for signal inputs followed by fixture.detectChanges to trigger re-rendering before asserting on the template.

When should I not use this Angular testing approach?▼

This Skill does not cover E2E testing with Cypress or Playwright, nor non-Angular JavaScript and TypeScript code. For browser-level end-to-end flows, use a dedicated E2E framework with its own configuration such as playwright.config.ts.

Related Skills

Explore More Software Engineering Skills→
Manu343726Manu343726

angular-testing

Write unit and integration tests for Angular v20+ apps with Vitest or Jasmine.

Community
Advanced
ValyntValynt

run-tests

Automate test execution, coverage reporting, and CI validation with Vitest and Playwright.

Official
Advanced
heaptracetechnologyheaptracetechnology
13

e2e-test

Automate end-to-end browser tests for multi-step user journeys with Playwright or Cypress.

Community
Advanced
alexander-kastilalexander-kastil

ng-register-vitest

Migrate Angular test suites from Karma/Jasmine to Vitest with configuration and API updates.

Community
Advanced