Mise en place d'une intégration continue

Une suite de tests est l'un des meilleurs moyens de garder votre projet à l'abri des bogues, mais il est facile d'oublier de lancer des tests tout le temps. Les serveurs d'intégration continue (CI) vous permettent de configurer votre référentiel de projet afin que vos tests soient exécutés à chaque demande de validation et d'extraction.

Il existe des services payants tels que Circle CI et Travis CI, et vous pouvez également héberger gratuitement les vôtres à l'aide de Jenkins et d'autres. Bien que Circle CI et Travis CI soient des services payants, ils sont fournis gratuitement pour les projets open source. Vous pouvez créer un projet public sur GitHub et ajouter ces services sans payer. Les contributions au repo Angular sont automatiquement exécutées via une série complète de tests Circle CI.

Cet article explique comment configurer votre projet pour exécuter Circle CI et Travis CI, ainsi que pour mettre à jour votre configuration de test afin de pouvoir exécuter des tests dans le navigateur Chrome dans les deux environnements.

Configurer le projet pour Circle CI

Étape 1 : Créez un dossier appelé circleci à la racine du projet.
Étape 2 : Dans le nouveau dossier, créez un fichier appelé config.yml avec le contenu suivant :

Cette configuration met en cache node_modules/ et utilise npm run pour exécuter les commandes CLI, car @angular/cli n'est pas installée globalement. Le double tiret (--) est nécessaire pour passer des arguments au npm script.

Étape 3 : Validez vos modifications et envoyez-les dans votre référentiel.
Étape 4 : Inscrivez-vous à Circle CI et ajoutez votre projet. Votre projet devrait commencer à se construire.
Pour en savoir plus sur Circle CI à partir de la documentation Circle CI.

Configure project pour Travis CI

Étape 1 : Créez un fichier appelé .travis.yml à la racine du projet, avec le contenu suivant :

Cela fait la même chose que la configuration Circle CI, à la différence que Travis n'est pas livré avec Chrome, nous utilisons donc Chromium à la place.

Étape 2 : Validez vos modifications et envoyez-les dans votre référentiel.
Étape 3 :Travis CI et ajoutez votre projet. Vous aurez besoin de pousser un nouveau commit pour déclencher une construction.

Pour en savoir plus sur le test Travis CI dans la documentation Travis CI.

Configurer la CLI pour le test de CI dans Chrome

Lorsque les commandes CLI ng test et ng e2e exécutent généralement les tests de CI dans votre environnement, vous devrez peut-être encore ajuster votre configuration pour exécuter les tests du navigateur Chrome.

Il existe des fichiers de configuration pour le lanceur de test Karma JavaScript et pour l'outil de test de bout en bout Protractor, que vous devez ajuster pour démarrer Chrome sans sandbox.

Nous allons utiliser Headless Chrome dans ces exemples.

Dans le fichier de configuration de Karma karma.conf.js, ajoutez un lanceur personnalisé appelé ChromeHeadlessCI sous les navigateurs :

Dans le dossier racine de votre projet de tests e2e, créez un nouveau fichier nommé protractor-ci.conf.js. Ce nouveau fichier étend l'original protractor.conf.js.
Vous pouvez maintenant exécuter les commandes suivantes pour utiliser l'indicateur --no-sandbox :

Activer les rapports de couverture de code

Le CLI peut exécuter des tests unitaires et créer des rapports de couverture de code. Les rapports de couverture de code indiquent toutes les parties de notre base de code qui peuvent ne pas être correctement testées par vos tests unitaires.

Pour générer un rapport de couverture, exécutez la commande suivante à la racine de votre projet.

Une fois les tests terminés, la commande crée un nouveau dossier /coverage dans le projet. Ouvrez le fichier index.html pour voir un rapport avec votre code source et les valeurs de couverture de code.

Si vous souhaitez créer des rapports de couverture de code chaque fois que vous testez, vous pouvez définir l'option suivante dans le fichier de configuration CLI, à savoir angular.json :

Application de la couverture de code

Les pourcentages de couverture de code vous permettent d'estimer la quantité de code testée. Si votre équipe décide d'une quantité minimale définie pour les tests unitaires, vous pouvez appliquer ce minimum à l'aide du CLI Angular.

Par exemple, supposons que vous souhaitiez que la base de code ait une couverture minimale de 80%. Pour ce faire, ouvrez le fichier de configuration de la plate-forme de test Karma karma.conf.js et ajoutez ce qui suit dans la "coverageIstanbulReporter : key" .

Cette propriété thresholds force l'outil à appliquer une couverture de code minimale de 80% lorsque les tests unitaires sont exécutés dans le projet.