Mocking AngularJS module dependencies in Jasmine unit tests

Question

I'm attempting to unit test controller code inside a module that takes other modules as dependencies, but haven't been able to figure out how to mock them properly.

I'm using the Jasmine Framework and running my tests with Karma (Testacular).

Module Code

var app = angular.module('events', ['af.widgets', 'angular-table']);

app.controller('eventsCtrl', function([dependencies]){
    $scope.events = [];
    ...
});

Spec Code

describe('events module', function(){
    var $scope,
        ctrl;

    beforeEach(function(){
        angular.mock.module('af.widgets', []);
        angular.mock.module('angular-table', []);
        module('events', ['af.widgets', 'angular-table']);
    });

    beforeEach(inject(function($rootScope, $controller){
        $scope = $rootScope.new();
        ctrl = $controller('NameCtrl', {
            $scope: $scope,
        });
    }));

    it('should have an empty events array', function(){
        expect($scope.events).toBe([]);
    })
});

The error I'm getting is Karma is "no module af.widgets", so obviously I'm not mocking the module dependencies right. Any hints?

$scope = $rootScope.new(); should be $scope = $rootScope.$new();(maybe for our version) — Steve Black
– Steve Black, Commented Mar 26, 2015 at 6:03

Davide Icardi · Accepted Answer · 2013-08-14 10:07:05Z

65

If you want to mock a module that declare one or more services I have used this code:

beforeEach(function(){
    module('moduleToMock');
    module(function ($provide) {
        $provide.value('yourService', serviceMock);
    });
});

This is useful if the service you want to mock is also a service that you want to unit test (in another jasmine describe). The solution proposed by fscof is fine but you cannot create a unit test for the angular-table module.

answered Aug 14, 2013 at 10:07

Davide Icardi

12.3k8 gold badges61 silver badges77 bronze badges

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

4 Comments

Roman Bekkiev Over a year ago

This is right way. Because you often don't want to use one mock for all tests. Se also here: stackoverflow.com/a/18756347/1105860

Cyril CHAPON Over a year ago

And what if I want to put serviceMock in another file, without declaring global variables ?

BitfulByte Over a year ago

I prefer this method for my own modules, however I don't want to write any unit test for 3rd party modules. In that case I prefer @fscof his solution. Both are correct, depending on context :-)

Jay Shukla Over a year ago

What if I want to return promise from method of serviceMock object. I need $q, right? How to get that inside module function. I'm unable to get that.. Can you help me?

fscof · Accepted Answer · 2015-05-03 15:52:12Z

47

Here's what I figured out:

I wasn't loading any 'angular-table' modules in my karma.conf.js file, hence the error. This was intentional at first as I wanted to test the 'events' module without the actual table module.

I was able to easily mock the 'angular-table' module by creating a new file in my test folder called 'mocks/angular-table.js' and added the following code:

/mocks/angular-table.js

'use-strict';
angular.module('angular-table', []);

I added this file to my karma.conf.js file, along with the real 'events' module I wanted to test:

karma.conf.js

...
files = [
    JASMINE,
    JASMINE_ADAPTER,
    'scripts/libs/angular.js',
    'scripts/libs/angular-mocks.js',
    'scripts/events.js', // this is the real module.
    'scripts/mocks/*.js', //loads all custom mocks.
    'scripts/specs/*.spec.js' // loads my spec file.
] 
...

Finally in my spec file, I was able to add both modules by calling them separately in a beforeEach block:

specs/events.spec.js

beforeEach(function(){
    module('angular-table');
    module('events');
});

I got the idea to structure my files in this way from this post

edited May 3, 2015 at 15:52

answered Jul 9, 2013 at 19:38

fscof

1,6032 gold badges18 silver badges28 bronze badges

3 Comments

phillyslick Over a year ago

Aren't you not mocking the 'angular-table' module by calling angular.module? I think you want to call module, as angular-mocks attaches it to the global scope? At either rate, thank you as this helped me get my specs up and running.

Priya Ranjan Singh Over a year ago

"I was able to easily mock the 'angular-table' module by creating a new file in my test folder called 'mocks/angular-table.js' and added the following code: /mocks/angular-table.js "

Lucio Over a year ago

@fscof The link is giving 404.

C.Champagne · Accepted Answer · 2018-02-23 16:09:18Z

3

I recently released ngImprovedTesting that should make mock testing in AngularJS way easier.

In your case just use the following in your Jasmine test:

beforeEach(ModuleBuilder.forModule('events').serviceWithMocks('eventsCtrl').build());

For more information about ngImprovedTesting check out its introductory blog post: http://blog.jdriven.com/2014/07/ng-improved-testing-mock-testing-for-angularjs-made-easy/

edited Feb 23, 2018 at 16:09

C.Champagne

5,5492 gold badges25 silver badges39 bronze badges

answered Jul 29, 2014 at 9:38

Emil van Galen

3041 silver badge2 bronze badges

Collectives™ on Stack Overflow

Mocking AngularJS module dependencies in Jasmine unit tests

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related