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.

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