angularjs - Angular 测试: How to expect element events to be triggered?

Question

我正在装饰这样的表单:

angular.module('Validation').directive('form', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      var inputs = element[0].querySelectorAll('[name]');

      element.on('submit', function() {
        for (var i = 0; i < inputs.length; i++) {
          angular.element(inputs[i]).triggerHandler('blur');
        }
      });
    }
  };
});

现在，我正在尝试测试该指令:

describe('Directive: form', function() {
  beforeEach(module('Validation'));

  var $rootScope, $compile, scope, form, input, textarea;

  function compileElement(elementHtml) {
    scope = $rootScope.$new();
    form = angular.element(elementHtml);
    input = form.find('input');
    textarea = form.find('textarea');
    $compile(form)(scope);
    scope.$digest();
  }

  beforeEach(inject(function(_$rootScope_, _$compile_) {
    $rootScope = _$rootScope_;
    $compile = _$compile_;

    compileElement('<form><input type="text" name="email"><textarea name="message"></textarea></form>');
  }));

  it('should trigger "blur" on all inputs when submitted', function() {
    spyOn(input, 'trigger');
    form.triggerHandler('submit');
    expect(input.trigger).toHaveBeenCalled(); // Expected spy trigger to have been called.
  });
});

但是，测试失败了。

测试该指令的正确 Angular 方法是什么？

Answer 1

您遇到一些问题:

1) input = form.find('input'); 和 angular.element(inputs[i]); 是 2 个不同 包装器对象包装相同的底层 DOM 对象。

2) 您应该在 triggerHandler 上创建一个 spy 。

3) 您直接使用 DOM，这很难进行单元测试。

一个例子是:angular.element(inputs[i]) 未注入(inject)，因此我们很难在单元测试中伪造它。

确保点1)返回相同的对象。我们可以伪造 angular.element 以返回一个预训练值，即 input = form.find('input');

//Jasmine 1.3: andCallFake
//Jasmine 2.0: and.callFake
angular.element = jasmine.createSpy("angular.element").and.callFake(function(){
         return input; //return the same object created by form.find('input');
});

旁注:由于 form 已经是 angularJs 指令，为了避免与已定义的指令冲突，您应该创建另一个指令并将其应用于 形式。像这样的事情:

<form mycustomdirective></form>

我不确定这是否有必要。因为我们正在监视一个可能在很多地方使用的全局函数(angular.element)，所以我们可能需要保存之前的函数并在测试结束时恢复它。您的完整源代码如下所示:

it('should trigger "blur" on all inputs when submitted', function() {

    var angularElement = angular.element; //save previous function

    angular.element = jasmine.createSpy("angular.element").and.callFake(function(){
         return input;
    });

    spyOn(input, 'triggerHandler');
    form.triggerHandler('submit');

    angular.element = angularElement; //restore
    expect(input.triggerHandler).toHaveBeenCalled(); // Expected spy trigger to have been called.
  });

Running DEMO