Testing Http

In this video I'm using an online editor called Plunker to write and run Angular code. The book and code has since been updated to use StackBlitz instead. To understand more about why and the differences between read this.

View Code

Run Code

Learning Objectives
Test Setup
- Configuring the Test Suite
Using the MockBackend to Simulate a Response
Testing the Response
Summary
Listing

Learning Objectives

How to configure a test suite so we can mock the Http service to send back fake responses.

Test Setup

To demonstrate how to test HTTP requests we will add a test for our iTunes SearchService which we created in the section on Http.

We will use the promise version of the search service that uses JSONP to get around the issue of CORS.

import {Injectable} from '@angular/core';
import {Jsonp} from '@angular/http';
import 'rxjs/add/operator/toPromise';

class SearchItem {
  constructor(public name: string,
              public artist: string,
              public thumbnail: string,
              public artistId: string) {
  }
}

@Injectable()
export class SearchService {
  apiRoot: string = 'https://itunes.apple.com/search';
  results: SearchItem[];

  constructor(private jsonp: Jsonp) {
    this.results = [];
  }

  search(term: string) {
    return new Promise((resolve, reject) => {
      this.results = [];
      let apiURL = `${this.apiRoot}?term=${term}&media=music&limit=20&callback=JSONP_CALLBACK`;
      this.jsonp.request(apiURL)
          .toPromise()
          .then(
              res => { // Success
                this.results = res.json().results.map(item => {
                  console.log(item);
                  return new SearchItem(
                      item.trackName,
                      item.artistName,
                      item.artworkUrl60,
                      item.artistId
                  );
                });
                resolve(this.results);
              },
              msg => { // Error
                reject(msg);
              }
          );
    });
  }
}

Note

Although we are using Jsonp here, testing Http and Jsonp is exactly the same. We just replace instances of Jsonp with Http.

Configuring the Test Suite

We want the Jsonp and Http services to use the MockBackend instead of the real Backend, this is the underling code that actually sends and handles HTTP.

By using the MockBackend we can intercept real requests and simulate responses with test data.

The configuration is slightly more complex since we are using a factory provider:

{
  provide: Http, (1)
  useFactory: (backend, options) => new Http(backend, options), (2)
  deps: [MockBackend, BaseRequestOptions] (3)
}

1	We are configuring a dependency for the token `Http`.
2	The injector calls this function in order to return a new instance of the `Http` class. The arguments to the `useFactory` function are themselves injected in, see (3).
3	We define the dependencies to our `useFactory` function via the `deps` property.

For our API however we are using Jsonp, we can just replace all mention of Http with Jsonp like so:

{
  provide: Jsonp,
  useFactory: (backend, options) => new Jsonp(backend, options),
  deps: [MockBackend, BaseRequestOptions]
}

The above configuration ensures that the Jsonp service is constructed using the MockBackend so we can control it later on in testing.

Together with the other providers and modules we need our initial test suite file looks like so:

describe('Service: Search', () => {

  let service: SearchService;
  let backend: MockBackend;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [JsonpModule],
      providers: [
        SearchService,
        MockBackend,
        BaseRequestOptions,
        {
          provide: Jsonp,
          useFactory: (backend, options) => new Jsonp(backend, options),
          deps: [MockBackend, BaseRequestOptions]
        }
      ]
    });

    backend = TestBed.get(MockBackend); (1)

    service = TestBed.get(SearchService); (2)
  });
});

1	We grab a reference to the mock backend so we can control the HTTP responses from our test specs.
2	We grab a reference to the `SearchService`, this has been created using the `MockBackend` above.

Using the `MockBackend` to Simulate a Response

Just by using the MockBackend instead of the real Backend we have stopped the tests from triggering real HTTP requests from being sent out.

Now we need to configure the MockBackend to return dummy test data instead, like so:

it('search should return SearchItems', fakeAsync(() => {
  let response = { (1)
    "resultCount": 1,
    "results": [
      {
        "artistId": 78500,
        "artistName": "U2",
        "trackName": "Beautiful Day",
        "artworkUrl60": "image.jpg",
      }]
  };

  backend.connections.subscribe(connection => { (2)
    connection.mockRespond(new Response(<ResponseOptions>{ (3)
      body: JSON.stringify(response)
    }));
  });
}));

1	We create some fake data we want the API to respond with.
2	The mock backend `connections` property is an observable that emits a `connection` every time an API request is made.
3	For every connection that is requested we tell it to `mockRespond` with our dummy data.

The above code returns the same dummy data for every API request, regardless of the URL.

Testing the Response

Using Http is asynchronous so in order to test we need to use one of the asynchronous testing methods, we’ll use the fakeAsync method.

