Exercice 26 - Mise en place de tests d'acceptation

Table des matières

Exercice 26 - Tests d’acceptation avec Cypress

Mise en situation

Vous venez de terminer plusieurs fonctionnalités côté client dans Vue.js. Le code semble fonctionner à la main, mais une application professionnelle ne peut pas dépendre uniquement de tests manuels.

Votre mandat est de mettre en place une suite de tests d’acceptation automatisés avec Cypress pour valider les parcours principaux d’une mini-application d’inscription aux ateliers Web.

L’objectif n’est pas de tester les détails internes des composants Vue, mais de vérifier que l’application répond aux attentes d’une utilisatrice ou d’un utilisateur.

Modalités

Objectifs d’apprentissage

À la fin de l’exercice, vous devriez être capables de :

Application fournie

Le gabarit contient une mini-application nommée Inscription aux ateliers Web.
Fichiers à utiliser: exer26.zip

Fonctionnalités déjà présentes :

Démarrage du projet 

npm install
npm run dev

L’application devrait être disponible localement sur le port Vite par défaut.

À faire (étapes)

Étape 0 - Explorer l’application

Avant d’écrire des tests :

  1. Lancez l’application.
  2. Essayez le formulaire manuellement.
  3. Identifiez les comportements attendus.
  4. Ouvrez le fichier src/App.vue.
  5. Repérez les attributs data-testid.

Questions à vous poser :

Étape 1 - Installer Cypress

Installez Cypress comme dépendance de développement.

npm install cypress --save-dev

Ouvrez ensuite Cypress une première fois.

npx cypress open

Choisissez :

  1. E2E Testing
  2. Le navigateur de votre choix
  3. La création des fichiers de configuration proposés par Cypress

Étape 2 - Configurer les scripts npm

Ajoutez les scripts suivants dans package.json.

{
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run"
  }
}

Conservez aussi les scripts déjà présents dans le projet.

Validation :

npm run cy:open
npm run cy:run

À ce stade, il est normal que cy:run échoue si aucun test utile n’a encore été écrit.

Étape 3 - Configurer cypress.config.ts

Votre configuration doit contenir un baseUrl pour éviter de répéter l’URL complète dans chaque test.

Exemple attendu :

import { defineConfig } from 'cypress'

export default defineConfig({
    e2e: {
        baseUrl: 'http://localhost:5173',
        supportFile: 'cypress/support/e2e.ts',
    },
})

Validation :

Étape 4 - Créer le fichier de tests

Créez le fichier suivant :

cypress/e2e/acceptation-inscription.cy.ts

Votre fichier doit contenir une suite principale :

describe('Inscription aux ateliers Web', () => {
    beforeEach(() => {
        cy.clearLocalStorage()
        cy.visit('/')
    })

    // Vos tests ici
})

Étape 5 - Écrire les tests d’acceptation

Scénario 1 - Affichage initial

Étant donné une personne qui arrive sur la page d’inscription
Quand la page est chargée
Alors le formulaire est visible
Et le compteur d’inscriptions affiche 0
Et le message de liste vide est visible

À valider minimalement :

Scénario 2 - Validation du formulaire vide

Étant donné une personne qui n’a rien saisi
Quand elle clique sur le bouton d’inscription
Alors les erreurs de validation sont affichées
Et aucune inscription n’est ajoutée

À valider minimalement :

Scénario 3 - Validation du courriel invalide

Étant donné une personne qui remplit le formulaire avec un courriel invalide
Quand elle soumet le formulaire
Alors un message d’erreur de courriel est affiché
Et aucune inscription n’est ajoutée

Exemple de courriel invalide :

marie.test

Scénario 4 - Inscription valide

Étant donné une personne qui remplit correctement le formulaire
Quand elle soumet le formulaire
Alors un message de succès est affiché
Et l’inscription apparaît dans la liste
Et le compteur d’inscriptions affiche 1

Données suggérées :

Scénario 5 - Refus d’un doublon

Étant donné une personne déjà inscrite à un atelier
Quand elle tente de s’inscrire une deuxième fois au même atelier avec le même courriel
Alors un message de doublon est affiché
Et le compteur d’inscriptions reste à 1

Attention : le test doit créer l’état initial à partir de l’interface, pas en modifiant directement le code Vue.

Scénario 6 - Suppression d’une inscription

Étant donné une inscription existante
Quand la personne clique sur le bouton de retrait
Alors l’inscription disparaît
Et le message de liste vide redevient visible
Et le compteur affiche 0

Scénario 7 - Persistance après rechargement

Étant donné une inscription existante
Quand la page est rechargée
Alors l’inscription est encore visible
Et le compteur affiche 1

Indice : utilisez cy.reload().

Scénario 8 - Suppression de toutes les inscriptions

Étant donné plusieurs inscriptions existantes
Quand la personne clique sur le bouton de suppression globale
Alors toutes les inscriptions disparaissent
Et le compteur affiche 0

Contraintes techniques

Vos tests doivent respecter les contraintes suivantes :

Conseils de structure

Vous pouvez créer des fonctions d’aide dans le fichier de test.

Exemple :

const inscrireParticipant = (
    name: string,
    email: string,
    workshopLabel: string,
): void => {
    cy.get('[data-testid="name-input"]').type(name)
    cy.get('[data-testid="email-input"]').type(email)
    cy.get('[data-testid="workshop-select"]').select(workshopLabel)
    cy.get('[data-testid="rules-checkbox"]').check()
    cy.get('[data-testid="submit-button"]').click()
}

Cette fonction est permise parce qu’elle reproduit les actions d’une personne utilisatrice.

Commandes utiles

Mode interactif :

npm run cy:open

Mode terminal :

npm run cy:run

Serveur de développement :

npm run dev

Compilation de production :

npm run build

Mode Expert

Défi 1 - Commande personnalisée

Déplacez l’action répétée d’inscription dans une commande Cypress personnalisée nommée :

cy.inscrireParticipant(...)

Vous devez aussi typer correctement la commande dans Cypress avec TypeScript.

Défi 2 - Données de test

Créez un fichier :

cypress/fixtures/participants.json

Utilisez ces données dans au moins deux tests.

Défi 3 - Test d’acceptation avec API simulée

Transformez la liste des ateliers pour qu’elle provienne d’un appel GET /api/workshops.

Dans Cypress, utilisez cy.intercept() pour simuler la réponse de l’API.

Validation :

Défi 4 - Pipeline de vérification

Ajoutez un script qui permet de lancer la compilation et les tests Cypress en une seule commande.

Exemple :

{
  "scripts": {
    "verify": "npm run build && npm run cy:run"
  }
}

Remise

Remettez sur Léa dans exercice 26:

À ne pas remettre