Учебники

QUnit — Основное использование

Июнь 7, 2018

Теперь мы покажем вам пошаговый процесс получения кикстарта в QUnit на простом примере.

Импорт qunit.js

qunit.js библиотеки Qunit представляет тестовый прогон и тестовую среду. 

<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>

Импорт qunit.css

qunit.css библиотеки Qunit стилизует страницу набора тестов для отображения результатов теста. 

<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">

Добавить приспособление

Добавьте два элемента div с id = «qunit» и «qunit-fixture» . Эти элементы div необходимы и обеспечивают приспособление для испытаний. 

<div id = "qunit"></div>
<div id = "qunit-fixture"></div>

Создать функцию для тестирования 

function square(x) {
   return x * x;
}

Создать тестовый набор

Сделайте вызов функции QUnit.test с двумя аргументами.

  • Имя — имя теста для отображения результатов теста.

  • Функция — код тестирования функции, имеющий одно или несколько утверждений.

Имя — имя теста для отображения результатов теста.

Функция — код тестирования функции, имеющий одно или несколько утверждений. 

QUnit.test( "TestSquare", function( assert ) {
   var result = square(2);
   assert.equal( result, "4", "square(2) should be 4." );
});

Запустить тест

Теперь давайте посмотрим полный код в действии.

Live Demo 

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      
      <script>
         function square(x) {
            return x * x;
         }
         QUnit.test( "TestSquare", function( assert ) {
            var result = square(2);
            assert.equal( result, "4", "square(2) should be 4." );
         });
      </script>
   </body>
</html>

Загрузите страницу в браузере. После запуска страницы тестировщик вызывает метод QUnit.test () и добавляет тест в очередь. Выполнение тестового примера откладывается и контролируется организатором теста.

Проверьте вывод

Вы должны увидеть следующий результат —

Заголовок — заголовок набора тестов отображает заголовок страницы, зеленую полосу, когда все тесты пройдены. В противном случае — красная полоса, когда по крайней мере один тест не пройден, полоса с тремя флажками для фильтрации результатов теста и синяя полоса с текстом navigator.userAgent для отображения сведений о браузере.

Флажок Скрыть пройденные тесты — скрыть пройденные тестовые примеры и показать только неудачные тестовые примеры.

Флажок Check for globals — отображать список всех свойств объекта окна до и после каждого теста, а затем проверять различия. Модификация к свойствам провалит тест.

Нет флажка try-catch — чтобы запускать тестовые случаи вне блока try-catch, чтобы в случае, если тест выдает исключение, тестирующий умрет и отобразит собственное исключение.

Сводка — показывает общее время, необходимое для выполнения тестовых случаев. Общее количество выполненных тестов и ошибочные утверждения.

Содержание — Показывает результаты теста. Каждый результат теста имеет имя теста, за которым следуют несостоявшиеся, пройденные и общие утверждения. Каждая запись может быть нажата, чтобы получить дополнительную информацию.

37
Share: