Projet React - Formulaire d'inscription

Application React de formulaire d'inscription avec validation des champs, affichage des erreurs par champ, sauvegarde des inscriptions valides dans le localStorage et affichage de la liste des inscrits.

Pre-requis

Git
Node.js (version 18 ou superieure recommandee)
npm (installe avec Node.js)

Cloner et installer le projet

git clone https://github.com/sqwado/ci-cd-formulaire-inscription.git
cd ci-cd-formulaire-inscription
npm install

Lancer et ouvrir l'application

npm start

Puis ouvrir http://localhost:3000 dans le navigateur.

Executer les tests

npm run test

Description fonctionnelle

Cette application React permet a un utilisateur de s'inscrire avec un formulaire contenant :

nom
prenom
email
date de naissance
ville
code postal

Les donnees valides sont sauvegardees dans le localStorage du navigateur sous la cle registrations (tableau d'inscriptions).

Regles de validation

Les controles sont centralises dans src/module/module.js.

Le nom, le prenom et la ville doivent contenir uniquement des lettres, avec prise en charge des espaces, apostrophes et tirets.
L'email doit respecter un format standard utilisateur@domaine.extension.
La date de naissance doit etre une vraie date au format YYYY-MM-DD, YYYY/MM/DD, DD/MM/YYYY ou DD-MM-YYYY.
L'utilisateur doit avoir au moins 18 ans.
Le code postal doit correspondre a un code postal francais metropolitain ou d'outre-mer valide.

Fonctionnement

Au chargement, l'application tente de recuperer les donnees deja sauvegardees dans le localStorage.

Lors de l'envoi du formulaire :

les donnees sont lues avec FormData ;
chaque champ est valide par les fonctions du module ;
si tout est valide, l'inscription est ajoutee a la liste registrations dans le localStorage ;
un toaster de succes est affiche ;
les champs du formulaire sont ensuite vides ;
la liste des inscrits est mise a jour dans l'interface ;
en cas d'erreur, un message explicite est affiche sous chaque champ invalide (en rouge) et un toaster d'erreur global est affiche.

Tests et couverture

La commande de test lance Jest via react-scripts, avec la couverture Istanbul.

npm run test

Exemple de resultat console :

$ npm run test

> ci-cd-formulaire-inscription@0.1.0 test
> react-scripts test --watchAll=false --coverage --collectCoverageFrom=src/**/*.{js,jsx} --collectCoverageFrom=!src/reportWebVitals.js --collectCoverageFrom=!src/index.js

 PASS  src/module/module.test.js                                                                                                  
 PASS  src/App.test.js
------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------|---------|----------|---------|---------|-------------------
All files   |     100 |      100 |     100 |     100 |                   
 src        |     100 |      100 |     100 |     100 |                   
  App.js    |     100 |      100 |     100 |     100 |                   
 src/module |     100 |      100 |     100 |     100 |                   
  module.js |     100 |      100 |     100 |     100 |                  
------------|---------|----------|---------|---------|-------------------

Test Suites: 2 passed, 2 total
Tests:       74 passed, 74 total
Snapshots:   0 total
Time:        2.595 s
Ran all test suites.

Le script exclut src/index.js et src/reportWebVitals.js de la couverture, conformement a l'enonce.

Les tests couvrent :

les fonctions unitaires de validation dans src/module/module.test.js ;
le rendu et les interactions du composant React dans src/App.test.js ;
le parcours d'integration reel du formulaire jusqu'a la sauvegarde dans localStorage, le vidage des champs, l'affichage des erreurs par champ et la liste des inscrits dans src/App.test.js.

La couverture attendue est de 100% sur les fichiers testes.

Home