javascript - 元素上的 Angular 模拟方法

Question

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

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

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

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

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

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

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

Answer 1

jQuery(最终是 jqLit​​e)元素的常见问题是每个元素都是一个包装 DOM 元素的新对象，

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

当其中一个被修改时(在这种情况下，该属性被模拟函数替换)，它不会影响另一个。对于所有受影响的元素，应该模拟它们的原型(prototype):

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