angular-testing

Write Angular v21+ unit and integration tests with Vitest or Jasmine.

2|Updated Jan 5, 2024
One-click install
npx skills add https://github.com/wilfriedago/dotfiles --skill angular-testing-wilfriedago
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-testing
Source: https://github.com/wilfriedago/dotfiles/tree/main/agents/skills/angular-testing
Command: npx skills add https://github.com/wilfriedago/dotfiles --skill angular-testing-wilfriedago

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of writing robust unit and integration tests for Angular applications, ensuring code quality and maintainability.

Core Features & Use Cases

  • Vitest/Jasmine Integration: Write tests using either Vitest (recommended for modern Angular) or Jasmine.
  • Signal-Based Components: Test components utilizing Angular Signals and OnPush change detection.
  • Dependency Mocking: Effectively mock services, HTTP calls, and other dependencies using vi.fn() or jasmine.createSpy().
  • Component Harnesses: Utilize Angular CDK component harnesses for stable and maintainable UI testing.
  • Use Case: You've just implemented a new Angular component that fetches data via an HTTP service and uses signals for its internal state. Use this Skill to write comprehensive tests covering data loading, signal updates, and component rendering.

Quick Start

Use the angular-testing skill to write a Vitest unit test for an Angular component that uses signals.

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 that use signals and OnPush change detection?

To write unit tests for Angular signal-based components, you configure TestBed and utilize component harnesses. This approach effectively handles OnPush change detection by verifying that signal updates properly trigger component rendering.

What is the best way to mock dependencies in Angular integration testing with Vitest?

The best way to mock dependencies in Angular integration testing with Vitest is using `vi.fn()`. This function allows you to effectively mock services and HTTP interactions to isolate component behavior during test execution.

Can I use Jasmine instead of Vitest for testing modern Angular v21+ applications?

Yes, you can use Jasmine instead of Vitest for testing modern Angular v21+ applications. The testing infrastructure supports Jasmine spies like `jasmine.createSpy()` for dependency mocking alongside TestBed and component harnesses.

How do I test HTTP interactions in an Angular service using inject()?

To test HTTP interactions in an Angular service using inject(), you write integration tests that mock HTTP calls. Using TestBed, you provide mock dependencies to verify the service correctly handles data fetching and internal state updates.

When do I need component harnesses for Angular component testing?

You need component harnesses for Angular component testing when you require stable and maintainable UI testing. They are utilized alongside TestBed to interact with components in a way that is resilient to internal DOM structure changes.