angularJS $stateProvider：如何在UI-Router中单元测试不同的视

运行测试时,首先订阅’$stateChangeSuccess’事件,然后导航到该状态.一旦事件触发,请检查toState值以查看它们是否符合您的预期.

您可以运行代码段以查看正在运行的测试.

//write a unit test
describe('state changes',function() {
  beforeEach(module('app'));
  var $rootScope,$state;
  beforeEach(inject(function(_$rootScope_,_$state_) {
    // The injector unwraps the underscores (_) from around the parameter names when matching
    $rootScope = _$rootScope_;
    $state = _$state_;
  }));


  it('loads page 1',function(done) {
    //wait for the state to change,then make sure we changed to the correct state
    $rootScope.$on('$stateChangeSuccess',function(event,toState,toParams,fromState,fromParams) {
      expect(toState.controller).toEqual('Controller1');
      done();
    });
    //navigate to the state
    $state.go('state1');
    //start a digest cycle so ui-router will navigate
    $rootScope.$apply();
  });

  it('loads page 2',fromParams) {
      expect(toState.controller).toEqual('Controller2');
      done();
    });
    //navigate to the state
    $state.go('state2');
    //start a digest cycle so ui-router will navigate
    $rootScope.$apply();
  });

  it('loads page 3',fromParams) {
      expect(toState.controller).toEqual('Controller3');
      done();
    });
    //navigate to the state
    $state.go('state3');
    //start a digest cycle so ui-router will navigate
    $rootScope.$apply();
  });
});

//set up some dummy controllers and some dummy states
angular.module('app',['ui.router']).controller('Controller1',function() {
  this.message = 'Page 1';
}).controller('Controller2',function() {
  this.message = 'Page 2';
}).controller('Controller3',function() {
  this.message = 'Page 3';
}).config(function($stateProvider,$urlRouterProvider) {
  $urlRouterProvider.otherwise("/state1");

  $stateProvider.state('state1',{
    url: "/state1",controller: 'Controller1',controllerAs: 'vm',template: '<h1>{{vm.message}}</h1>'
  }).state('state2',{
    url: "/state2",controller: 'Controller2',template: '<h2>{{vm.message}}</h2>'
  }).state('state3',{
    url: "/state3",controller: 'Controller3',template: '<h3>{{vm.message}}</h3>'
  });
});

h1 {
  color: red;
}
h2 {
  color: blue;
}
h3 {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

<script src="
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<link rel="stylesheet" type="text/css" href="http://jasmine.github.io/2.0/lib/jasmine.css">
<script src="http://jasmine.github.io/2.0/lib/jasmine.js"></script>
<script src="http://jasmine.github.io/2.0/lib/jasmine-html.js"></script>
<script src="http://jasmine.github.io/2.0/lib/boot.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-mocks.js"></script>
<div ng-app="app">
  <a ui-sref="state1">State 1</a>
  <a ui-sref="state2">State 2</a>
  <a ui-sref="state3">State 3</a>
  <div ui-view></div>
</div>