Search code examples
javascriptunit-testingqunit

QUnit Javascript unit tests shows assertion number not test number

Fingers-crossed this is a config option that I've missed, but I've checked the docs and can't find any info on it...

I want QUnit to display the number of passed/failed tests rather than the number of passed/failed assertions.

Currently it displays:

13 assertions of 38 passed, 25 failed.

As seen here: Qunit

It's annoying as I want to keep track of how many tests I've written, and on the QUnit website it actually shows what I want: enter image description here

From the change log it looks like this was changed in 1.11.0. Does anyone have any suggestions as to how to change it back without hacking the source code (or with hacking the source code - although this could probably be raised and added through github...)?

Solution

  • The short answer: It's not possible. In fact, it appears that it has never been possible.

    From the changelog:

    Rename tests to assertions in summary. Fixes #336 - Summary counts assertions but mentions 'tests'.

    QUnit has always counted and output the number of assertions that passed/failed. However, in the passed it said "tests" where it should have said "assertions". If you re-read the changelog, it says it was changed from "tests" to "assertions" as a fix, because this is what it always should have said.

    As for your follow up question, is it possible to hack the source code?

    Looking through the code, lines 1269 to 1279 seem to be where the output is generated:

    html = [
    "Tests completed in ",
    runtime,
    " milliseconds.<br/>",
    "<span class='passed'>",
    passed,
    "</span> assertions of <span class='total'>",
    config.stats.all,
    "</span> passed, <span class='failed'>",
    config.stats.bad,
    "</span> failed."

    So it's store the number of passes/fails in the config.stats object. Unfortunately, from what I've read in the source code, it only stores stats relating to assertions, not tests. Presumably it would be possible to add some sort of hack code that could store failed tests also, however it would require a great knowledge of the existing source code, so I wouldn't recommend doing this.

    Your best bet would be, as you said, suggesting it on GitHub, however I don't know what your chances are of this being added in in the near future (if it all), seeing as the number of assertions that failed is (in general) much more valuable than the number of tests.

    UPDATE: I had a trawl through the source code some more, cos I was curious about how hard it would be. Although I wasn't able to figure out any easy way to add this capability to the code, I did think of an alternative solution to your problem.

    QUnit has a method called QUnit.testDone() which, if you implement it, will be called automatically after each test has finished. You could use this to manually increment a test counter after each test, and output to Chrome's developer console. Here is an example of how you could do this:

    <!DOCTYPE html>
<html>
<head>
    <title>Track Number of Tests Manually</title>
    <link type="text/css" rel="stylesheet" href="qunit-1.12.0.css" />
    <script type="text/javascript" src="qunit-1.12.0.js"></script>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
    <div id="qunit"></div>
    <div id="qunit-fixture">
        <input type="text" name="aninput" id="aninput" />
    </div>
    <script>
        // Track number of tests run and failed.
        var numTests = 0;
        var failedTests = 0;

        // Outputs the number of failed tests so far. If the console is not cleared each time, then the last message will be the final count.
        QUnit.testDone(function( details ) {
            // If any previous messages in console, clear them
            console.clear();
            // Increment number of tests run
            numTests++;
            // If any assertions have failed, increment number of failed tests
            if (details.failed > 0)
                failedTests++;
            var passed = numTests - failedTests;
            // Output to console.
            console.log( 'Passed Tests: '+passed+'\nFailed Tests: '+failedTests+'\nTotal Tests: '+numTests);
        });

        test( "a test", function() {
            equal( $('#aninput').val(), '', 'Initially empty');
            $('#aninput').val('sometext');
            equal( $('#aninput').val(), 'sometext', 'Input text now "sometext"');
        });

        test( "another test", function() {
            equal( $('#aninput').val(), '', 'Initially empty');
            $('#aninput').val('sometext');
            equal( $('#aninput').val(), 'some text', 'Input text now "some text"'); // Expect to fail, as there is no space in the input
            $('#aninput').val(' ');
            equal( $('#aninput').val(), '', 'Input should now be empty'); // Expect to fail as was actually set to whitespace, not empty
        });
    </script>

</body>
</html>

    I have tested this code and it seems to do the trick. I know it's not exactly the solution you're after, but it does give you the required information without having to attempt to hack the QUnit source code! :)