javascript - 以编程方式单击 AngularJS 指令中单元测试中的 <A>

Question

我有以下 AngularJS 指令工作得很好:

angular.module('kerrb.components').directive('krbMinimalizeSidebar', krbMinimalizeSidebar);

function krbMinimalizeSidebar($timeout) {
return {
  // restricted to use as an attribute only
  restrict: 'A',
  template: '<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
              href="" ng-click="minimalize()"><i class="fa fa-bars"></i></a>',
  controller: ['$scope', '$element', function ($scope, $element) {
    $scope.minimalize = function () {
        // snipped for brevity
    };
  }]
};
}

krbMinimalizeSidebar.$inject = ['$timeout'];

该属性被添加到 SPAN 标记中。我有一个单元测试在检查呈现的 <A> 时通过了。带有特定 CSS 类的标记。但是在另一个测试中，我试图以编程方式单击 <A>所以我可以看看底层的 minimalize()方法被调用。问题是每当我调用点击事件时，它都会显示 undefined is not a function... .我可以确认我引用了 <A>标签...只是想不通为什么 click事件不起作用，因为我正在做与 this working sample 非常相似的事情。

这是我的测试结果:

it('should bind to the scope event', function () {
  var anchor = element.find('a');
  console.log(': ' + anchor.length);
  console.log(': ' + anchor[0].outerHTML);
  console.log(': ' + anchor[0].tagName);

  anchor[0].click();
});

控制台输出:

': 1'
': <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="" ng-click="minimalize()"><i class="fa fa-bars"></i></a>'
': A'

    TypeError: 'undefined' is not a function (evaluating 'anchor[0].click()')

一切看起来都是正确的...为什么 click() 不能作用于 DOM 元素？

Answer 1

Angular 的 element 实现没有 click() 函数。 (请参阅 Angular.element documentation。)相反，您有两个选择:

1. 包括 jQuery。如果加载了 jQuery，Angular 的元素对象将自动替换为包含 click() 函数的 jQuery 实现。但是，如果您的应用程序出于某些其他原因尚未使用 jQuery，这将不是最佳解决方案，因为它会在您要部署的不同配置中测试您的应用程序。

2. 调用 triggerHandler('click') 而不是 click()。 triggerHandler 函数调用指定事件的所有监听器。在你的情况下:

   anchor[0].triggerHandler('点击')

   ...应该调用您的 ng-click 处理程序。