Angular 12 : de TSLint à ESLint et de Protractor à Cypress
Publié le
Angular 12 a modernisé plusieurs de ses outils : je vous explique comment mettre à jour vos projets vers ESLint et Cypress.
De TSLint à ESLint
TSLint n’est plus installé dans les nouveaux projets. C’est à vous d’ajouter ESLint :
ng add @angular-eslint/schematics
Pour les projets existants, pour chaque application et chaque librairie :
ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --project nomduprojetdansangularjson --ignore-existing-tslint-config
La dernière option est facultative si vous souhaitez garder des règles customisées venant de votre configuration TSLint, mais cela risque d’ajouter des packages supplémentaires et non « officiels » pour ESLint.
Dans tous les cas, la configuration d’ESLint que vous obtiendrez avec ces commandes sera très pauvre et loin de ce que nous avions mis en place pendant la formation. Vous perdrez notamment la distinction entre composants Page et Component. Partez plutôt sur la base du .eslintrc.json suivant (à adapter éventuellement) :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Protractor est toujours fonctionnel mais n’est plus installé par défaut dans les nouveaux projets Angular. Il devrait être définitivement déprécié dans Angular 15. Vous pouvez suivre l’évolution de ce sujet dans la RFC officielle.
Il existe plusieurs alternatives, chacune avec ses avantages et ses inconvénients, par exemple :
Cypress : à la mode et installation facile, mais ne sait pas gérer Safari pour l’instant
Playwright : nativement en TypeScript car géré par Microsoft, fiable techniquement mais très récent donc installation et documentation encore un peu laborieuses
Nous allons voir comment installer et configurer Cypress :
ng add @cypress/schematic
Lorsqu’on vous demande si vous voulez mettre à jour la commande ng e2e, dites oui si vous avez peu de tests et que vous pouvez les migrer en une seule fois, non si vous en avez beaucoup et que vous voulez faire la migration progressivement.
Cette commande fait l’essentiel, mais il est préférable d’ajuster d’autres configurations :
.gitignore : Cypress produit par défaut des enregistrements vidéos des tests, qu’il vaut mieux ne pas committer, vous pouvez par exemple ignorer le répertoire cypress/videos
.eslintrc.json : dans ignorePatterns, ajoutez cypress/**/*
npm install eslint-plugin-cypress -D
cypress/.eslintrc.json : ajoutez ce fichier avec la configuration suivante :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Il ne vous reste plus qu’à écrire vos tests e2e dans le répertoire cypress/integration. Par exemple, avant avec Protractor :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Comme vous pouvez le voir, la logique est exactement la même, seule la syntaxe diffère. Vous trouverez d’autres exemples dans le guide de migration de Cypress.
Pour lancer vos tests, 2 possibilités :
ng e2e ou ng run nomdevotreprojetdansangularjson:cypress-open : en mode visuel
ng run nomdevotreprojetdansangularjson:cypress-run : en mode ligne de commande (pour le CI)
Vous pouvez mettre à jour vos tests progressivement. Une fois terminé, vous pouvez supprimer les packages suivants :