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?

isherwood · Accepted Answer · 2016-01-25 22:15:21Z

36

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.

edited Jan 25, 2016 at 22:15

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Aug 23, 2012 at 6:39

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

btford Over a year ago

+1 for avoiding alerts. Another possibility is that you may want to inject $window and use $window.alert so you can mock that out for your tests.

Michael J. Calkins Over a year ago

Learning moment: If you take out $httpBackend.flush(); your test won't as expected.

Thomas Fankhauser · Accepted Answer · 2013-08-24 16:44:47Z

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.

Collectives™ on Stack Overflow

AngularJS - Testing service method that uses $http service

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related