QUnit strange behavior with fixture, tests alternately failing and passing

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.

Inquisitive

I'm not sure if that can be the cause, but it would be at least cleaner to declare count as a local variable here. Maybe it clashes with some other variable used by qunit. – Crumpet

See the source code, which uses a lot of references to count, and check for yourself if there can be a clash: code.jquery.com/jquery-1.7.1.js – Crumpet

There is also a 'feature' which lets you click on one test in the test report, to select only that test for running. Took me once half an hour to find out why it looked like I had only one test ;-) – Crumpet

Is it possible that the table has not yet finished generating? Is there a call back function you can use from the plugin? – Immortelle

@The Nail good suggestion, however even declaring it locally and or naming it something to avoid a conflict doesn't resolve the issue. – Inquisitive

@Immortelle I tried wrapping the contents of each test in a function and then passing that as a callback, only the first one runs, the second test does not execute any assertions. – Inquisitive

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

Inquisitive

The change was submitted and pulled, but was reverted on 2/29/2012. All that means is that the above solution of not attaching plugins and properties to the qunit-fixture itself is still necessary. – Bookrest