How to change qunit theme / layout

Question

I recently started using QUnit to test client side of a web page.

I have two issues with the default layout that come with QUnit. (See image)

1 : All failed test are expended by default. I would like them to be collapsed by default.

2 : I would like to have a dropdown to filter test by module.

The theme on this following web page doesn't have those issues. http://bryce.io/qunit-theme-burce/test/

Here is the page to "install" this theme. https://github.com/brycedorn/qunit-theme-burce

However, I can't get it to work. Probably because I don't understand the first step of installation. But doing the second and third one was easy.

I do link the theme css in the web page, and removed base one but that doesn't work.
< link rel="stylesheet" href="/content/Test/qunit-theme-burce.css" />
When I use this style sheet, < div id="qunit-fixture" > isn't hidden and test aren't displayed.

How can I get this to work in order to fix my two issues with base layout?

Answer 1

To install QUnit custom theme you pointed, put the following tags on your test page:

<!-- theme styles -->
<link rel="stylesheet" href="path/to/qunit-theme-burce.css">

<!-- qunit source code -->
<script src="path/to/qunit.js"></script>

<script>
    function getPreviousTests( rTestName, rModuleName ) {
     // copy this function from https://github.com/brycedorn/qunit-theme-burce/blob/master/test/test.js
    }
</script>

But in your case this custom theme is not required.

To hide failed test you can use the QUnit.testDone method:

  <script>
    QUnit.testDone(function(args){
        if(args.failed) {
            document.querySelector("#qunit-test-output-" + args.testId + " .qunit-assert-list").className += " qunit-collapsed";
        }
    });
  </script>

Also, you can resolve your second issue if you upgrade your QUnit version to the latest (1.18.0). In this version module filter works "out of the box".