Testing HTTP with HttpTestingController

HttpTestingController replaces the real backend so tests never hit the network.

Enabling HTTP Testing

import { TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { UserService } from './user.service';

describe('UserService', () => {
  let service: UserService;
  let httpMock: HttpTestingController;

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

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

  afterEach(() => {
    httpMock.verify(); // Assert no outstanding requests
  });
});

Asserting a GET Request

it('should fetch users', () => {
  const mockUsers: User[] = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' },
  ];

  service.getUsers().subscribe(users => {
    expect(users).toEqual(mockUsers);
  });

  const req = httpMock.expectOne('/api/users');
  expect(req.request.method).toBe('GET');

  req.flush(mockUsers);
});

HttpTestingController Methods

flush — Simulate Success

const req = httpMock.expectOne('/api/users');
req.flush(mockUsers); // Emit response and complete

error — Simulate Failure

const req = httpMock.expectOne('/api/users');
req.error(new ErrorEvent('Network error'), { status: 500, statusText: 'Server Error' });

HttpTestingController supports testing headers, query params, and request bodies.

Asserting Request Details

it('should send auth header', () => {
  service.getUsers().subscribe();

  const req = httpMock.expectOne('/api/users');
  expect(req.request.headers.get('Authorization')).toBe('Bearer token123');
  expect(req.request.method).toBe('GET');

  req.flush([]);
});

Asserting POST Body

it('should create a user', () => {
  const newUser = { name: 'Alice', email: 'alice@example.com' };

  service.createUser(newUser).subscribe();

  const req = httpMock.expectOne('/api/users');
  expect(req.request.method).toBe('POST');
  expect(req.request.body).toEqual(newUser);

  req.flush({ id: 1, ...newUser });
});

Testing Query Parameters

it('should send query params', () => {
  service.searchUsers('alice', 1).subscribe();

  const req = httpMock.expectOne(
    req => req.url === '/api/users/search' &&
           req.params.get('q') === 'alice' &&
           req.params.get('page') === '1'
  );

  req.flush([]);
});

Testing Error Handling

it('should handle 404 error', () => {
  service.getUser(999).subscribe({
    error: err => {
      expect(err.message).toContain('not found');
    },
  });

  const req = httpMock.expectOne('/api/users/999');
  req.flush('Not found', { status: 404, statusText: 'Not Found' });
});