angular-testing

Write unit and integration tests for Angular v20+ components, services, signals, and HTTP interactions.

30|12|Updated Apr 15, 2022

Search Tags:#vitest #testing #angular #signals #mocking #jasmine

Ready to run

npx skills add https://github.com/choyiny/cscc09.com --skill angular-testing-choyiny

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-testing
Source: https://github.com/choyiny/cscc09.com/tree/main/.agents/skills/angular-testing
Command: npx skills add https://github.com/choyiny/cscc09.com --skill angular-testing-choyiny

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Testing Angular applications manually is error‑prone and time‑consuming; this skill provides ready‑to‑use patterns for unit and integration tests that ensure code quality and confidence.

Core Features & Use Cases

Vitest and Jasmine support: Configure and run tests with either framework for Angular v20+ projects.
Signal‑based component testing: Examples for testing components that use Angular signals and OnPush change detection.
Service and HTTP testing: Guides for mocking services, HTTP calls, and dependency injection.
Mocking and async utilities: Ready patterns for mocks, fake timers, and async handling.

Quick Start

Create a spec file for your component and run ng test to execute the suite.

Frequently Asked Questions about angular-testing

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

FAQPage Schema

How do I write unit tests for Angular components using signals?▼

Testing Angular signal-based components requires configuring Vitest or Jasmine and applying specific patterns for OnPush change detection. This approach provides ready-to-use examples ensuring reliable signal-based component testing.

Can I use Vitest instead of Jasmine to test Angular v20+ projects?▼

Yes, Vitest can be used instead of Jasmine for Angular v20+ projects. The setup provides configuration guidance and migration instructions to transition frameworks, allowing you to execute tests using the Angular CLI.

What is the best way to mock services and HTTP interactions in Angular tests?▼

Mocking services and HTTP interactions in Angular tests is best achieved using ready patterns for mocks, fake timers, and dependency injection. This ensures reliable HTTP testing by isolating components from actual backend calls.

Do I need Node and Angular CLI to run Angular integration tests with Vitest?▼

Node and the Angular CLI are required to run Angular integration tests with Vitest. These prerequisites, along with appropriate test libraries, are necessary to execute the test suite and validate code quality.

How does migrating from Jasmine to Vitest for Angular testing work?▼

Migrating from Jasmine to Vitest involves following specific migration instructions for Angular v20+ projects. This transitions your test runner while maintaining the ability to test components, services, signals, and HTTP interactions.

Why are my Angular OnPush component tests failing to detect signal changes?▼

Angular OnPush component tests fail to detect signal changes when standard testing patterns ignore signal reactivity. Using specific signal-based component testing examples ensures proper change detection and reliable test execution.