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) QUnitLayout

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 Step to install

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?

With @Sergey's answer, I found that it wasn't working because the content I had in the file "qunit-theme-burce.css" was complety wrong. It wasn't css at all. I redownloaded the right file. — Maxime

Sergey Sergey · Accepted Answer · 2015-05-08T21:06:38

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".

How to change qunit theme / layout

1 Answers