QUnit - Szybki przewodnik

Testowanie to proces sprawdzania funkcjonalności aplikacji, czy działa ona zgodnie z wymaganiami i upewnienia się, że na poziomie dewelopera pojawiają się testy jednostkowe. Testowanie jednostkowe to testowanie pojedynczej jednostki (klasy lub metody). Testowanie jednostkowe jest bardzo istotne dla każdej organizacji oprogramowania, aby móc oferować swoim klientom produkty wysokiej jakości.

Testowanie jednostkowe można przeprowadzić na dwa sposoby, jak opisano w poniższej tabeli.

Testowanie ręczne Testowanie automatyczne
Ręczne wykonywanie przypadków testowych bez wsparcia narzędzi jest nazywane testowaniem ręcznym. Korzystanie ze wsparcia narzędziowego i wykonywanie przypadków testowych za pomocą narzędzia do automatyzacji jest znane jako testowanie automatyzacji.
Czasochłonne i nużące. Ponieważ przypadki testowe są wykonywane przez zasoby ludzkie, jest to bardzo powolne i żmudne. Szybka automatyzacja. Uruchamia przypadki testowe znacznie szybciej niż zasoby ludzkie.
Ogromna inwestycja w zasoby ludzkie. Ponieważ przypadki testowe muszą być wykonywane ręcznie, wymagana jest większa liczba testerów. Mniejsze inwestycje w zasoby ludzkie. Przypadki testowe są wykonywane za pomocą narzędzia do automatyzacji, dlatego wymagana jest mniejsza liczba testerów.
Mniej wiarygodne, ponieważ testy mogą nie być wykonywane z dokładnością za każdym razem z powodu błędów ludzkich. Bardziej wiarygodne. Testy automatyczne wykonują dokładnie tę samą operację za każdym razem, gdy są uruchamiane.
Nieprogramowalne. Żadne programowanie nie może napisać zaawansowanych testów, które pobierają ukryte informacje. Programowalne. Testerzy mogą programować zaawansowane testy, aby wydobyć ukryte informacje.

Co to jest QUnit?

QUnit to platforma do testów jednostkowych dla języka programowania JavaScript. Jest to ważne w programowaniu opartym na testach i jest używane przez projekty jQuery, jQuery UI i jQuery Mobile. QUnit jest zdolny do testowania dowolnej ogólnej bazy kodu JavaScript.

QUnit promuje ideę „najpierw testowania, a następnie kodowania”, która kładzie nacisk na konfigurowanie danych testowych dla fragmentu kodu, który można najpierw przetestować, a następnie zaimplementować. To podejście przypomina „trochę przetestuj, trochę zakoduj, trochę przetestuj, trochę zakoduj…”, co zwiększa produktywność programisty i stabilność kodu programu, zmniejszając stres programisty i czas spędzony na debugowaniu.

Funkcje QUnit

QUnit to framework open source używany do pisania i uruchamiania testów. Oto jego najważniejsze cechy -

  • QUnit zapewnia asercje do testowania oczekiwanych wyników.

  • QUnit zapewnia uchwyty testowe do uruchamiania testów.

  • Testy QUnit pozwalają na szybsze pisanie kodu, co podnosi jakość.

  • QUnit jest elegancko prosty. Jest mniej skomplikowany i zajmuje mniej czasu.

  • Testy QUnit mogą być uruchamiane automatycznie i sprawdzają własne wyniki i zapewniają natychmiastową informację zwrotną. Nie ma potrzeby ręcznego przeczesywania raportu wyników testu.

  • Testy QUnit można organizować w zestawy testów zawierające przypadki testowe, a nawet inne zestawy testów.

  • QUnit pokazuje postęp testu na zielonym pasku, jeśli test przebiega dobrze, a zmienia kolor na czerwony, gdy test się nie powiedzie.

Co to jest przypadek testu jednostkowego?

Przypadek testu jednostkowego to część kodu, która zapewnia, że ​​inna część kodu (metoda) działa zgodnie z oczekiwaniami. Aby szybko osiągnąć pożądane wyniki, wymagana jest platforma testowa. QUnit to doskonała platforma do testów jednostkowych dla języka programowania JavaScript.

Formalny pisemny przypadek testu jednostkowego charakteryzuje się znanymi danymi wejściowymi i oczekiwanymi danymi wyjściowymi, które są opracowywane przed wykonaniem testu. Znane dane wejściowe powinny testować warunek wstępny, a oczekiwane dane wyjściowe powinny testować warunek końcowy.

Dla każdego wymagania muszą istnieć co najmniej dwa przypadki testów jednostkowych: jeden test pozytywny i jeden test negatywny. Jeśli wymaganie ma pod-wymagania, każde wymaganie podrzędne musi mieć co najmniej dwa przypadki testowe jako pozytywne i negatywne.

