如何触发AngularJS指令测试的变化

发布时间：2020-12-17 08:07:12 所属栏目：安全来源：网络整理

导读：我有以下AngularJS指令创建一个输入元素。输入具有运行doIt()函数的ng-change属性。在我的指令单元测试中，我想检查当用户更改输入时是否调用doIt函数。但测试没有通过。虽然它在手动测试时在浏览器中工作。指示： ...template: "input ng-model='myModel'

我有以下AngularJS指令创建一个输入元素。输入具有运行doIt()函数的ng-change属性。在我的指令单元测试中，我想检查当用户更改输入时是否调用doIt函数。但测试没有通过。虽然它在手动测试时在浏览器中工作。

指示：

...
template: "<input ng-model='myModel' ng-change='doIt()' type='text'>"

测试：

el.find('input').trigger('change') // Dos not trigger ng-change

现场演示(ng-change)：http://plnkr.co/edit/0yaUP6IQk7EIneRmphbW?p=preview

现在，如果我手动绑定更改事件而不是使用ng-change属性，则测试通过。

template: "<input ng-model='myModel' type='text'>",link: function(scope,element,attrs) {
  element.bind('change',function(event) {
    scope.doIt();
  });
}

现场演示(手动装订)：http://plnkr.co/edit/dizuRaTFn4Ay1t41jL1K?p=preview

有没有办法使用变更并使其可测试？谢谢。

从您的解释性评论：

All I want to do in directive’s test is to check that doIt is called when user changes the input.

ng变化表示的表达是否正确评估是否真的是ngModel指令的责任，所以我不知道我会用这种方式进行测试;相反，我相信，ngModel和ngChange指令已被正确实现和测试，以调用指定的函数，只是测试调用函数本身以正确的方式影响指令。可以使用端对端或集成测试来处理完整的场景。

也就是说，您可以抓住驱动ngModel更改回调的ngModelController实例，并自行设置视图值：

it('trigger doIt',function() {
  var ngModelController = el.find('input').controller('ngModel');
  ngModelController.$setViewValue('test');
  expect($scope.youDidIt).toBe(true);
});

正如我所说，尽管如此，我觉得这对于ngModel的责任来说太过分了，打破了用自然可组合的指令打黑盒子。

示例：http://plnkr.co/edit/BaWpxLuMh3HvivPUbrsd?p=preview

[更新]

在查看AngularJS源码后，我发现以下内容也起作用：

it('trigger doIt',function() {
  el.find('input').trigger('input');
  expect($scope.youDidIt).toBe(true);
});

在某些浏览器中，该事件看起来是不同的;输入似乎适用于Chrome。

示例：http://plnkr.co/edit/rbZ5OnBtKMzdpmPkmn2B?p=preview

这是relevant AngularJS code，它使用$ sniffer服务来确定要触发的事件：

changeInputValueTo = function(value) {
  inputElm.val(value);
  browserTrigger(inputElm,$sniffer.hasEvent('input') ? 'input' : 'change');
};

即使这样，我不知道我会用这种方式测试一个指令。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!