如何更改 qunit 主题/布局

Question

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

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

1 : 默认消耗所有失败的测试。我希望它们默认折叠。

2 : 我想要一个下拉菜单来按模块过滤测试。

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

这里是“安装”这个主题的页面。 https://github.com/brycedorn/qunit-theme-burce

但是，我无法让它工作。可能是因为我不明白安装的第一步。但是做第二个和第三个很容易。

我确实在网页中链接了主题 css，并删除了基础 css，但这不起作用。

当我使用这个样式表时， 没有隐藏，也没有显示测试。

我怎样才能让它工作以解决我的两个基本布局问题？

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)，您可以解决第二个问题。在这个版本中，模块过滤器“开箱即用”。