如何更改qunit主題/佈局

我最近開始使用QUnit來測試網頁的客戶端。如何更改qunit主題/佈局

我有QUnit附帶的默認佈局的兩個問題。（見圖） QUnitLayout

1：所有失敗的測試都是默認使用的。我希望他們在默認情況下被摺疊。

2：我想有一個下拉按模塊過濾測試。

以下網頁上的主題沒有這些問題。 http://bryce.io/qunit-theme-burce/test/

這裏是「安裝」這個主題的頁面。 https://github.com/brycedorn/qunit-theme-burce Step to install

但是，我不能得到它的工作。可能是因爲我不瞭解安裝的第一步。但做第二和第三個很容易。

我在網頁中鏈接主題CSS，並刪除了基本的一個，但是這是行不通的。
< link rel =「stylesheet」href =「/ content/Test/qunit-theme-burce.css」/>
當我使用此樣式表時，< div id =「qunit-fixture」>未隱藏並不顯示測試。

我怎樣才能得到這個工作，以解決我的兩個問題與基本佈局？

來源

2015-05-08 AXMIM

用@謝爾蓋的答案，我發現它不工作，因爲我在文件「qunit-theme-burce.css」中的內容是完全錯誤的。這根本不是CSS。我重新下載了正確的文件。 – AXMIM

要安裝你所指出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）解決您的第二個問題。在這個版本中，模塊過濾器「開箱即用」。

來源

2015-05-08 21:06:38 Sergey

QUnit.testDone做了訣竅以收回所有失敗的測試。我使用了$（'。fail .qunit-assert-list'）。addClass（'qunit-collapsed'）; – AXMIM

也謝謝指出我的QUnit版本還沒有及時更新。更新我的版本確實添加了缺少的「模塊過濾器」。 – AXMIM

如何更改qunit主題/佈局

回答

相關問題