QUnit output: visual separation of modules

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)

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.

Justin Love's solution didn't work for me, but you can insert the following JQuery Javascript after your test to achieve the same desired result:

QUnit.done(function( details )
{
    $("#qunit-tests > li ") //the test rows
    .each(function(index, Element){
        var moduleName = $(".module-name", this).text();
        if (moduleName !== $(".module-name", this.previousSibling).text())
        {
            $(this).before( //prepend header to it
                function(){
                    return "<h3 class='module-header'>" + moduleName + "</h3>"
                ;})
        }
    });
});