QUnit output: visual separation of modules

javascript, qunit, unit-testing

Solution

According to the QUnit documentation, there is a callback on module start (and end), at which point you could modify the DOM.

QUnit.moduleStart = function(name) {
  var tests = document.getElementById("qunit-tests");

  if ( tests ) {    
    var mod = document.createElement("h2");
    mod.innerHTML = name;
    tests.appendChild( mod );
  }
};

Putting stuff in the middle of a list is kind of naughty DOM wise, but it seems to work, at least in FireFox.

Problem

My tests may look like this: ``` module("some module"); test("test A", ...); test("test B", ...); module("other module"); test("test C", ...); test("test D", ...); ``` The output of QUnit will look like this ``` 1. test A (0, 0, 0) 2. test B (0, 0, 0) 3. test C (0, 0, 0) 4. test D (0, 0, 0) ``` Is it possible to make QUnit output the module names? I would love to have: ``` some module 1. test A (0, 0, 0) 2. test B (0, 0, 0) other module 3. test C (0, 0, 0) 4. test D (0, 0, 0) ```

Original source