Testing HTTP calls with HttpTestingController in Angular - Step-by-Step Execution

Concept Flow - Testing HTTP calls with HttpTestingController

Test Setup

↓

Make HTTP call in service

↓

HttpTestingController intercepts call

↓

Expect request with expectOne()

↓

Flush mock response

↓

Verify no outstanding requests

↓

Test assertions on response

The test sets up HttpTestingController to catch HTTP calls, expects a request, sends a mock response, then verifies and asserts results.

Execution Sample

Angular

service.getData().subscribe(data => result = data);
const req = httpTestingController.expectOne('/api/data');
req.flush({id: 1, name: 'Test'});
httpTestingController.verify();

This code tests a service HTTP GET call by expecting the request, sending a fake response, and verifying no extra calls.

Execution Table

Step	Action	HttpTestingController State	Request Captured	Response Sent	Test State
1	Call service.getData()	No requests yet	No	No	Subscription waiting
2	expectOne('/api/data') called	One request pending	Yes, to /api/data	No	Subscription waiting
3	req.flush({id:1, name:'Test'})	Request fulfilled	Yes	Yes, with mock data	Subscription receives data
4	httpTestingController.verify()	No outstanding requests	No	Yes	Test ready for assertions
5	Assertions run on result	No requests	No	Yes	Test passes if data matches

💡 All expected HTTP requests handled and verified, test completes successfully

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
result	undefined	undefined	undefined	{id:1, name:'Test'}	{id:1, name:'Test'}	{id:1, name:'Test'}
httpTestingController.requests	[]	[GET /api/data]	[GET /api/data]	[]	[]	[]

Key Moments - 3 Insights

Why do we need to call expectOne() after making the HTTP call?

expectOne() tells HttpTestingController to look for a specific HTTP request. Without it, the test won't know which request to mock or verify, as shown in step 2 of the execution_table.

What happens if we forget to call httpTestingController.verify()?

If verify() is not called, the test might miss detecting unhandled HTTP requests, causing false positives. Step 4 shows verify() clears outstanding requests to ensure test completeness.

Why do we use req.flush() in the test?

req.flush() sends a fake response to the HTTP call so the subscription can receive data and continue. Step 3 shows how flush triggers the response delivery.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of 'result' after step 3?

A {id:1, name:'Test'}

B undefined

C null

D An error

💡 Hint

Check the variable_tracker row for 'result' after Step 3

At which step does HttpTestingController confirm no outstanding requests?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'HttpTestingController State' column in execution_table

If we skip calling req.flush(), what happens to the subscription?

A It receives the mock data anyway

B It throws an error immediately

C It never receives data and stays waiting

D The test fails at expectOne()

💡 Hint

Refer to step 3 in execution_table where flush sends the response

Concept Snapshot

Testing HTTP calls with HttpTestingController:
- Use HttpTestingController to intercept HTTP calls in tests.
- Call expectOne() to find the request.
- Use req.flush() to send mock response.
- Call verify() to ensure no unexpected requests.
- Assert results after flush delivers data.

Full Transcript

This visual execution shows how Angular's HttpTestingController helps test HTTP calls. First, the service method triggers an HTTP request. HttpTestingController catches it, and expectOne() confirms the request was made. Then, req.flush() sends a fake response so the subscription receives data. Finally, verify() checks no other requests remain. Variables like 'result' update after flush. This step-by-step trace helps beginners see how HTTP testing works in Angular.