javascript - 监视点击事件调用的函数

Question

我究竟做错了什么？试图监视在元素单击事件上调用的函数，但测试总是返回 false。

规格：

describe('button', function() {
  before(function() {
    this.spy = sinon.spy(window, 'testMethod');
  });

  it('Should call testMethod', function() {
    $('#testBtn').click();

    expect(this.spy.called).to.equal(true);
  });
});

js：

$('#testBtn').on('click', testMethod);

function testMethod() {
  return true;
}

Answer 1

问题是由于这一行：

$('#testBtn').on('click', testMethod);

testMethod在设置间谍之前获取对的引用。所以它获取对原始函数的引用，而不是 spy，然后你设置一个 spy 并不重要，window.testMethod因为在点击事件上调用的函数总是原始的testMethod。您有几个选项可以让您的测试正常工作：

1. 设置好间谍$('#testBtn').on('click', testMethod); 后运行。例如，你可以把它放在你的before钩子里。

2. 更改$('#testBtn').on('click', testMethod);为$('#testBtn').on('click', function () { testMethod(); });。testMethod每次处理点击事件时，匿名函数都会获取一个新的引用。因此，一旦您设置它，它将获取对间谍的引用。

我已经通过创建一个复制您的代码的测试并使用上面的两个修复来测试我在这里所说的内容。

Answer 2

尝试

expect(this.spy).to.have.been.called();

代替

expect(this.spy.called).to.equal(true);