Testing HTTP interactions

In contrast to stubbing HTTP requests using $httpBackend, angular-test-runner allows to fake http request to server. To know difference between stubs, fakes and mocks visit Test Doubles – Fakes, Mocks and Stubs or Mocks Aren't Stubs.

angular-test-runner uses Sinon JS, which fakes XMLHttpRequest under the hood. This guarantees, that any HTTP request can be faked. Even non-angular requests, like 3rd-party JQuery plugins, can be easily intercepted.

By default HTTP communication is synchronous, as for most of the cases you don't need/want to include temporal dependencies in your tests. This saves you from writing obscure $httpBackend.flush() known from ngMock. However, you can switch to asynchronous mode, if you feel you need to simulate network latency, for more complicated scenarios (ex. testing spinner).

Initialization

test.http([config])

Config:

respondImmediately: boolean - false enables async mode; default : true

autoRespond: boolean - true - respond immadietally, false - respond after; default : true

respondAfter: number - response will be returned after x miliseconds, it demands disabled autoRespond; default : 10

let testRunner = require('angular-test-runner');
let server;

beforeEach(function () {
    server = testRunner.http({respondImmediately: false});
});

afterEach(function () {
    server.stop();
});

Creating fake

methodName(url, handler)

Creates fake server function for url. Possible method names : get, put, post, delete

Parameters

Argument	Type	Description
url	string, RegExp	url or regexp to match http requests
handler	function(IHttpHandler)	function which will be call after matching http request

Example

const testRunner = require('angular-test-runner');

angular.module('async-server-app', [])
    .component('greeting', {
        template: '<div class="greeting">{{ $ctrl.message }}</div>',
        controller: function ($http) {
            this.message = 'initial';
            $http.get('/greeting')
                .then(res => this.message = res.data.message);
        }
    });

it('responds with specific code', function () {

    // given:
    const server = testRunner.http();
    const app = testRunner.app(['async-server-app']);
    server.get('/greeting', req => {
        req.sendJson({
            message: 'Hello from server!'
        });
    });

    // when:
    var html = app.runHtml('<greeting/>');

    // then:
    html.verify(
        expectElement('.greeting').toHaveText('Hello from server!')
    );
});

stop()

Reset all created fakes.

Async mode

server object allows to turn on async mode where waiting requests are resolving only in case of performing server.respond action.

Example:

const testRunner = require('angular-test-runner');

angular.module('async-server-app', [])
    .component('greeting', {
        template: '<div class="greeting">{{ $ctrl.message }}</div>',
        controller: function ($http) {
            this.message = 'Waiting for server response!';
            $http.get('/greeting')
                .then(res => this.message = 'Hello from server!');
        }
    });

it('resolves request after respond()', function () {

    const app = testRunner.app(['async-server-app']);
    server = app.server({respondImmediately: false});
    server.get('/greeting', req => req.sendStatus(200));

    var html = app.runHtml('<greeting/>');

    html.verify(
      expectElement('.greeting').toHaveText('Waiting for server response!')
    );

    html.perform(
      server.respond
    );

    html.verify(
      expectElement('.greeting').toHaveText('Hello from server!')
    );

  });

Example.

IHttpHandler

Object which allows getting data from request and returning specific response to http request.

Methods

sendJson(response)

Server will response with response object.

Example

sendStatus(statusNumber)

Server will response with statusNumber http status.

Example

body()

Get request body as JSON.

Example

header(headerName)

Get request header with headerName.

Example

query()

Get path params as a JSON object.

Example