Test e2e Angular avec Nightwatch.js

La mise en place des tests unitaires s’est énormément simplifiée avec Angular. Encore plus en utilisant Angular CLI. Du côté des tests e2e (End 2 End), on garde le bon vieux Protractor.

Je ne suis pas un grand fan de Protractor et ça faisait un moment que je voulais essayer une autre librairie. En parallèle, j’ai entendu du bien et lu plusieurs tweets sur Nightwatch.js.

Donc c’est parti ! Essayons Nightwatch.js sur un projet Angular.

Eviv Bulgroz !

Pour la partie Angular, on va pas aller très loin. Le projet est ultra simple : un component qui affiche à l’envers le texte saisi dans un input. On utilise Angular cli pour échafauder ça.

ng new reverse
cd reverse

On va créer 1 component et 1 pipe.

ng g c reverse
ng g p reverse

Bon ok ils ont le même nom, mais y’en a un c’est une pipe et l’autre c’est un component. Vous suivez ?

On peut regarder notre chef d’oeuvre sur http://localhost:4200 après un

npm start

Installation de Nightwatch.js

Y’a un peu de boulot, mais pas trop, vous allez voir.

D’abord on va installer Nightwatch.js

npm install nightwatch --save-dev
npm install wait-on -save-dev

wait-on c’est un petit utilitaire qui sert juste à s’assurer que le serveur WebDriver est bien démarré avant de lancer les tests. Parlons-en de WebDriver. WebDriver est une librairie pour l’automatisation des navigateurs. Elle offre une API sur laquelle s’appuie Nightwatch.js (tout comme Protractor d’ailleurs).

Comme notre projet est basé sur Angular CLI, il intègre déjà Protractor et donc tout ce qu’il faut pour travailler avec WebDriver. Pour ma part j’ai dû en plus installer Java. Je vous laisse adapter les commandes suivantes en fonction de votre os.

sudo apt install openjdk-9-jre-headless
./node_modules/.bin/webdriver-manager update

Ensuite on va modifier notre package.json pour lui ajouter les 2 scripts suivants :

Et finalement un petit fichier nightwatch.json à créer à la racine du projet pour configurer Nightwatch.js.

Testons l’environnement de test …

Avant de tester notre application, nous allons vérifier que Nightwatch.js fonctionne correctement.

Dans un répertoire “tests” créé pour l’occasion à la racine de notre projet, on ajoute notre premier test : byteclub_test.js. Alors oui c’est du JavaScript, ça ne devrait pas être très compliqué de faire du TypeScript, mais je n’y vois pas tellement d’intérêt.

On ouvre 2 terminaux et on lance :

npm run webdriver
npm run nw

Le premier sert à lancer le serveur WebDriver, on ne devrait plus avoir à s’en préoccuper. Le second lance notre test.

Ça marche \o/

La syntaxe Nightwatch.js

J’aime beaucoup la syntaxe proposée par Nightwatch.js. Je la trouve claire :

On raconte une histoire avec une chain API, on met en pause et on vérifie qu’on a le résultat obtenu.

Un truc que j’aime particulièrement c’est le simple **.waitForElementPresent(‘#someid’, 1000)**. Là-dessus la doc est très bien foutue : fluent api de Nightwatch.js.

Et finalement le test

Pas beaucoup de différence avec le test qu’on vient de faire au final. On va juste démarrer notre application et lancer le test.

npm start
npm run nw -- tests/reverse_test.js

Le ** — test/reverse_test.js** permet de lancer juste le test que l’on veut.

Et voilà !

N’hésitez pas à me dire ce que vous pensez de Nightwatch.js ou si vous l’utilisez vous même.