使用qunit和sinon测试jquery点击

Question

我的代码中有以下方法：

SignUpEvents = function () {
return {
Init: function () {
$("#payBtn").click(function () {
EventTracker.Track("event", "name", "property"());
});
}
}
}();
$(document).ready(SignUpEvents.Init);

我想测试一下，当单击payBtn时，会调用EventTracker.Track()方法。

这是我的尝试：

QUnit.module("Sign Up Test");
QUnit.test("Sign up test", function (assert) {
setUpSignUpEvents();
var EventTrackerStub = sinon.stub(EventTracker, "Track");
const $fixture = $("#qunit-fixture");
$fixture.append(htmlPayButton());
$("#payBtn").click();
assert.ok(EventTrackerStub.calledOnce, "EventTracker.Track called");
EventTracker.Track.restore();
});
function setUpSignUpEvents() {
SignUpEvents.Init();
}
function htmlPayButton() {
return '<a id="payBtn">60.00</a>';
}

然而，我得到了一个失败的测试，说"预期是真的，但实际上是假的"——有人能指出我错在哪里吗？

Answer 1

嗯。。。看起来您在将按钮添加到DOM之前调用了setUpSignUpEvents，因此单击处理程序永远不会注册。你也许可以重新订购东西：

QUnit.test("Sign up test", function (assert) {
const $fixture = $("#qunit-fixture");
$fixture.append(htmlPayButton());
// NOTE THE SWAP HERE
setUpSignUpEvents();
var EventTrackerStub = sinon.stub(EventTracker, "Track");
$("#payBtn").click();
assert.ok(EventTrackerStub.calledOnce, "EventTracker.Track called");
EventTracker.Track.restore();
});