it('search should return SearchItems', fakeAsync(() => { (1)
  let response = {
    "resultCount": 1,
    "results": [
      {
        "artistId": 78500,
        "artistName": "U2",
        "trackName": "Beautiful Day",
        "artworkUrl60": "image.jpg",
      }]
  };

  // When the request subscribes for results on a connection, return a fake response
  backend.connections.subscribe(connection => {
    connection.mockRespond(new Response(<ResponseOptions>{
      body: JSON.stringify(response)
    }));
  });

  // Perform a request and make sure we get the response we expect
  service.search("U2"); (2)
  tick(); (3)

  expect(service.results.length).toBe(1); (4)
  expect(service.results[0].artist).toBe("U2");
  expect(service.results[0].name).toBe("Beautiful Day");
  expect(service.results[0].thumbnail).toBe("image.jpg");
  expect(service.results[0].artistId).toBe(78500);
}));

1	We use the `fakeAsync` method to execute in the special fake async zone and track pending promises.
2	We make the asynchronous call to `service.search(…)`
3	We issue a `tick()` which blocks execution and waits for all the pending promises to be resolved.
4	We now know that the service has received and parsed the response so we can write some expectations.

Summary

We can test code that makes HTTP requests by using a MockBackend.

This requires that we configure our TestBed so that the Jsonp or Http services are created using the MockBackend.

We grab a reference to the instance of MockBackend that was injected and use it to simulate responses.

Since Http is asynchronous we use of one of the async testing mechanisms so we can write tests specs for our code.

Listing

Listing 1. search.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

class SearchItem {
    constructor(
        public name: string,
        public artist: string,
        public thumbnail: string,
        public artistId: string
    ) { }
}

@Injectable()
export class SearchService {
    apiRoot: string = "https://itunes.apple.com/search";
    results: SearchItem[];

    constructor(private http: HttpClient) {
        this.results = [];
    }

    search(term: string) {
        return new Promise((resolve, reject) => {
            this.results = [];
            let apiURL = `${this.apiRoot}?term=${term}&media=music&limit=20`;
            this.http
                .get(apiURL)
                .toPromise()
                .then(
                    res => {
                        // Success
                        this.results = res.results.map(item => {
                            console.log(item);
                            return new SearchItem(
                                item.trackName,
                                item.artistName,
                                item.artworkUrl60,
                                item.artistId
                            );
                        });
                        resolve(this.results);
                    },
                    msg => {
                        // Error
                        reject(msg);
                    }
                );
        });
    }
}

Listing 2. script.ts

/* tslint:disable:no-unused-variable */
import {
    HttpClientTestingModule,
    HttpTestingController
} from "@angular/common/http/testing";
import { TestBed, fakeAsync, tick } from "@angular/core/testing";
import { HttpClient } from "@angular/common/http";
import { SearchService } from "./search.service";

describe("Service: Search", () => {
    let service: SearchService;
    let httpTestingController: HttpTestingController;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule],
            providers: [SearchService]
        });
        // Returns a service with the MockBackend so we can test with dummy responses
        service = TestBed.get(SearchService);
        // Inject the http service and test controller for each test
        httpTestingController = TestBed.get(HttpTestingController);
    });

    afterEach(() => {
        // After every test, assert that there are no more pending requests.
        httpTestingController.verify();
    });

    it(
        "search should return SearchItems",
        fakeAsync(() => {
            let response = {
                resultCount: 1,
                results: [
                    {
                        artistId: 78500,
                        artistName: "U2",
                        trackName: "Beautiful Day",
                        artworkUrl60: "image.jpg"
                    }
                ]
            };

            // Perform a request (this is fakeAsync to the responce won't be called until tick() is called)
            service.search("U2");

            // Expect a call to this URL
            const req = httpTestingController.expectOne(
                "https://itunes.apple.com/search?term=U2&media=music&limit=20"
            );
            // Assert that the request is a GET.
            expect(req.request.method).toEqual("GET");
            // Respond with this data when called
            req.flush(response);

            // Call tick whic actually processes te response
            tick();

            // Run our tests
            expect(service.results.length).toBe(1);
            expect(service.results[0].artist).toBe("U2");
            expect(service.results[0].name).toBe("Beautiful Day");
            expect(service.results[0].thumbnail).toBe("image.jpg");
            expect(service.results[0].artistId).toBe(78500);
        })
    );
});

Caught a mistake or want to contribute to the book? Edit this page on GitHub!

Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today.

Level up your JavaScript now!

[🌲,🌳,🌴].push(🌲)

If you find my courses useful, please consider planting a tree on my behalf to combat climate change. Just $4.50 will pay for 25 trees to be planted in my name. Plant a tree!

Learning Objectives

Test Setup

Note

Configuring the Test Suite

Using the MockBackend to Simulate a Response

Testing the Response

Summary

Listing

Advanced JavaScript

Using the `MockBackend` to Simulate a Response