Improve this Doc  View Source

$httpBackend

  1. - service in module ngMockE2E

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

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>