angular-testing

name	angular-testing
description	Use when writing unit tests for Angular components, services, pipes, or directives. Triggers on requests to "write tests", "add tests", "create spec", "test this component", or when test files need to be created/modified.

Angular Testing Guide

Write tests using Vitest with Angular TestBed following project patterns.

Note: Vitest globals (describe, it, expect, vi, beforeEach, afterEach) are pre-configured in tsconfig.spec.json - no imports needed.

Test File Location

Place test files next to the source files:

component-name/
  component-name.ts
  component-name.spec.ts  # <- Test file here

Essential Imports

import { ComponentFixture, TestBed } from "@angular/core/testing";
import { provideZonelessChangeDetection } from "@angular/core";
import { By } from "@angular/platform-browser";
// Vitest globals (describe, it, expect, vi) are available without imports

Component Test Template

import { ComponentFixture, TestBed } from "@angular/core/testing";
import { provideZonelessChangeDetection } from "@angular/core";
import { By } from "@angular/platform-browser";

import { MyComponent } from "./my";
import { MyService } from "../services/my";

describe("MyComponent", () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let mockService: Partial<MyService>;

  beforeEach(async () => {
    mockService = {
      getData: vi.fn(),
      saveData: vi.fn(),
    };

    await TestBed.configureTestingModule({
      imports: [MyComponent],
      providers: [
        provideZonelessChangeDetection(),
        { provide: MyService, useValue: mockService },
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
  });

  it("should create", () => {
    expect(component).toBeTruthy();
  });

  it("should render data when loaded", () => {
    // Arrange
    vi.mocked(mockService.getData).mockReturnValue(["item1", "item2"]);

    // Act
    fixture.detectChanges();

    // Assert
    const items = fixture.debugElement.queryAll(By.css(".item"));
    expect(items).toHaveLength(2);
  });

  it("should call service on button click", () => {
    // Arrange
    fixture.detectChanges();
    const button = fixture.debugElement.query(By.css("button"));

    // Act
    button.triggerEventHandler("click", null);

    // Assert
    expect(mockService.saveData).toHaveBeenCalled();
  });
});

Service Test Template

import { TestBed } from "@angular/core/testing";
import { provideZonelessChangeDetection } from "@angular/core";
import { provideHttpClient } from "@angular/common/http";
import {
  provideHttpClientTesting,
  HttpTestingController,
} from "@angular/common/http/testing";

import { MyService } from "./my";

describe("MyService", () => {
  let service: MyService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MyService,
        provideZonelessChangeDetection(),
        provideHttpClient(),
        provideHttpClientTesting(),
      ],
    });

    service = TestBed.inject(MyService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify();
  });

  it("should be created",  {
    (service).();
  });

  (,  {
    
     mockData = [{ : , :  }];

    
    service.().( {
      
      (data).(mockData);
    });

    
     req = httpMock.();
    (req..).();
    req.(mockData);
  });
});

Testing Signal Inputs

import { signal } from "@angular/core";

it("should respond to input changes", () => {
  // For required inputs, set before detectChanges
  fixture.componentRef.setInput("data", { id: 1, name: "Test" });
  fixture.detectChanges();

  expect(component.data()).toEqual({ id: 1, name: "Test" });
});

Testing Outputs

it("should emit event on action", () => {
  const emitSpy = vi.fn();
  component.valueChange.subscribe(emitSpy);

  component.updateValue(42);

  expect(emitSpy).toHaveBeenCalledWith(42);
});

Mocking Patterns

// Mock service methods
const mockService = {
  getData: vi.fn().mockReturnValue(of(["data"])),
  saveData: vi.fn().mockResolvedValue({ success: true }),
};

// Spy on existing service
const service = TestBed.inject(MyService);
const spy = vi.spyOn(service, "getData").mockReturnValue(of(["mocked"]));

// Mock external module
vi.mock("external-lib", () => ({
  someFunction: vi.fn(() => "mocked result"),
}));

Async Testing

// Using async/await
it("should handle async operations", async () => {
  vi.mocked(mockService.getData).mockResolvedValue(["async data"]);

  await component.loadData();
  fixture.detectChanges();

  expect(component.items()).toEqual(["async data"]);
});

// Testing Observables
it("should handle observable", () => {
  vi.mocked(mockService.getData).mockReturnValue(of(["data"]));

  service.getData().subscribe((result) => {
    expect(result).toEqual(["data"]);
  });
});

Fake Timers

it("should handle delayed operations", () => {
  vi.useFakeTimers();

  component.startTimer();
  vi.advanceTimersByTime(1000);

  expect(component.timerComplete()).toBe(true);

  vi.useRealTimers();
});

DOM Queries

// Query by CSS selector
const element = fixture.debugElement.query(By.css(".my-class"));
const elements = fixture.debugElement.queryAll(By.css("button"));

// Query by directive
const directive = fixture.debugElement.query(By.directive(MyDirective));

// Get native element
const nativeElement = element.nativeElement;
expect(nativeElement.textContent).toContain("Expected text");

Checklist

• Vitest globals available (no imports needed)
• Using provideZonelessChangeDetection() in providers
• Following AAA pattern (Arrange, Act, Assert)
• Mocking external dependencies
• Testing component inputs and outputs
• Verifying HTTP requests with httpMock.verify()
• Using descriptive test names