Mocking my own service in a unit test

Question

Mocking my own service in a unit test

I have a service that takes several of my other services as a dependency. How can I mock it out for a unit test?

myApp.factory('serviceToTest',
           ['serviceDependency',
    function(serviceDependency) {
        return function(args) {
            return cond(args) ? serviceDependency() : somethingElse();
        };
    }
]);

In the above example, I want to mock out serviceDependency so I can verify that it was called. How can I do that?

I could just do the following in the test:

describe("Services", function() {
    describe('serviceToTest', function() {

        myApp.factory('serviceDependency', function() {
            var timesCalled = 0;
            return function() {
                return timesCalled++;
            }
        });

        it('should do foo', inject(function(serviceToTest, serviceDependency) {
            serviceToTest(["foo", "bar", "baz"]);
            expect(serviceDependency()).to.equal(1);
        });
    });
});

This works fine for the test that needs the mock, but it then affects the state of all the other tests that follow, which is obviously a problem.

unit-testing
mocking
angularjs

Answer 1

If I understand you correctly you want to test a service that depends on another service and mock a dependency for each test. If so, let's say that we've got a car that has a dependency on an engine:

var app = angular.module('plunker', [])
  .factory('car', function(engine) {
     return {
       drive : function() {
         return 'Driving: ' + engine.speed();
       }
     }
  })
  .value('engine', {
    speed : function() {
      return 'fast';
    }
  });

Then you want to test a car an mock an engine. There are 2 ways of doing so: either by defining a new module in which we could redefine an engine:

describe('Testing a car', function() {
  var testEngine;

  beforeEach(function(){
    testEngine = {};
    angular.module('test', ['plunker']).value('engine', testEngine);
    module('test');
  });   

  it('should drive slow with a slow engine', inject(function(car) {
    testEngine.speed = function() {
      return 'slow';
    };
    expect(car.drive()).toEqual('Driving: slow');
  }));
});

A working plunk here: http://plnkr.co/edit/ueXIzk?p=preview

A bit simpler alternative, relaying on dynamic nature of JavaScript:

describe('Testing a car', function() {
  var testEngine;

  beforeEach(module('plunker'));
  beforeEach(inject(function(engine){
    testEngine = engine;
  }));

  it('should drive slow with a slow engine', inject(function(car) {
    testEngine.speed = function() {
      return 'slow';
    };
    expect(car.drive()).toEqual('Driving: slow');
  }));
});

http://plnkr.co/edit/tlHnsJ?p=preview

Yet another alternative is to use a Jasmine's spy:

describe('Testing a car', function() {
  var testEngine;

  beforeEach(module('plunker'));
  beforeEach(inject(function(engine){
    testEngine = engine;
  }));

  it('should drive slow with a slow engine', inject(function(car) {
    spyOn(testEngine, 'speed').andReturn('slow');
    expect(car.drive()).toEqual('Driving: slow');
  }));
});

http://plnkr.co/edit/K4jczI?p=preview

Answer 2

I was having the same issue trying to inject a mock service into another provider.

This post by Pete Bacon Darwin put me on the right track: https://groups.google.com/d/msg/angular/TvBknXnjRyQ/xtCDkJyqp6MJ

Here is an example application:

angular.module('MyApplication', [])
    .service('MyServiceDependency', [function(){
        // Behaviour here.
    }])
    .factory('MyFactory', ['MyServiceDependency', function(MyServiceDependency){
        // Behaviour here.
    }]);

We want to mock out MyServiceDependency to test the behaviour of MyFactory so we write our tests like this:

describe(function(){

    var MyFactory;

    beforeEach(function(){
        // 1. Include your application module for testing.
        angular.mock.module('MyApplication');

        // 2. Define a new module.
        // 3. Define a provider with the same name as the one you want to mock (in our case we want to mock 'MyServiceDependency'.
        angular.module('MyAppMock', [])
            .service('MyServiceDependency', function(){
                // Define you mock behaviour here.
            });

        // 4. Include your new mock module - this will override the providers from your original module.
        angular.mock.module('MyAppMock');

        // 5. Get an instance of the provider you want to test.
        inject(function($injector){
            // `MyFactory` will receive the mocked version of `MyServiceDependency`.
            MyFactory = $injector.get('MyFactory');
        });
    });

    it('MyFactory does something special', function(){
        MyFactory(); // Test your provider.
    });

});

Answer 3

Here is an example from my open source project: https://github.com/lucassus/mongo_browser/blob/f1faf1b89a9fc33ef4bc4eced386c30bda029efa/spec/javascripts/app/services_spec.js.coffee#L25 (sorry for coffeescript). Generally inside a spec you have to create and include a new module which overrides the given service.