@yoann-86/react_test_lab 0.1.0

package/.github/actions/install-node/action.yml

@@ -0,0 +1,25 @@
+name: install-node
+description: Install dependencies for build and test jobs
+runs:
+  using: "composite"
+  steps:
+    - name: 🔧 Use Node.js 24.x
+      uses: actions/setup-node@v5
+      with:
+        node-version: 24.x
+
+    - name: 🔐 Enable Corepack
+      run: corepack enable
+      shell: bash
+
+    - name: 💾 Cache node_modules
+      id: cache-node-modules
+      uses: actions/cache@v4
+      with:
+        path: node_modules
+        key: ${{ runner.os }}-node-modules-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+    - name: 📥 Install dependencies
+      if: steps.cache-node-modules.outputs.cache-hit != 'true'
+      run: pnpm install --frozen-lockfile
+      shell: bash

package/.github/workflows/build_test_deploy_react.yml

@@ -0,0 +1,114 @@
+name: Build, Test and Deploy React Application
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    name: 🏗️ Build on Node.js 24.x
+    runs-on: ubuntu-latest
+    env:
+      REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}
+
+    steps:
+      - name: 👯‍♂️ Clone repository
+        uses: actions/checkout@v4
+      - name: Install Node.js 24.x and pnpm
+        uses: ./.github/actions/install-node
+      - name: 📑 Generate JSDoc documentation
+        run: pnpm jsdoc
+      - name: 🧰 Build
+        id: build
+        run: pnpm run build --if-present
+      - name: 🗒️ Build report
+        if: always()
+        run: |
+          echo "Node.js version: $(node -v)"
+          if [[ ${{ steps.build.outcome }} == "success" ]]; then
+            echo "✅ Build succeeded"
+          else
+            echo "❌ Build failed"
+          fi
+      - name: 🔧 Setup pages
+        id: pages
+        uses: actions/configure-pages@v3
+      - name: 📤 Upload artifact for deployment
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: build
+
+  test:
+    name: 🧪 Test on Node.js 24.x
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 👯‍♂️ Clone repository
+        uses: actions/checkout@v4
+      - name: Install Node.js 24.x and pnpm
+        uses: ./.github/actions/install-node
+      - name: 🧪 Integration Tests
+        id: int-test
+        run: pnpm test
+      - name: 🗒️ Test report
+        if: always()
+        run: |
+          echo "Node.js version: $(node -v)"
+          if [[ ${{ steps.int-test.outcome }} == "success" ]]; then
+            echo "✅ Integration Tests passed"
+          else
+            echo "❌ Integration Tests failed"
+          fi
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v5
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+  e2e:
+    name: 🎭 End-to-End Tests
+    runs-on: ubuntu-latest
+    env:
+      REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}
+
+    steps:
+      - name: 👯‍♂️ Clone repository
+        uses: actions/checkout@v4
+      - name: Install Node.js 24.x and pnpm
+        uses: ./.github/actions/install-node
+
+      - name: 🔨 Build for E2E
+        run: PUBLIC_URL=/ pnpm run build
+      - name: 📦 Install Cypress binary manually
+        run: pnpm exec cypress install
+      - name: 🎭 Run e2e tests with Cypress
+        id: e2e-test
+        uses: cypress-io/github-action@v6
+        with:
+          install: false
+          start: npx serve -s build -l 3000
+          wait-on: "http://localhost:3000"
+      - name: 🗒️ E2E Test report
+        if: always()
+        run: |
+          echo "Node.js version: $(node -v)"
+          if [[ ${{ steps.e2e-test.outcome }} == "success" ]]; then
+            echo "✅ End-to-End Tests passed"
+          else
+            echo "❌ End-to-End Tests failed"
+          fi
+
+  deploy:
+    name: 🚀 Deploy to GitHub Pages
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    needs: [build, test, e2e]
+    steps:
+      - name: 🚀 Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/README.md

