Question

I have the following set up in QUnit:

/* Dozen or so previous tests here */

test("Test some markup generation", function () {

    $('#qunit-fixture').plugin(); // jQuery plugin: Generates a table

    var rows = $('#qunit-fixture table tbody tr');
    count = rows.length;  // Count the rows
    console.log(count);

    equal(count, "96", "Expect the number of rows to be 96");
});

When it runs, or when I refresh the browser it alternately fails this test showing count = 0, or passes this and fails all the previous tests. There are no global variables defined outside the tests. If I set count to 96 by hand everything passes fine, or if I remove this test, or all the previous tests, everything also passes. I am wondering if anyone has run into this behavior? I’ve used QUnit quite a bit and have not encountered this before.

Answer 1

Ok, I figured out what the issue and it has to do with using their provided fixture element. The QUnit documentation states that:

The #qunit-fixture element can be used to provide and manipulate test markup, and will be automatically reset after each test

By reset they mean it will just be “emptied”, not have any additional properties that you may have added to it be reset. Looking at my questions you can see I was applying the plugin directly to the fixture and all of the added properties were hanging around for the next test causing these issues.

Before each test I now insert a new element into the fixture and target that with the plugin:

$('#qunit-fixture').append('<div id="target"></div>');
$('#target').plugin();

This added element then get cleared correctly after each test. While this seems obvious now it was not immediately clear to me from the documentation.

UPDATE:

Change submitted and pulled into QUnit on 14/2/2012: https://github.com/jquery/qunit/pull/195

Thanks, Jörn