docs: enrichir ARCHITECTURE, DEVELOPMENT_PRINCIPLES, GOLDEN_DATASET, TESTS_AUTOMATISES, TEST_ENVIRONMENT

docs/GOLDEN_DATASET.md

@@ -1,154 +1,170 @@
-# GOLDEN_DATASET.md — Expria / Coach TCF Canada
+# GOLDEN_DATASET.md — Expria Frontend
 
 > **Document de référence — Version 1.0**
-> Ce fichier contient les tests manuels à rejouer après CHAQUE session Claude Code,
-> avant de passer à la session suivante ou de déployer en production.
+> Ce fichier contient les tests manuels à rejouer après CHAQUE session Claude Code frontend, avant de déployer sur Cloudflare Pages.
 > Un seul test en rouge = la modification est refusée, on revient en arrière.
+>
+> Complément frontend du `GOLDEN_DATASET.md` backend. Les deux doivent passer avant un déploiement couplé.
 
 ---
 
 ## Principe d'utilisation
 
-1. Avant chaque session Claude Code : sauvegarder le code (commit Git)
+1. Avant chaque session Claude Code : commit Git propre
 2. Après chaque session Claude Code : rejouer TOUS les tests du groupe concerné
 3. Si un test échoue : ne pas continuer, identifier la régression, corriger d'abord
-4. En cas de doute : rejouer le dataset complet (section 7)
+4. En cas de doute : rejouer le groupe Z (smoke test complet)
 
-**Comptes de test à créer dans Supabase avant de commencer :**
+**Environnement de test :**
+- URL frontend local : `http://localhost:5173`
+- URL backend : `https://api.expria.app` (ou local si dev simultané)
+- Navigateurs à couvrir : Chrome + Firefox + Safari mobile (via DevTools mobile emulation minimum)
 
-| Compte | Plan | Usage |
+**Comptes de test (identiques au backend) :**
+
+| Compte | Plan | Mot de passe |
 |---|---|---|
-| test.free@expria.local | free | Tester les parcours Free |
-| test.standard@expria.local | standard | Tester les parcours Standard |
-| test.premium@expria.local | premium | Tester les parcours Premium |
-| test.quota@expria.local | free (5/5 simulations utilisées) | Tester le blocage quota |
-
-> Ces comptes sont créés via script SQL dans Supabase (ne pas les créer manuellement).
-> Voir `supabase/seeds/test_accounts.sql`.
+| test.free@gmail.com | free | Expria2025!test |
+| test.standard@gmail.com | standard | Expria2025!test |
+| test.premium@gmail.com | premium | Expria2025!test |
+| test.quota@gmail.com | free (5/5 utilisées) | Expria2025!test |
 
 ---
 
-## Groupe 1 — Authentification
+## Groupe A — Authentification et routing
 
-Ces tests vérifient que l'accès à l'application fonctionne correctement.
-
-| # | Test | Compte | Résultat attendu | ✅ / ❌ |
+| # | Test | Compte | Résultat attendu | ✅/❌ |
 |---|---|---|---|---|
-| A1 | Inscription avec email valide | Nouveau compte | Compte créé, plan = "free", redirection dashboard | |
-| A2 | Connexion avec email + mot de passe valides | test.free | Dashboard Free affiché, compteur simulations visible | |
-| A3 | Connexion avec mot de passe incorrect | test.free | Message d'erreur, pas de redirection | |
-| A4 | Déconnexion | test.free | Redirection page d'accueil, session détruite | |
-| A5 | Accès direct à /dashboard sans être connecté | — | Redirection vers /login | |
+| A1 | Arriver sur `/` sans être connecté | — | Page Home publique affichée | |
+| A2 | Cliquer "Se connecter" depuis Home | — | Redirection `/login`, formulaire visible | |
+| A3 | Inscription avec email + mot de passe valides | nouveau | Compte créé, plan=free, redirection `/dashboard` | |
+| A4 | Connexion avec identifiants corrects | test.free | Redirection `/dashboard`, plan Free affiché | |
+| A5 | Connexion avec mot de passe incorrect | test.free | Message d'erreur en français, pas de redirection | |
+| A6 | Déconnexion depuis le menu utilisateur | test.free | Redirection `/`, session invalidée | |
+| A7 | Accès direct à `/dashboard` sans auth | — | Redirection `/login` (ProtectedRoute) | |
+| A8 | Accès direct à `/t2-live` en tant que Free | test.free | Redirection ou PaywallModal "Exclusivité Premium" | |
+| A9 | Session JWT expirée pendant navigation | test.free | Message "Session expirée", redirection `/login` | |
+| A10 | Rafraîchir la page après login | test.free | Reste connecté, dashboard réaffiché | |
 
 ---
 
-## Groupe 2 — Plan Free (Découverte)
+## Groupe B — Plan Free (parcours complet)
 
-Ces tests vérifient le parcours complet d'un utilisateur Free.
-
-| # | Test | Compte | Résultat attendu | ✅ / ❌ |
+| # | Test | Compte | Résultat attendu | ✅/❌ |
 |---|---|---|---|---|
-| B1 | Dashboard Free affiché après connexion | test.free | Compteur "X/5 simulations", aperçu flouté du dashboard Premium visible | |
-| B2 | Lancer une simulation EE Tâche 1 | test.free (quota < 5) | Interface de production affichée, pas de tips | |
-| B3 | Soumettre une production EE | test.free (quota < 5) | Rapport affiché : score + NCLC visibles, critères floutés avec cadenas | |
-| B4 | Vérifier le rapport flouté | test.free | Au moins 1 élément flouté avec mention "Disponible en Standard" | |
-| B5 | Lancer une simulation EO Tâche 1 | test.free (quota < 5) | Interface d'enregistrement audio affichée | |
-| B6 | Cliquer sur EO Tâche 2 live | test.free | Cadenas affiché + message "Exclusivité Premium" | |
-| B7 | Tenter une 6e simulation | test.quota | Modal de blocage avec boutons "Standard" et "Premium" | |
-| B8 | Cliquer "Plus tard" dans le modal de blocage | test.quota | Modal fermé, pas de redirection | |
-| B9 | Cliquer "Mode Examen" | test.free | Cadenas + message "Exclusivité Premium" | |
+| B1 | Dashboard Free après connexion | test.free | Compteur "X/5 simulations", aperçu flouté du dashboard Premium visible | |
+| B2 | Badge compteur simulations affiché | test.free | Visible en permanence dans le header du dashboard | |
+| B3 | Lancer une simulation EE T1 | test.free (quota < 5) | Interface de production affichée, pas de tips visibles | |
+| B4 | Soumettre une production EE | test.free | Rapport affiché : score + NCLC visibles, critères floutés avec cadenas | |
+| B5 | Rapport flouté avec mentions correctes | test.free | "Disponible en Standard" + bouton upgrade visible | |
+| B6 | Lancer une simulation EO T1 | test.free | Interface d'enregistrement audio, pas d'erreur microphone | |
+| B7 | Tenter EO T2 live depuis le sélecteur de tâches | test.free | Cadenas + message "Exclusivité Premium" | |
+| B8 | Atteindre la 6e simulation | test.quota | Modal de blocage : "5/5 utilisées" + 2 boutons (Standard/Premium) + "Plus tard" | |
+| B9 | Cliquer "Plus tard" dans le modal | test.quota | Modal fermé, dashboard visible, pas de redirection | |
+| B10 | Cliquer "Mode Examen" | test.free | Cadenas + message "Exclusivité Premium" | |
+| B11 | Tenter accès URL direct `/exam-mode` | test.free | Redirection ou PaywallModal | |
 
 ---
 
-## Groupe 3 — Plan Standard
+## Groupe C — Plan Standard
 
-Ces tests vérifient le parcours complet d'un utilisateur Standard.
-
-| # | Test | Compte | Résultat attendu | ✅ / ❌ |
+| # | Test | Compte | Résultat attendu | ✅/❌ |
 |---|---|---|---|---|
-| C1 | Dashboard Standard après connexion | test.standard | Historique visible, bouton "Choisir une tâche" actif, mode examen verrouillé | |
-| C2 | Lancer une simulation EE sans limite | test.standard | Simulation accessible sans vérification de quota | |
-| C3 | Toggle "Suggestions d'idées" activé | test.standard | Suggestions d'idées visibles pendant la simulation | |
+| C1 | Dashboard Standard après connexion | test.standard | Historique visible, pas de compteur simulations, bouton "Choisir une tâche" actif | |
+| C2 | Lancer simulation EE sans limite | test.standard | Accès direct, aucune vérification de quota visible | |
+| C3 | Toggle "Suggestions d'idées" activé | test.standard | Suggestions visibles pendant la simulation | |
 | C4 | Toggle "Mode focus" activé | test.standard | Tips masqués pendant la simulation | |
