Il y a 3 niveaux de test:
- Les tests Unitaires: Chaque sous ensemble de l’application est testé de manière séparée. Ces tests permettent de s’assurer que chaque élément fonctionne correctement de manière indépendante.
- Les tests d’intégrations: Ils permettent de s’assurer que les sous ensembles de l’application « communiquent » bien entre eux et respectent les spécifications d’interface qui ont été définies dans le projet.
- Les tests fonctionnels: Dans cette phase, on va dérouler les processus métier de bout en bout (vision utilisateur) et s’assurer qu’ils sont conformes aux besoins du Client
Les tests Fonctionnels
Pour mettre en place ces tests fonctionnels, On est obligé d’avoir un navigateur, des drivers pour piloter le navigateur et un langage pour communiquer avec ces drivers.
En plus, quand le système échoue, c’est difficile de débugger parce qu’il va nous afficher que des erreurs et c’est à nous de chercher les problèmes.
Cypress est un outil de test Frontend de nouvelle génération conçu pour le Web moderne. C’est l’unique qui propose les drivers, pilotes et un dashboard afin de tester tout ce qui fonctionne dans le navigateur.
Comment mettre en place Cypress sur une application Angular?
https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements
Installer Cypress:
npm install cypress –save-dev
npm install start-server-and-test –save-dev
Lancer node_modules\.bin\cypress open
Comment configurer Cypress?
Configurer cypress.json:
{
« baseUrl »: « http://localhost:4300/ »
}
Configurer package.json:
{
« start:e2e »: « ng serve –port 4300 »,
« e2e »: « start-server-and-test start:e2e http-get://localhost:4300 cy:run »,
« cy:open »: « cypress open »,
« cy:run »: « cypress run »
}
Configurer tsConfig.json
https://docs.cypress.io/guides/tooling/typescript-support.html#Transpiling-TypeScript-test-files
Il faut configurer le fichier tsConfig.json de la façon suivante
{
« compilerOptions »: {
« strict »: true,
« keyofStringsOnly »: true,
« baseUrl »: « ../node_modules »,
« target »: « es5 »,
« lib »: [« es5 », « dom »],
« types »: [« cypress »]
},
« include »: [
« **/*.ts »
]
}
Architecture Cypress?
- Fixtures: Fausses données pour les tests.
- Integration: Le coeur du système, c’est là où on développe nos tests.
- Plugins: Pour développer des comportements supplémentaires.
- Screenshots: Pour sauvegarder des screens de test.
- Support: Pour ajouter des commandes.
Cypress et Typescript:
Par défaut, Cypress comprend du Javascript et du Coffescript. Pour réaliser des tests en Typescript, on peut ajouter un module NPM @bahmutov/add-typescript-to-cypress.
https://www.cypress.io/blog/2017/12/11/an-alternative-to-protractor-for-angular-projects/#
- npm i -D @bahmutov/add-typescript-to-cypress
- npm i -D @bahmutov/add-typescript-to-cypress@1.0.3
Cypress et Jenkins:
Il faut installer les dépendances suivants:
apt-get -y install xvfb libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
Ajouter un stage dans le pipeline
stage(‘e2e test’)
{
steps {
sh »’
cd services/app-frontend
npm run e2e
»’
}
}