监视由jQuery调用的函数“更改”与RequireJS和Jasmine

Spying a function called by jQuery 'change' with RequireJS and Jasmine

本文关键字：RequireJS Jasmine 更改 jQuery 调用 函数 监视      更新时间：2023-09-26

我对RequireJS和Jasmine都很陌生，所以我在设置一些基本测试时遇到了一些麻烦。我找到了很多关于如何将两者设置在一起并使其工作的信息。但是我有一个有趣的问题，我似乎无法解决。

不幸的是，我不确定解决问题的最佳方式，所以这里有一些代码：

主.js：

require(['jquery', 'manipulate'], function($, Manipulate) {
  var manipulate = new Manipulate;
  $(document).on('change', 'td input', function() {
    manipulate.pushChange();
  });
});

操作.js：

define(function() {
  function Manipulate() {
    //
  };
  Manipulate.prototype.pushChange = function() {
    return true;
  };
  return Manipulate;
});

操作规范.js：

describe('Manipulate', function() {
  var manipulate;
  beforeEach(function() {
    var flag = false;
    // Load fixtures into the HTML
    loadFixtures('ManipulateFixture.html');
    // Require the manipulate.js file
    require(['jquery', 'manipulate', 'main'], function(jQuery, Manipulate) {
      manipulate = new Manipulate;
      // Define any spies
      spyOn(manipulate, 'pushChange');
      flag = true;
    });
    // Wait for manipulate.js to load before running tests
    waitsFor(function() {
      return flag;
    });
  });
  it('should call pushChange after changing a cell', function() {
    $('td input').eq(0).trigger('change');
    expect(manipulate.pushChange).toHaveBeenCalled();
  });
});

（删除了一些额外的代码）

如果我console.log Manipulate.pushChange里面，它正在燃烧。问题是，正在监视的Manipulate对象与在main.js文件中作为参数传递的对象不同。因此，在我的it()块中添加manipulate.pushChange使测试通过。

我找到了 Backbone .js 应用程序的答案，它调用了 delegateEvents .我不确定vanilla Javascript，jQuery等是否有类似的解决方案，但我找不到。

有没有更好的方法来构建我的文件，可能会将我的 jQuery 事件处理程序放在操作模块中？或者只是在两个对象之间"复制"事件的一种方式？在这种情况下，我什至不相信使用createSpy会对我有多大帮助。

你的代码存在一些问题，使得测试变得非常困难。首先，如果你想模拟依赖项，你不能像你尝试的方式那样测试 requiereJs 模块。看看这个SO的一些解决方案。

另一个问题是你中继jquery和DOM事件。所以大多数时候我不会尝试用夹具来重建 DOM。相反，我监视事件绑定到的jquery对象，并自己调用该函数。所以在你的代码中

$(document).on('change', 'td input', function() {
  manipulate.pushChange();
});

你可以像这样监视$

var documentSpy ={on:jasmine.createSpy()};
spyOn(window, "$").andReturn(event); // in a requireJs module mock it like in the SO I've mention above

现在，当您的代码绑定事件时，它只会调用间谍，您可以检查事件是否正确绑定：

var callback = documentSpy.on.mostRecentCall.args[2]
expect(documentSpy.on).toHasBeenCalledWith('change', 'td input', callback);
// fire the callback
callback();
expect(manipulate.pushChange).toHaveBeenCalled();
相关文章：