-| C5 | Soumettre une production EE | test.standard | Rapport complet : score, critères, erreurs, modèle, exercices — rien flouté | |
-| C6 | Vérifier l'enregistrement dans le dashboard | test.standard | Production apparaît dans l'historique avec date, tâche, score | |
-| C7 | Cliquer sur une production dans l'historique | test.standard | Rapport complet de cette production affiché | |
-| C8 | Cliquer sur "Mode Examen" | test.standard | Message "Réservé au plan Premium" + bouton upgrade | |
-| C9 | Cliquer sur "EO Tâche 2 live" | test.standard | Cadenas + message "Exclusivité Premium" | |
-| C10 | Indice de préparation après 5 productions | test.standard (5 prod.) | Section indice visible avec score et message interprétatif | |
+| C5 | Rapport complet après soumission EE | test.standard | Score, critères détaillés, erreurs expliquées, modèle, exercices — rien flouté | |
+| C6 | Production apparaît dans le dashboard | test.standard | Date, tâche, score affichés dans la liste | |
+| C7 | Cliquer une production dans l'historique | test.standard | Rapport complet de cette production réaffiché | |
+| C8 | Cliquer "Mode Examen" | test.standard | Message "Réservé au plan Premium" + bouton upgrade | |
+| C9 | Cliquer "EO Tâche 2 live" | test.standard | Cadenas + message "Exclusivité Premium" | |
+| C10 | Après 5 productions : indice de préparation | test.standard | Section indice visible avec score et message interprétatif | |
+| C11 | Upgrade Standard → Premium : prorata affiché | test.standard | Avant confirmation, montant prorata visible (ex : "~10€ aujourd'hui") | |
 
 ---
 
-## Groupe 4 — Plan Premium
+## Groupe D — Plan Premium
 
-Ces tests vérifient le parcours complet d'un utilisateur Premium.
-
-| # | Test | Compte | Résultat attendu | ✅ / ❌ |
+| # | Test | Compte | Résultat attendu | ✅/❌ |
 |---|---|---|---|---|
-| D1 | Dashboard Premium après connexion | test.premium | Historique, indice, bouton "Lancer un examen" actif, T2 live accessible | |
-| D2 | Accéder à EO Tâche 2 live | test.premium | Page de préparation T2 affichée, bouton "Démarrer le dialogue" | |
-| D3 | Démarrer le dialogue T2 | test.premium | L'IA prend la parole en premier, audio reçu et joué | |
-| D4 | Répondre en audio (T2) | test.premium | L'IA réagit après la réponse du candidat | |
+| D1 | Dashboard Premium après connexion | test.premium | Historique, indice, patterns, bouton examen actif, T2 live accessible | |
+| D2 | Accéder à EO T2 live | test.premium | Page préparation T2, bouton "Démarrer le dialogue" actif | |
+| D3 | Démarrer le dialogue T2 | test.premium | État "Connecting" puis "Listening", l'IA prend la parole en premier | |
+| D4 | Répondre en audio à l'IA | test.premium | L'IA réagit après la réponse du candidat, état oscille listening/speaking | |
 | D5 | Fin de dialogue T2 | test.premium | Rapport complet affiché, production enregistrée avec tag "T2 Live" | |
-| D6 | Lancer mode Examen EE | test.premium | Page d'avertissement affichée avant démarrage | |
-| D7 | Confirmer le lancement Examen EE | test.premium | 3 tâches visibles, timer 60:00 démarré, inarrêtable | |
-| D8 | Vérifier le blocage à T=0 (Examen EE) | test.premium | Zone de texte figée, message "Temps écoulé", envoi automatique | |
-| D9 | Lancer mode Examen EO | test.premium | Timer 12:00 démarré, enregistrement actif | |
-| D10 | Analyse des patterns (5+ productions) | test.premium | Section "Mon profil" affiche erreurs récurrentes classées par type | |
-| D11 | Exercices long terme générés | test.premium | Exercices distincts de ceux du rapport individuel | |
+| D6 | Déconnexion WebSocket en cours de T2 | test.premium | État "Error" affiché, message utilisateur clair, option de reprise | |
+| D7 | Lancer mode Examen EE | test.premium | Page d'avertissement affichée avant démarrage | |
+| D8 | Confirmer Examen EE | test.premium | 3 tâches visibles, timer 60:00 démarré, inarrêtable | |
+| D9 | Blocage à T=0 (Examen EE) | test.premium | Zone de texte figée, message "Temps écoulé", envoi auto | |
+| D10 | Lancer mode Examen EO | test.premium | Timer 12:00, enregistrement actif, tâches enchaînées | |
+| D11 | Analyse patterns (5+ productions) | test.premium | Section "Mon profil" avec erreurs récurrentes classées | |
 
 ---
 
