使用 qunit 和 sinon 测试 jquery click答案

【问题标题】：Using qunit and sinon to test a jquery click使用 qunit 和 sinon 测试 jquery click
【发布时间】：2021-01-07 14:31:36
【问题描述】：

我的代码中有以下方法：

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

但是我得到一个失败的测试，说“预期是真的，但结果是假的” - 谁能指出我哪里出错了？

【问题讨论】：

标签： javascript unit-testing sinon qunit

【解决方案1】：

嗯...看起来你调用setUpSignUpEvents之前你将按钮添加到DOM，所以点击处理程序永远不会被注册。您也许只能重新排序：

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();
});

【讨论】：