Unit testing the config phase in AngularJS

Question

I'm trying to learn how to write unit tests for AngularJS. I started at the beginning, with

angular.module( ... ).config( ... )

I wanna test what's inside config. Here's how the relevant portions look like:

angular.module('ogApp', ['ngCookies','ui.router','ogControllers','ogServices','ogDirectives','ogMetricsData'])

.config([
  '$stateProvider', '$locationProvider',
  function ($stateProvider, $locationProvider) {
    $stateProvider.
      state('login', {
        templateUrl: 'connect.html'
      }).state('addViews', {
        templateUrl: 'add-views.html'
      }).state('dashboard', {
        templateUrl: 'dashboard.html'
      });
    $locationProvider.
      html5Mode(true).
      hashPrefix('!');
  }
]);

I'm thinking the easiest way to test this code is to inject mocks for $stateProvider and $locationProvider. Then execute the config phase. After that, assert how $stateProvider and $locationProvider should look like.

If my thinking is right, my problem then is, I have no idea how to inject those mocks into the module and execute its config phase from a test.

Could you show me how to test this code?

@Brune Nope. But there's a new answer below that I haven't looked into. — M.K. Safi, Jul 24 '14 at 13:31

score 11 · Answer 1 · answered Jul 22 '14 at 13:19

Here's how to access your provider for unit testing:

describe('yourProvider', function () {
    var provider;

    // Get the provider
    beforeEach(module('app', function (yourProvider) {
        // This callback is only called during instantiation
        provider = yourProvider;
    });

    // Kick off the above function
    beforeEach(inject(function () {}));

    it('does its thing', function () {
        expect(provider.someMethod()).toEqual('your results');
    });
});

I have not yet figured out a really simple way to inject a mock, but you can easily spy on methods and that's close enough. If you need a mock returned from the dependency provider's .$get() method you can do that with another spy as well. This example illustrates returning a mock and setting up an additional spy.

describe('yourProvider', function () {
    var dependency, mock, provider;

    beforeEach(module('app', function (dependencyProvider) {
        dependency = dependencyProvider;
        mock = jasmine.createSpyObj('dependency', [
            'methodsGoHere'
        ]);
        spyOn(dependency, 'methodName');
        spyOn(dependency, '$get').andReturn(mock);
    }, function (yourProvider) {
        provider = yourProvider;
    });

    beforeEach(inject(function () {}));

    it('does its thing', function () {
        expect(provider.someMethod()).toEqual('your results');
        expect(dependency.methodName).toHaveBeenCalled();
    });

    it('returns the mock from $get', function () {
        expect(dependency.$get).toBe(mock);
    });
});

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

You can use Jasmine's createSpy and createSpyObj to create the mock services, and angular-mocks.js to inject them.

More instructions on injecting mocks here: Injecting a mock into an AngularJS service

In this test I wrote for a directive of mine you can see the following:

Line 9 Include angular-mock from the google cdn
Line 19 & 20 Create a fake rootScope object
Line 21 & 22 Create a fake q service
Line 42 Setup the provider to inject the fakes into the service
Line 48 Instantiate the service that has the fakes (this service is injected into the directive under test)
Line 53 Call the method being tested
Line 55 - 59 Assert on the state of the fakes

edited May 23 '17 at 12:00

Community

1
1

answered Sep 24 '13 at 15:44

Jason

15,915
3
48
72

3

Jason, The last link is broken. Also, my challenge is not in injecting mocked dependencies in general. It's just with injecting mocked **providers** to the **config** block. – M.K. Safi Sep 25 '13 at 11:24
1

MK, were you able to find a solution for the same? I am stuck with same issue and not able to test the directive. – Priyabrat Nanda May 31 '14 at 00:33
@PriyabratNanda Nope. But there's a new answer below that I haven't looked into. – M.K. Safi Jul 24 '14 at 13:30

score -1 · Answer 3 · answered Nov 12 '14 at 16:18

I would create a factory that points to a function... that function is then also called within the config function. That way you can unit test the factory:

angular.module('ogApp', ['ngCookies','ui.router','ogControllers','ogServices','ogDirectives','ogMetricsData']);

// Configuration factory for unit testing
angular.module('ogApp')
.factory('configuration', configuration);

configuration.$inject = ['$stateProvider', '$locationProvider'];

function configuration($stateProvider, $locationProvider) {
  return {
    applyConfig: function () {
      $stateProvider.
        state('login', {
          templateUrl: 'connect.html'
        }).state('addViews', {
          templateUrl: 'add-views.html'
        }).state('dashboard', {
          templateUrl: 'dashboard.html'
        });
      $locationProvider.
        html5Mode(true).
        hashPrefix('!');
    };
}

// Call above configuration function from Angular's config phase
angular.module('ogApp')
.config([
  '$stateProvider', '$locationProvider',
  function ($stateProvider, $locationProvider) {
    var config = configuration($stateProvider, $locationProvider);
    config.applyConfig();
  }
]);

You can unit test the configuration factory and inject mocks just like you would with any other factory.

Unit testing the config phase in AngularJS

3 Answers3