Question

我有这个javascript（jQuery）代码：

DisplayToastMessage: function($alert) {
    $alert.animate({
        "opacity": "1",
        "top": 56
    }, 450);
    setTimeout(function () {
        $alert.fadeOut(300, function () {
            $alert.remove();
        });
    }, 5000);
}

我需要使用QUnit和SinonJS编写单元测试。我尝试过：

function HTMLInjectorAlertHelperTests() {
    return '<div class="modal-inner"><i class="modal-icon icon-check-in-circle"></i><a href="javascript:;" class="modal-close do-close-overlay"><i class="icon-x"></i></a><div class="modal-row"><p><span><strong>Emergency contanct updated</strong></span></p></div></div>';
}

QUnit.test('DisplayToastMessages - testing animation', function (assert) {
        var $fixture = $("#qunit-fixture");
        $fixture.append(HTMLInjectorAlertHelperTests());

        var $modal = $fixture.find(".modal-inner");

        var clock = sinon.useFakeTimers();

        AlertHelper.DisplayToastMessage($modal);

        clock.tick(500);

        assert.ok($modal.css('opacity') == 1, "Opacity is 1");

        clock.restore();
    });

我认为动画已成功通过测试。之后我开始测试setTimeout函数而没有任何成功：

QUnit.test('DisplayToastMessages - testing alert removal', function (assert) {
    var $fixture = $("#qunit-fixture");
    $fixture.append(HTMLInjectorAlertHelperTests());

    var $modal = $fixture.find(".modal-inner");

    var clock = sinon.useFakeTimers();

    AlertHelper.DisplayToastMessage($modal);

    clock.tick(5760);

    assert.ok($modal.css('opacity') == 1, "Opacity is 1");

    clock.restore();
});

有人可以向我解释有什么问题，以及如何测试该元素是否已从DOM中删除？

如何使用Qunit和SinonJS测试动画和settimeout

0 个答案: