$httpBackend | Quick Tutorial With Example
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.
