faire du TDD javascript en ligne de commande avec QUnit

Récemment, j’ai voulu faire du TDD en ligne de commande (sans utiliser de navigateur), en javascript. J’ai eu beaucoup de mal à trouver une solution simple.

J’ai voulu utiliser JSUnit qui m’avait l’air assez répandu, mais il ne fait pas (simplement) de ligne de commande. Ou bien je n’ai pas trouvé, ou bien il fallait redévelopper une petite couche javascript par dessus. J’ai aussi voulu tester doh (Dojo Objective Harness), qui normalement est plutôt prévu pour faire des tests de dojo.

Et puis j’ai trouvé QUnit, qui paraissait lié à jQuery. Comme nous utilisons jQuery, il semblait plus logique d’utiliser cet outil. En l’utilisant, je me suis rendu compte qu’il ne nécessitait pas jQuery.

Cet article indique une version modifiée de QUnit qui fait le lien entre QUnit et QUnit-CLI. Téléchargez les 2 projets :
- QUnit modifié
- QUnit-CLI

Je vous propose une arbo projet comme celle-ci :

`-- src
    |-- main
    |   `-- js
    |       `-- monJavascript.js
    `-- test
        `-- js
            |-- lib
            |   |-- js.jar
            |   `-- qunit.js
            |-- suite.js
            `-- testMonJavascript.js
  • js.jar est le jar rhino
  • qunit.js est le fichier source qunit qui est contenu dans le premier lien
  • suite.js est le source javascript qui est dans QUnit-CLI/rhino

Il faut modifier suite.js comme suit :

  • supprimer la ligne load("../src/myLib.js"). J’ai préféré que ce soit chaque module javascript de test qui charge le code source correspondant
  • changer la ligne load("../qunit/qunit/qunit.js") pour pointer vers lib/qunit.js : load("lib/qunit.js")
  • en bas de fichier il y a l’import de tous les sources de test et aussi des tests qunit. Supprimer le load("../qunit/test/test.js") et ajouter la ligne load("testMonJavascript.js")

J’ai ensuite créé testMonJavascript.js comme suit :

load("../../main/js/monJavascript.js");
 
test("RetourneBienCoucou", function() {
	equals(coucou(), "coucou");
});

et exécuté :

~/src/projet_js/src/test/js$ java -jar  lib/js.jar  suite.js
js: Couldn't read source file "../../main/js/monJavascript.js:
    ../../main/js/monJavascript.js (No such file or directory)".
FAIL - RetourneBienCoucou
    FAIL|OK|Died on test #1: "coucou" n'est pas défini - ReferenceError
        { message: '"coucou" n'est pas défini', fileName: '', lineNumber: 0 }|
----------------------------------------
 PASS: 0  FAIL: 1  TOTAL: 1
 Finished in 0.045 seconds.
----------------------------------------

et créé monJavascript.js dans main/js :

function coucou() {  return "blah"; }

A présent l’exécution du test donne :

~/src/projet_js/src/test/js$ java -jar  lib/js.jar  suite.js
FAIL - RetourneBienCoucou
    FAIL|EQ||Expected: coucou , Actual: blah
----------------------------------------
 PASS: 0  FAIL: 1  TOTAL: 1
 Finished in 0.035 seconds.
----------------------------------------

Et finalement en remplaçant par un return « coucou » :

~/src/projet_js/src/test/js$ java -jar  lib/js.jar  suite.js
PASS - RetourneBienCoucou
----------------------------------------
 PASS: 1  FAIL: 0  TOTAL: 1
 Finished in 0.009 seconds.
----------------------------------------

Ceci permet de faire des tests javascript sans DOM. Nous verrons dans un prochain post comment faire des tests en simulant le navigateur avec env.js.

Cette entrée a été publiée dans javascript, tests, avec comme mot(s)-clef(s) . Vous pouvez la mettre en favoris avec ce permalien.

7 réponses à faire du TDD javascript en ligne de commande avec QUnit

  1. Philippe Blayo dit :

    Je verrais de la valeur à rendre disponible une version de suite.js améliorée comme tu l’indiques.

  2. Jean-Baptiste Potonnier dit :

    Il n’y aurait pas une petite inversion expected/actual?
    C’est vrai que ça n’est pas vraiment l’ordre habituel des frameworks de test.

    Sinon très bon article. Merci de partager cette expérience.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>