Testing stateProvider state if configured in config in angularJS returns null on $state

Question

I have a config like this one:

angular.module('myModule', ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
  $stateProvider
    .state('app.home', {
      abstract: true,
      url: '/home',
      template: '<div>Foo Bar</div>'
    });
}]);

and a unit test using jasmine like this:

'use strict';

describe('Module: myModule', function() {
  var $rootScope, $state;

  beforeEach(module('ui.router'));
  beforeEach(module('myModule'));

  beforeEach(inject(function(_$rootScope_, _$state_) {
    $state = _$state_;
    $rootScope = _$rootScope_;
  }));

  it('must have a route state for home', function(){
    console.log($state.get('app.home')); // this returns null
  });
});

However I could not get the state in the config to show up on the array returned by $state.get()

I also checked and the file containing the config is loaded and it is there. Can anyone say what I am doing wrong? Basically I just want to test if the states I am expecting are existing in the config of "myModule"

Answer 1

First, you don't need this

beforeEach(module('ui.router'));

as your module lists it as a dependency already.

My guess is, you aren't bringing in the parent app state so your app.home state will not be created.

Say your app state is defined in myAppModule, simply change your module line to

beforeEach(module('myAppModule', 'myModule'));

---

If you don't want to include the module with the app state, include a config function before your module that creates a fake parent state. For this, you will need to include ui.router.

beforeEach(module('ui.router', function($stateProvider) {
    $stateProvider.state('app', { abstract: true });
}, 'myModule'));

Alternatively, you could spy on $stateProvider.state and use an expect to ensure it was called with app.home, eg

var $stateProvider;

beforeEach(module('ui.router', function(_$stateProvider_) {
    $stateProvider = _$stateProvider_;
    spyOn($stateProvider, 'state');
}, 'myModule'));

it('must have a route state for home', function() {
    expect($stateProvider.state).toHaveBeenCalledWith('app.home', jasmine.any(Object));
});