测试stateProvider状态,如果在angularJS中的config中配置,则在$ state上返回null

时间:2015-05-19 03:36:01

标签: javascript angularjs unit-testing angular-ui-router

我有一个像这样的配置:

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

使用茉莉花进行单位测试:

'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
  });
});

但是我无法让配置中的状态显示在$state.get()

返回的数组上

我还检查了包含配置的文件,它就在那里。 谁能说我做错了什么?基本上我只想测试我期待的状态是否存在于&#34; myModule&#34;

的配置中

1 个答案:

答案 0 :(得分:10)

首先,你不需要这个

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

因为您的模块已将其列为依赖项。

我的猜测是,您没有引入父app州,因此您的app.home州不会被创建。

说明app状态已在myAppModule中定义,只需将您的module行更改为

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

如果您不想包含app状态的模块,请在模块之前添加配置功能,以创建假父状态。为此, 需要包含ui.router

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

或者,您可以监视$stateProvider.state并使用expect确保使用app.home进行调用,例如

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));
});