-## Groupe 5 — Paiements et changements de plan
+## Groupe E — Paiements Stripe
 
-Ces tests vérifient que le système de paiement fonctionne sans régression.
+> ⚠️ Utiliser les cartes de test Stripe :
+> - Carte valide : `4242 4242 4242 4242` (date future, CVC libre)
+> - Carte refusée : `4000 0000 0000 0002`
 
-> ⚠️ Ces tests utilisent les cartes de test Stripe.
-> Carte valide : `4242 4242 4242 4242` — expiry : n'importe quelle date future — CVC : n'importe lequel.
-> Carte refusée : `4000 0000 0000 0002`
-
-| # | Test | Compte | Résultat attendu | ✅ / ❌ |
+| # | Test | Compte | Résultat attendu | ✅/❌ |
 |---|---|---|---|---|
-| E1 | Upgrade Free → Standard | test.free | Redirection Stripe, paiement, retour dashboard Standard, plan = "standard" | |
-| E2 | Upgrade Free → Premium | test.free | Redirection Stripe, paiement, retour dashboard Premium, plan = "premium" | |
-| E3 | Upgrade Standard → Premium (prorata) | test.standard | Montant prorata affiché avant confirmation, accès Premium après paiement | |
-| E4 | Paiement refusé | test.free | Message d'erreur Stripe, plan inchangé, pas de régression | |
-| E5 | Accès immédiat après paiement | test.free | Dashboard du nouveau plan affiché sans délai ni reconnexion | |
-| E6 | Plan mis à jour dans Supabase | test.free | Colonne `plan` dans la table `profiles` reflète le nouveau plan | |
+| E1 | Upgrade Free → Standard (Stripe Checkout) | test.free | Redirection full page vers Stripe, paiement, retour dashboard Standard | |
+| E2 | Invalidation du cache plan après paiement | test.free → standard | usePlan() refetch automatiquement, dashboard bascule sans recharger la page | |
+| E3 | Upgrade Free → Premium | test.free | Même flux que E1, plan=premium après retour | |
+| E4 | Upgrade Standard → Premium avec prorata | test.standard | Montant prorata affiché avant confirmation, accès Premium immédiat | |
+| E5 | Paiement refusé (carte 4000 0000 0000 0002) | test.free | Message d'erreur Stripe clair, plan inchangé | |
+| E6 | Annuler au milieu du Checkout | test.free | Retour sur `/billing` ou `/pricing`, plan inchangé | |
 
 ---
 
-## Groupe 6 — Sécurité et permissions
+## Groupe F — Sécurité et permissions
 
-Ces tests vérifient qu'un utilisateur ne peut pas accéder à ce qu'il ne devrait pas.
-
-| # | Test | Compte | Résultat attendu | ✅ / ❌ |
+| # | Test | Compte | Résultat attendu | ✅/❌ |
 |---|---|---|---|---|
