QUnit - podstawowe użycie

Teraz pokażemy Ci krok po kroku, jak uzyskać kickstart w QUnit na prostym przykładzie.

Importuj qunit.js

qunit.js z biblioteki Qunit reprezentuje program uruchamiający testy i framework testowy.

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

Importuj qunit.css

qunit.css z biblioteki Qunit stylizuje stronę zestawu testów tak, aby wyświetlała wyniki testów.

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

Dodaj urządzenie

Dodaj dwa elementy div za pomocą id = "qunit" i "qunit-fixture". Te elementy div są wymagane i zapewniają urządzenie do testów.

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

Utwórz funkcję do przetestowania

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

Utwórz przypadek testowy

Wywołaj funkcję QUnit.test z dwoma argumentami.

Name - nazwa testu, aby wyświetlić wyniki testu.
Function - Kod testujący funkcje, mający jedno lub więcej stwierdzeń.

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

Uruchom test

Zobaczmy teraz cały kod w akcji.

<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>

Załaduj stronę w przeglądarce. Test runner dzwoniQUnit.test()kiedy strona zostanie załadowana i doda test do kolejki. Wykonanie przypadku testowego jest odraczane i kontrolowane przez uruchamiającego testy.

Sprawdź dane wyjściowe

Powinieneś zobaczyć następujący wynik -

Header- Nagłówek zestawu testów wyświetla tytuł strony, zielony pasek po zaliczeniu wszystkich testów. W przeciwnym razie czerwony pasek, gdy co najmniej jeden test się nie powiódł, pasek z trzema polami wyboru do filtrowania wyników testu oraz niebieski pasek z tekstem navigator.userAgent do wyświetlania szczegółów przeglądarki.
Hide passed tests checkbox - Aby ukryć przypadki testowe, które przeszły pomyślnie, i wyświetlić tylko przypadki testowe, które nie przeszły pomyślnie.
Check for globals checkbox- Aby wyświetlić listę wszystkich właściwości obiektu okna, przed i po każdym teście, sprawdź różnice. Modyfikacja właściwości kończy się niepowodzeniem.
No try-catch checkbox - Aby uruchomić przypadki testowe poza blokiem try-catch, tak aby w przypadku testu rzucającego wyjątek testrunner umarł i wyświetlił natywny wyjątek.
Summary- Pokazuje całkowity czas potrzebny do uruchomienia przypadków testowych. Uruchomiono wszystkie przypadki testowe i nie udało się potwierdzić.
Contents- Pokazuje wyniki testu. Każdy wynik testu ma nazwę testu, po którym następują niezaliczone, zaliczone i wszystkie potwierdzenia. Każdy wpis można kliknąć, aby uzyskać dalsze szczegóły.