Improve this Doc View Source

## Overview

Fake HTTP backend implementation suitable for end-to-end testing or backend-less development of applications that use the $http service.

Note: For fake http backend implementation suitable for unit testing please see unit-testing $httpBackend mock.

This implementation can be used to respond with static or dynamic responses via the `when` api and its shortcuts (`whenGET`, `whenPOST`, etc) and optionally pass through requests to the real $httpBackend for specific requests (e.g. to interact with certain remote apis or to fetch templates from a webserver).

As opposed to unit-testing, in an end-to-end testing scenario or in scenario when an application is being developed with the real backend api replaced with a mock, it is often desirable for certain category of requests to bypass the mock and issue a real http request (e.g. to fetch templates or static files from the webserver). To configure the backend with this behavior use the `passThrough` request handler of `when` instead of `respond`.

Additionally, we don't want to manually have to flush mocked out requests like we do during unit testing. For this reason the e2e $httpBackend flushes mocked out requests automatically, closely simulating the behavior of the XMLHttpRequest object.

To setup the application to run with this http backend, you have to create a module that depends on the `ngMockE2E` and your application modules and defines the fake backend:

    var myAppDev = angular.module('myAppDev', ['myApp', 'ngMockE2E']);
    myAppDev.run(function($httpBackend) {
      var phones = [{name: 'phone1'}, {name: 'phone2'}];

      // returns the current list of phones
      $httpBackend.whenGET('/phones').respond(phones);

      // adds a new phone to the phones array
      $httpBackend.whenPOST('/phones').respond(function(method, url, data) {
        var phone = angular.fromJson(data);
        phones.push(phone);
        return [200, phone, {}];
      });
      $httpBackend.whenGET(/^\/templates\//).passThrough(); // Requests for templates are handled by the real server
      //...
    });

Afterwards, bootstrap your app with this new module.

## Methods

- ###

  `when(method, url, [data], [headers], [keys]);`

  Creates a new backend definition.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  method | string | HTTP method.
  url | string RegExp function(string)= | HTTP url or function that receives a url and returns true if the url matches the current definition.
  data (optional) | string RegExp function(string) | HTTP request body or function that receives data string and returns true if the data is as expected.
  headers (optional) | Object function(Object) | HTTP headers or function that receives http header object and returns true if the headers match the current definition.
  keys (optional) | Array | Array of keys to assign to regex matches in request url described on $httpBackend mock.

  #### Returns

  - requestHandler | Returns an object with `respond` and `passThrough` methods that control how a matched request is handled. You can save this object for later use and invoke `respond` or `passThrough` again in order to change how a matched request is handled. respond –
        { function([status,] data[, headers, statusText])
        | function(function(method, url, data, headers, params)}
  – The respond method takes a set of static data to be returned or a function that can return an array containing response status (number), response data (Array|Object|string), response headers (Object), and the text for the status (string). passThrough – `{function()}` – Any request matching a backend definition with `passThrough` handler will be passed through to the real backend (an XHR request will be made to the server.) Both methods return the `requestHandler` object for possible overrides.

- ###

  `whenGET(url, [headers], [keys]);`

  Creates a new backend definition for GET requests. For more info see `when()`.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  url | string RegExp function(string)= | HTTP url or function that receives a url and returns true if the url matches the current definition.
  headers (optional) | Object function(Object) | HTTP headers.
  keys (optional) | Array | Array of keys to assign to regex matches in request url described on $httpBackend mock.

  #### Returns

  requestHandler | Returns an object with `respond` and `passThrough` methods that control how a matched request is handled. You can save this object for later use and invoke `respond` or `passThrough` again in order to change how a matched request is handled.

- ###

  `whenHEAD(url, [headers], [keys]);`

  Creates a new backend definition for HEAD requests. For more info see `when()`.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  url | string RegExp function(string)= | HTTP url or function that receives a url and returns true if the url matches the current definition.
  headers (optional) | Object function(Object) | HTTP headers.
  keys (optional) | Array | Array of keys to assign to regex matches in request url described on $httpBackend mock.

  #### Returns

  requestHandler | Returns an object with `respond` and `passThrough` methods that control how a matched request is handled. You can save this object for later use and invoke `respond` or `passThrough` again in order to change how a matched request is handled.

- ###

  `whenDELETE(url, [headers], [keys]);`

  Creates a new backend definition for DELETE requests. For more info see `when()`.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  url | string RegExp function(string)= | HTTP url or function that receives a url and returns true if the url matches the current definition.
  headers (optional) | Object function(Object) | HTTP headers.
  keys (optional) | Array | Array of keys to assign to regex matches in request url described on $httpBackend mock.

  #### Returns

  requestHandler | Returns an object with `respond` and `passThrough` methods that control how a matched request is handled. You can save this object for later use and invoke `respond` or `passThrough` again in order to change how a matched request is handled.

- ###

  `whenPOST(url, [data], [headers], [keys]);`

  Creates a new backend definition for POST requests. For more info see `when()`.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  url | string RegExp function(string)= | HTTP url or function that receives a url and returns true if the url matches the current definition.
  data (optional) | string RegExp function(string) | HTTP request body or function that receives data string and returns true if the data is as expected.
  headers (optional) | Object function(Object) | HTTP headers.
  keys (optional) | Array | Array of keys to assign to regex matches in request url described on $httpBackend mock.

  #### Returns

  requestHandler | Returns an object with `respond` and `passThrough` methods that control how a matched request is handled. You can save this object for later use and invoke `respond` or `passThrough` again in order to change how a matched request is handled.

- ###

  `whenPUT(url, [data], [headers], [keys]);`

  Creates a new backend definition for PUT requests. For more info see `when()`.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  url | string RegExp function(string)= | HTTP url or function that receives a url and returns true if the url matches the current definition.
  data (optional) | string RegExp function(string) | HTTP request body or function that receives data string and returns true if the data is as expected.
  headers (optional) | Object function(Object) | HTTP headers.
  keys (optional) | Array | Array of keys to assign to regex matches in request url described on $httpBackend mock.

  #### Returns

  requestHandler | Returns an object with `respond` and `passThrough` methods that control how a matched request is handled. You can save this object for later use and invoke `respond` or `passThrough` again in order to change how a matched request is handled.

- ###

  `whenPATCH(url, [data], [headers], [keys]);`

  Creates a new backend definition for PATCH requests. For more info see `when()`.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  url | string RegExp function(string)= | HTTP url or function that receives a url and returns true if the url matches the current definition.
  data (optional) | string RegExp function(string) | HTTP request body or function that receives data string and returns true if the data is as expected.
  headers (optional) | Object function(Object) | HTTP headers.
  keys (optional) | Array | Array of keys to assign to regex matches in request url described on $httpBackend mock.

  #### Returns

  requestHandler | Returns an object with `respond` and `passThrough` methods that control how a matched request is handled. You can save this object for later use and invoke `respond` or `passThrough` again in order to change how a matched request is handled.

- ###

  `whenJSONP(url, [keys]);`

  Creates a new backend definition for JSONP requests. For more info see `when()`.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  url | string RegExp function(string)= | HTTP url or function that receives a url and returns true if the url matches the current definition.
  keys (optional) | Array | Array of keys to assign to regex matches in request url described on $httpBackend mock.

  #### Returns

  requestHandler | Returns an object with `respond` and `passThrough` methods that control how a matched request is handled. You can save this object for later use and invoke `respond` or `passThrough` again in order to change how a matched request is handled.

- ###

  `whenRoute(method, url);`

  Creates a new backend definition that compares only with the requested route.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  method | string | HTTP method.
  url | string | HTTP url string that supports colon param matching.

  #### Returns

  requestHandler | Returns an object with `respond` and `passThrough` methods that control how a matched request is handled. You can save this object for later use and invoke `respond` or `passThrough` again in order to change how a matched request is handled.

- ###

  `matchLatestDefinitionEnabled([value]);`

  This method can be used to change which mocked responses `$httpBackend` returns, when defining them with $httpBackend.when() (and shortcut methods). By default, `$httpBackend` returns the first definition that matches. When setting `$http.matchLatestDefinitionEnabled(true)`, it will use the last response that matches, i.e. the one that was added last.

      hb.when('GET', '/url1').respond(200, 'content', {});
      hb.when('GET', '/url1').respond(201, 'another', {});
      hb('GET', '/url1'); // receives "content"

      $http.matchLatestDefinitionEnabled(true)
      hb('GET', '/url1'); // receives "another"

      hb.when('GET', '/url1').respond(201, 'onemore', {});
      hb('GET', '/url1'); // receives "onemore"

  This is useful if a you have a default response that is overriden inside specific tests.

  Note that different from config methods on providers, `matchLatestDefinitionEnabled()` can be changed even when the application is already running.

  #### Parameters

  Param | Type | Details
  --- | --- | ---
  value (optional) | Boolean | value to set, either `true` or `false`. Default is `false`. If omitted, it will return the current value.

  #### Returns

  $httpBackend Boolean | self when used as a setter, and the current value when used as a getter

## Example

    var myApp = angular.module('myApp', []);

    myApp.controller('MainCtrl', function MainCtrl($http) {
      var ctrl = this;

      ctrl.phones = [];
      ctrl.newPhone = {
        name: ''
      };

      ctrl.getPhones = function() {
        $http.get('/phones').then(function(response) {
          ctrl.phones = response.data;
        });
      };

      ctrl.addPhone = function(phone) {
        $http.post('/phones', phone).then(function() {
          ctrl.newPhone = {name: ''};
          return ctrl.getPhones();
        });
      };

      ctrl.getPhones();
    });

    var myAppDev = angular.module('myAppE2E', ['myApp', 'ngMockE2E']);

    myAppDev.run(function($httpBackend) {
      var phones = [{name: 'phone1'}, {name: 'phone2'}];

      // returns the current list of phones
      $httpBackend.whenGET('/phones').respond(phones);

      // adds a new phone to the phones array
      $httpBackend.whenPOST('/phones').respond(function(method, url, data) {
        var phone = angular.fromJson(data);
        phones.push(phone);
        return [200, phone, {}];
      });
    });

    <div ng-controller="MainCtrl as $ctrl">
    <form name="newPhoneForm" ng-submit="$ctrl.addPhone($ctrl.newPhone)">
      <input type="text" ng-model="$ctrl.newPhone.name">
      <input type="submit" value="Add Phone">
    </form>
    <h1>Phones</h1>
    <ul>
      <li ng-repeat="phone in $ctrl.phones">{{phone.name}}</li>
    </ul>
    </div>