如何更改 qunit 主题/布局

Question

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

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

1 : 默认情况下，所有失败的测试都会被消耗掉。我希望它们默认折叠起来。

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

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

这是 "install" 这个主题的页面。 https://github.com/brycedorn/qunit-theme-burce

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

我在网页中做了 link 主题 css，并删除了基础主题 1，但这不起作用。
< link rel="stylesheet" href="/content/Test/qunit-theme-burce.css" />
当我使用这种样式 sheet 时，< div id="qunit-fixture" > 不会被隐藏并且不会显示测试。

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

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)，则可以解决第二个问题。在此版本中，模块过滤器有效 "out of the box".

如何更改 qunit 主题/布局

How to change qunit theme / layout

html

css

qunit