jquery - qUnit:在 qunit-fixture 之外编写的 Twitter Bootstrap 模式

Question

我在为使用 Twitter Bootstrap 的项目编写 qUnit 测试时遇到了困难。当生成模态时，它将覆盖层放在 qunit-fixture 之外，因此当运行下一个测试时，覆盖层不会被删除。有人遇到过这个问题吗？

点击事件(链接到jsfiddle需要一些内联代码，请查看fiddle):

$("#qunit-fixture").on('click', '#click', function () {
    $('#error').modal('show');
});

示例:http://jsfiddle.net/Gbyza/4/

注意到每次测试屏幕如何变暗？这是每次连续测试都不会重置的覆盖层。

另一个问题是

test("Error Dialog ", function () {
    $("#click").click();
    equal($("#error").is(":visible "), true, "Error dialog spawned.")
});

失败了。不确定为什么对话框没有出现。任何见解将不胜感激。

Answer 1

Bootstrap 在正文末尾添加一个 div 来管理背景。它在测试执行后仍然存在，因为它位于 #qunit-fixture div 之外。

<div class="modal-backdrop fade in"></div>

除了使用适当的选项删除背景之外，我没有看到任何其他解决方案:

$('#error').modal({
    backdrop: false
});

或者:

data-backdrop="false"

我认为这没什么大不了的，因为您可能想测试您的代码而不是 Bootstrap 的模态效果。

参见: http://jsfiddle.net/Jv6cM/