Angular 元素上的模拟方法

Question

我正在测试一个指令，我在其中使用库 Mobiscroll。我知道 Mobiscroll 也有一个 angular 组件，但我目前使用的是旧版本的 Mobiscroll 库，所以我对此不感兴趣。

问题是，我想测试是否调用了元素上的方法，在本例中为 mobiscroll 方法。我的指令的 link 方法有以下代码：

link: function (scope, element, attr) {
   var datepicker = element.find("input");

   scope.showDate = function () {           
       datepicker.mobiscroll('show');
   };
}

如果 datepicker.mobiscroll('show') 被调用，我想检查我的 Jasmine 测试。但是，我无法在测试中设置对元素的监视，因为元素的查找不会导致指令中 link 方法中使用的对象完全相同。例如，以下内容不起作用：

    targetElement = $compile(elementBluePrint)($scope);
    rootScope.$apply();
    var target = targetElement.find("input");
    spyOn(target, "mobiscroll").and.callThrough();

因为这不起作用，我如何在我的 Angular Jasmine 测试中监视 mobiscroll 方法？

Answer 1

jQuery（最终是 jqLite）元素的常见问题是每个元素都是一个新对象，包装 DOM 元素，

angular.element(element[0]) !== angular.element(element[0])

当其中一个被修改时（在本例中，属性被模拟函数替换），它不会影响另一个。对于所有受影响的元素，应该模拟它们的原型：

spyOn(angular.element.prototype, "mobiscroll").and.callThrough();

Angular 元素上的模拟方法

Angular mock method on element

javascript

unit-testing

jasmine

angularjs

mobiscroll