Testing HTTP calls with HttpTestingController in Angular - Mini Project: Build & Apply

Testing HTTP calls with HttpTestingController

📖 Scenario: You are building an Angular service that fetches user data from a server. To ensure your service works correctly, you want to write tests that simulate HTTP requests without actually calling a real server.

🎯 Goal: Create a test for an Angular service method that makes an HTTP GET request using HttpTestingController to verify the request and mock the response.

📋 What You'll Learn

Create a service instance and inject HttpTestingController in the test setup

Define a test user data object to be returned by the mock HTTP call

Call the service method that makes the HTTP GET request

Use HttpTestingController to expect the HTTP request and flush the mock data

💡 Why This Matters

🌍 Real World

Testing HTTP calls without a real server helps catch bugs early and speeds up development.

💼 Career

Many Angular developer roles require writing unit tests for services that make HTTP requests.

1

Set up test user data

Create a constant called testUser with this exact object: { id: 1, name: 'Alice' }

Angular

# Your code here

Need a hint?

This object will be used as the mock response data for the HTTP call.

2

Inject HttpTestingController and service

In the test setup, inject HttpTestingController as httpTestingController and your service as userService using TestBed.inject()

Angular

const testUser = { id: 1, name: 'Alice' };
// Inject HttpTestingController and userService below
// Your code here

Need a hint?

Use TestBed.configureTestingModule with HttpClientTestingModule imported.

3

Call service method and expect HTTP request

Call userService.getUser(1) and subscribe to the result. Then use httpTestingController.expectOne('/api/users/1') to expect the HTTP GET request.

Angular

const testUser = { id: 1, name: 'Alice' };

let httpTestingController: HttpTestingController;
let userService: UserService;

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [HttpClientTestingModule],
    providers: [UserService]
  });
  httpTestingController = TestBed.inject(HttpTestingController);
  userService = TestBed.inject(UserService);
});

it('should fetch user data', () => {
  // Call getUser and expect HTTP request
  // Your code here
});

Need a hint?

Subscribe to the service method and then expect the HTTP GET request URL.

4

Flush mock data and verify no outstanding requests

Use req.flush(testUser) to send the mock user data as the HTTP response. Then call httpTestingController.verify() to confirm no pending requests remain.

Angular

const testUser = { id: 1, name: 'Alice' };

let httpTestingController: HttpTestingController;
let userService: UserService;

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [HttpClientTestingModule],
    providers: [UserService]
  });
  httpTestingController = TestBed.inject(HttpTestingController);
  userService = TestBed.inject(UserService);
});

it('should fetch user data', () => {
  userService.getUser(1).subscribe(user => {
    expect(user).toEqual(testUser);
  });

  const req = httpTestingController.expectOne('/api/users/1');
  expect(req.request.method).toEqual('GET');
  // Flush mock data and verify no outstanding requests
  // Your code here
});

Need a hint?

Flushing sends the mock response. Verifying ensures no unexpected HTTP calls remain.