Hide successful QUnit tests

I am now rolling with QUnit as TDD framework for my JavaScript development. It’s not as sophisticated as say NUnit for .NET or SimpleTest for PHP, but it’s reaaally easy to get started with.

However, a strange way of designing the test result presentation is that QUnit lists all tests, not just the ones that fails. With just a few executing tests, the resulting page looks like this:

QUnit - Full test result presentation

By default, QUnit lists all executing tests in a test suite

The test suite above only includes 14 tests – imagine having maybe a hundred or so! In my opinion, this way of presenting the test result hides the essence of testing – to discover tests that fail.

I understand that one must be able to confirm that all tests are executed, but the number of executed tests are listed in the result footer. So, I would prefer to only list the tests that fail.

If anyone knows a built-in way of achieving this, please let me know. I chose the following approach (applies to jQuery 1.4.2 – let me know if this is out-of date):

  1. Open the qunit.js file
  2. Find the block that begins with the line:
    var li = document.createElement("li");
  3. Wrap the entire block within:
    if (bad) { ... }

This will make QUnit only append the list element if the test is “bad”, that is if it failed. The result will look like this:

After fiddling with the code, QUnit only lists failing tests

Maybe there is a built-in way of making QUnit behave like this. If you know how, please leave a comment.

Advertisements