@@ -0,0 +1,105 @@
+# React Test Lab
+
+Une application React de démonstration avec tests unitaires, documentation JSDoc et CI/CD automatisée via GitHub Actions.
+
+## Pré-requis
+
+- **Node.js** 22.x ou supérieur
+- **pnpm** (gestionnaire de paquets)
+
+Pour installer pnpm :
+
+```bash
+npm install -g pnpm
+```
+
+## Installation
+
+Cloner le projet et installer les dépendances :
+
+```bash
+git clone git@github.com:YoannAuroyYnov/react-test-lab.git
+cd react_test_lab
+pnpm install
+```
+
+## Exécuter l'application
+
+### Mode développement
+
+```bash
+pnpm start
+```
+
+L'application s'ouvrira automatiquement dans votre navigateur à l'adresse [http://localhost:3000](http://localhost:3000).
+
+### Build de production
+
+```bash
+pnpm build
+```
+
+Les fichiers optimisés seront générés dans le dossier `build/`.
+
+## Exécuter les tests
+
+### Tests unitaires et d'intégration (Jest + Testing Library)
+
+```bash
+pnpm test
+```
+
+Le rapport de couverture sera disponible dans le dossier `coverage/`.
+
+### Tests end-to-end (Cypress)
+
+Dans un premier terminal, démarrez l'application :
+
+```bash
+pnpm start
+```
+
+Dans un second terminal, lancez Cypress en mode headless :
+
+```bash
+npx cypress run
+```
+
+Vous pouvez aussi utiliser l'interface graphique :
+
+```bash
+pnpm cypress
+```
+
+#### Mocks utilisés dans les tests
+
+- **Jest / Testing Library** : `axios` est mocké dans les tests (par ex. `App.test.js`) pour contrôler les réponses de l'API `/users` et déclencher les chemins heureux ou d'erreur sans requêtes réseau réelles.
+- **Cypress** : les appels HTTP sont interceptés avec `cy.intercept` (ex. `cypress/e2e/navigation.cy.js`) pour stubber `GET /users` et `POST /users`, simuler un premier chargement vide ou prérempli, et forcer un retour `201` lors de la création d'utilisateur. Cela rend les parcours E2E déterministes et rapides.
+
+## Documentation
+
+Pour générer la documentation JSDoc :
+
+```bash
+pnpm jsdoc
+```
+
+La documentation sera générée dans `public/docs/` et accessible à `http://localhost:300/docs` après le build.
+
+## Déploiement
+
+Le projet est automatiquement déployé sur GitHub Pages via GitHub Actions lors d'un push sur la branche `main`.
+
+URL de déploiement : https://yoannauroyynov.github.io/react-test-lab/
+
+## Configuration CI/CD - Note sur l'optimisation
+
+**⚠️ Important :** La configuration CI/CD actuelle (parallélisation des jobs, caching pnpm, etc.) est explorée à titre **éducatif**. Sur un projet de cette taille, ces optimisations ne sont **pas pertinentes** en pratique.
+
+**Raison :** Les temps incompressibles de démarrage des conteneurs Docker (cold start, allocation de ressources) sont bien supérieurs aux gains potentiels du caching (~30-60 secondes économisées vs ~10-30 secondes de démarrage). En d'autres termes, le surcoût du lancement des pods dépasse largement les bénéfices de l'optimisation.
+
+Cette exploration reste utile pour :
+
+- Comprendre les bonnes pratiques GitHub Actions
+- Mettre en place une architecture scalable pour des projets plus volumineux
+- Démontrer une approche professionnelle de la CI/CD

package/TEST_PLAN.md