Istnieją dwa sposoby używania QUnit.

  • Local Installation - Możesz pobrać bibliotekę QUnit na swój lokalny komputer i dołączyć ją do swojego kodu HTML.

  • CDN Based Version - Możesz dołączyć bibliotekę QUnit do swojego kodu HTML bezpośrednio z Content Delivery Network (CDN).

Instalacja lokalna

  • Przejdź do https://code.jquery.com/qunit/ aby pobrać najnowszą dostępną wersję.

  • Umieść pobrany plik qunit-git.js i qunit-git.css plik w katalogu Twojej witryny, np. / jquery.

Przykład

Możesz dołączyć qunit-git.js i qunit-git.css pliki w pliku HTML w następujący sposób -

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

To da następujący wynik -

Wersja oparta na CDN

Możesz dołączyć bibliotekę QUnit do swojego kodu HTML bezpośrednio z Content Delivery Network (CDN).

W tym samouczku używamy wersji biblioteki jQuery CDN.

Przykład

Przepiszmy powyższy przykład używając biblioteki QUnit z jQuery CDN.

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

To da następujący wynik -

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, 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 całkowitą liczbę przypadków testowych 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.

Ważne interfejsy API QUnit

Niektóre z ważnych kategorii QUnit to -

Sr.No. Kategoria Funkcjonalność
1 Zapewniać Zestaw metod asertywnych.
2 Async Control Do operacji asynchronicznych.
3 Callback Podczas integracji QUnit z innymi narzędziami, takimi jak serwery CI, te wywołania zwrotne mogą być używane jako API do odczytywania wyników testów.
4 Konfiguracja i narzędzia Te metody i właściwości są używane jako pomocniki narzędzi i do konfigurowania QUnit. Na przykład, aby bezpośrednio dostosować zachowanie środowiska wykonawczego, rozszerz API QUnit za pomocą niestandardowych asercji itp.
5 Test Do operacji testowych.

Kategoria: Assert

Udostępnia zestaw metod asercji.

Sr.No. Metody i opis
1

async()

Poinstruuj QUnit, aby czekał na operację asynchroniczną.
2

deepEqual()

Głębokie porównanie rekurencyjne, pracujące na typach pierwotnych, tablicach, obiektach, wyrażeniach regularnych, datach i funkcjach.
3

equal()

Nieścisłe porównanie, z grubsza równoważne z assertEquals JUnit.
4

expect()

Określ, ile potwierdzeń ma zostać uruchomionych w teście.
5

notDeepEqual()

Odwrócone, głębokie porównanie rekurencyjne, pracujące na typach pierwotnych, tablicach, obiektach, wyrażeniach regularnych, datach i funkcjach.
6

notEqual()

Nieścisłe porównanie, sprawdzające nierówności.
7

notOk()

Boolean check, odwrotność ok () i assert.ok () CommonJS oraz odpowiednik assertFalse () JUnita. Pomija, jeśli pierwszy argument jest fałszywy.
8

notPropEqual()

Ścisłe porównanie właściwości obiektu, sprawdzanie nierówności.
9

notStrictEqual()

Ścisłe porównanie, sprawdzanie nierówności.
10

ok()

Boolean check, odpowiednik assert.ok () CommonJS i assertTrue () JUnita. Pomija, jeśli pierwszy argument jest prawdziwy.
11

propEqual()

Ścisłe porównanie typów i wartości własnych właściwości obiektu.
12

push()

Zgłoś wynik asercji niestandardowej.
13

strictEqual()

Ścisłe porównanie typów i wartości.
14

throws()

Sprawdź, czy wywołanie zwrotne zgłasza wyjątek i opcjonalnie porównaj zgłoszony błąd.

Kategoria: Async Control

Zapewnia zestaw operacji asynchronicznych.

Sr.No. Metody i opis
1

async()

Poinstruuj QUnit, aby czekał na operację asynchroniczną.
2

QUnit.asyncTest()

WYCOFANE: Dodaj test asynchroniczny do uruchomienia. Test musi zawierać wywołanie QUnit.start ().
3

QUnit.start()

CZĘŚCIOWO WYCOFANE: Uruchom ponownie testy po zatrzymaniu modułu uruchamiającego. Zobacz QUnit.stop () i QUnit.config.autostart.
4

QUnit.stop()

DEPRECATED: Zwiększ liczbę wywołań QUnit.start (), na które testrunner powinien czekać przed kontynuowaniem.
5

QUnit.test()

Dodaj test do uruchomienia.

Kategoria: Callback

Podczas integracji QUnit z innymi narzędziami, takimi jak serwery CI, te wywołania zwrotne mogą być używane jako API do odczytywania wyników testów.

Sr.No. Metody i opis
1

QUnit.begin()

