如何更改qunit主题/布局

Question

我最近开始使用QUnit来测试网页的客户端。

我对QUnit附带的默认布局有两个问题。 （见图）

1：所有失败的测试都默认用完。我希望它们默认崩溃。

2：我希望有一个下拉列表按模块过滤测试。

以下网页上的主题没有这些问题。 http://bryce.io/qunit-theme-burce/test/

以下是“安装”此主题的页面。 https://github.com/brycedorn/qunit-theme-burce

然而，我无法让它发挥作用。可能是因为我不了解安装的第一步。但做第二个和第三个很容易。

我确实在网页中链接了主题css，并删除了基本的css，但这不起作用 ＆LT; link rel =“stylesheet”href =“/ content / Test / qunit-theme-burce.css”/＆gt;
当我使用这个样式表时，＆lt; div id =“qunit-fixture”＆gt;没有隐藏，测试也没有显示。

如何通过基本布局解决我的两个问题？

Answer 1

要安装您指向的QUnit自定义主题，请在测试页上放置以下标记：

<!-- 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>

但在您的情况下，不需要此自定义主题。

要隐藏失败的测试，您可以使用QUnit.testDone方法：

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

此外，如果将QUnit版本升级到最新版本（1.18.0），则可以解决第二个问题。在此版本中，模块过滤器可以“开箱即用”。