@@ -0,0 +1,94 @@
+# Documentation des Tests
+
+## 📊 Vue d'ensemble
+
+Ce projet implémente une suite complète de **119 tests** couvrant la validation de formulaire en deux niveaux :
+
+- **Tests unitaires** : Logique métier du module `validator.js`
+- **Tests d'intégration** : Interface React et interactions utilisateur
+
+## 🎯 Couverture de Code
+
+```
+----------------|---------|----------|---------|---------|-------------------
+File            | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
+----------------|---------|----------|---------|---------|-------------------
+All files       |     100 |    93.75 |     100 |     100 |
+ src            |     100 |      100 |     100 |     100 |
+  App.js        |     100 |      100 |     100 |     100 |
+ src/components |     100 |    93.75 |     100 |     100 |
+  UserForm.jsx  |     100 |    93.75 |     100 |     100 | 106
+----------------|---------|----------|---------|---------|-------------------
+
+Test Suites: 3 passed, 3 total
+Tests:       119 passed, 119 total
+```
+
+**✅ 100% de couverture** (Statements, Functions, Lines)
+
+## 🧪 Tests Unitaires (validator.js) - 116 tests
+
+### Fonctions testées
+
+| Fonction              | Tests | Couvre                                              |
+| --------------------- | ----- | --------------------------------------------------- |
+| `validateAge()`       | 9     | Majeur/mineur, dates futures, erreurs de paramètres |
+| `validateZipCode()`   | ~20   | Codes FR métropole/Corse/DOM-TOM, formats invalides |
+| `validateIndentity()` | ~18   | Noms/prénoms, accents, injection SQL/XSS            |
+| `validateName()`      | ~13   | Caractères spéciaux, chiffres, champs vides         |
+| `validateEmail()`     | ~25   | Format RFC 5322, injections, domaines invalides     |
+
+### 🛡️ Sécurité - 30+ tests anti-injection
+
+**Vecteurs testés** :
+
+- SQL Injection : `'; DROP TABLE users;--`, `' OR '1'='1`
+- XSS : `<script>alert('XSS')</script>`, `<img src=x onerror=...>`
+- Path Traversal : `../../../etc/passwd`, `Anne\\root`
+- Command Injection : `John; rm -rf /`
+
+**Protection** : Rejet des caractères `<>:;/\@[]{}` dans noms/emails
+
+## 🖥️ Tests d'Intégration (React) - 3 tests
+
+### 1. Happy Path
+
+Remplit le formulaire correctement, vérifie :
+
+- ✅ Bouton disabled → enabled
+- ✅ Sauvegarde dans localStorage
+- ✅ Vidage des champs après soumission
+
+### 2. Utilisateur Chaotique
+
+Simule erreurs et corrections :
+
+- ✅ Saisies invalides (chiffres, caractères spéciaux, injection SQL)
+- ✅ Messages d'erreur affichés
+- ✅ Corrections successives
+- ✅ Validation finale
+
+### 3. Counter (Sanity Check)
+
+Test basique de fonctionnement
+
+## 📝 Règles de Validation
+
+| Champ              | Règles                                                                 |
+| ------------------ | ---------------------------------------------------------------------- |
+| **Prénom/Nom**     | Obligatoire, pas de chiffres ni caractères spéciaux, accents autorisés |
+| **Email**          | Format valide (RFC 5322), présence de @ et domaine                     |
+| **Date naissance** | Majeur (18+ ans), pas de date future                                   |
+| **Code postal**    | 5 chiffres, codes français valides uniquement (01-95, 20xxx, 971-976)  |
+
+## 🚀 Commandes
+
+```bash
+# Tous les tests avec couverture
+pnpm test
+
+# Rapport HTML
+open coverage/lcov-report/index.html
+```
+
+---

package/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    ["@babel/preset-react", { runtime: "automatic" }],
+  ],
+};

package/cypress/e2e/app-spec.cy.js

