qUnit: Twitter Bootstrap modals writing outside of qunit-fixture

Question

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?

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

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

Example: 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.

One other problem is

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.

Answer 1

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

or:

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.

See: http://jsfiddle.net/Jv6cM/