Testing HTTP calls with HttpTestingController in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is HttpTestingController used for in Angular testing?

HttpTestingController lets you mock and verify HTTP requests in Angular tests without making real network calls.

beginner

How do you inject HttpTestingController in an Angular test?

Use Angular's TestBed.inject(HttpTestingController) inside your test setup to get the controller instance.

beginner

What method do you use to expect a specific HTTP request in your test?

Use httpTestingController.expectOne(urlOrPredicate) to find and assert a single HTTP request matching the URL or condition.

intermediate

How do you simulate a response to an HTTP request in tests?

Call req.flush(data) on the matched request to send back mock data as the HTTP response.

intermediate

Why should you call httpTestingController.verify() at the end of your test?

It checks that no unexpected HTTP requests are left outstanding, ensuring your test covers all HTTP calls.

Which Angular service helps you mock HTTP requests in tests?

A HttpClient

B HttpClientModule

C HttpTestingController

D HttpInterceptor

HttpTestingController is designed for mocking and verifying HTTP requests in Angular tests.

What does expectOne() do in HttpTestingController?

A Mocks multiple HTTP requests

B Finds exactly one matching HTTP request

C Cancels all HTTP requests

D Sends a real HTTP request

expectOne() finds and returns a single HTTP request matching the given criteria.

How do you simulate a server response in an Angular HTTP test?

A Use <code>subscribe()</code> on HttpTestingController

B Call <code>send()</code> on HttpClient

C Call <code>verify()</code> on HttpClient

D Call <code>flush()</code> on the matched request

flush() sends mock data as the HTTP response in tests.

Why is httpTestingController.verify() important?

A It ensures no unexpected HTTP requests remain

B It sends all pending HTTP requests

C It resets the HTTP client

D It logs HTTP requests to console

verify() confirms all expected HTTP requests were handled and none are left open.

Where do you usually inject HttpTestingController in Angular tests?

A Inside the test setup using <code>TestBed.inject()</code>

B In the component constructor

C In the service constructor

D In the main app module

Inject HttpTestingController in the test setup to control HTTP requests during testing.

Explain how to test an Angular service's HTTP GET call using HttpTestingController.

Think about the steps to mock and verify the HTTP call in a test.

Describe why mocking HTTP calls is better than making real HTTP requests in Angular tests.

Consider what makes tests stable and fast.

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