Pour faire suite à notre précédent article sur un projet AngularJS en typescript, nous allons maintenant voir comment automatiser les tests à l’aide de Grunt. Dans le prochain article, nous verrons comment optimiser notre application pour la distribution.

Le but n’est pas ici de faire un scénario ultra complexe avec divers environnements (dev, VS, prod), mais d’avoir un Gruntfile concis et puissant.

Présentation des étapes

Nous souhaitons mettre en place les processus suivants :

  • vérification de la propreté du code avec tslint
  • exécution de tests unitaires avec Karma (qui se charge de lancer les tests) et Jasmine (un framework de tests unitaires)

tslint

Tout d’abord nous allons exécuter ‘tslint’ sur tous nos fichiers ts. ‘tslint’ est un outil qui vérifie un coding style pour garantir une uniformité dans le code et éviter certaines mauvaises pratiques.

Installation et paramètrage de tslint

Plutôt que partir de zéro, vous pouvez récupérer un fichier tslint.json d’example sur github (le lien pointe sur la master, il peut contenir des options qui ne sont pas dans la dernière version stable). Le fichier est à renommer en tslint.json et à sauvegarder à la racine du projet. La configuration par défaut est vraiment très stricte, notamment sur le typage des variables où elle n’autorise pas d’inférence de type, mais pour l’exemple nous allons garder ce fichier quasiment inchangé.

Pour éviter que votre GIT soit souillé par le refactoring des différents devs, définissez une politique d’indentation ! Ici, nous avons choisi les tabulations. Nous avons choisi de n’utiliser que des tabs.

Dans le fichier tslint.json, passez la propriété indent à tabs pour que tslint le vérifie:

 

Une deuxième modification intéressante dans tslint est l’option quotemark pour forcer une cohérence dans la saisie des chaines de caractères. Comme on est dans un univers proche du JS, on gardera les string en single quote, ce qui permet de manipuler facilement du code html avec des double quotes.
Passez la propriété quotemark à “single”

 

Vous pouvez aussi augmenter le nombre de caractères maximum autorisé sur une ligne. De base la limite est à 140 mais vous pouvez le passer à 220 car ça se lit sans problème sur un grand écran.

 

Nous allons garder l’option no-var-keyword dans le tslint.conf ce qui permet d’interdire l’utilisation du mot clé “var”. Il faut alors uniquement passer par des let (pour déclarer des variables qu’on peut ré-affecter) et des const (pour des variables qu’on ne peut affecter qu’une fois). L’intérêt, en plus de permettre d’aider à la compréhension du code, est que ce sont des variables dont la visibilité est limitée au scope où elles sont déclarées. Cette approche a été adoptée dans l’ECMAScript6 et on retrouve le même concept chez Apple avec le Swift (mais avec les mots clés var et let).

Intégration de tslint dans VSCode

VSCode supporte depuis la version v0.10 les extensions, vous pouvez donc intégrer la vérification directement dans l’IDE grâce au plugin tslint pour VSCode.

Pour garantir une bonne indentation, demandez à VSCode de le faire pour vous. Pour cela, modifiez vos préférences (Preferences->User settings) et passez la propriété “editor.insertSpaces” à false :

 

Intégration de tslint dans grunt

Nous n’allons pas couvrir les bases de Grunt dans cet article, je vous invite donc à lire la présentation de grunt sur le site officiel.

Ajout des dépendances Grunt

Ajoutez dans votre ‘package.json’ la dépendance vers ‘tslint’. Ajoutez aussi la dépendances ‘load-grunt-tasks’, cela permet de charger automatiquement les taches grunt prédéfinies. Vous pouvez alors remplacer

par cette ligne

Modification du Gruntfile

Créez une tache ‘testing’ dans votre grunt. C’est à travers elle que l’on exécutera le ‘tslint’ et ensuite les tests unitaires.

Dans votre bloc de ‘grunt.initConfig’, ajoutez la configuration pour votre tache ‘tslint’.

L’attribut ‘files’ contient la liste de tous les fichiers ts à vérifier, c’est à dire tous les fichiers *.ts contenu dans les dossiers app, app_engine, models, et test (dossier qui contiendra tous les tests unitaires).

Comme vous pouvez le voir, c’est un peu verbeux et on l’impression de se répéter. Heureusement Grunt permet d’utiliser les même règles de brace expansion que Bash, c’est à dire utiliser des accolades pour générer des combinaisons de chaine de caractères.

On peut donc écrire la règle suivante qui sera équivalente

Pour garder le code Grunt propre, nous allons utiliser une variable globale pour stocker nos tableaux de fichiers. Ce code est à placer au début de votre Grunt, au dessus de votre ‘grunt.initConfig’.

Notre configuration de tslint ressemble donc à cela maintenant

 

Les tests unitaires

Karma est ce qu’on appelle un test runner, c’est à dire une application qui va s’occuper de faire tourner une série de tests. Pour bien fonctionner, on lui adjoint Jasmine, un framework de tests unitaires, et PhantomJS, un headless browser (un navigateur web qui fonctionne sans interface graphique).

La création de tests unitaires n’étant pas le sujet de cet article, on ne détaillera pas ce processus ici.

Installation de Karma et ses dépendances

Ajoutez les dépendances suivantes à votre fichier package.json

  • grunt-karma
  • jasmine
  • jasmine-core
  • karma
  • karma-jasmine
  • karma-phantomjs-launcher
  • phantomjs

Pour fonctionner, Karma a besoin d’un fichier de configuration. Vous pouvez récupérer un fichier karma.conf d’example sur le git officiel.

Pensez à mettre à jour vos définitions tsd pour Jasmine avec la commande suivante :

Modification du Gruntfile

Dans le fichier Gruntfile.js, modifiez la tache grunt ‘testing’ pour que les tests unitaires s’effectuent après tslint et après la compilation des fichiers ts.

Il ne nous reste plus qu’a créer la tâche karma. On crée une target ‘continuous’ dans laquelle Karma est configuré pour lancer chaque test dans PhantomJS; l’option singleRun fait que Karma ferme PhantomJS à la fin de chaque test.
Ajoutez ce code à coté de la tache tslint précédemment créée:

Conclusion

Voila le Gruntfile final que l’on obtient.

Vous pouvez télécharger le projet complet sur le git du TypescriptAngularStarter v0.2.3

Partager