Injecting a mock service for an angularjs controller test

Question

I'm trying to test a controller that depends on a service I built myself. I'd like to mock this service since the service talks to the DOM.

Here's my current test:

describe('Player Controllers', function () {

    beforeEach(function () {
        this.addMatchers({
            toEqualData: function (expected) {
                return angular.equals(this.actual, expected);
            }
        });
    });

    describe('TestPSPlayerModule', function () {
        var $httpBackend, scope, ctrl;

        beforeEach(module('PSPlayerModule'));

        beforeEach(inject(function (_$httpBackend_, $rootScope, $controller) {
            $httpBackend = _$httpBackend_;

            scope = $rootScope.$new();
            ctrl = $controller(PlayerController, { $scope: scope });
        }));

        it('should request a clip url from the server when clipClicked is called', function () {
            expect(1).toBe(1);
        });
    });

});

My controller looks like this:

w.PlayerController = function ($scope, $http, $window, speedSlider, $location) {
    ...
}

so it's the speedSlider I want to mock.

I had the idea to use a module I created in my test code that could provide a faked implementation of the speed slider, so I added the following to the top of the test.js file:

module('TestPSPlayerModule', []).factory('speedSlider', function () {
    return = {
       ...
    };
});

and then list that module in the beforeEach() call instead of the concrete one, but if I do that I get the following error:

Injector already created, can not register a module!

So I figure there must be a better way for me to provide a mock implementation of one of my services. Something I can perhaps use sinon.js for....

Have you seen this documentation? docs.angularjs.org/guide/dev_guide.services.testing_services Where $window is mocked out. It is a rather simple example, but it might provide a template for what you want to do. — Noah Freitas
– Noah Freitas, Commented Jul 12, 2012 at 22:31
@StephaneEybert, looks like it's been moved to and updated here: docs.angularjs.org/guide/services#unit-testing — Noah Freitas
– Noah Freitas, Commented Apr 11, 2015 at 18:01

kennbrodhagen · Accepted Answer · 2013-09-05 16:09:27Z

40

Also be sure you're not trying to do this inside an inject function call:

This will throw the error:

    beforeEach(inject(function(someOtherService) {
        module('theApp', function($provide) {
            myMock = {foo: 'bar'};
            $provide.value('myService', myServiceMock);
            someOtherService.doSomething();
        });
    }));

This will not:

    beforeEach(function() {
        module('theApp', function($provide) {
            myMock = {foo: 'bar'};
            $provide.value('myService', myServiceMock);
        });

        inject(function(someOtherService) {
           someOtherService.doSomething();
        });
    });

edited Sep 5, 2013 at 16:09

answered Sep 5, 2013 at 13:58

kennbrodhagen

4,3683 gold badges29 silver badges21 bronze badges

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

2 Comments

Herman Kan Over a year ago

Nesting module() inside inject() is not what causes the error. In fact, all module() calls must be before inject().

Herman Kan Over a year ago

@tobi, because inject() uses modules that have been already registered. Here is the implementation: github.com/angular/angular.js/blob/master/src/ngMock/….

Oleg · Accepted Answer · 2014-10-28 15:16:04Z

6

Make sure when you use module after its definition that you don't have the extra brackets. So module('TestPSPlayer') instead of module('TestPSPlayer',[]).

edited Oct 28, 2014 at 15:16

Oleg

9,4092 gold badges45 silver badges59 bronze badges

answered Jul 12, 2012 at 21:38

Dan Doyon

6,7302 gold badges33 silver badges40 bronze badges

Comments

pleerock · Accepted Answer · 2014-12-08 15:42:11Z

4

In my case this didn't worked:

beforeEach(module('user'));
beforeEach(inject(function ($http) {
}));

beforeEach(module('community'));
beforeEach(inject(function ($controller, $rootScope) {
}));

I've changed to this to make it to work:

beforeEach(module('user'));
beforeEach(module('community'));

beforeEach(inject(function ($http) {
}));
beforeEach(inject(function ($controller, $rootScope) {
}));

answered Dec 8, 2014 at 15:42

pleerock

18.9k17 gold badges106 silver badges129 bronze badges

1 Comment

Luca Trazzi Over a year ago

this explains that inject should be called AFTER all the module initializations

Gal Morad · Accepted Answer · 2015-07-08 11:14:25Z

If your provider does not use global init you can use the original injected provider and mock it. in the example below the testedProvider is your controller.

var injectedProviderMock;

beforeEach(function () {
    module('myModule');
});

beforeEach(inject(function (_injected_) {
    injectedProviderMock  = mock(_injected_);
}));


var  testedProvider;
beforeEach(inject(function (_testedProvider_) {
    testedProvider = _testedProvider_;
}));

it("return value from injected provider", function () {
    injectedProviderMock.myFunc.andReturn('testvalue');
    var res = testedProvider.executeMyFuncFromInjected();
    expect(res).toBe('testvalue');
});

//mock all provider's methods
function mock(angularProviderToMock) {

    for (var i = 0; i < Object.getOwnPropertyNames(angularProviderToMock).length; i++) {
        spyOn(angularProviderToMock,Object.getOwnPropertyNames(angularProviderToMock)[i]);
    }
    return angularProviderToMock;
}

Collectives™ on Stack Overflow

Injecting a mock service for an angularjs controller test

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related