Testing HTTP calls with HttpTestingController in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the HttpTestingController for testing HTTP calls.

Angular

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, [1] } from '@angular/common/http/testing';

Drag options to blanks, or click blank then click option'

AHttpClient

BHttpClientModule

CHttpTestingController

DHttpHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Importing HttpClientModule instead of HttpTestingController

Using HttpClient instead of HttpTestingController

The HttpTestingController is imported from @angular/common/http/testing to mock HTTP requests in tests.

2fill in blank

medium

Complete the code to inject HttpTestingController in the test setup.

Angular

let httpTestingController: HttpTestingController;
beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [HttpClientTestingModule]
  });
  httpTestingController = TestBed.[1](HttpTestingController);
});

Drag options to blanks, or click blank then click option'

Aget

Binject

Cprovide

Dcreate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'inject' as a method on TestBed (should be get or inject function)

Using 'provide' which is for providers, not retrieval

Use TestBed.get() (or TestBed.inject() in newer Angular versions) to retrieve the HttpTestingController instance.

3fill in blank

hard

Fix the error in the test by completing the code to expect one HTTP GET request.

Angular

const req = httpTestingController.[1]('api/data');

Drag options to blanks, or click blank then click option'

Amatch

BexpectOne

Cflush

Dverify

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'match' which returns an array of requests

Using 'verify' which checks no outstanding requests

Using 'flush' which sends a response

The expectOne method expects exactly one HTTP request matching the URL.

4fill in blank

hard

Fill both blanks to flush a mock response and verify no outstanding requests.

Angular

req.[1]({ data: 'test' });
httpTestingController.[2]();

Drag options to blanks, or click blank then click option'

Aflush

Bverify

CexpectOne

Dmatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'expectOne' instead of 'flush' to send response

Not calling 'verify' to check outstanding requests

Use flush to send a mock response and verify to ensure no pending requests remain.

5fill in blank

hard

Fill all three blanks to test an HTTP POST request and respond with mock data.

Angular

service.postData({name: 'test'}).subscribe(response => {
  expect(response).toEqual([1]);
});
const req = httpTestingController.[2]('api/post');
req.[3]({id: 1, name: 'test'});

Drag options to blanks, or click blank then click option'

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

BexpectOne

Cflush

Dmatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'match' instead of 'expectOne' to find the request

Not flushing the response to complete the observable

The test expects the mock response object, uses expectOne to find the POST request, and flush to send the mock response.

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