使用qunit和sinon测试jQuery单击

问题描述

我的代码中具有以下方法：

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

但是我的测试失败了，说“预期为真，但为假”-有人可以指出我要去哪里了吗？

解决方法

嗯...就像您在将按钮添加到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();
});