Injecting dependent services when unit testing AngularJS services

Question

I'm testing service A, but service A depends on service B (i.e. service B is injected into service A).

I've seen this question but my case is a bit different because in my opinion it makes more sense to mock service B instead of injecting an actual instance of service B. I'd mock it with a jasmine spy.

Here's a sample test:

describe("Sample Test Suite", function() {    beforeEach(function() {      module('moduleThatContainsServiceA');      inject([       'serviceA', function(service) {         this.service = service;       }     ]);    });    it('can create an instance of the service', function() {     expect(this.service).toBeDefined();   }); }); 

The error I get is:

Error: Unknown provider: serviceBProvider

How could I do something like this?

Answer 1

Actually in AngularJS Dependency Injection uses the 'last wins' rule. So you can define your service in your test just after including your module and dependencies, and then when service A that you're testing will request service B using DI, AngularJS will give mocked version of service B.

This is often is done by defining new module like MyAppMocks, putting mocked services/values there and then just adding this module as dependency.

Kind of (schematically):

beforeEach(function() {   angular.module('MyAppMocks',[]).service('B', ...));   angular.module('Test',['MyApp','MyAppMocks']);   ... 

Answer 2

I was doing this in CoffeeScript and found an extra gotcha. (Also, I found the code on this page to be confusingly terse.) Here's a complete working example:

describe 'serviceA', ->    mockServiceB = {}     beforeEach module 'myApp' # (or just 'myApp.services')     beforeEach ->       angular.mock.module ($provide) ->          $provide.value 'serviceB', mockServiceB          null     serviceA = null    beforeEach inject ($injector) ->       serviceA = $injector.get 'serviceA'     it 'should work', ->       expect( true ).toBe( true )       #serviceA.doStuff() 

Without explicitly returning null after $provide.value, I kept getting Error: Argument 'fn' is not a function, got Object. I found the answer in this Google Groups thread.