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

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

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
});

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
});

Hint

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

Practice

1. What is the main purpose of HttpTestingController in Angular testing?

easy

A. To mock and verify HTTP requests without calling a real server

B. To create real HTTP requests to test backend APIs

C. To replace Angular services with fake implementations

D. To automatically generate HTTP request logs during tests

Solution

1. Step 1: Understand HttpTestingController role

   It is designed to intercept HTTP requests in tests and provide mock responses.

2. Step 2: Differentiate from real HTTP calls

   It does not send real requests but simulates them for testing purposes.

3. Final Answer:

   To mock and verify HTTP requests without calling a real server -> Option A

4. Quick Check:

   HttpTestingController mocks HTTP calls = B [OK]

Hint: HttpTestingController mocks HTTP calls, no real server needed [OK]

Common Mistakes:

• Thinking it sends real HTTP requests
• Confusing it with service mocking
• Assuming it logs requests automatically

2. Which of the following is the correct way to inject HttpTestingController in an Angular test?

easy

A. const httpMock = inject(HttpTestingController, TestBed);

B. const httpMock = new HttpTestingController();

C. const httpMock = HttpClientTestingModule.get(HttpTestingController);

D. const httpMock = TestBed.inject(HttpTestingController);

Solution

1. Step 1: Recall Angular TestBed injection syntax

   Use TestBed.inject() to get service instances in tests.

2. Step 2: Check each option

   Only const httpMock = TestBed.inject(HttpTestingController); uses correct syntax: TestBed.inject(HttpTestingController).

3. Final Answer:

   const httpMock = TestBed.inject(HttpTestingController); -> Option D

4. Quick Check:

   Use TestBed.inject() for services in tests = D [OK]

Hint: Use TestBed.inject() to get HttpTestingController instance [OK]

Common Mistakes:

• Trying to instantiate HttpTestingController with new
• Using incorrect module methods
• Passing wrong parameters to inject

3. Given this test snippet, what will req.request.method output?

const req = httpMock.expectOne('/api/data');
console.log(req.request.method);

medium

A. 'GET' if the tested service made a GET request to '/api/data'

B. 'POST' regardless of the actual request method

C. Throws an error because request is undefined

D. 'PUT' if the tested service made a PUT request to '/api/data'

Solution

1. Step 1: Understand expectOne returns a TestRequest

   TestRequest has a request property with HTTP method info.

2. Step 2: The method reflects the actual HTTP call

   If the tested service called GET on '/api/data', req.request.method is 'GET'.

3. Final Answer:

   'GET' if the tested service made a GET request to '/api/data' -> Option A

4. Quick Check:

   req.request.method matches actual HTTP method = A [OK]

Hint: expectOne().request.method shows actual HTTP method used [OK]

Common Mistakes:

• Assuming method is always POST or PUT
• Thinking request property is undefined
• Confusing expectOne with expectNone

4. What is the likely cause of this error in an Angular HTTP test?

Error: Expected one matching request for criteria "Match URL: '/api/items'", found none.

medium

A. The test forgot to call httpMock.verify()

B. The tested service did not make any HTTP request to '/api/items'

C. HttpTestingController was not injected properly

D. The URL in expectOne has a typo but the request was made correctly

Solution

1. Step 1: Analyze the error message

   It says no matching request was found for '/api/items'.

2. Step 2: Understand expectOne behavior

   expectOne throws if no request matches the URL, meaning no request was made.

3. Final Answer:

   The tested service did not make any HTTP request to '/api/items' -> Option B

4. Quick Check:

   No matching request means no HTTP call made = C [OK]

Hint: No matching request means tested code didn't call that URL [OK]

Common Mistakes:

• Assuming verify() missing causes this error
• Thinking injection failure causes this error
• Ignoring URL typos in expectOne

5. In a test, you want to verify that exactly one GET request to '/api/users' was made and respond with mock data. Which code snippet correctly does this using HttpTestingController?

hard

A. const req = httpMock.expectOne('/api/users');
req.error(new ErrorEvent('Network error'));
httpMock.verify();

B. httpMock.expectNone('/api/users');
httpMock.verify();

C. const req = httpMock.expectOne({method: 'GET', url: '/api/users'});
req.flush([{ id: 1, name: 'Alice' }]);
httpMock.verify();

D. const req = httpMock.expectOne('/api/users');
req.flush('');

Solution

1. Step 1: Use expectOne to find the GET request

   expectOne({method: 'GET', url: '/api/users'}) finds the single matching request.

2. Step 2: Respond with mock data using flush

   Calling req.flush with mock user array simulates a successful response.

3. Step 3: Call verify to ensure no unexpected requests

   httpMock.verify() confirms all requests were handled.

4. Final Answer:

   const req = httpMock.expectOne({method: 'GET', url: '/api/users'}); req.flush([{ id: 1, name: 'Alice' }]); httpMock.verify(); -> Option C

5. Quick Check:

   expectOne + flush + verify = A [OK]

Hint: Use expectOne, flush mock data, then verify no extra requests [OK]

Common Mistakes:

• Using expectNone instead of expectOne
• Calling error instead of flush for success
• Not calling verify after flush