Question

我想做什么：我们正在为使用jQuery的现有Javascript代码库编写一些测试。对于测试，我们不希望有实际的HTML元素（HTML fixture）。如果我们有一个不与HTML相关的jQuery模拟对象，我们更喜欢它。

我的出发点：我在这里找到的最有希望的方法：

http://eclipsesource.com/blogs/2014/03/27/mocks-in-jasmine-tests/

这会创建一个辅助方法，通过遍历对象的函数并为每个函数创建间谍来创建模拟：

window.mock = function (constr, name) {
  var keys = [];
  for (var key in constr.prototype)
    keys.push( key );
  return keys.length > 0 ? jasmine.createSpyObj( name || "mock", keys ) : {};
};

然后，如果我正确理解他，他会像这样使用它（在他的博客文章中改编的例子）：

var el = mock($);
el('.some-not-existing-class').css('background', 'red');
expect(el.css).toHaveBeenCalledWith('background', 'red');

但是，这不起作用，因为el是object而不是function。

我解决此问题的方法：我重构了他的mock函数，以说明constr是function的情况：

mock (constr, name) {
  var keys = [];
  for (var key in constr.prototype)
    keys.push(key);
  var result = keys.length > 0 ? jasmine.createSpyObj(name || "mock", keys) : {};

  // make sure that if constr is a function (like in the case of jQuery), the mock is too
  if (typeof constr === 'function') {
    var result2 = result;
    result = jasmine.createSpy(name || 'mock-fn');
    for (var key in result2)
      result[key] = result2[key];
  }
  return result;
}

但是，测试中的第二行会引发Cannot read property css of undefined错误：

var el = mock($);
el('.some-not-existing-class').css('background', 'red');
expect(el.css).toHaveBeenCalledWith('background', 'red');

其他想法：我也尝试将间谍对象合并到jQuery中，但这也无济于事。

有什么想法吗？我希望我们不是唯一没有HTML固定装置的人。

Answer 1

您可以使用sinon.js stubs，而不是滚动自己的帮助方法。

stub = sinon.stub(jQuery.fn, 'css');

// invoke code which calls the stubbed function

expect(stub.calledWith({ 'background': 'red' })).toBe(true);
stub.restore();

Answer 2

找到它。当我的mock函数版本设置为在调用jQuery函数时返回jQuery对象时，测试工作正常：

mock (constr, name) {
  var keys = [];
  for (var key in constr.prototype)
    keys.push(key);
  var result = keys.length > 0 ? jasmine.createSpyObj(name || "mock", keys) : {};

  // make sure that if constr is a function (like in the case of jQuery), the mock is too
  if (typeof constr === 'function') {
    var result2 = result;
    result = jasmine.createSpy(name || 'mock-fn');
    result.and.returnValue(result);
    for (var key in result2)
      result[key] = result2[key];
  }
  return result;
}

如何使用Jasmine模拟jQuery

2 个答案: