带有 Karma 和 Angular 的 Jasmine 模拟链式方法

Question

我想嘲笑angular.element。我想确保 angular.element 被调用了一定次数并且 anguler.element.attr 也被调用了。

我有以下代码：

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 is not an object (evaluating 'angular.element("#thing-" + things[i].id).attr')

我也希望我的测试有类似的内容：

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

Answer 1

尝试添加此代码：

var spy;

beforeEach(function() {
    spy = spyOn(angular, 'element').....
});

afterEach(function() {
    spy.andCallThrough();
});

您可以在以下位置找到更多信息：Jasmin docs

Answer 2

应该侦测或模拟链接方法的方式完全取决于它们在侦测对象上的定义方式。

在 Angular jqLite 的情况下，或者在您的情况下，jQuery（两者都通过 angular.element 门面透明地提供服务）链式方法在构造函数原型上定义，它是公开的工厂功能为 angular.element.prototype 或 jQuery.prototype（加载 jQuery 时 angular.element === jQuery）。

为了同时监视 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 在这种情况下很重要，否则整个链应该手动存根。

带有 Karma 和 Angular 的 Jasmine 模拟链式方法

Jasmine mock chained methods with Karma and Angular

javascript

jquery

unit-testing

angularjs

karma-jasmine