0
ARTDANTECH

724events

Refonte et fiabilisation du site one‑page 724events. Diagnostic des bugs, corrections ciblées, renforcement des tests (unitaires/intégration), rédaction du cahier de recette et préparation de la soutenance, pour une mise en production rapide et sûre.

Website

1. Contexte

• Client: 724events, agence évènementielle souhaitant publier la nouvelle version de son site vitrine one‑page.

• Équipe: Artdantech (freelance front‑end), Jean‑Baptiste (Directeur Marketing).

• Livrables: site corrigé et stable, suite de tests verte, cahier de recette complété, plan et support de soutenance.

• Point de départ: repo existant avec intégration partielle, note “Issues” du précédent dev, cahier de recette à finaliser.

2. Besoin

• Finaliser l’intégration, corriger les bugs bloquants/UX, sécuriser le comportement des composants, fiabiliser le build.

• Outiller le projet: exécuter et interpréter les tests, utiliser React DevTools, documenter via cahier de recette.

• Garantir une publication rapide sans régression avec une couverture de tests suffisante.

3. Client

• Visiteurs: prospects et partenaires de 724events, consultation multi‑device (mobile prioritaire).

• Commanditaire: Jean‑Baptiste (Marketing), besoin d’un site fluide, sans erreurs, prêt à communiquer.

4. Objectifs

4.1 Fonctionnels

• Navigation one‑page fluide (ancrages, header, sections), composants interactifs fonctionnels (Slider, Formulaires, FAQ/Accordéons, etc.).

• Responsive et accessibilité de base (navigation clavier, contraste, labels).

• Tests applicatifs au vert et cahier de recette couvrant les scénarios critiques.

4.2 Techniques

• Lancement local via yarn start, tests via yarn test --watch, zéro erreur de build/lint.

• Correction des états/props, contexte/données, effets (useEffect) et gestion d’événements.

• Mise à jour/ajout de tests Jest + React Testing Library (unitaires et intégration).

5. Contraintes / défis

• Héritage d’un code partiellement intégré avec dettes techniques et comportements non documentés.

• Délai court: prioriser les bugs à fort impact (crashes, blocages, parcours clés).

• Assurer la non‑régression: alignement tests ↔ cahier de recette ↔ besoins.

6. Processus / méthodologie

6.1 Analyse

• Lecture de l’onglet “Issues”, revue du cahier de recette, cartographie des composants problématiques.

• Audit rapide avec DevTools (console, réseau, performance) et React DevTools (state/props/context).

• Inventaire des tests en échec, corrélation avec les bugs observés.

6.2 Découpage en issues (GitHub)

• Environnement: Node/Yarn/commandes, correction éventuelle des scripts, lint/format.

• Debug UI: Slider (index, bouclage, affichage), navigation d’ancrage/smooth‑scroll, formulaires (validation/envoi), responsive.

• State Management: vérification du Context/props drilling, synchro état ↔ UI.

• Tests: réparer les tests existants, ajouter unitaires (composants/helpers) et intégration (Home/sections critiques).

• Accessibilité/UX: focus visible, aria‑labels, rôles, contrastes, tab order.

• Documentation: compléter le cahier de recette, plan de soutenance.

6.3 Architecture et logique

• Répartition: pages/sections (Header, Hero, Services, Références, Témoignages, Contact), composants UI (Button, Slider, Modal, Accordion).

• Stratégie de correction:
  - Reproduire chaque bug, écrire/activer un test rouge minimal, corriger jusqu’au vert.
  - Encapsuler effets (useEffect) avec dépendances correctes, éviter setState en boucle.
  - Normaliser les props (types/valeurs par défaut) et éviter les mutations.

• Tests:
  - Unitaires: rendu conditionnel, callbacks, formatage (helpers).
  - Intégration: parcours utilisateur (navigation, slider, soumission contact, ancrages).

6.4 Choix techniques (justification)

• React DevTools pour comprendre les changements d’état en temps réel sur Slider/sections dynamiques.

• Jest + React Testing Library: tests centrés usage utilisateur, limitent la dépendance aux détails d’implémentation.

• BDD léger (Given/When/Then) dans le cahier de recette pour aligner métier ↔ technique.

6.5 Flux principaux

• Visiteur: arrive → parcourt sections via nav → interagit (slider, CTA) → formulaire contact.

• Admin interne: vérifie réactivité mobile/desktop, ancrages corrects, absence d’erreurs console.

• QA: exécute la suite de tests, compare résultats avec cahier de recette, valide release.

6.6 Tests et qualité

• Cibles:
  - Slider: changement de slide, boucle extrémités, affichage index, focus/clavier.

  • Navigation: liens d’ancrage, mise en surbrillance active, retour en haut.

  • Formulaire: validations (obligatoires, formats), états (loading/success/error).

  • Responsive: points de rupture mobiles/tablettes/desktop.

• Critères: 0 failed test, 0 erreur console, Core UX fluide, accessibilité de base OK.

7. Analyse

• L’instabilité venait majoritairement d’une gestion d’état approximative (indices du Slider, dépendances d’effets) et de validations incomplètes (formulaire).

• En testant avant/après chaque correction (test rouge → vert), on sécurise le comportement et on évite les régressions.

8. Choix techniques

• Outils: React DevTools, Chrome DevTools, Jest, React Testing Library, ESLint/Prettier.

• Pratiques: composantisation claire, props immuables, hooks bien bornés, tests orientés usage.

9. Logique de résolution

• Préparation env → audit issues/tests → reproduction + test rouge → fix → test vert → revue a11y/responsive → compléter cahier de recette → préparer soutenance.

10. Stack utilisée

• Tech: React 18+, Hooks/Context, Yarn, Node ≥ 16.14.2.

• Tests: Jest, React Testing Library, jest‑dom, user‑event.

• Qualité: ESLint, Prettier, Husky (pré‑commit facultatif).

11. Résultat final

• Site one‑page 724events stable, sans bugs bloquants, navigation fluide et responsive.

• Suite de tests au vert (unitaires + intégration), couverture des parcours critiques.

• Cahier de recette exhaustif et plan de soutenance prêt, facilitant la mise en production et la démonstration.