Учебники

QUnit — Краткое руководство

Июнь 7, 2018

QUnit — Обзор

Тестирование — это процесс проверки функциональности приложения на предмет его соответствия требованиям и обеспечения того, чтобы на уровне разработчика проводилось модульное тестирование. Модульное тестирование — это тестирование одного объекта (класса или метода). Модульное тестирование очень важно для каждой организации программного обеспечения, чтобы предлагать качественные продукты для своих клиентов.

Модульное тестирование может быть выполнено двумя способами, как указано в следующей таблице.

Ручное тестирование Автоматизированное тестирование
Выполнение тестовых случаев вручную без какой-либо поддержки инструмента называется ручным тестированием. Получение поддержки инструмента и выполнение тестовых случаев с использованием инструмента автоматизации называется автоматизацией тестирования.
Времени и утомительно. Поскольку тестовые случаи выполняются человеческими ресурсами, это очень медленно и утомительно. Быстрая автоматизация. Запускает тестовые случаи значительно быстрее, чем человеческие ресурсы.
Огромные инвестиции в человеческие ресурсы. Поскольку тестовые случаи должны выполняться вручную, требуется большее количество тестеров. Меньше инвестиций в человеческие ресурсы. Тестовые случаи выполняются с использованием средства автоматизации, следовательно, требуется меньшее количество тестеров.
Менее надежный, поскольку тесты не могут быть выполнены с точностью каждый раз из-за человеческих ошибок. Более надежный. Автоматизированные тесты выполняют точно одну и ту же операцию при каждом запуске.
Непрограммируемый. Никакое программирование не может быть сделано, чтобы написать сложные тесты, которые извлекают скрытую информацию. Программируемая. Тестировщики могут программировать сложные тесты, чтобы выявлять скрытую информацию.

Что такое QUnit?

QUnit — это инфраструктура модульного тестирования для языка программирования JavaScript. Это важно при разработке через тестирование и используется в проектах jQuery, jQuery UI и jQuery Mobile. QUnit способен тестировать любую общую кодовую базу JavaScript.

QUnit продвигает идею «сначала тестирование, а затем кодирование», которая делает упор на настройке тестовых данных для фрагмента кода, который можно сначала протестировать, а затем реализовать. Этот подход похож на «немного протестируй, немного кодируй, немного протестируй, немного кодируй …», который увеличивает производительность программиста и стабильность программного кода, уменьшая нагрузку на программиста и время, затрачиваемое на отладку.

Особенности QUnit

QUnit — это платформа с открытым исходным кодом, используемая для написания и запуска тестов. Ниже приведены его наиболее выдающиеся особенности —

  • QUnit предоставляет утверждения для тестирования ожидаемых результатов.

  • QUnit предоставляет испытательные приспособления для проведения испытаний.

  • Тесты QUnit позволяют писать код быстрее, что повышает качество.

  • QUnit элегантно прост. Это менее сложный и занимает меньше времени.

  • Тесты QUnit можно запускать автоматически, они проверяют свои результаты и предоставляют немедленную обратную связь. Нет необходимости вручную прочесывать отчет с результатами теста.

  • Тесты QUnit могут быть организованы в тестовые наборы, содержащие тестовые наборы и даже другие тестовые наборы.

  • QUnit отображает ход выполнения теста на зеленой полосе, если тест проходит нормально, и становится красным при сбое теста.

QUnit предоставляет утверждения для тестирования ожидаемых результатов.

QUnit предоставляет испытательные приспособления для проведения испытаний.

Тесты QUnit позволяют писать код быстрее, что повышает качество.

QUnit элегантно прост. Это менее сложный и занимает меньше времени.

Тесты QUnit можно запускать автоматически, они проверяют свои результаты и предоставляют немедленную обратную связь. Нет необходимости вручную прочесывать отчет с результатами теста.

Тесты QUnit могут быть организованы в тестовые наборы, содержащие тестовые наборы и даже другие тестовые наборы.

