QUnit è un framework per la creazione di unit test in JavaScript nato all'interno del progetto jQuery come tool ufficiale per i test sul codice del progetto, ma utilizzabile per verificare le funzionalità di qualsiasi codice JavaScript.
Per vederlo all'opera è sufficiente un comune browser, l'importazione della libreria in una pagina HTML e poche righe di codice. In questo articolo vedremo come utilizzarlo per creare unit test anche in presenza di chiamate asincrone, come ad esempio quelle effettuate con Ajax.
Preparare l'ambiente di test consiste nella creazione di una pagina HTML che include la libreria QUnit, il codice JavaScript da testare ed il codice degli unit test, come mostrato di seguito:
<html>
<head>
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="qunit/qunit.js"></script>
<script type="text/javascript" src="myCode.js"></script>
<script type="text/javascript" src="myUnitTest.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>
</body>
</html>In questo esempio myCode.js indica il codice JavaScript da sottoporre al test mentre myUnitTest.js rappresenta appunto gli Unit Test. Il corpo della pagina HTML è costituito da un insieme di elementi che conterranno il risultato dell'esecuzione dei test formattato secondo
le regole CSS contenute nel foglio di stile standard qunit.css.
Sviluppare ed eseguire uno Unit Test per Javascript
La scrittura di un test case con QUnit è basata sulla funzione test() che prevede due argomenti:
- una descrizione del test
- una funzione che si occupa di eseguire il codice da testare e di verificare il risultato tramite apposite asserzioni
Supponendo di voler sottoporre a test una funzione somma(x, y) che deve effettuare la somma dei due valori passati in ingresso, possiamo scrivere il nostro test case come segue:
test("Test della funzione somma()",
function () {
ok(somma(0,0) == 0, "La somma di 0 con 0 è 0");
ok(somma(2,0) == 2, "La somma di 2 con 0 è 2");
ok(somma(2,1) == 3, "La somma di 2 con 1 è 3");
ok(somma(2,-1) == 1, "La somma di 2 con -1 è 1");
ok(somma(-2,1) == -1, "La somma di -2 con 1 è -1");
});Il corpo della funzione di test contiene nel nostro caso una serie di chiamate alla funzione ok(). È questa la funzione di QUnit per la verifica delle asserzioni.
Per eseguire il test non dobbiamo fare altro che aprire la pagine HTML in un browser e, se le asserzioni
sono valide, avremo un risultato come quello mostrato nella figura seguente:
Al contrario, in caso di fallimento, verranno evidenziate in rosso le asserzioni non valide:
Asserzioni e organizzazione
Oltre alla funzione ok(), QUnit prevede altri costrutti per creare asserzioni più leggibili e test case meglio organizzati.
Mentre ok() si limita a valutare come un valore booleano l'espressione passata come primo argomento, le funzioni equal() e notEqual() eseguono una vera e propria comparazione tra un valore effettivo ed uno atteso. In altre parole, l'espressione:
ok(somma(-2,1) == -1, "La somma di -2 con 1 è -1");potrebbe essere riscritta in questo modo:
equal(somma(-2,1), -1, "La somma di -2 con 1 è -1");Oltre alla maggiore leggibilità del codice avremo in output, sulla pagina HTML risultante, il valore atteso e, in caso di fallimento, quello effettivo, semplificandoci in tal modo il debug.
La funzione equal(), però, non opera su oggetti ed array, per cui un'asserzione analoga alla seguente:
equal([1,2,3], [1,2,3], "I due array sono identici");è destinata a fallire. Nel confronto tra oggetti ed array occorre utilizzare la funzione same(), come mostrato nel seguente esempio:
same([1,2,3], [1,2,3], "I due array sono identici");Un altro costrutto molto utile, volto ad una migliore organizzazione dei test case è rappresentato dalla funzione module(). Questa funzione consente di raggruppare in moduli più test case aventi una qualche affinità:
module("Somma numeri positivi");
test("Somma di zeri", function () {ok(somma(0,0) == 0, "La somma di 0 con 0 è 0")});
test("Somma di numero positivo e zero", function () {ok(somma(2,0) == 2, "La somma di 2 con 0 è 2")});
test("Somma di numeri positivi", function () {ok(somma(2,1) == 3, "La somma di 2 con 1 è 3")});
module("Somma numeri misti");
test("Somma di numero positivo e numero negativo", function () {ok(somma(2,-1) == 1, "La somma di 2 con -1 è 1")});
test("Somma di numero negativo e numero positivo", function () {ok(somma(2,0) == 2, "La somma di 2 con 0 è 2")});
test("Somma di numeri positivi", function () {ok(somma(-2,1) == -1, "La somma di -2 con 1 è -1")});Nella definizione di un modulo è anche possibile specificare una funzione inizializzazione da eseguire prima del gruppo di test (setup()) ed una funzione di chiusura
da eseguire alla terminazione dei test del modulo (teardown):
module ("Descrizione del modulo", {
setup:
function() {...},
teardown:
function() {...}
})