AngularJS - Testing service method that uses $http service

Question

I have a function on my service that looks like something this:

addStatement: function(user, action, object) {
            var statement = {
                    user: user,
                    action: action,
                    object: object
            };
            $http({
                method: 'POST', 
                url: '/foo/bar', 
                data: statement, 
                headers: {Authorization: 'Basic YWxhZGRpbjpvcGVuIHNlc2FtZQ=='}
            }).success(function(data) {
                alert("success: " + data);
            });
        }

I want to write a unit test for this method, but I'm not sure how to make it work. Basically, I want to test that the data sent up was correctly constructed from the function parameters and that the correct Authorization header was sent up.

I've been reading over how to use $httpBackend, but the example there is testing a controller, and just stuff that changes on the $scope when the requests are made and returned. Is there a way to achieve the tests I want? Or am I going about something wrong?

Answer 1

Testing services doesn't differ much from testing controllers so the principles are the same. Basically you need to:

• Inject objects under test
• setup mocks (if any) - here you were on the right track using $httpBackend mock
• run methods on your object under test and verify the results

If you are after testing that a service methods results in $http POST call you could write your test like this (non-essential parts omitted):

beforeEach(module('MyApp'));
beforeEach(inject(function(MyService, _$httpBackend_) {
    service = MyService;
    $httpBackend = _$httpBackend_; // angular strips the underscores so
                                   // we don't need to use unique names
    // https://docs.angularjs.org/api/ngMock/function/angular.mock.inject
}));

it('should invoke service with right paramaeters', function() {
    $httpBackend.expectPOST('/foo/bar', {
        "user": "testUser",
        "action": "testAction",
        "object": {}
    }, function(headers){
        return headers.Authorization === 'Basic YWxhZGRpbjpvcGVuIHNlc2FtZQ==';
    }).respond({});
    service.addStatement('testUser', 'testAction', {});
    $httpBackend.flush();
});

Here is the working jsFiddle illustrating this test in action: http://jsfiddle.net/pkozlowski_opensource/MkrjZ/2/

One last remark: it is better not to use .alert() in unit tests since those alerts will pause execution of tests.

Answer 2

I wrote a blog post about that very topic showing a little bit about using angular's built-in mocks and writing your own mocks, maybe it helps you to get a deeper understanding:

How to mock AngularJS modules and inject them in your testacular tests?

In short it defines a second module for testing that can mock the desired behavior:

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

And overwrites the original behavior, e.g. like this:

apptasticMock.service("socket", function($rootScope){
... // overwrite
});

Then it has to be loaded in the tests - this works because angular overwrites already defined services in the order they are loaded:

describe("Socket Service", function(){
  var socket;

  beforeEach(function(){
    module('apptastic');
    module('apptasticMock');

    inject(function($injector) {
      socket = $injector.get('socket');
    });
  });

  it("tests something", function(){
  ... // test
  });

});

With a nice structure of code even inheritance is not really a problem while being able to have fine grained control over what should be mocked, and what should be used from the original code.