Why Testing HTTP calls with HttpTestingController in Angular? - Purpose & Use Cases

The Big Idea

Want to test your app's server calls without waiting or breaking tests?

The Scenario

Imagine you build an app that talks to a server to get data. You want to check if your app asks the server correctly and handles answers well. Doing this by actually calling the server every time you test is slow and unreliable.

The Problem

Manually testing HTTP calls means waiting for real servers, which can be slow or down. It's hard to check all cases, like errors or slow responses. This makes tests flaky and wastes time.

The Solution

HttpTestingController lets you fake HTTP calls in tests. You can pretend to send requests and give back fake responses instantly. This makes tests fast, reliable, and easy to control.

Before vs After

✗ Before

service.getData().subscribe(data => console.log(data)); // calls real server

✓ After

const req = httpTestingController.expectOne('url');
req.flush(fakeData); // fake response in test

What It Enables

You can test how your app handles all server answers quickly and safely without needing a real server.

Real Life Example

Testing a weather app's data fetch: you fake sunny or rainy responses to check if the app shows correct icons and messages.

Key Takeaways

Manual HTTP testing is slow and unreliable.

HttpTestingController fakes HTTP calls for fast, stable tests.

This helps you test all server scenarios easily.

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