angular-testing

Unit and integration testing for Angular v20+ with Vitest or Jasmine, supporting signals and modern patterns.

analogjs/angular-skills|Updated Apr 8, 2026

Works with

Claude CodeCursorClineWindsurfCodexGoose

What it does

Supports both Vitest (recommended) and Jasmine test runners with native Angular v20+ integration via @angular/build
Covers signal-based components, computed values, OnPush change detection, and input/output testing with modern APIs
Includes HTTP mocking via HttpTestingController , service injection with TestBed.inject() , and dependency mocking with Vitest
Provides pattern

Repository

analogjs/angular-skills

Last updated

Apr 8, 2026

Installation Guide

Select your AI agent

How to use angular-testing on Cursor

AI-first code editor with Composer

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

›Cursor installed and configured on your machine
›Node.js 16+ with npm — verify with node --version
›Active project directory where you want to add angular-testing

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

$npx skills add https://github.com/analogjs/angular-skills --skill angular-testing

Fetches angular-testing from analogjs/angular-skills and configures it for Cursor.

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?

│

│ ── Universal (.agents/skills) ────────────────

│ · Cline · Codex · Goose · Windsurf

│ ●Cursor(selected)

│ · Cursor · Aider · Continue

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/angular-testing

Restart Cursor to activate angular-testing. Access via /angular-testing in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub ›Skills CLI docs ›About Cursor ›What are agent skills?

Documentation

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

Task Automation & Efficiency

Automate repetitive workflows and reduce manual effort

Example

Generate reports, summarize documents, draft communications

✓

Save 3-5 hours per week on routine tasks

Knowledge Enhancement

Learn new skills, understand complex topics, get expert guidance

Example

Explain concepts, provide examples, suggest learning resources

✓

Accelerate learning and skill development by 2x

Quality Improvement

Enhance output quality through reviews, suggestions, and refinements

Example

Review drafts, suggest improvements, catch errors

✓

Improve work quality by 30-40% with less effort

Vitest Setup (Angular v20+)

Angular v20+ has native Vitest support through the @angular/build package.

npm install -D vitest jsdom

Configure in angular.json:

{ "projects": { "your-app": { "architect": { "test": { "builder": "@angular/build:unit-test", "options": { "tsConfig": "tsconfig.spec.json", "buildTarget": "your-app:build" } } } } } }

Run tests:

ng test # Run tests ng test --watch # Watch mode ng test --code-coverage # With coverage

For Vitest migration from Jasmine and advanced configuration, see references/vitest-migration.md.

Basic Component Test

import { describe, it, expect, beforeEach } from 'vitest'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { Counter } from './counter.component'; describe('Counter', () => { let component: Counter; let fixture: ComponentFixture<Counter>; beforeEach(async () => { await TestBed.configureTestingModule({ imports: [Counter], // Standalone component }).compileComponents(); fixture = TestBed.createComponent(Counter); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); it('should increment count', () => { expect(component.count()).toBe(0); component.increment(); expect(component.count()).toBe(1); }); it('should display count in template', () => { component.count.set(5); fixture.detectChanges(); const element = fixture.nativeElement.querySelector('.count'); expect(element.textContent).toContain('5'); }); });

Testing Signals

Direct Signal Testing

import { signal, computed } from '@angular/core'; describe('Signal logic', () => { it('should update computed when signal changes', () => { const count = signal(0); const doubled = computed(() => count() * 2); expect(doubled()).toBe(0); count.set(5); expect(doubled()).toBe(10); count.update(c => c + 1); expect(doubled()).toBe(12); }); });

Testing Component Signals

@Component({ selector: 'app-todo-list', template: ` <ul> @for (todo of filteredTodos(); track todo.id) { <li>{{ todo.text }}</li> } </ul> <p>{{ remaining() }} remaining</p> `, }) export class TodoList { todos = signal<Todo[]>([]); filter = signal<'all' | 'active' | 'done'>('all'); filteredTodos = computed(() => { const todos = this.todos(); switch (this.filter()) { case 'active': return todos.filter(t => !t.done); case 'done': return todos.filter(t => t.done); default: return todos; } }); remaining = computed(() => this.todos().

angular-testing

What it does

Category

Repository

Last updated

Installation Guide

How to use angular-testing on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

Documentation

List & Monetize Your Skill

Use Cases

Task Automation & Efficiency

Knowledge Enhancement

Quality Improvement

Install Skill

Angular Testing

Vitest Setup (Angular v20+)

Basic Component Test

Testing Signals

Direct Signal Testing

Testing Component Signals

`Implementation Guide`

`Best Practices`

`When to Use This`

`Learning Path`

`Related Skills`

accessibility-testing

usability-testing

spring-boot-testing

webapp-testing

idor-vulnerability-testing

angular-best-practices-primeng

`Reviews`

`Discussion`