AngularJS mocking responses with $httpBackend

Question

The following HTTP request, intercepted by the ngMockE2E module "$httpBackend, never completes. What is the proper way to get a response from $httpBackend?

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

app.controller('Foo', function(MyHttpService, $scope) {
  MyHttpService.get().then(function(data) {
    $scope.async_data = data;
  });
});

app.factory('MyHttpService', function($http, $q) {
  return {
    get: function() {
      console.log('MyHttpService.get()');
      return $http.get('/test').then(function(data) {
        console.log('$http.get()', data);
        return data;
      });
    }
  }
});

app.run(['$httpBackend', function($httpBackend) {
  $httpBackend
    .whenGET(/^\/test/)
    .respond(function(method, path) {
       console.log(method, path);
       return {method: method, path: path};
    }); 
}]);

Here is a live example on codepen

score 1 · Accepted Answer · answered Aug 03 '16 at 20:41

The reason it doesn't work is that the callback inside .respond doesn't return the correct data and subsequently fails silently. Change it as follows:

app.run(['$httpBackend', function($httpBackend) {
  $httpBackend
    .whenGET(/^\/test/)
    .respond(function(method, path) {
       console.log(method, path);
       return [200, {method: method, path: path}];
    }); 
}]);

Here a working codepen

AngularJS mocking responses with $httpBackend

1 Answers1