Testing HTTP calls with HttpTestingController in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular test using HttpTestingController?

Consider this Angular service test snippet. What will be the value of result after the test runs?

Angular

let result: any;
service.getData().subscribe(data => result = data);

const req = httpTestingController.expectOne('/api/data');
req.flush({name: 'Test'});

httpTestingController.verify();

A result will be {name: 'Test'}

B result will be undefined because flush was not called

C result will be null because subscribe was not triggered

D The test will throw an error because expectOne was not called

💡 Hint

Remember that calling flush sends the mock response to the subscriber.

The flush method sends the mock response to the observable, so result receives the object {name: 'Test'}. The expectOne call matches the request, so no error occurs.

📝 Syntax

intermediate

Which option correctly matches and flushes a GET request in HttpTestingController?

You want to test a GET request to '/api/items'. Which code snippet correctly matches and flushes the request?

A

const req = httpTestingController.expectOne('/api/items');
req.send([{id:1}]);

B

const req = httpTestingController.match('/api/items');
req.flush([{id:1}]);

C

const req = httpTestingController.expectOne('/api/items');
req.flush([{id:1}]);

D

const req = httpTestingController.expect('/api/items');
req.flush([{id:1}]);

💡 Hint

Use expectOne to match a single request and flush to send the response.

expectOne matches exactly one request. flush sends the mock response. match returns an array, so calling flush on it causes an error. send is not a method on the request. expect is not a valid method.

🔧 Debug

advanced

Why does this Angular test using HttpTestingController fail with 'Expected one matching request for criteria' error?

Given this test code, why does httpTestingController.expectOne('/api/users') throw an error?

Angular

service.fetchUsers().subscribe();
// No HTTP call is made inside fetchUsers
httpTestingController.expectOne('/api/users');

A Because no HTTP request to '/api/users' was made, so expectOne fails to find it

B Because the URL '/api/users' is incorrect and should be '/api/user'

C Because the flush method was not called before expectOne

D Because the subscribe callback is empty and does not trigger the request

💡 Hint

Check if the service method actually makes an HTTP call.

expectOne looks for a matching HTTP request. If the service method does not make any HTTP call, expectOne throws an error because it finds no matching request.

❓ state_output

advanced

What is the value of errorResponse after this test triggers an HTTP error?

In this Angular test, what will errorResponse contain after the HTTP call fails?

Angular

let errorResponse: any;
service.getData().subscribe({
  next: () => {},
  error: err => errorResponse = err.status
});

const req = httpTestingController.expectOne('/api/data');
req.flush('Not Found', {status: 404, statusText: 'Not Found'});

httpTestingController.verify();

A 'Not Found'

B 404

C undefined

D null

💡 Hint

The error callback receives an HttpErrorResponse object with a status property.

The flush method with error status triggers the error callback. The err.status contains the HTTP status code 404.

🧠 Conceptual

expert

Which statement best describes the role of HttpTestingController in Angular tests?

Choose the most accurate description of what HttpTestingController does in Angular unit tests.

A It records HTTP requests and replays them later during integration tests

B It automatically mocks all HTTP services without needing explicit request matching

C It replaces HttpClient with a fake implementation that returns static data only

D It intercepts HTTP requests and allows tests to assert and respond to them without real network calls

💡 Hint

Think about how HttpTestingController helps control HTTP calls in tests.

HttpTestingController intercepts HTTP requests made by HttpClient and lets tests verify and respond to them manually. It does not automatically mock all requests or replace HttpClient entirely.