Installes et utilises Mochajs dans ton projet Symfony avec Composer par Nicolas Bouteillier

On arrête pas de parler de TDD tous les jours … En parler c’est bien mais faut s’y mettre ! Comme dirait Mc Cain:

C’est ceux qui en parle le plus, qui en mange le moins …

Et si on peut même faire du Cobol en TDD, y’a pas de raison qu’on ne puisse pas le faire pour du JS dans un projet Symfony. Ça va être pour les tests unitaires.

Sans rentrer trop dans les détails, j’ai un setup de dév tout prêt et automatisé avec Vagrant et Ansible, lorsque j’ai besoin d’un outil de dév, j’ai deux solutions:

• j’intègre le setup dans mon script Ansible, j’installe tout dans ma VM
• j’utilise composer et je mets ce qu’il faut dans les requis pour l’environnement de dév

Je suis plus back que front, je fais du JS, mais ça n’est pas ma grande spécialité, donc pour progresser, je me suis dit (en plus de lire excellent « Javascript et Jquery » de Jon Duckett), je vais faire du TDD !

Et là c’est le drame … Comment faire pour tester proprement du JS dans un projet symfony (PHP) ?

Après quelques recherches je trouves Mochajs, la syntaxe me parle, c’est documenté, et puis faut bien se lancer.

Il faut avoir Nodejs installé, puis Mochajs.

On va utiliser deux packages composer:

Le premier se charge d’installer nodejs, uniquement si il n’est pas déjà installé globalement, et le deuxième permets d’installer des assets avec NPM entre autre.

mouf/nodejs-installer

Packagist: https://packagist.org/packages/mouf/nodejs-installer
Github: https://github.com/thecodingmachine/nodejs-installer

koala-framework/composer-extra-assets

Packagist: https://packagist.org/packages/koala-framework/composer-extra-assets
Github: https://github.com/koala-framework/composer-extra-assets

L’installation à proprement parler:

Dans ton composer.json ajoutes ça:

"require": {
    "mouf/nodejs-installer": "^1.0",
    "koala-framework/composer-extra-assets": "~1.1"
},
"extra": {
    "require-dev-npm": {
        "mocha": "*"
    }
}

Pour pouvoir utiliser mocha localement, il lui faut nodejs dans le $PATH

Dans la section script de ton composer.js tu va ajouter cette ligne dans « post_install_cmd » et « post_update_cmd » pour qu’elle soit exécutée après install ou update:

"touch bin/mocha && chmod +x bin/mocha && echo '#!/bin/bash \n DIR=$( cd \"$( dirname \"${BASH_SOURCE[0]}\" )\" && pwd ) \n export PATH=$DIR/../vendor/nodejs/nodejs//bin:$PATH \n ../node_modules/.bin/mocha \"$@\"' > bin/mocha"

Cette ligne va simplement créer le fichier bin/mocha et ajouter node au $PATH avant d’exécuter le « vrai » mocha.

Exemple de section script de mon composer.json:

],
    "scripts": {
        "post-root-package-install": [
            "SymfonyStandard\\Composer::hookRootPackageInstall"
        ],
        "post-install-cmd": [
            [...] //do not copy/paste, it's just an example !
            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::removeSymfonyStandardFiles",
            "touch bin/mocha && chmod +x bin/mocha && echo '#!/bin/bash \n DIR=$( cd \"$( dirname \"${BASH_SOURCE[0]}\" )\" && pwd ) \n export PATH=$DIR/../vendor/nodejs/nodejs//bin:$PATH \n ../node_modules/.bin/mocha \"$@\"' > bin/mocha"
        ],
        "post-update-cmd": [
            [...]  //do not copy/paste, it's just an example !
            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::removeSymfonyStandardFiles",
            "touch bin/mocha && chmod +x bin/mocha && echo '#!/bin/bash \n DIR=$( cd \"$( dirname \"${BASH_SOURCE[0]}\" )\" && pwd ) \n export PATH=$DIR/../vendor/nodejs/nodejs//bin:$PATH \n ../node_modules/.bin/mocha \"$@\"' > bin/mocha"
        ]
    },

Pour installer tout ça:

composer install

#ou

compose update

Si composer est installé globalement.

Attention, prends deux minutes et va lire les différences entre composer install et update, pour ne pas faire de bêtises https://stackoverflow.com/questions/33052195/what-are-the-differences-between-composer-update-and-composer-install/33052243#33052243

Création du répertoire des tests

Soit directement dans ton IDE ou en terminal (attention aux permissions), tous les tests iront dans ce répertoire

mkdir src/Tests/Js

Un vrai exemple qui fonctionne:

Crées quelque part (on va dire dans src/js/) un fichier jeTestLeTddEtCestTop.js

function sum(a, b) {
    return a+b;
}
exports._test = {
    sum:sum
};

Puis dans src/Tests/Js

var asset = require('assert');
var app = require("../../../src/js/jeTestLeTddEtCestTop.js");

describe('sum', function () {

it('should return 5', function(){
var sumResult = app._test.sum(2,3);
assert.equal(sumResult, 5);
});

});

Pour lancer les tests

Tous les tests:

bin/mocha src/Tests/Js/*

Un test spécifique:

bin/mocha src/Tests/Js/file.js

C’est tout ! Tu peux faire du TDD pour ton JS.

Je sais que ça ne couvre que les tests unitaires, mais mon principal besoin est de découper et architecturer correctement mon JS, ceci dit, aujourd’hui je vais tester Panther pour faire les tests E2E, ça sera peut être le sujet d’un autre article. Et pour finir je ferai tourner ça de manière automatisée au moment de la mise en préprod de mon code.

Pour conclure, c’est un setup expérimental, je n’ai pas trouvé beaucoup d’infos. Si tu as des pistes, un setup plus performant, d’autres outils, de l’expérience, partages et dis nous tout en commentaire !