茉莉模拟链式方法与Karma和Angular [英] Jasmine mock chained methods with Karma and Angular

问题描述

我想模拟 angular.element 。我想确保 angular.element 被调用了一定次数并且 anguler.element.attr 已经也被称为。

I want to mock angular.element. And I want to ensure angular.element has been called a certain amount of times and that anguler.element.attr has been called too.

我有以下代码：

var things = $scope.getThings();

for (var i = 0; i < things.length; i++) {
  if (things[i].type == "xyz") {
    angular.element("#thing-" + things[i].id)
      .attr("foo", things[i].bar);
  };
};

在我的测试中我有：

var things = [
  {
    id: 1,
    type: "xyz",
    bar: 10
  },
  {
    id: 2,
    type: "abc",
    bar: 33
  }
];

spyOn($rootScope, "getThings").and.returnValue(things);
spyOn(angular, "element").and.returnValue();

$rootScope.doThings(); // call controller method

expect(angular.element.calls.count()).toBe(1);

但它出现以下错误：

TypeError：undefined不是对象（评估
'angle.element（＃thing-+ things [i] .id）.attr'）

TypeError: undefined is not an object (evaluating 'angular.element("#thing-" + things[i].id).attr')

我还希望我的测试类似于：

I also want my test to have something like:

expect(angular.element.attr.calls.count()).toBe(1);
expect(angular.element.attr).tohaveBeenCalledWith("foo", things[0].bar);

推荐答案

链式方法应该被窥探或嘲笑的方式完全取决于关于如何在间谍对象上定义它们。

The way chained methods should be spied or mocked solely depends on how they are defined on the spied objects.

对于Angular jqLit​​e，或者在你的情况下，jQuery（两者都通过透明地提供服务） angular.element facade）链接方法在构造函数原型上定义，它在工厂函数中公开为 angular.element.prototype 或 jQuery.prototype （加载jQuery时 angular.element === jQuery ）。

In the case of Angular jqLite, or in your case, jQuery (both are transparently served through angular.element facade) chained methods are defined on constructor prototype, which is exposed on factory function as angular.element.prototype or jQuery.prototype (angular.element === jQuery when jQuery is loaded).

为了监视 angular.element 和 angular.element（...）。attr 它应该是：

spyOn(angular, 'element').and.callThrough();
spyOn(angular.element.prototype, 'attr').and.callThrough();
...
expect(angular.element).toHaveBeenCalled();
expect(angular.element.prototype.attr).toHaveBeenCalled();

callThrough 在这种情况下很重要，否则整个链条应该手动存根。

callThrough is important in this case because otherwise the whole chain should be stubbed manually.

这篇关于茉莉模拟链式方法与Karma和Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！