Tests unitaires javascript avec QUnit




 

Vous êtes développeurs, vous souhaitez écrire du code javascript de qualité. QUnit est fait pour vous : ce framework de tests va rendre vos applications plus robustes, plus facilement corrigeables et moins sensibles aux anomalies. Il va donc vous faciliter la vie grâce à l’introduction de tests automatisés.
QUnit est un framework de tests javascript développé par l’équipe JQuery. Dans cet article, je vous montre comment utiliser QUnit et tester automatiquement votre code rigoureusement.

 

QUnit, c’est quoi ?

Qunit est un framework de tests javascript qui vous aide au débuggage de votre code. QUnit a été développé par les membres de l’équipe de JQuery pour tester JQuery. Toutefois, il n’est pas spécifique aux tests JQuery, il peut être utilisé pour tester tout code javascript.

Si vous n’êtes pas encore familiarisé avec les tests unitaires, n’ayez aucune crainte. Il n’y a aucune difficulté à en appréhender les concepts.

Dans le développement informatique, un test unitaire permet de vérifier et valider le bon fonctionnement d’une application. Chaque fonctionnalité est testée par le biais de petits tests unitaires, chacun d’eux testant une partie de l’application.

Imaginez que vous ayez développé une fonction de multiplication. Les tests consistent à vérifier que la fonction multiplication fonctionne correctement.

 

Pourquoi tester son code ?

Si vous n’avez utilisé les tests unitaires, vous avez probablement développé votre code puis du le déployer pour le tester. Ensuite, vous faisiez des tests manuels en navigant dans votre application. Puis lorsqu’un bug se manifestait, vous le corrigiez. Cette manière de aire pose certains problèmes.

Le premier problème est que c’est un travail fastidieux. De plus en cliquant manuellement ici ou là, il est probable que vous oubliez des cas de tests et donc que vous passiez à côté de certains bugs, malgré votre volonté de tout tester.

Le deuxième problème est que vos tests manuels ne sont pas réutilisables : vous devez les faire à chaque ajout de fonctionnalité pour vérifier qu’il n’y a aucune régression sur votre application. Et sachez qu’il n’est pas facile de trouver des régressions.

 

Mais qu’est ce qu’une régression ?

Vous écrivez du code, vous le testez et tout fonctionne correctement. Des bugs apparaissent, vous les corrigez et vous redéployez. A l’utilisation, vous remarquez que des fonctionnalités développées avant la correction des anomalies se mettent à bugger juste après le déploiement. La correction des bugs a introduit des régressions. Une régression peut aussi se produire lorsque vous codez des évolutions de l’application.

En faisant du test unitaire, vous écrivez des tests permettant de trouver des bugs. A chaque modification du code, vous les réexécutez tous et ainsi vous retestez votre application complètement. Si un bug s’introduit dans votre code, certains tests ne fonctionnent plus. Avec le test en anomalie, il est alors facile de savoir dans quelle partie de l’application il y a du code buggé. Vous n’avez alors que cette partie à modifier, il est alors plus rapide à corriger.

Un autre avantage, spécialement pour le développement web, est qu’il est facile de tester la compatibilité des navigateurs avec votre application. Il suffit d’exécuter vos tests sur différents navigateurs, et si une erreur surgit sur l’un d’eux, il vous suffit de faire la correction puis de réexécuter vos tests en prenant soin de vérifier de n’avoir pas introduit de régression avec les autres navigateurs.

 

Initialisation de l’environnement de tests QUnit

Lorsque vous mettez en place des tests, la première chose à faire est d’initialiser votre environnement de tests par le biais d’une page html comme suit que vous nommez QUnit.html :

<html>  
<head>  
    <title>QUnit Test Suite</title>  
    <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen">  
    <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>  
    <!-- Les fichiers du projet -->  
    <script type="text/javascript" src="myProject.js"></script>  
    <!-- Les fichiers relatifs aux tests du projet -->  
    <script type="text/javascript" src="myTests.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>  
</body>  
</html>  

Rien de compliquer, vous devez simplement intégrer le fichier javascript, cible du test, relatif à votre projet () ainsi que le fichier javascript comportant les tests ().

Qui donne à l’affichage sous Google Chrome (c’est moins sexy sous Firefox) :

Remarquez que l’ihm de test indique la version du navigateur ainsi que le système d’exploitation dans lequel les tests sont effectuées :

 

Ecriture d’un premier test QUnit

L’écriture d’un test se fait en trois étapes :
– l’initialisation des données nécessaires au test;
– l’appel de la fonction testée;
– et la vérification du résultat (réussite ou échec) du test.

 

La fonction à tester avec QUnit

Imaginez que vous deviez testée une fonction booléenne javascript qui teste si un nombre est pair. Si le nombre est pair, la fonction renvoie la valeur true. Dans le cas contraire, c’est la valeur false qui est renvoyée.

Pour commencer, créez un fichier nommé myProject.js, ouvrez le dans un éditeur de texte et saisissez le code de la fonction estPair comme suit :

var estPair = function(nombre) {
 return nombre%2 === 0;
}

 

Syntaxe d’un test QUnit

Une première fonction QUnit nommée ok permet de tester une fonction booléenne : le test échoue si l’expression testée renvoie false. La fonction ok comme toutes les autres fonctions de tests QUnit sont aussi appelées assertion.

Avec QUnit, le test d’une fonction booléenne s’écrit sous la forme :

test('fonctionTestee()', function() { 
    ok(fonctionTestee(parametre1), 'chaine de caractères optionnelle affichée dans l'ihm de test'); 
....
    ok(fonctionTestee(parametre2), 'chaine de caractères optionnelle affichée dans l'ihm de test'); 
})  

La fonction ok() prend en premier un paramètre un booléen, le second étant optionnel.

Dans le cadre de l’exemple, vous l’écrivez :

test('estPair()', function() { 
    ok(estPair(0), '0 est un nombre pair'); 
    ok(estPair(2), '2 est un nombre pair'); 
    ok(estPair(-4), '-4 est un nombre pair'); 
    ok(!estPair(1), '1 n'est pas un nombre pair'); 
    ok(!estPair(-7), '-7 n'est pas un nombre pair');  
})  

La fonction test() QUnit prend deux paramètres :
– le premier est une chaîne de caractères intitulé du test;
– le second est une fonction anonyme encapsulant les différents cas de tests représentés par des assertions.

De manière plus générale :

test('Intitulé du test', function() { 
    assertion1;
......
    assertionN;
})  

Pour exécuter les tests de notre exemple, il suffit d’ouvrir la page QUnit.html dans le navigateur cible de votre application :

La page de tests indique :
– la durée des tests;
– le nombre de tests réalisés;
– pour chaque fonction testée en cliquant sur son nom, la liste détaillée des tests effectués avec un voyant indiquant la réussite (vert) ou l’échec (rouge) du test.

Ajoutez le test suivant qui échoue :

    ok(estPair(3), '3 est un nombre pair'); 

Puis réexécutez les :

Le test en défaut comporte bien un voyant rouge. Remarquez que QUnit indique la ligne qui pose problème dans le fichier source des tests (Source: at Object. (file:///home/frdubois/myTests.js:7:5).

 

Les autres assertions QUnit

Assertion de comparaison

L’assertion de comparaison equal() prend :
– en premier paramètre le résultat obtenu lors de l’appel de la fonction testée;
– en deuxième paramètre le résultat attendu qui devrait être obtenu lors de l’appel de la fonction testée;
– en troisième paramètre optionnel une chaîne de caractères affichées dans la page de test.

La syntaxe est proche de la fonction ok() : deux paramètres sont requis au lieu d’un, le dernier paramètre est optionnel.
Si la valeur obtenue est différente de la valeur attendue, le test échoue.

A titre d’exemple :

test('assertions', function() {  
    equals( 1, 1, '1 est égal à 1');  
});  

Attention, vous ne pouvez comparer des structures de données Json ou autres avec l’assertion equals().

Le même test en échec :

test('assertions', function() {  
    equals( 2, 1, '1 est égal à 1');  
});  

Assertion de comparaison des structures de données

Les assertions de comparaison deepEqual() et notDeepEqual() sont quasiment identiques aux fonction equal et notEqual. Simplement deepEqual() et notDeepEqual() permettent de comparer des structures de données Json ou autres.

Exemple :

test("deepEqual test", function() { 
   deepEqual({ a:1, b:2 }, { a:1, b:2 }, "{ a:1, b:2 } egal a { a:1, b:2 }"); 
});

Le même test en échec :

test("deepEqual test", function() { 
   deepEqual({ a:1, b:2 }, { a:1, b:3 }, "{ a:1, b:2 } egal a { a:1, b:2 }"); 
});

L’assertion notDeepEqual() s’utilise de la même manière que deepEqual().

 

Le mot de la fin

Je vous ai montré les fonctions de base de QUnit. Il en existe d’autres que je montrerais dans un prochain article notamment concernant les tests de levées d’exception et de fonctionnalités asynchrones.

Et vous, utilisez-vous un framework de tests javascript ?

 

Posté dans html5Taggé faire des jeux html5, game maker, javascript, qunit, qunit tutorial, qunit tutoriel, tdd javascript, test javascript  |  1 commentaire

Une réponse à "Tests unitaires javascript avec QUnit"

Répondre

*