jquery - 如何使用 Jasmine 模拟 jQuery

Question

我想要做什么:我们正在为大量使用 jQuery 的现有 Javascript 代码库编写一些测试。对于测试，我们不希望有实际的 HTML 元素(HTML 固定装置)。如果我们有一个不执行任何 HTML 相关操作的 jQuery 模拟对象，我们会更喜欢它。

我的起点:我在这里找到的最有前途的方法:

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

这将创建一个辅助方法，该方法通过遍历对象的函数并为每个函数创建一个 spy 来创建模拟:

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 是一个对象，而不是函数。

我解决此问题的方法:我重构了他的 mock 函数，以解决 constr 是一个函数<的情况:

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');

其他想法:我还尝试将 spy 对象合并到 jQuery 中，但这也没有帮助。

有什么想法吗？我希望我们不是唯一在没有 HTML 固定装置的情况下做到这一点的人。

Answer 1

找到了。当我的 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;
}