@@ -0,0 +1,182 @@
+describe("Home page spec", () => {
+  const person = {
+    firstname: "Yoann",
+    lastname: "Auroy",
+    email: "yoann.auroy@ynov.com",
+    birth: "1986-12-31",
+    city: "Paris",
+    zipCode: "75001",
+  };
+
+  context("when users are already registered", () => {
+    const users = [
+      { firstname: "Alice", lastname: "Smith", name: "Alice Smith" },
+      { firstname: "Bob", lastname: "Johnson", name: "Bob Johnson" },
+    ];
+
+    beforeEach(() => {
+      cy.intercept("GET", "/users", users);
+      cy.visit("/react-test-lab");
+    });
+
+    it("should count the number of registered users", () => {
+      cy.get("h2").should("have.text", "Il y a 2 utilisateurs enregistrés");
+    });
+
+    it("should display the list of registered users", () => {
+      cy.get("[data-testid=users-list]")
+        .children()
+        .should("have.length", 2)
+        .first()
+        .should("contain.text", "1 - Alice Smith");
+    });
+
+    it("should add a new user to the list after registration", () => {
+      cy.get("[data-testid=navigation-button]").click();
+
+      cy.get("[data-testid=firstname-input]")
+        .type(person.firstname)
+        .should("have.value", person.firstname);
+
+      cy.get("[data-testid=lastname-input]")
+        .type(person.lastname)
+        .should("have.value", person.lastname);
+
+      cy.get("[data-testid=email-input]")
+        .type(person.email)
+        .should("have.value", person.email);
+
+      cy.get("[data-testid=birth-input]")
+        .type(person.birth)
+        .should("have.value", person.birth);
+
+      cy.get("[data-testid=city-input]")
+        .type(person.city)
+        .should("have.value", person.city);
+
+      cy.get("[data-testid=zip-input]")
+        .type(person.zipCode)
+        .should("have.value", person.zipCode);
+
+      cy.get("[data-testid=submit-button]").click();
+
+      cy.get("[data-testid=users-list]")
+        .children()
+        .should("have.length", 3)
+        .last()
+        .should("contain.text", "3 - Yoann Auroy");
+    });
+
+    it("should display only the 5 most recent users", () => {
+      const moreUsers = [
+        { firstname: "Charlie", lastname: "Brown", name: "Charlie Brown" },
+        { firstname: "David", lastname: "Wilson", name: "David Wilson" },
+        { firstname: "Eve", lastname: "Davis", name: "Eve Davis" },
+        { firstname: "Frank", lastname: "Miller", name: "Frank Miller" },
+      ];
+      cy.intercept("GET", "/users", [...users, ...moreUsers]);
+      cy.visit("/react-test-lab");
+
+      cy.get("[data-testid=users-list]").children().should("have.length", 5);
+
+      cy.get("[data-testid=users-list]")
+        .children()
+        .first()
+        .should("contain.text", "1 - Bob Johnson");
+
+      cy.get("[data-testid=users-list]")
+        .children()
+        .last()
+        .should("contain.text", "5 - Frank Miller");
+    });
+  });
+
+  context("when no users are registered", () => {
+    beforeEach(() => {
+      cy.visit("/react-test-lab/register");
+    });
+
+    it("should display a message when no users are registered", () => {
+      cy.visit("/react-test-lab");
+      cy.get("h2").should("have.text", "Il n'y a aucun utilisateur enregistré");
+    });
+
+    it("should register a new user", () => {
+      cy.get("[data-testid=firstname-input]")
+        .type(person.firstname)
+        .should("have.value", person.firstname);
+
+      cy.get("[data-testid=lastname-input]")
+        .type(person.lastname)
+        .should("have.value", person.lastname);
+
+      cy.get("[data-testid=email-input]")
+        .type(person.email)
+        .should("have.value", person.email);
+
+      cy.get("[data-testid=birth-input]")
+        .type(person.birth)
+        .should("have.value", person.birth);
+
+      cy.get("[data-testid=city-input]")
+        .type(person.city)
+        .should("have.value", person.city);
+
+      cy.get("[data-testid=zip-input]")
+        .type(person.zipCode)
+        .should("have.value", person.zipCode);
+
+      cy.get("[data-testid=submit-button]").click();
+    });
+  });
+
+  context("when form inputs are invalid", () => {
+    beforeEach(() => {
+      cy.visit("/react-test-lab/register");
+    });
+
+    it("should validate form inputs and disable submit button on errors", () => {
+      cy.get("[data-testid=firstname-input]")
+        .type("Yo4nn")
+        .should("have.value", "Yo4nn");
+      cy.get("[data-testid=firstname-error-text]").should(
+        "have.text",
+        "Les chiffres sont interdits",
+      );
+
+      cy.get("[data-testid=lastname-input]")
+        .type("; SELECT * FROM users;")
+        .should("have.value", "; SELECT * FROM users;");
+      cy.get("[data-testid=lastname-error-text]").should(
+        "have.text",
+        "Les caractères spéciaux sont interdits",
+      );
+
+      cy.get("[data-testid=email-input]")
+        .type("yoann.invalid_email.com")
+        .should("have.value", "yoann.invalid_email.com");
+      cy.get("[data-testid=email-error-text]").should(
+        "have.text",
+        "Le format de l'email est invalide",
+      );
+
+      cy.get("[data-testid=birth-input]")
+        .type("2020-01-01")
+        .should("have.value", "2020-01-01");
+      cy.get("[data-testid=birth-error-text]").should(
+        "have.text",
+        "Vous devez être majeur pour vous inscrire",
+      );
+
+      cy.get("[data-testid=zip-input]")
+        .type("7500")
+        .should("have.value", "7500");
+      cy.get("[data-testid=zip-error-text]").should(
+        "have.text",
+        "Le code postal doit comporter 5 chiffres",
+      );
+
+      cy.get("[data-testid=submit-button]").should("be.disabled");
+    });
+  });
+});

