Angular 2 http mock

A utility library for mocking out the requests in Angular Http module.

Installation

npm install --save-dev @generalov/angular-http-mock

Usage

Let's look to the HeroService from Hero Saga. It fetches a list of heroes from web API.

Here is a version of app/hero.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';

import { Hero } from './hero';

@Injectable()
export class HeroService {
  private heroesUrl = 'app/heroes';  // URL to web api

  constructor(private http: Http) { }

  getHeroes(): Observable<Hero[]> {
    return this.http
               .get(this.heroesUrl)
               .map((r: Response) => r.json().data as Hero[])
               .catch((error: any): string => Observable.throw('Server error'));
  }
}

We're going to trick the HTTP client into fetching and saving data from a mock service.

Setup a test suite

hero.service.spec.ts

import { inject, TestBed } from '@angular/core/testing';
import { MockBackend } from '@angular/http/testing';

import { HttpMockModule, HttpMock } from '@generalov/angular-http-mock';

import { HeroService } from './hero.service';

describe('HttpMock usage', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HeroService,
        HttpMockModule
      ]
    });
  });

  afterEach(inject([MockBackend], (backend: MockBackend) => {
    backend.verifyNoPendingRequests();
  }));

  // Put your specs here
});

Mock a regular Http response

  it(`should return a heroes array`,
    inject([HeroService, HttpMock],
      (heroService: HeroService, httpMock: HttpMock) => {
         let nextFn: jasmine.Spy = jasmine.createSpy('next');
         let errorFn: jasmine.Spy = jasmine.createSpy('error');

         httpMock
           .when({ url: 'app/heroes', method: 'GET' })
           .respond({
              status: 200,
              body: '{"data": [{"id": 11, "name": "Mr. Nice" }]}'
           });

         heroService.getHeroes().subscribe(nextFn, errorFn);

         expect(httpMock.responses[0].url).toBe('app/heroes');
         expect(httpMock.responses[0].status).toBe(200);
         expect(errorFn).not.toHaveBeenCalled();
         expect(nextFn).toHaveBeenCalled();
         expect(nextFn.calls.mostRecent().args[0][0].id).toBe(11);
         expect(nextFn.calls.mostRecent().args[0][0].name).toBe('Mr. Nice');
    })
  );

Mock an error Http response

  it(`should handle a server error`,
    inject([HeroService, HttpMock],
      (heroService: HeroService, httpMock: HttpMock) => {
         let nextFn: jasmine.Spy = jasmine.createSpy('next');
         let errorFn: jasmine.Spy = jasmine.createSpy('error');

         httpMock
           .when({ url: 'app/heroes', method: 'GET' })
           .respond({
              status: 502,
              body: 'Bad gateway'
           });

         heroService.getHeroes().subscribe(nextFn, errorFn);

         expect(httpMock.responses[0].url).toBe('app/heroes');
         expect(httpMock.responses[0].status).toBe(502);
         expect(nextFn).not.toHaveBeenCalled();
         expect(errorFn).toHaveBeenCalled();
         expect(errorFn.calls.mostRecent().args[0]).toBe('Server error');
    })
  );

Build

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run npm run test to execute the unit tests via Karma.

Inspired by

• https://github.com/ryanzec/backend
• https://github.com/jasmine/jasmine-ajax/
• http://www.mock-server.com/

Links

• https://angular.io/docs/ts/latest/guide/testing.html
• https://developers.livechatinc.com/blog/testing-angular-2-apps-routeroutlet-and-http/
• https://angular.io/docs/ts/latest/guide/server-communication.html

This project was generated with angular-cli version 1.0.0-beta.15.

License

MIT