Статьи

Выполнение функционального тестирования с помощью qUnit

Октябрь 30, 2018

Автоматическое тестирование является неотъемлемой частью жизненного цикла приложения (см. Непрерывная интеграция ). В веб-разработке мы обычно тестируем: Back-end (* Unit-тесты), Front-end (валидаторы HTML / CSS, JSLint / JSHint, CSSLint, YSlow и т. Д.) И UI (функциональное тестирование). Модульное тестирование (Back-end, Front-end) — это проверка соответствия всех компонентов приложения требованиям технического проекта. Каждый юнит-тест имитирует среду приложения, в которой выполняется. Функциональные тесты должны определить, нет ли недостатков у приложения как целой экосистемы. Они работают на копии реальной среды приложения и показывают, все ли в порядке с точки зрения пользователя. Вы можете увидеть это как автоматизацию QA-инженера, где это возможно. Для функционального тестирования широко используются такие фреймворки, как Selenium ,Ветряная мельница , Twill , BusterJS . Хотя, если вы используете qUnit для внешнего модульного тестирования, вам может понравиться идея использовать тот же инструмент для функционального тестирования . jQuery предоставляет невероятный API для манипулирования DOM. Это может быть замечательный инструмент для моделирования поведения пользователей и проверки реакции DOM.

Благодаря посту Мишеля Готта я нашел решение .

конфигурация

Вы просто передаете UiTester список пользовательских интерфейсов, которые вы хотите протестировать, в файле генератора отчетов qUnit:

<div id="playground"></div>
        <h1 id="qunit-header">QUnit example</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>

<script type="text/javascript">
(function( $, window, undefined) {

   $(window.document).ready(function(){
        UiTester.init( $, {
            testsuites : [
                {suit : "example1", url: "ui-form-example.html"},
                {suit : "example2", url: "ui-widget-example.html"}
            ],
            wwwRoot : "./../"
        });
    });

}( jQuery, window ));
</script>

Таким образом, мы предполагаем, что у нас есть 2 страницы (здесь только 2 HTML-файла), относящиеся к примерам тестов examples1 и example2 соответственно. Это могут быть любые URL-адреса одного домена с инструментом тестирования. Таким образом, UiTester будет выполнять итерацию по массиву testsuites, загружая определенный URL-адрес в iframe и выполняя тестовый набор, соответствующий значению набора.

тесты

Теперь посмотрим, как выглядят тесты: 

var TestSuit =  function( $, proceed) {
    return {
         example1: function() {
               // qUnit tests
               proceed();
         },
         example2: function() {
               // qUnit tests
               proceed();
         }
   }
}

Тесты, помещенные в область действия функции, которая представляет реальный экземпляр jQuery (каждый пользовательский интерфейс имеет собственный) и функцию продолжения, которая указывает, где завершены все тесты масти. В этом конкретном примере тесты предполагаются синхронными, и процесс всегда идет в конце костюма. Однако это не будет работать с асинхронными тестами. Конец функции будет достигнут до того, как тесты действительно будут выполнены. Таким образом, вы должны вызывать продолжить () в последнем асинхронном тестовом обратном вызове рядом с start ().

var TestSuit =  function( $, proceed) {
    return {
         example: function() {
               // qUnit tests
               asyncTest( "The last async test", 1, function() {
                    window.setTimeout(function() {
                        ok( true, "All is fine" );
                        start();
                        proceed();
                    }, 500);
                });
         }
   }
}

Помощники утверждения

При написании тестов для DOM я обнаружил, что мне нужен помощник, чтобы сделать поток утверждений более читабельным:

test( "Test DOM", function() {
        testNodes([
            {node: "selector",
                assert: "exists",
                msg: "Selector found"
            },
            {node: "selector",
                assert: "visible",
                msg: "Selector visible"
            },
            {node: "selector",
                assert: "checked",
                msg: "Selector checked"
            }
        ]);
    });

 

Итак, ui-tester.js содержит exteQUnit с набором доступных помощников утверждений, расширяющих стандартный набор qUnit. В настоящее время единственным помощником является testNodes, но вы можете легко расширить его в любое время.

Теперь мы можем запустить генератор отчетов (/tests-js/index.html) и проверить, как проходит тест.

В командной строке

Хотите запустить тесты на консоли? Это можно сделать, например, с помощью phantomjs :

phantomjs run-qunit.js http://project.my/tests-js/index.html

'waitFor()' finished in 1300ms.
Tests completed in 1167 milliseconds.
25 tests of 25 passed, 0 failed.

Только не забудьте изменить значение по умолчанию Max Timeout в run-qunit.js.

 

32
Share: