Search code examples
htmlcssqunit

Test results are not visible in QUnit although they run

I have a lot of QUnit tests like this:

test('some test.', function() {
    equal(1, 1, "dummy");
});

I also have a .html file which contains the test suite:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-store" />
<title>QUnit Test Suite</title>
<link rel="stylesheet"
    href="http://code.jquery.com/qunit/qunit-1.16.0.css" type="text/css"
    media="screen">
    <script data-main="MainTest" src="lib/require.js"></script>
</head>
<body>  
    <div id="qunit"></div>
    <div id="dialog"></div>     
    <div id="test-content"></div>
</body>
</html>

My problem is that when I open this .html file (testsuite.qunit.html) I sometimes don't see any of the results just an empty page. Sometimes I see some results. All the tests are run I can see it on the top:

Tests completed in 64 milliseconds. 161 assertions of 161 passed, 0 failed.

I have checked the html generated by qunit and it seems that QUnit fails to add the pass css class to some of the tests. This is a visible one:

<li id="qunit-test-output-ca229798" class="pass">
<strong><span class="test-name">decorated web service call test</span>
<b class="counts">(1)</b></strong>
<a href="test.js">Rerun</a><span class="runtime">5082 ms</span>
<ol class="qunit-assert-list qunit-collapsed"></ol></li>

And this is a non-visible one:

<li id="qunit-test-output-ca229798">
<strong><span class="test-name">decorated web service call test</span>
<b class="counts">(1)</b></strong>
<a href="test2.js">Rerun</a><span class="runtime">5082 ms</span>
<ol class="qunit-assert-list qunit-collapsed"></ol></li>

What could be the problem?

Solution

  • Most of the time that I see this it is for one of two reasons:

    (1) an error in the source code (which seems unlikely since sometimes the tests pass fine for you), or

    (2) some of the source code is asynchronous and thus a race condition might ensue.

    If you have any asynchronous code (ajax calls, setTimeout, setInterval, etc), then you need to use the QUnit async control mechanisms:

    QUnit.test('a test with async code', function(assert) {
    var done = assert.async();  // tell QUnit you plan to do async stuff

    callSomeAsyncFunction(function() {
        // this is the callback for the async action

        // all of your assertions here

        done(); // tell QUnit you're done with async actions
    });
});

    I would recommend that you narrow down what tests are causing the problem by commenting out blocks of tests and eventually getting down to a single test that sometimes passes and sometimes stalls.