AngularJS 单元测试 element.bind

Question

在 data-type-ahead 调用的我的 directive 中，在一系列事件中，我有以下内容：

$scope.test = 5;

// Bind blur event and clear the value of 
element.bind('blur', function(){
    $scope.test = 0;
});

我在单元测试中尝试了多种方法来正确测试此 blur 事件的功能，但我没有成功。我看到提到函数 triggerHandler。这是我在单元测试中的尝试：

//Inject $compile and $rootScope before each test.
beforeEach(inject(function(_$compile_, _$rootScope_) {
    $compile = _$compile_;
    $rootScope = _$rootScope_;

    $scope = $rootScope.$new();
    $scope.test = 5

    html = angular.element('<input type="text" data-type-ahead/>');

    //Apply $scope to directive html.
    directive = $compile(html)($scope);

    //Trigger digest cycle.
    $scope.$digest();
}));

it('should trigger the events bound to the blur event on the directive', function() {
    html.triggerHandler('blur')
    expect($scope.test).toEqual(0);
});

但是这是失败的，因为 $scope.test 保留在 5 上。是否 html 元素不正确，我需要另一个 $digest 或 $apply 用于我之后触发事件？

Answer 1

您有 2 种方法可以让它发挥作用。第一个是为您的方法添加超时 (docs):

// somewhere above add - 
var originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;

// in your beforeEach

beforeEach(function(){
 html.triggerHandler('blur');
  setTimeout(function(){
  done();
 }, 1000);
});

it('should trigger the events bound to the blur event on the directive',  
   function() {
    expect($scope.test).toEqual(0);
   }
);

我认为这是 "less good" 练习（坏或更差这个词对于测试来说太消极了 - 在你测试的那一刻，你已经更好了:)）。一般来说，我尽量避免测试异步，因为最终我的方法（a.k.a. 单位）在内部是同步的。

"better practice"就是这样写改变值的方法：

// in the directive's ctrl
this.changeValue = function changeValue{
  $scope.test = 0;
}

// later on set the watcher
// Bind blur event and clear the value of 
$element.bind('blur', this.changeValue);

然后测试方法本身而不是异步测试它。如果您想看到您的 ctrl/link 方法创建了绑定，您可以测试 $element.bind（通过 spyOn(element, 'bind')）。

AngularJS 单元测试 element.bind

AngularJS Unit Test element.bind

unit-testing

angularjs

angularjs-directive

karma-jasmine