La méthodologie TDD, on l’a vu, propose d’écrire les tests comme première étape de code. Mais comment s’y prendre en JavaScript? Jetons un oeil à la solution proposée par les développeurs Yahoo!

Ceux connaissant Java ont l’habitude des frameworks tel JUnit ou encore TestNG. Le principe est le même avec YUI Test (développé donc par Yahoo!) qui va être utilisé lors de cet article.

Si maintenant nous entrons dans le coeur du sujet, imaginons que nous ayons à programmer une fonction qui vérifie que l’entrée d’un formulaire est bien un nombre. Si l’on suit la méthodologie TDD, on écrit d’abord le test de cette fonction. Cela va donner quelque chose comme ça:

var oTestCase = new YAHOO.tool.TestCase({
        name: "Test Common Fonctions", 
        setUp : function () {
            this.data = [-1,1,' -1', '+1', 'a234', '034'];
        }, 
        tearDown : function () {
            delete this.data;
        }, 
        testIsNumber: function () {
            var n, notN, result; 
            n = this.data[0];
            result = isNumber(n);
            YAHOO.util.Assert.isTrue(result);
        },
    });

Quelques explications sont peut-être nécessaires:

• On utilise ici l’objet YAHOO.tool.TestCase qui permet de rassembler nos tests. Dans l’idéal il faudrait veiller à garder un objet logique, c’est-à-dire ayant un ensemble de tests qui ont un rapport entre eux comme par exemple le test d’un fichier javascript spécifique.
• La propriété name permet de savoir quel test a été lancé. On le verra plus loin, une console nous permet de savoir rapidement si des tests ont échoués ou réussis.
• Les fonctions setUp et tearDown permettent de définir et détruire des objets nécessaires aux tests.
• Les tests en eux-mêmes commencent par test (ici testIsNumber). Ces contiennent ce qu’on appelle des assertions, qui en l’occurence dans le cas présent va vérifier que la valeur retournée par isNumber vaut bien true. Dans l’exemple ci-dessus je ne teste que la première entrée du membre data, mais c’est un exemple, ce n’est pas un test complet. Pour bien faire ses tests, il faut essayer de tester tous les cas possibles.
  

Passons maintenant à la deuxième étape: l’implémentation de notre fonction isNumber:

function isNumber(chain)
{
    try {
        intval(chain);
        return true;
    } catch (e) {
        return false;
    }
}

Nous avons donc notre implémentation de prête. L’exemple est ici très simple et j’espère qu’il ne déssert par la méthodologie dans le sens que ce n’est pas une perte de temps que de commencer par les tests. Un code dont on prend la peine de bien tester devient vraiment robuste et facilement maintenable. Le développeur garde également confiance en son code et si un nouveau développeur vient sur son code il peut rapidement se faire la main simplement en parcourant les tests! Bref, de nombreux avantages…

Maintenant pour lancer les tests, c’est comme toujours très simple avec YUI:

YAHOO.tool.TestRunner.add(oTestCase);
var oLogger = new YAHOO.tool.TestLogger();
YAHOO.tool.TestRunner.run();

Et encore uniquement les deux dernières lignes sont nécessaires! En ajoutant la première on a l’avantage d’avoir un affichage plus précis sur une console comme celle-là:

Simple non? La documentation fera découvrir encore d’autres utilisations possibles de YUI Test mais encore une fois, je ne peux qu’encourager cette méthode de développement qui facilitera la vie à bien plus d’un!

Pour aller plus loin

• La documentation de YUI Test pour découvrir toutes les possibilités du framework.
• La vidéo (~50 minutes) qui m’a fait découvrir YUI Test.
• Code source de l’exemple
• Autre billet parlant de YUI Test en anglais qui va dans le même sens
• Writing Effective JavaScript Unit Tests with YUI Test

Popularity: 1% [?]