Zarejestruj wywołanie zwrotne, które będzie uruchamiane przy każdym uruchomieniu zestawu testów.
2

QUnit.done()

Zarejestruj wywołanie zwrotne, które będzie uruchamiane po zakończeniu działania zestawu testów.
3

QUnit.log()

Zarejestruj wywołanie zwrotne, które będzie uruchamiane po zakończeniu asercji.
4

QUnit.moduleDone()

Zarejestruj wywołanie zwrotne, które będzie uruchamiane za każdym razem, gdy moduł się zakończy.
5

QUnit.moduleStart()

Zarejestruj wywołanie zwrotne, które będzie uruchamiane przy każdym uruchomieniu modułu.
6

QUnit.testDone()

Zarejestruj wywołanie zwrotne, które będzie uruchamiane po zakończeniu testu.
7

QUnit.testStart()

Zarejestruj wywołanie zwrotne, które będzie uruchamiane za każdym razem, gdy rozpocznie się test.

Kategoria: Konfiguracja i narzędzia

Te metody i właściwości są używane jako pomocniki narzędzi i do konfigurowania QUnit. Na przykład, aby bezpośrednio dostosować zachowanie środowiska wykonawczego, rozszerz API QUnit za pomocą niestandardowych asercji itp.

Sr.No. Metody i opis
1

QUnit.assert

Przestrzeń nazw dla asercji QUnit.
2

QUnit.config

Konfiguracja dla QUnit.
3

QUnit.dump.parse()

Zaawansowane i rozszerzalne zrzuty danych dla JavaScript.
4

QUnit.extend()

Skopiuj właściwości zdefiniowane przez obiekt mixin do obiektu docelowego.
5

QUnit.init()

DEPRECATED: Ponownie zainicjuj test runner.
6

QUnit.push()

WYCOFANE: Zgłoś wynik asercji niestandardowej.
7

QUnit.reset()

DEPRECATED: Zresetuj urządzenie testowe w DOM.
8

QUnit.stack()

Zwraca pojedynczy wiersz reprezentujący ślad stosu (stos wywołań).

Kategoria: Test

Zapewnia zestaw operacji testowych.

Sr.No. Metody i opis
1

QUnit.assert

Przestrzeń nazw dla asercji QUnit.
2

QUnit.asyncTest()

WYCOFANE: Dodaj test asynchroniczny do uruchomienia. Test musi zawierać wywołanie QUnit.start ().
3

QUnit.module()

Grupuj powiązane testy pod jedną etykietą.
4

QUnit.only()

Dodaje test do wyłącznego uruchamiania, zapobiegając uruchomieniu wszystkich innych testów.
5

QUnit.skip()

Dodaje obiekt podobny do testu do pominięcia.
6

QUnit.test()

Dodaje test do uruchomienia.

Wszystkie potwierdzenia znajdują się w kategorii Assert.

Ta kategoria zawiera zestaw metod asercji przydatnych do pisania testów. Rejestrowane są tylko nieudane potwierdzenia.

Sr.No. Metody i opis
1

async()

Poinstruuj QUnit, aby czekał na operację asynchroniczną.
2

deepEqual()

Głębokie porównanie rekurencyjne, pracujące na typach pierwotnych, tablicach, obiektach, wyrażeniach regularnych, datach i funkcjach.
3

equal()

Nieścisłe porównanie, z grubsza równoważne z assertEquals JUnit.
4

expect()

Określ, ile potwierdzeń ma zostać uruchomionych w teście.
5

notDeepEqual()

Odwrócone, głębokie porównanie rekurencyjne, pracujące na typach pierwotnych, tablicach, obiektach, wyrażeniach regularnych, datach i funkcjach.
6

notEqual()

Nieścisłe porównanie, sprawdzające nierówności.
7

notOk()

Boolean check, odwrotność ok () i assert.ok () CommonJS oraz odpowiednik assertFalse () JUnita. Pomija, jeśli pierwszy argument jest fałszywy.
8

notPropEqual()

Ścisłe porównanie właściwości obiektu, sprawdzanie nierówności.
9

notStrictEqual()

Ścisłe porównanie, sprawdzanie nierówności.
10

ok()

Boolean check, odpowiednik assert.ok () CommonJS i assertTrue () JUnita. Pomija, jeśli pierwszy argument jest prawdziwy.
11

propEqual()

Ścisłe porównanie typów i wartości własnych właściwości obiektu.
12

push()

Zgłoś wynik asercji niestandardowej.
13

strictEqual()

Ścisłe porównanie typów i wartości.
14

throws()

Sprawdź, czy wywołanie zwrotne zgłasza wyjątek i opcjonalnie porównaj zgłoszony błąd.

Spróbujmy przedstawić większość z wyżej wymienionych metod na przykładzie.

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

