Application AngularJS et intégration continue sous Jenkins

Je vais vous parler du paramétrage d’une application Angular sous le serveur d’intégration continue JenkinsCI. Ce post fait suite à un article sur la gestion de la configuration dans une application Angular.

Prérequis sur le serveur d’intégration continue
Avant de commencer vous devrez installer si ce n’est pas déjà le cas plusieurs applications votre serveur d’intégration continue

• node.js pour son gestionnaire de package npm
• grunt, bower
• firefox et/ou autre navigateur que vous utilisez pour vos tests. Si vous installez firefox vous devez définir la variable d’environnement FIREFOX_BIN (C:\Program Files\Mozilla Firefox\firefox.exe)

Test unitaire et couverture du code par les tests
Comme toute application qui se respecte, vous pouvez (voir devez...) écrire des tests unitaires. Le projet karma vous aide à le faire. Je ne vais pas revenir sur le fonctionnement de ce framework qui est largement détaillé sur son site ou dans tous les exemples de codes fournis via l’équipe AngularJS.

Lors de l’exécution des tests vous avez la possibilité de personnaliser les rapports générés pour fournir des résultats au format XML à la mode Junit (tests unitaires) ou Cobertura (couverture du code par les tests). Ces formats de sortie sont intéressants car ils sont interprétés par Jenkins.

La première étape consiste à ajouter les librairies nécessaires à votre projet
npm install karma-junit-reporter 

Ensuite modifiez le fichier de configuration des tests karma.conf.js pour préciser

• les fichiers sources de l’application

preprocessors = {
    'app/scripts/**/*.js': 'coverage'
};

• les rapports créés en fin d’exécution

reporters = ['progress', 'junit', 'coverage'];

• les options de génération comme le répertoire de sortie

junitReporter = {
    outputFile: 'target/test-reports/unit.xml',
    suite: 'unit'
};
coverageReporter = {
    type : 'cobertura',
    dir : 'target/coverage/'
}

Paramétrage de grunt
Grunt est l’outil gérant le cycle de vie de votre application web. Nous allons commencer par ajouter une tâche clean permettant de nettoyer les éléments générés

Dans le bloc de configuration de Grunt grunt.initConfig({}) repérez la configuration de la tâche clean et définissez une nouvelle partie pour les tests comme ci dessous

clean: {
   dist: {
     files: [{
        dot: true,

        src: [
            '.tmp',
            '<%= yeoman.dist %>/*',
            '!<%= yeoman.dist %>/.git*'
            ]}]
   },
   test: {
        files: [{src: ['target']}]
   }
}

Modifiez ensuite le paramétrage de la tâche lançant les tests, pour ajouter une dépendances vers clean:test que vous venez de définir

grunt.registerTask('test',
   'clean:test',
   'karma'
]);

Vous pouvez tester le fonctionnement en lançant la commande
grunt test

Paramétrage de jenkins
Au niveau de Jenkins vous pouvez paramétrer un nouveau job qui

• récupérera les sources de votre SCM

• lancera grunt

• publiera les rapports générés

Et le tour est joué, vous avez un processus d’intégration continu qui vérifie que votre application se construit correctement et vous propose des rapports sur l'exécution des tests unitaires.