Cours 26 - Tests d'acceptation avec Cypress

Objectifs

• Être en mesure d'intégrer Cypress avec Vue.js
• Être capable de rédiger et exécuter des tests d'acceptation pour une application Vue.js
• Comprendre l'utilité des tests d'acceptation pour garantir la qualité fonctionnelle d'une application

Déroulement

• Introduction aux tests d'acceptation avec Cypress
• Atelier 26 - Cypress
• Conclusion

Introduction aux tests d'acceptation avec Cypress

• Imaginez que vous livrez une maison à un client.
• Avant qu’il en prenne possession, vous validez que toutes les fonctions principales sont conformes aux attentes : les portes s’ouvrent, l’électricité fonctionne, l’eau coule.
• Dans le développement logiciel, ce type de validation correspond aux tests d’acceptation.

Les tests d’acceptation valident que l’application fonctionne conformément aux exigences exprimées par l’utilisateur. Dans le contexte de Vue.js, ils permettent de simuler des scénarios utilisateur complets, de bout en bout, pour s’assurer que l’interface répond aux attentes dans un contexte réaliste.

Pourquoi sont-ils importants ?

1. Validation des exigences : Ils confirment que les fonctionnalités livrées respectent les attentes des utilisateurs ou des spécifications.
2. Focus sur l'expérience utilisateur : Ils simulent les actions réelles d’un utilisateur, ce qui aide à détecter des anomalies que d’autres types de tests pourraient ignorer.
3. Réduction du risque d’erreurs en production : Ils détectent les bris dans les parcours critiques (ex. : authentification, navigation, soumission de formulaire).
4. Documentation vivante du comportement attendu : Chaque scénario de test agit comme une preuve fonctionnelle.

Et Cypress dans tout ça ?

Cypress est un outil d’automatisation moderne qui permet d’écrire des tests d’acceptation clairs et robustes pour les applications web. Il permet de :

• Simuler l’utilisation réelle d’une application Vue.js
• Vérifier que les flux utilisateurs complets se déroulent sans accroc
• Visualiser les tests avec une interface riche en informations
• Déboguer facilement grâce à ses outils intégrés (console, replay, etc.)

Comparatif des types de tests

Type de test	Objectif principal	Portée	Outil utilisé	Exemple concret (Vue.js)
Test unitaire	Vérifier qu’une fonction ou composant isolé fonctionne	Petite (fonction/module)	Vitest + Vue Test Utils	Tester une fonction de formatage de date ou un composant <Button>
Test d’intégration	Vérifier que plusieurs composants ou services fonctionnent bien ensemble	Moyenne (module + communication)	Vitest ou Cypress	Vérifier que <LoginForm> affiche un message après une requête API réussie
Test d’acceptation	Vérifier que le comportement de l’application respecte les attentes de l’utilisateur	Grande (parcours utilisateur complet)	Cypress	Vérifier qu’un utilisateur peut s’authentifier, naviguer et ajouter un produit au panier

Résumé visuel

[ Test unitaire ] ---> [ Test d’intégration ] ---> [ Test d’acceptation ]
(isolé) (collaboration) (parcours complet)

Théorie et documentation Cypress

• Le site officiel de Cypress est aussi une bonne source d'information :
  • Introduction to Cypress.
  • Commandes de Cypress.
  • Custom Commands.
  • Debugging.

Atelier 26 - Cypress

Consignes

• Télécharger le code du atelier 22. Cet exemple a été créé avec VueCli, option "E2E Testing" et solution de tests Cypress.
• Voir le fichier README-CYPRESS.md du projet exemple-auth
• Vous pouvez regarder les tests dans les fichiers de départ du TP03
• Écoutez la vidéo de démonstration de Cypress

Installation de Cypress

Pour installer Cypress, consulter le guide:
https://docs.cypress.io/guides/getting-started/installing-cypress
(ce n'est pas à faire c'est pour votre info!)

Remise

Il n'y a pas de remise, mais vous avez à mettre en place des tests d'acceptation dans votre TP03!