package/cypress/e2e/navigation.cy.js

@@ -0,0 +1,101 @@
+describe("Navigation spec", () => {
+  const person = {
+    name: "Yoann Auroy",
+    firstname: "Yoann",
+    lastname: "Auroy",
+    email: "yoann.auroy@ynov.com",
+    birth: "1986-12-31",
+    city: "Paris",
+    zipCode: "75001",
+  };
+
+  context("when no user is registered", () => {
+    beforeEach(() => {
+      cy.intercept("GET", "/users", []);
+      cy.intercept("POST", "/users", {
+        statusCode: 201,
+        body: { ...person, id: 1 },
+      });
+    });
+
+    it("should navigate on the nominal flow", () => {
+      cy.visit("/react-test-lab");
+      cy.get("h2").should("have.text", "Il n'y a aucun utilisateur enregistré");
+      cy.get("[data-testid=users-list]").children().should("have.length", 0);
+
+      cy.get("[data-testid=navigation-button]").click();
+      cy.url().should("include", "/register");
+
+      cy.get("[data-testid=firstname-input]")
+        .type(person.firstname)
+        .should("have.value", person.firstname);
+
+      cy.get("[data-testid=lastname-input]")
+        .type(person.lastname)
+        .should("have.value", person.lastname);
+
+      cy.get("[data-testid=email-input]")
+        .type(person.email)
+        .should("have.value", person.email);
+
+      cy.get("[data-testid=birth-input]")
+        .type(person.birth)
+        .should("have.value", person.birth);
+
+      cy.get("[data-testid=city-input]")
+        .type(person.city)
+        .should("have.value", person.city);
+
+      cy.get("[data-testid=zip-input]")
+        .type(person.zipCode)
+        .should("have.value", person.zipCode);
+
+      cy.get("[data-testid=submit-button]").click();
+
+      cy.url().should("include", "/react-test-lab");
+
+      cy.get("h2").should("have.text", "Il y a 1 utilisateur enregistré");
+
+      cy.get("[data-testid=users-list]")
+        .children()
+        .should("have.length", 1)
+        .first()
+        .should("contain.text", "1 - Yoann Auroy");
+    });
+  });
+
+  context("when a user is already registered", () => {
+    beforeEach(() => {
+      cy.intercept("GET", "/users", [person]);
+    });
+
+    it("should not navigate on error flow", () => {
+      cy.visit("/react-test-lab");
+      cy.get("h2").should("have.text", "Il y a 1 utilisateur enregistré");
+
+      cy.get("[data-testid=navigation-button]").click();
+      cy.url().should("include", "/register");
+
+      cy.get("[data-testid=firstname-input]")
+        .type("; DROP TABLE users;")
+        .should("have.value", "; DROP TABLE users;");
+      cy.get("[data-testid=firstname-error-text]").should(
+        "have.text",
+        "Les caractères spéciaux sont interdits",
+      );
+
+      cy.get("[data-testid=submit-button]").should("be.disabled");
+
+      cy.get("[data-testid=back-button]").click();
+      cy.url().should("include", "/react-test-lab");
+
+      cy.get("h2").should("have.text", "Il y a 1 utilisateur enregistré");
+
+      cy.get("[data-testid=users-list]")
+        .children()
+        .should("have.length", 1)
+        .first()
+        .should("contain.text", "1 - Yoann Auroy");
+    });
+  });
+});

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/cypress/support/e2e.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

package/cypress.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from "cypress";
+
+module.exports = defineConfig({
+  allowCypressEnv: false,
+
+  e2e: {
+    baseUrl: "http://localhost:3000",
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});