$httpBackend | Quick Tutorial With Example

$httpBackend | Quick Tutorial With Example

February 16, 2017

If you use the $http service in your Angular app, then you'll want to make use of the $httpBackend service for unit testing. The $httpBackend service allows you to mock up http requests that your Angular app is making. Instead of hitting an actual server, $httpBackend specifies expected requests and the values they should return. This gives developers the ability to synchronously unit test their code without relying on external dependencies or server requests. The following is a basic example of how to implement $http backend with your Angular unit tests.

Let's say you have the following $http request in your Angular code:

$scope.getResponse = function(){
$http.get(‘/myUrl/myData').then(function(result){
$scope.response = result.data;
});
});

This simple function uses the $http service to make an asynchronous request to /myUrl/myData. It then sets the JSON response to the scope variable ‘response'. While this is fairly straightforward, mocking the response for unit testing can be a bit more tricky. To make this easier, we will use the $httpBackend service in our Karma/Jasmine unit test.

describe(‘My Http Request', function(){
beforeEach(inject(function(_$controller_, _$httpBackend_){
$controller = _$controller_;
$httpBackend = _$httpBackend_;
$httpBackend.expectGET(‘/myUrl/myData').respond(200,{data:'expected response'});
}))

it(‘should set response variable', function(){
var $scope = {};
var controller = $controller(‘myCtrl', {$scope: $scope});
$scope.getResponse();
$httpBackend.flush();
expect($scope.response).toEqual(‘expected response');
});
})

Notice how first we inject the $httpBackend service so our unit tests can access and use it. In the same block, we then use $httpBackend.expectGET() to specify the url to catch and define a mock JSON response. Finally, we call $httpBackend.flush() to flush out any pending asynchronous requests. By flushing the request, we essentially replace the asynchronous $http request with our own mock response. Always be sure to call $httpBackend.flush() to execute your mock requests.

Difference between $httpBackend.expect and $httpBackend.when

When using the $httpBackend service, you will notice sometimes $httpBackend.expect(), is used (as in our example) while other times $httpBackend.when(),is used. Both of these methods allow us to define mock responses from the server. The main difference is that expect() creates a request expectation and when() does not. With $httpBackend.expect(), our test will fail if the specified request is not made. With $httpBackend.when(), we can mock responses without asserting that the request was made. In other words, our test won't fail if the request we mock up is never called.

Conclusion

The $httpBackend service takes a little getting used to but is very useful for mocking http requests. By mocking up request responses, you can more effectively unit test your AngularJS app without having to wait on server requests or other external dependencies.


Join the conversation...

Posted by Jarrod Marburry
April 23, 2017

great quick example ...like this tutorial on $httpBackend (especially with what else is out there).
Posted by Terry Newman
March 18, 2017

$httpbackend is crucial to properly testing Angular controllers. I hear you can even use it with end to end testing for Protractor etc...would love to see more examples.
Posted by Tyler S
March 12, 2017

This made httpBackend finally make sense for me ....thank you


More by the stackchief