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.