-| F1 | Accès direct URL /t2-live sans être Premium | test.standard | Redirection ou message "Accès réservé au Premium" | |
-| F2 | Appel API POST /corrections/ee sans JWT | — (non connecté) | Réponse 401 Unauthorized | |
-| F3 | Appel API GET /simulations d'un autre utilisateur | test.free | Réponse 403 ou liste vide (RLS Supabase) | |
-| F4 | Tentative de lancer examen via API (plan standard) | test.standard | Réponse 403 — plan insuffisant | |
-| F5 | Variable GEMINI_API_KEY visible dans le frontend | — | Introuvable dans le code source JavaScript chargé par le navigateur | |
+| F1 | URL directe `/t2-live` en Standard | test.standard | Redirection ou PaywallModal, pas d'accès à la page | |
+| F2 | Inspecter DevTools → clés privées | — | Aucune clé `SERVICE_ROLE`, `GEMINI`, `STRIPE_SECRET` visible | |
+| F3 | Inspecter DevTools → JWT en clair dans localStorage | test.free | JWT Supabase visible (normal, c'est un access token) mais pas de refresh token exposé | |
+| F4 | Modifier le plan dans DevTools via Redux/state | test.free | La modification locale n'a aucun effet — le backend reste l'autorité | |
+| F5 | Rapport contenant des caractères HTML potentiellement malicieux | test.standard | Rendu comme texte, pas comme HTML (aucune exécution) | |
+| F6 | CSP header présent dans la réponse HTTP | — | `Content-Security-Policy` défini dans les headers Cloudflare Pages | |
+| F7 | Console navigateur : pas de log de JWT ou données perso | test.free | Aucun `console.log` contenant email, token, payload API | |
 
 ---
 
-## Groupe 7 — Dataset complet (smoke test)
+## Groupe G — Responsive mobile
 
-À rejouer avant chaque déploiement en production.
-Ce sont les 10 scénarios les plus critiques, un par type de parcours.
+Tests à rejouer sur DevTools mobile emulation (iPhone SE, iPhone 12, Samsung Galaxy) ET sur vrai mobile si possible.
+
+| # | Test | Résultat attendu | ✅/❌ |
+|---|---|---|---|
+| G1 | Page Home lisible sur écran 375px | Pas de débordement horizontal, CTA accessible | |
+| G2 | Formulaire de login sur mobile | Champs bien dimensionnés, clavier virtuel ne cache pas le bouton | |
+| G3 | Dashboard Free sur mobile | Compteur visible, aperçu flouté lisible | |
+| G4 | Simulation EE sur mobile | Zone de texte utilisable, pas de zoom intempestif | |
+| G5 | Enregistrement audio EO sur mobile | Permission microphone demandée, enregistrement fonctionnel | |
+| G6 | T2 live sur mobile (Premium) | WebSocket fonctionne, audio bidirectionnel OK | |
+| G7 | Modal PaywallModal sur mobile | Scrollable si contenu déborde, bouton fermeture accessible | |
+
+---
+
+## Groupe Z — Smoke test (avant chaque déploiement)
+
+Les 10 scénarios les plus critiques, à rejouer dans l'ordre avant chaque déploiement production.
 
 | # | Test | Description rapide |
 |---|---|---|
-| Z1 | Inscription + simulation Free | Nouvel utilisateur → simulation → rapport flouté |
+| Z1 | Inscription + première simulation Free | Compte créé → simulation → rapport flouté visible |
 | Z2 | Blocage quota Free | 6e simulation → modal de blocage |
 | Z3 | Simulation Standard complète | Login → simulation → rapport complet → dashboard |
 | Z4 | Mode examen bloqué en Standard | Bouton mode examen → message upgrade |
 | Z5 | T2 live Premium | Login → T2 live → dialogue → rapport |
 | Z6 | Mode examen EE complet | Lancement → timer → T=0 → envoi auto → rapport |
-| Z7 | Paiement Free → Standard | Checkout Stripe → webhook → dashboard Standard |
-| Z8 | Prorata Standard → Premium | Montant affiché → confirmation → accès Premium |
-| Z9 | Sécurité JWT | Appel API sans token → 401 |
-| Z10 | Déconnexion + accès protégé | Déconnexion → accès /dashboard → redirection /login |
+| Z7 | Paiement Free → Standard | Stripe Checkout → retour dashboard Standard sans rechargement |
+| Z8 | Prorata Standard → Premium | Montant affiché → confirmation → accès Premium immédiat |
+| Z9 | Déconnexion + accès protégé | Logout → accès `/dashboard` → redirection `/login` |
+| Z10 | Responsive mobile Home + Login | Affichage correct sur iPhone SE |
 
 ---
 
@@ -160,7 +176,7 @@ Test échoue
 1. Noter le numéro du test et le comportement observé
 2. NE PAS continuer la session Claude Code
 3. Identifier le fichier modifié qui a causé la régression
-4. Revenir au commit Git précédent (git revert ou git checkout)
+4. Revenir au commit Git précédent
 5. Analyser la cause avec Claude (chat, pas code)
 6. Reformuler le prompt en ajoutant la contrainte manquante
 7. Relancer la session Claude Code
@@ -171,8 +187,16 @@ Test échoue
 
 ## Historique des sessions
 
-> Remplir après chaque session Claude Code.
+> Remplir après chaque session Claude Code frontend.
 
 | Date | Session | Tests rejoués | Résultat | Notes |
 |---|---|---|---|---|
 | — | — | — | — | — |
+
+---
+
+## Historique de ce document
+
+| Version | Date | Changements |
+|---|---|---|
+| 1.0 | 2026-04-17 | Création initiale, 55 tests frontend |