Testing

import { TestBed } from '@angular/core/testing';
import { signal } from '@angular/core';
import { HeroList } from './hero-list';
import { HeroService } from './hero.service';

it('renders heroes from the service', async () => {
  const fakeService = { all: signal([{ id: 1, name: 'Test Hero' }]), add: () => {} };

  await TestBed.configureTestingModule({
    imports: [HeroList],
    providers: [{ provide: HeroService, useValue: fakeService }],
  }).compileComponents();

  const fixture = TestBed.createComponent(HeroList);
  fixture.detectChanges();
  expect(fixture.nativeElement.textContent).toContain('Test Hero');
});

Testing HTTP calls

provideHttpClientTesting() swaps the real backend for HttpTestingController, which lets a test inspect outgoing requests and answer them. Register it after provideHttpClient():

import { TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { Todo, TodoApi } from './todo-api';

describe('TodoApi', () => {
  let api: TodoApi;
  let http: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [provideHttpClient(), provideHttpClientTesting()],
    });
    api = TestBed.inject(TodoApi);
    http = TestBed.inject(HttpTestingController);
  });

  afterEach(() => http.verify());

  it('requests a limited list', () => {
    let result: Todo[] = [];
    api.list(2).subscribe((todos) => (result = todos));

    const req = http.expectOne((r) => r.url.endsWith('/todos'));
    expect(req.request.method).toBe('GET');
    expect(req.request.params.get('_limit')).toBe('2');
    req.flush([{ id: 1, title: 'Write tests', completed: false }]);

    expect(result.length).toBe(1);
  });
});

http.verify() fails the test if any request was made but never answered.

End-to-end tests

New projects do not include an e2e framework. Running ng e2e in a project without an e2e target offers to add one; the choices include Playwright, Cypress, WebdriverIO, Nightwatch and Puppeteer. You can also install a tool directly. With Playwright:

npm init playwright@latest
npx playwright test

Point Playwright at the dev server in playwright.config.ts so it starts the app before the tests:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: { baseURL: 'http://localhost:4200' },
  webServer: {
    command: 'npm start',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env['CI'],
  },
});

import { expect, test } from '@playwright/test';

test('home page greets the user', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { level: 1 })).toContainText('Hello');
});

Summary

• ng test runs .spec.ts files with the project's configured runner: Vitest in recent projects, Karma and Jasmine in older ones.
• TestBed creates components and services; detectChanges() updates the DOM.
• Swap dependencies with providers and test HTTP with provideHttpClientTesting().
• Add an e2e tool such as Playwright or Cypress through ng e2e or by installing it directly.