statechangestart 的测试用例

Question

任何人都可以帮助我解决以下情况，如何使用 karma angular 来实现这一点。 $stateChangeSuccess 很容易，没有任何回调函数。但是 stateChangeStart 很难找到。

        $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState) {
            if (fromState.name.match('test.abc') && ($scope.validate())) {
                event.preventDefault();                    
            }
        });

正在尝试类似下面的操作，但我不确定，我在正确的道路上

    var fromState = {name: 'test.abc'};
    var toState = {name: 'test.xyz'};

    scope.$on('$stateChangeStart');

    expect(scope.$on).toHaveBeenCalled();
    expect(fromState.name)toBe('test.abc');
       /* expect event prevent default? */

Answer 1

如果它在控制器内部，那么你可以简单地 spyOn($scope, '$on');

这是一个简单的例子：

angular.module('app', []);

angular
  .module('app')
  .controller('Example', function ($scope) {
    $scope.$on('event', (event, args) => {
      $scope.args = args;
      event.stopPropagation();
    });
  });

describe('Example Controller', () => {
  let Example;
  let $scope;
  
  beforeEach(module('app'));
  
  beforeEach(inject(($controller, $rootScope) => {
    $scope = $rootScope.$new();
    spyOn($scope, '$on');
    $scope.$on.and.callThrough();
    
    Example = $controller('Example', {
      $scope
    });
  }));
  
  it('sets args on $scope when event is fired', () => {
    const args = 'args';
    
    $scope.$emit('event', args);
    
    expect($scope.args).toBe('args');
  });
  
  it('event callback stops propagation', () => {
    const [, callback] = $scope.$on.calls.argsFor(0);
    const event = jasmine.createSpyObj('event', ['stopPropagation']);
    
    callback(event);
    
    expect(event.stopPropagation).toHaveBeenCalled();
  });
});

<script src='https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script src='https://code.angularjs.org/1.5.5/angular-mocks.js'></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css'>

statechangestart 的测试用例

Test case for statechangestart

state

unit-testing

angularjs

karma-jasmine