QUnit отображает ход выполнения теста на зеленой полосе, если тест проходит нормально, и становится красным при сбое теста.

Что такое модульный тест?

Модульный тестовый случай — это часть кода, которая гарантирует, что другая часть кода (метода) работает так, как ожидается. Для быстрого достижения желаемых результатов требуется тестовая структура. QUnit — это идеальный фреймворк для тестирования на языке программирования JavaScript.

Формальный письменный пример модульного теста характеризуется известным входным сигналом и ожидаемым выходным сигналом, который вырабатывается до выполнения теста. Известный вход должен проверять предварительное условие, а ожидаемый результат должен проверять постусловие.

Для каждого требования должно быть не менее двух тестовых случаев: один положительный и один отрицательный. Если у требования есть под-требования, у каждого под-требования должно быть по крайней мере два контрольных примера как положительный и отрицательный.

QUnit — настройка среды

Есть два способа использования QUnit.

  • Локальная установка — вы можете скачать библиотеку QUnit на своем локальном компьютере и включить ее в свой HTML-код.

  • Версия на основе CDN. Вы можете включить библиотеку QUnit в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка — вы можете скачать библиотеку QUnit на своем локальном компьютере и включить ее в свой HTML-код.

Версия на основе CDN. Вы можете включить библиотеку QUnit в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка

  • Перейдите на https://code.jquery.com/qunit/, чтобы загрузить последнюю доступную версию.

  • Поместите загруженный файл qunit-git.js и qunit-git.css в каталог вашего сайта, например / jquery.

Перейдите на https://code.jquery.com/qunit/, чтобы загрузить последнюю доступную версию.

Поместите загруженный файл qunit-git.js и qunit-git.css в каталог вашего сайта, например / jquery.

пример

Вы можете включить файлы qunit-git.js и qunit-git.css в свой HTML-файл следующим образом:

Live Demo

<html> 
   <head> 
      <meta charset = "utf-8"> 
      <title>QUnit basic example</title> 
      <link rel = "stylesheet" href = "/jquery/qunit-git.css"> 
      <script src = "/jquery/qunit-git.js"></script> 
   </head> 
   
   <body> 
      <div id = "qunit"></div> 
      <div id = "qunit-fixture"></div>  
      <script> 
         QUnit.test( "My First Test", function( assert ) { 
            var value = "1"; 
            assert.equal( value, "1", "Value should be 1" ); 
         }); 
      </script> 
   </body> 
</html>

Это даст следующий результат —

CDN основанная версия

Вы можете включить библиотеку QUnit в свой HTML-код напрямую из сети доставки контента (CDN).

В этом руководстве мы используем версию библиотеки jQuery CDN.

пример

Давайте перепишем приведенный выше пример, используя библиотеку QUnit из jQuery CDN.

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>
         QUnit.test( "My First Test", function( assert ) {
            var value = "1";
            assert.equal( value, "1", "Value should be 1" );
         });
      </script>
   </body>
</html>

Это даст следующий результат —

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

Теперь мы покажем вам пошаговый процесс получения кикстарта в 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, чтобы в случае, если тест выдает исключение, тестирующий умрет и отобразит собственное исключение.

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

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

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

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

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

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

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

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

QUnit — API

Важные API QUnit

Некоторые из важных категорий QUnit являются —

Sr.No. категория функциональность
1 утверждать Набор методов assert.
2 Асинхронный контроль Для асинхронных операций.
3 Callbacks При интеграции QUnit в другие инструменты, такие как серверы CI, эти обратные вызовы можно использовать в качестве API для чтения результатов теста.
4 Конфигурация и утилиты Эти методы и свойства используются как вспомогательные утилиты и для настройки QUnit. Например, чтобы напрямую настроить поведение среды выполнения, расширьте API QUnit с помощью пользовательских утверждений и т. Д.
5 Тестовое задание Для тестирования операций.

Категория: Утвердить

Он предоставляет набор методов assert.

Sr.No. Методы и описание
1

асинхронному ()

Дайте команду QUnit дождаться асинхронной операции.

2

deepEqual ()

Глубокое рекурсивное сравнение, работающее с примитивными типами, массивами, объектами, регулярными выражениями, датами и функциями.

3

равна ()

Нечесткое сравнение, примерно эквивалентное assertEquals JUnit.

4

ожидать ()

Укажите, сколько утверждений ожидается в тесте.

5

notDeepEqual ()

Перевернутое глубокое рекурсивное сравнение, работающее с примитивными типами, массивами, объектами, регулярными выражениями, датами и функциями.

6

не равный()

Строгое сравнение, проверка на неравенство.

7

не хорошо()

Булева проверка, обратная ok () и CommonJS assert.ok (), и эквивалентная assertFalse () JUnit. Проходит, если первый аргумент является ложным.

8

notPropEqual ()

Строгое сравнение собственных свойств объекта, проверка на неравенство.

9

notStrictEqual ()

Строгое сравнение, проверка на неравенство.

10

Хорошо()

Булева проверка, эквивалентная CommonJS assert.ok () и JUnit assertTrue (). Проходит, если первый аргумент верен.

11

propEqual ()

Строгое сравнение типов и значений собственных свойств объекта.

12

От себя()

Сообщить о результате пользовательского утверждения.

13

strictEqual ()

Строгое сравнение типов и значений.

14

броски ()

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

асинхронному ()

Дайте команду QUnit дождаться асинхронной операции.

deepEqual ()

Глубокое рекурсивное сравнение, работающее с примитивными типами, массивами, объектами, регулярными выражениями, датами и функциями.

равна ()

Нечесткое сравнение, примерно эквивалентное assertEquals JUnit.

ожидать ()

Укажите, сколько утверждений ожидается в тесте.

notDeepEqual ()

Перевернутое глубокое рекурсивное сравнение, работающее с примитивными типами, массивами, объектами, регулярными выражениями, датами и функциями.

не равный()

Строгое сравнение, проверка на неравенство.

не хорошо()

Булева проверка, обратная ok () и CommonJS assert.ok (), и эквивалентная assertFalse () JUnit. Проходит, если первый аргумент является ложным.

notPropEqual ()

Строгое сравнение собственных свойств объекта, проверка на неравенство.

notStrictEqual ()

Строгое сравнение, проверка на неравенство.

Хорошо()

Булева проверка, эквивалентная CommonJS assert.ok () и JUnit assertTrue (). Проходит, если первый аргумент верен.

propEqual ()

Строгое сравнение типов и значений собственных свойств объекта.

От себя()

Сообщить о результате пользовательского утверждения.

strictEqual ()

Строгое сравнение типов и значений.

броски ()

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

Категория: Асинхронный контроль

Предоставляет набор асинхронных операций.

Sr.No. Методы и описание
1

асинхронному ()

Дайте команду QUnit дождаться асинхронной операции.

2

QUnit.asyncTest ()

УСТАРЕЛО: добавить асинхронный тест для запуска. Тест должен включать в себя вызов QUnit.start ().

3

QUnit.start ()

ЧАСТИЧНО УСТАРЕВШИЙ: снова запустите тесты после остановки тестера. Смотрите QUnit.stop () и QUnit.config.autostart.

4

QUnit.stop ()

УСТАРЕЛО: Увеличьте количество вызовов QUnit.start (), которые должен ждать тестирующий, прежде чем продолжить.

5

QUnit.test ()

Добавьте тест для запуска.

асинхронному ()

Дайте команду QUnit дождаться асинхронной операции.

QUnit.asyncTest ()

УСТАРЕЛО: добавить асинхронный тест для запуска. Тест должен включать в себя вызов QUnit.start ().

QUnit.start ()

ЧАСТИЧНО УСТАРЕВШИЙ: снова запустите тесты после остановки тестера. Смотрите QUnit.stop () и QUnit.config.autostart.

QUnit.stop ()

УСТАРЕЛО: Увеличьте количество вызовов QUnit.start (), которые должен ждать тестирующий, прежде чем продолжить.

QUnit.test ()

Добавьте тест для запуска.

Категория: Обратные звонки

При интеграции QUnit в другие инструменты, такие как серверы CI, эти обратные вызовы могут использоваться в качестве API для чтения результатов теста.

Sr.No. Методы и описание
1

QUnit.begin ()

Зарегистрируйте обратный вызов, чтобы запустить всякий раз, когда начинается набор тестов.

2

QUnit.done ()

Зарегистрируйте обратный вызов, чтобы запустить всякий раз, когда заканчивается набор тестов.

3

QUnit.log ()

Зарегистрируйте обратный вызов, чтобы срабатывать всякий раз, когда утверждение завершается.

4

QUnit.moduleDone ()

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

5

QUnit.moduleStart ()

Зарегистрируйте обратный вызов для запуска при каждом запуске модуля.

6

QUnit.testDone ()

Зарегистрируйте обратный вызов, чтобы выстрелить всякий раз, когда тест заканчивается.

7

QUnit.testStart ()

Зарегистрируйте обратный вызов, чтобы сработать всякий раз, когда начинается тест.

QUnit.begin ()

Зарегистрируйте обратный вызов, чтобы запустить всякий раз, когда начинается набор тестов.

QUnit.done ()

Зарегистрируйте обратный вызов, чтобы запустить всякий раз, когда заканчивается набор тестов.

QUnit.log ()

Зарегистрируйте обратный вызов, чтобы срабатывать всякий раз, когда утверждение завершается.

QUnit.moduleDone ()

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

QUnit.moduleStart ()

Зарегистрируйте обратный вызов для запуска при каждом запуске модуля.

QUnit.testDone ()

Зарегистрируйте обратный вызов, чтобы выстрелить всякий раз, когда тест заканчивается.

QUnit.testStart ()

Зарегистрируйте обратный вызов, чтобы сработать всякий раз, когда начинается тест.

Категория: Конфигурация и утилиты

Эти методы и свойства используются как вспомогательные утилиты и для настройки QUnit. Например, чтобы напрямую настроить поведение среды выполнения, расширьте API QUnit с помощью пользовательских утверждений и т. Д.

Sr.No. Методы и описание
1

QUnit.assert

Пространство имен для утверждений QUnit.

2

QUnit.config

Конфигурация для QUnit.

3

QUnit.dump.parse ()

Расширенный и расширяемый дамп данных для JavaScript.

4

QUnit.extend ()

Скопируйте свойства, определенные объектом mixin, в целевой объект.

5

QUnit.init ()

УСТАРЕЛО: повторно инициализировать тестовый запуск.

6

QUnit.push ()

УСТАРЕЛО: сообщить о результате пользовательского утверждения.

7

QUnit.reset ()

УСТАРЕЛО: сбросить тестовое устройство в DOM.

8

QUnit.stack ()

Возвращает строку из одной строки, представляющую трассировку стека (стек вызовов).

QUnit.assert

Пространство имен для утверждений QUnit.

QUnit.config

Конфигурация для QUnit.

QUnit.dump.parse ()

Расширенный и расширяемый дамп данных для JavaScript.

QUnit.extend ()

Скопируйте свойства, определенные объектом mixin, в целевой объект.

QUnit.init ()

УСТАРЕЛО: повторно инициализировать тестовый запуск.

QUnit.push ()

УСТАРЕЛО: сообщить о результате пользовательского утверждения.

QUnit.reset ()

УСТАРЕЛО: сбросить тестовое устройство в DOM.

QUnit.stack ()

Возвращает строку из одной строки, представляющую трассировку стека (стек вызовов).

Категория: Тест

Предоставляет набор операций тестирования.

Sr.No. Методы и описание
1

QUnit.assert

Пространство имен для утверждений QUnit.

2

QUnit.asyncTest ()

УСТАРЕЛО: добавить асинхронный тест для запуска. Тест должен включать в себя вызов QUnit.start ().

3

QUnit.module ()

Группируйте связанные тесты под одной этикеткой.

4

QUnit.only ()

Добавляет тест для запуска исключительно, предотвращая запуск всех других тестов.

5

QUnit.skip ()

Добавляет тест, как объект, который будет пропущен.

6

QUnit.test ()

Добавляет тест для запуска.

QUnit.assert

Пространство имен для утверждений QUnit.

QUnit.asyncTest ()

УСТАРЕЛО: добавить асинхронный тест для запуска. Тест должен включать в себя вызов QUnit.start ().

QUnit.module ()

Группируйте связанные тесты под одной этикеткой.

QUnit.only ()

Добавляет тест для запуска исключительно, предотвращая запуск всех других тестов.

QUnit.skip ()

Добавляет тест, как объект, который будет пропущен.

QUnit.test ()

Добавляет тест для запуска.

QUnit — Использование утверждений

Все утверждения находятся в категории утверждений.

Эта категория предоставляет набор методов утверждения, полезных для написания тестов. Только ошибочные утверждения записываются.

Sr.No. Методы и описание
1

асинхронному ()

Дайте команду QUnit дождаться асинхронной операции.

2

deepEqual ()

Глубокое рекурсивное сравнение, работающее с примитивными типами, массивами, объектами, регулярными выражениями, датами и функциями.

3

равна ()

Нечесткое сравнение, примерно эквивалентное assertEquals JUnit.

4

ожидать ()

Укажите, сколько утверждений ожидается в тесте.

5

notDeepEqual ()

Перевернутое глубокое рекурсивное сравнение, работающее с примитивными типами, массивами, объектами, регулярными выражениями, датами и функциями.

6

не равный()

Строгое сравнение, проверка на неравенство.

7

не хорошо()

Булева проверка, обратная ok () и CommonJS assert.ok (), и эквивалентная assertFalse () JUnit. Проходит, если первый аргумент является ложным.

8

notPropEqual ()

Строгое сравнение собственных свойств объекта, проверка на неравенство.

9

notStrictEqual ()

Строгое сравнение, проверка на неравенство.

10

Хорошо()

Булева проверка, эквивалентная CommonJS assert.ok () и JUnit assertTrue (). Проходит, если первый аргумент верен.

11

propEqual ()

Строгое сравнение типов и значений собственных свойств объекта.

12

От себя()

Сообщить о результате пользовательского утверждения.

13

strictEqual ()

Строгое сравнение типов и значений.

14

броски ()

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

асинхронному ()

Дайте команду QUnit дождаться асинхронной операции.

deepEqual ()

Глубокое рекурсивное сравнение, работающее с примитивными типами, массивами, объектами, регулярными выражениями, датами и функциями.

равна ()

Нечесткое сравнение, примерно эквивалентное assertEquals JUnit.

ожидать ()

Укажите, сколько утверждений ожидается в тесте.

notDeepEqual ()

Перевернутое глубокое рекурсивное сравнение, работающее с примитивными типами, массивами, объектами, регулярными выражениями, датами и функциями.

не равный()

Строгое сравнение, проверка на неравенство.

не хорошо()

Булева проверка, обратная ok () и CommonJS assert.ok (), и эквивалентная assertFalse () JUnit. Проходит, если первый аргумент является ложным.

notPropEqual ()

Строгое сравнение собственных свойств объекта, проверка на неравенство.

notStrictEqual ()

Строгое сравнение, проверка на неравенство.

Хорошо()

Булева проверка, эквивалентная CommonJS assert.ok () и JUnit assertTrue (). Проходит, если первый аргумент верен.

propEqual ()

Строгое сравнение типов и значений собственных свойств объекта.

От себя()

Сообщить о результате пользовательского утверждения.

strictEqual ()

Строгое сравнение типов и значений.

броски ()

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

Давайте попробуем охватить большинство вышеупомянутых методов в примере.

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>
         QUnit.test( "TestSuite", function( assert ) {
            //test data
            var str1 = "abc";
            var str2 = "abc";
            var str3 = null;
            var val1 = 5;
            var val2 = 6;
            var expectedArray = ["one", "two", "three"];
            var resultArray =  ["one", "two", "three"];

            //Check that two objects are equal
            assert.equal(str1, str2, "Strings passed are equal.");
			
            //Check that two objects are not equal
            assert.notEqual(str1,str3, "Strings passed are not equal.");

            //Check that a condition is true
            assert.ok(val1 < val2, val1 + " is less than " + val2);
			
            //Check that a condition is false
            assert.notOk(val1 > val2, val2 + " is not less than " + val1);

            //Check whether two arrays are equal to each other.
            assert.deepEqual(expectedArray, resultArray ,"Arrays passed are equal.");
			
            //Check whether two arrays are equal to each other.
            assert.notDeepEqual(expectedArray, ["one", "two"],
               "Arrays passed are not equal.");			
         });
      </script>
   </body>
</html>

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

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

QUnit — процедура выполнения

В этой главе описывается процедура выполнения методов в QUnit, в которой указывается, какой метод вызывается первым, а какой — после него. Ниже приведен пример выполнения методов API тестирования QUnit.

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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

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

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

Такова процедура выполнения QUnit.

  • Модуль используется для группировки тестовых случаев.

  • Метод beforeEach () выполняется для каждого тестового примера, однако перед его выполнением.

  • Метод afterEach () выполняется для каждого тестового примера, однако после выполнения тестового примера.

  • Между beforeEach () и afterEach () выполняется каждый тест.

  • Повторный вызов QUnit.module () , просто сбросьте все функции beforeEach / afterEach, определенные другим модулем ранее.

Модуль используется для группировки тестовых случаев.

Метод beforeEach () выполняется для каждого тестового примера, однако перед его выполнением.

Метод afterEach () выполняется для каждого тестового примера, однако после выполнения тестового примера.

Между beforeEach () и afterEach () выполняется каждый тест.

Повторный вызов QUnit.module () , просто сбросьте все функции beforeEach / afterEach, определенные другим модулем ранее.

QUnit — пропустить тест

Иногда случается, что наш код не готов, и тестовый пример, написанный для проверки этого метода / кода, завершается неудачей при запуске. QUnit.skip помогает в этом отношении. Тестовый метод, написанный с использованием метода Skip, не будет выполнен. Давайте посмотрим метод Пропустить в действии.

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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

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

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

QUnit — только тест

Иногда случается, что наш код не готов, и тестовый пример, написанный для проверки этого метода / кода, не выполняется, если выполняется. QUnit.only помогает в этом отношении. Тестовый метод, написанный с использованием только метода, будет выполнен, в то время как другие тесты не будут выполняться. Если указано более одного только метода, будет выполняться только первый. Давайте посмотрим только метод в действии.

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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.only( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		      
         QUnit.test( "test case 3", function( assert ) {
            assert.ok( true, "Module A: in test case 3" );
         });
		 
         QUnit.test( "test case 4", function( assert ) {
            assert.ok( true, "Module A: in test case 4" );
         });	 
      </script>
   </body>
</html>

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

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

QUnit — Async Call

Для каждой асинхронной операции в обратном вызове QUnit.test () используйте assert.async () , которая возвращает функцию «done», которая должна быть вызвана после завершения операции. assert.async () принимает количество вызовов в качестве параметра. Обратный вызов, возвращаемый из assert.async (), выдаст ошибку, если она вызвана больше, чем количество принятых вызовов, если оно предусмотрено. Каждый вызов done () суммирует счетчик вызовов. После завершения каждого звонка тест завершается.

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>
         QUnit.test( "multiple call test()", function( assert ) {
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

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

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

QUnit — Ожидайте утверждения

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

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>
         QUnit.test( "multiple call test()", function( assert ) {
            assert.expect( 3 );
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

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

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

QUnit — обратные вызовы

При интеграции QUnit в другие инструменты, такие как серверы CI, эти обратные вызовы могут использоваться в качестве API для чтения результатов теста. Ниже приведен пример выполнения метода API обратного вызова QUnit с примером.

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>
         //Register a callback to fire whenever a testsuite starts.
         QUnit.begin(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = "<br/>" + 
               "QUnit.begin- Test Suite Begins " + "<br/>" + 
               "Total Test: " + details.totalTests;
         });

         //Register a callback to fire whenever a test suite ends.		 
         QUnit.done(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.done - Test Suite Finised" +  "<br/>" + "Total: " +  
               details.total + " Failed: " + details.failed + " Passed: 
               " + details.passed;
         });
		 
         //Register a callback to fire whenever a module starts.
            QUnit.moduleStart(function( details ) {
               var data = document.getElementById("console").innerHTML;
               document.getElementById("console").innerHTML = data + "<br/><br/>" + 
                  "QUnit.moduleStart - Module Begins " +  "<br/>" + details.name;
         });
		 
         //Register a callback to fire whenever a module ends.	  
         QUnit.moduleDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.moduleDone - Module Finished " +  "<br/>" + details.name + 
               " Failed/total: " + details.failed +"/" + details.total ;
         });
		 
         //Register a callback to fire whenever a test starts.
         QUnit.testStart(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testStart - Test Begins " +  "<br/>" + details.module +" 
               " + details.name;
         });
		 
         //Register a callback to fire whenever a test ends.
         QUnit.testDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testDone - Test Finished " +  "<br/>" + details.module +" " 
               + details.name + "Failed/total: " + details.failed +" " + details.total+ 
               " "+ details.duration;
         });
		 
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });	 
      </script>

      <div id = "console" ></div>
   </body>
</html>

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

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

QUnit — Вложенные модули

Модули с сгруппированными тестовыми функциями используются для определения вложенных модулей. QUnit запускает тесты на родительском модуле, прежде чем углубляться во вложенные, даже если они объявлены первыми. Обратные вызовы beforeEach и afterEach при вызове вложенного модуля будут помещаться в режиме LIFO (Last In, First Out) в родительские ловушки. Вы можете указать код для запуска до и после каждого теста, используя аргумент и хуки.

Хуки также могут быть использованы для создания свойств, которые будут использоваться в контексте каждого теста. Любые дополнительные свойства объекта hooks будут добавлены в этот контекст. Аргумент hooks является необязательным, если вы вызываете QUnit.module с аргументом обратного вызова.

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

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>
         QUnit.module( "parent module", function( hooks ) {
            hooks.beforeEach( function( assert ) {
               assert.ok( true, "beforeEach called" );
            });

            hooks.afterEach( function( assert ) {
               assert.ok( true, "afterEach called" );
            });

            QUnit.test( "hook test 1", function( assert ) {
               assert.expect( 2 );
            });

            QUnit.module( "nested hook module", function( hooks ) {
               // This will run after the parent module's beforeEach hook
               hooks.beforeEach( function( assert ) {
                  assert.ok( true, "nested beforeEach called" );
               });

               // This will run before the parent module's afterEach
               hooks.afterEach( function( assert ) {
                  assert.ok( true, "nested afterEach called" );
               });

               QUnit.test( "hook test 2", function( assert ) {
                  assert.expect( 4 );
               });
            });
         });
      </script>

      <div id = "console" ></div>
   </body>
</html>

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

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

57
Share: