qUnit:在qunit-fixture之外编写Twitter Bootstrap模态 [英] qUnit: Twitter Bootstrap modals writing outside of qunit-fixture

问题描述

我很难为使用Twitter的Bootstrap的项目编写qUnit测试.生成模态时，它会将叠加层放在qunit-fixture的外面，因此当运行下一个测试时，不会删除叠加层.有人遇到这个问题吗?

I'm having a difficult time writing qUnit tests for a project that uses Twitter's Bootstrap. When a modal is spawned it is putting the overlay outside of the qunit-fixture, so when the next test is run the overlay is not removed. Anyone run into this problem?

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

Click event (linking to a jsfiddle requires some inline code, please look at the fiddle):

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

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

注意每次测试时屏幕如何变暗?这是叠加层，不会在每次后续测试时都重置.

Notice how the screen gets darker with each test? This is the overlay not being reset with each successive test.

另一个问题是

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

失败.不知道为什么对话框没有出现.任何见识将不胜感激.

is failing. Not sure why the dialog isn't appearing. Any insight would be appreciated.

推荐答案

Bootstrap在主体的末尾添加一个div来管理背景.在执行测试后，它仍然存在，因为它在#qunit-fixture div之外.

Bootstrap adds a div at the end of the body to manage the backdrop. It remains after the test execution because it is outside the #qunit-fixture div.

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

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

I don't see any other solution than removing the backdrop using the appropriate option :

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

或:

data-backdrop="false"

我认为这没什么大不了的，因为您可能想测试代码而不是引导程序的模态效果.

I don't think it should be a big deal, because you probably want to test your code and not bootstrap's modals effects.

请参阅: http://jsfiddle.net/Jv6cM/

这篇关于qUnit:在qunit-fixture之外编写Twitter Bootstrap模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！