Sprawdź dane wyjściowe

Powinieneś zobaczyć następujący wynik -

W tym rozdziale wyjaśniono procedurę wykonywania metod w QUnit, która określa, która metoda jest wywoływana jako pierwsza, a która później. Poniżej przedstawiono procedurę wykonywania metod testowego interfejsu API QUnit wraz z przykładem.

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

Sprawdź dane wyjściowe

Powinieneś zobaczyć następujący wynik -

Tak wygląda procedura wykonania QUnit.

  • Moduł służy do grupowania przypadków testowych.

  • beforeEach() Metoda jest wykonywana dla każdego przypadku testowego przed wykonaniem przypadku testowego.

  • afterEach() metoda jest wykonywana dla każdego przypadku testowego jednak po wykonaniu przypadku testowego.

  • Pomiędzy beforeEach() i afterEach() każdy przypadek testowy jest wykonywany.

  • Powołanie QUnit.module() ponownie, po prostu zresetuj wszystkie funkcje beforeEach / afterEach wcześniej zdefiniowane przez inny moduł.

Czasami zdarza się, że nasz kod nie jest gotowy i przypadek testowy napisany w celu przetestowania tej metody / kodu kończy się niepowodzeniem, jeśli zostanie uruchomiony. QUnit.skippomaga w tym zakresie. Metoda testowa napisana przy użyciu metody Skip nie zostanie wykonana. Zobaczmy, jak działa metoda Skip.

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

Sprawdź dane wyjściowe

Powinieneś zobaczyć następujący wynik -

Czasami zdarza się, że nasz kod nie jest gotowy, a przypadek testowy napisany w celu przetestowania tej metody / kodu kończy się niepowodzeniem, jeśli zostanie uruchomiony. QUnit.onlypomaga w tym zakresie. Metoda testowa napisana wyłącznie przy użyciu metody zostanie wykonana, podczas gdy inne testy nie zostaną uruchomione. Jeśli określono więcej niż jedną tylko metodę, zostanie wykonana tylko pierwsza. Zobaczmy tylko metodę 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>
         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>

Sprawdź dane wyjściowe

Powinieneś zobaczyć następujący wynik -

Dla każdej operacji asynchronicznej w programie QUnit.test() oddzwonienie, użyj assert.async(), która zwraca funkcję „done”, która powinna zostać wywołana po zakończeniu operacji. assert.async () przyjmuje liczbę wywołań jako parametr. Wywołanie zwrotne zwrócone przez assert.async () zgłosi błąd, jeśli zostanie wywołane więcej niż liczba zaakceptowanych wywołań, jeśli zostanie podana. Każdydone()połączenie sumuje się z liczbą połączeń. Po zakończeniu każdego połączenia test jest wykonywany.

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

Sprawdź dane wyjściowe

Powinieneś zobaczyć następujący wynik -

Możemy użyć assert.expect()funkcja, aby sprawdzić liczbę twierdzeń wykonanych w teście. W poniższym przykładzie oczekujemy, że w teście zostaną wykonane trzy potwierdzenia.

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

Sprawdź dane wyjściowe

Powinieneś zobaczyć następujący wynik -

Podczas integracji QUnit z innymi narzędziami, takimi jak serwery CI, te wywołania zwrotne mogą być używane jako API do odczytywania wyników testów. Poniżej przedstawiono procedurę wykonania metody interfejsu API wywołania zwrotnego QUnit wraz z przykładem.

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

Sprawdź dane wyjściowe

Powinieneś zobaczyć następujący wynik -

Moduły z grupowanymi funkcjami testowymi służą do definiowania modułów zagnieżdżonych. QUnit uruchamia testy modułu nadrzędnego przed przejściem do bardziej zagnieżdżonych, nawet jeśli zostały zadeklarowane jako pierwsze. PlikbeforeEach i afterEachwywołania zwrotne w wywołaniu modułu zagnieżdżonego zostaną ustawione w trybie LIFO (ostatnie wejście, pierwsze wyjście) do zaczepów nadrzędnych. Możesz określić kod do uruchomienia przed i po każdym teście, używając argumentu i punktów zaczepienia.

Hooki mogą być również używane do tworzenia właściwości, które będą współdzielone w kontekście każdego testu. Wszelkie dodatkowe właściwości obiektu hooks zostaną dodane do tego kontekstu. Argument hooks jest opcjonalny, jeśli wywołujesz QUnit.module z argumentem wywołania zwrotnego.

Wywołanie zwrotne modułu jest wywoływane z kontekstem jako środowiskiem testowym, z właściwościami środowiska kopiowanymi do testów modułu, punktów zaczepienia i zagnieżdżonych modułów.

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

Sprawdź dane wyjściowe

Powinieneś zobaczyć następujący wynik -

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved