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

  • name - название теста для отображения результатов теста.
  • function - код проверки функции, имеющий одно или несколько утверждений.
QUnit.test( "TestSquare", function( assert ) {
   var result = square(2);
   assert.equal( result, "4", "square(2) should be 4." );
});

Полный пример Qunit

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