Как изменить qunit theme/layout

Question

Недавно я начал использовать QUnit для проверки клиентской части веб-страницы.

У меня есть две проблемы с макетом по умолчанию, который поставляется с QUnit. (См. Изображение)

1: Все неудачные тесты расходуются по умолчанию. Я бы хотел, чтобы они рухнули по умолчанию.

2: Я хотел бы иметь выпадающий список для фильтрации теста по модулю.

Тема на этой следующей веб-странице не имеет этих проблем. http://bryce.io/qunit-theme-burce/test/

Вот страница "установить" эту тему. https://github.com/brycedorn/qunit-theme-burce

Однако я не могу заставить его работать. Наверное, потому что я не понимаю первый шаг установки. Но делать второй и третий было легко.

Я связываю тему css на веб-странице и удаляю базовую, но это не работает.
< ссылка отн = "таблица стилей" HREF = "/ содержание/Test/QUnit-тема-burce.css" />
Когда я использую этот стиль листа, < DIV ID = "QUnit-арматуре"> не скрыт и тест не отображаются.

Как я могу заставить это работать, чтобы исправить мои две проблемы с базовым макетом?

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> 

Кроме того, вы можете решить второй вопрос, если вы обновите версию до последней (1.18.0) QUnit. В этом модуле версии модуля работает «из коробки».