Статические выбранные переменные теряются при выполнении тестов QUnit

Я только начал использовать QUnit и столкнулся с проблемой.

Когда я пишу свои файлы JavaScript, я помещаю все свои переменные вверху страницы следующим образом:

var $input1 = $('#input1');
var $submit = $('#submit');

Затем я подключаю свои события следующим образом:

$submit.on('click', function (e) {
    submit(e);
});

Это прекрасно работает, и это хороший способ не искать все элементы каждый раз, когда мне что-то нужно. (Не засоряйте код $('#submit') везде.)

Однако теперь, когда я запускаю тест с QUnit, элементы в div qunit-fixture заменяются каждый раз, когда запускается новый тест. (Я переписываю некоторый код, который сделал кто-то другой, поэтому были некоторые первоначальные существующие тесты.)

На данный момент тест, написанный другим человеком, добавляет некоторый статический HTML к qunit-fixture div в beforeEach модуля.

И последнее важное замечание: это часть проекта ASP.NET MVC, и мы запускаем тесты с наглостью, поэтому мы не создаем явные HTML-страницы для запуска каждого из тестовых файлов. Мы намерены запускать их в командной строке, особенно в процессе сборки.

Как сделать так, чтобы статические элементы, которые всегда должны быть на странице, оставались такими, когда мы не создаем для них полноценную HTML-страницу?

РЕДАКТИРОВАТЬ Я немного изучил это, и поскольку я добавляю HTML в DOM во время тестового файла, когда я выбираю переменную вверху, эти элементы не включены. страница еще в файле, который я тестирую.


person krillgar    schedule 02.03.2016    source источник


Ответы (1)


Что ж, оказывается, проблема была в наглости. HTML, который они используют для тестирования, просто ужасен. Все скрипты находятся в теге <head>, поэтому они всегда будут обрабатываться до того, как какой-либо HTML-код будет добавлен в DOM. Это можно исправить с помощью настраиваемой системы тестирования.

К сожалению, их документация не дает никакой информации о том, как на самом деле сделать этот документ. В них перечислены элементы, которые необходимо включить для их замены, но (как и во всех файлах JavaScript) их порядок очень важен, и не обязательно в том порядке, в котором они перечислены. Вот то, что я использовал, и оно прекрасно работает.

<html>
    <head>
        <title>Chutzpah tests</title>

        @@ReferencedCSSFiles@@
    </head>
    <body>
        <h1 id="qunit-header">Unit Tests</h1>
        <h2 id="qunit-banner"></h2>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>

        @@TestFrameworkDependencies@@
        @@CodeCoverageDependencies@@
        @@TestHtmlTemplateFiles@@

        @@ReferencedJSFiles@@

        @@TestJSFile@@

        @@AMDTestPath@@
        @@AMDModuleMap@@
    </body>
</html>

Таким образом, вы можете добавить в файл любой статический HTML-код. Тем не менее, есть несколько предостережений по этому поводу:

  • Раздел qunit-fixture ДОЛЖЕН находиться на том же уровне, что и другие элементы QUnit.
  • Раздел qunit-fixture ДОЛЖЕН следовать сразу за разделом qunit-tests.

Но, включив весь CSS в нижней части страницы, он ведет себя так, как вы ожидаете от любых HTML-страниц, которые вы написали бы сами, где они расположены в том же месте.

Кроме того, вам нужно будет добавить следующую информацию в файл chutzpah.json:

"CustomTestHarnessPath": "CustomTestHarness.html",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [
    { "Includes": ["*.js"]}
]

Если вы поместите свою HTML-страницу в то же место, что и chutzpah.js, и ваши тесты, вам также потребуется добавить фильтр Tests, чтобы HTML-страницу не пытались запустить в качестве теста.

person krillgar    schedule 03.03.2016
comment
Сожалеем, что вы столкнулись с некоторыми трудностями. Hutzpah уже давно добавил эти ссылки в голову, и я впервые слышу о проблеме, вызванной этим. Я предполагаю, что это потому, что люди просто оборачивают свой код в вызов $(function(){}), чтобы гарантировать, что это произойдет после того, как документ будет готов. Это работает для вас? Если нет, мы можем изменить порядок, но я должен убедиться, что это не сломает других людей. В идеале я бы не хотел, чтобы вы использовали этот шаблон, поскольку он более хрупок, но я слышал ваши отзывы об отсутствии документации. Спасибо! - person Matthew Manela; 05.03.2016