监视点击事件调用的函数

Question

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

规格：

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

尝试

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

而不是

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

Answer 2

问题是由于这一行：

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

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

运行 $('#testBtn').on('click', testMethod); 在你设置了间谍之后。例如，您可以将它放在 before 挂钩中。
将 $('#testBtn').on('click', testMethod); 更改为 $('#testBtn').on('click', function () { testMethod(); });。每次处理点击事件时，匿名函数都会获取对 testMethod 的新引用。所以一旦你设置它，它就会获取对间谍的引用。

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

监视点击事件调用的函数

Spy on function that's called on click event

javascript

mocha.js

sinon

chai

karma-mocha