docs(p5b): journal deploy + INDEX + prompt BrowserMCP E2E
- JOURNAL-V2.md : entree 2026-04-29, chantier P1->P5b, smoke test prod - aep-communaute-build/INDEX.md : 10/11 cases cochees (manque E2E Jules) - aep-communaute-build/PROMPT-BROWSERMCP-E2E.md : prompt E2E 5 scenarios desktop+mobile Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -11,6 +11,48 @@ Journal technique de la V2. Décisions, anomalies, points bloquants, TODOs.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 2026-04-29 — Cascade Onglet 1 : Pratiques régénératives (P1 → P5b)
|
||||||
|
|
||||||
|
**Commit deploy :** `e80b226` (feat/aep-pratiques-regeneratives, 10 commits depuis main)
|
||||||
|
**Exécutant :** Sonnet (agent autonome P1-P5b)
|
||||||
|
|
||||||
|
### Chantier P1 → P5b (résumé)
|
||||||
|
|
||||||
|
Création complète de l'onglet "Pratiques régénératives" sur `aep.trans-former.fr` :
|
||||||
|
|
||||||
|
- **P1** : scaffold types + API statique `GET /api/pratiques` (52 fiches JSON `public/data/pratiques-regeneratives.json`)
|
||||||
|
- **P2** : page `/pratiques-regeneratives` — carte Leaflet Europe + accordéon DOM-TOM, sidebar filtres (type, pays, matériaux), composants `PratiqueCard.vue` + `PratiqueModal.vue`
|
||||||
|
- **P3** : ajout onglet "Pratiques régé" dans le header nav desktop + hamburger mobile
|
||||||
|
- **P4** : page `/proposer-pratique` — formulaire contribution avec Zod, endpoint `POST /api/submit-pratique` avec rate limit, `public/data/pratiques-pending.json`
|
||||||
|
- **P5a** : build local validé (3.04 MB, APIs 200, 500 SSR = bug Windows/Node 24 préexistant non-bloquant)
|
||||||
|
- **P5b** : deploy prod + smoke test (3/3 endpoints 200, SSR title OK, JSON 52 fiches)
|
||||||
|
|
||||||
|
### Deploy
|
||||||
|
|
||||||
|
- Méthode : `tar .output/ | ssh vps-hetzner "cd /opt/aep && tar -xzf -"` + `systemctl restart aep`
|
||||||
|
- Env diff local vs VPS : VPS a des vars supplémentaires (MISTRAL, NOCODB worker, RESEND) — additionnel non-conflictuel, pas d'impact
|
||||||
|
- Note `deploy.sh` : le script a un BOM UTF-8 (ligne 1 `\xEF\xBB\xBF#!/bin/bash`) qui cause un exit 1 sur le `read -p` quand stdin est un pipe. Contournement : exécution manuelle des étapes. A corriger en V3.
|
||||||
|
|
||||||
|
### Smoke test prod (2026-04-29 01:38 UTC)
|
||||||
|
|
||||||
|
| Endpoint | HTTP | Note |
|
||||||
|
|---|---|---|
|
||||||
|
| GET /pratiques-regeneratives | 200 | SSR OK, titre trouvé (2 occurrences) |
|
||||||
|
| GET /proposer-pratique | 200 | SSR OK |
|
||||||
|
| GET /api/pratiques | 200 | JSON valid, 52 fiches |
|
||||||
|
|
||||||
|
### Ce qui reste à valider (Jules, E2E BrowserMCP)
|
||||||
|
|
||||||
|
- Markers Leaflet visibles + cliquables (Europe + DOM-TOM)
|
||||||
|
- Sidebar filtres fonctionnels (type, pays, matériaux)
|
||||||
|
- Modal fiche + bouton retour preservant filtres
|
||||||
|
- Formulaire `/proposer-pratique` : submit + message succès
|
||||||
|
- Comportement mobile 375×667 (sheet bas, swipe filtres, fiche pleine page)
|
||||||
|
|
||||||
|
Prompt E2E disponible : `aep-communaute-build/PROMPT-BROWSERMCP-E2E.md`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## 2026-04-27 — Session V3 : Finition mobile + Blog Liberapay + 3 deploys
|
## 2026-04-27 — Session V3 : Finition mobile + Blog Liberapay + 3 deploys
|
||||||
|
|
||||||
**Commit :** `a02a555` — feat(mobile): accordéon outremer, hamburger nav, logo AEP, fiches cliquables, chatbot fullscreen
|
**Commit :** `a02a555` — feat(mobile): accordéon outremer, hamburger nav, logo AEP, fiches cliquables, chatbot fullscreen
|
||||||
|
|||||||
45
aep-communaute-build/INDEX.md
Normal file
45
aep-communaute-build/INDEX.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
# INDEX — Cascade Onglet 1 : Pratiques régénératives
|
||||||
|
|
||||||
|
> Branche : `feat/aep-pratiques-regeneratives`
|
||||||
|
> Démarré : 2026-04-28
|
||||||
|
> Dernière mise à jour : 2026-04-29
|
||||||
|
|
||||||
|
## Statut global
|
||||||
|
|
||||||
|
```
|
||||||
|
P1 Types + API statique [x] done — commit a70c9e0
|
||||||
|
P2 Page /pratiques-regeneratives [x] done — commit a70c9e0
|
||||||
|
P3 Onglet nav + hamburger [x] done — commit 5fabcde
|
||||||
|
P4 /proposer-pratique + POST API [x] done — commits 83d4bd1 d10586c f25a7d3
|
||||||
|
P5a Build local + smoke test [x] done — commit e80b226 (recap P5a-RECAP.md)
|
||||||
|
P5b Deploy prod + smoke test prod [x] done — deploy 2026-04-29 01:38 UTC
|
||||||
|
JOURNAL-V2.md entrée 2026-04-29 [x] done
|
||||||
|
PROMPT-BROWSERMCP-E2E.md créé [x] done
|
||||||
|
Branche pushée sur Gitea [x] done — feat/aep-pratiques-regeneratives
|
||||||
|
Mise en ligne validée (E2E Jules) [ ] en attente — Jules sur autre PC
|
||||||
|
```
|
||||||
|
|
||||||
|
## Fichiers produits
|
||||||
|
|
||||||
|
| Fichier | Description |
|
||||||
|
|---------|-------------|
|
||||||
|
| `aep-communaute-build/P4-RECAP.md` | Récap chantier P4 form + API |
|
||||||
|
| `aep-communaute-build/P5a-RECAP.md` | Récap build local Windows |
|
||||||
|
| `aep-communaute-build/PROMPT-BROWSERMCP-E2E.md` | Prompt E2E pour Jules (autre PC) |
|
||||||
|
| `aep-communaute-build/INDEX.md` | Ce fichier |
|
||||||
|
|
||||||
|
## Smoke test prod (2026-04-29 01:38 UTC)
|
||||||
|
|
||||||
|
| Endpoint | HTTP | Detail |
|
||||||
|
|----------|------|--------|
|
||||||
|
| GET /pratiques-regeneratives | 200 | SSR OK, titre trouve (2 occurrences) |
|
||||||
|
| GET /proposer-pratique | 200 | SSR OK |
|
||||||
|
| GET /api/pratiques | 200 | JSON valid, 52 fiches |
|
||||||
|
|
||||||
|
## Action Jules
|
||||||
|
|
||||||
|
1. Copier `PROMPT-BROWSERMCP-E2E.md` sur le PC avec BrowserMCP + Brave
|
||||||
|
2. Lancer une session Claude Code, coller le prompt
|
||||||
|
3. Reporter les resultats dans `aep-communaute-build/E2E-RESULTS.md`
|
||||||
|
4. Cocher "Mise en ligne validee (E2E Jules)" ci-dessus
|
||||||
|
5. Merger `feat/aep-pratiques-regeneratives` dans `main`
|
||||||
172
aep-communaute-build/PROMPT-BROWSERMCP-E2E.md
Normal file
172
aep-communaute-build/PROMPT-BROWSERMCP-E2E.md
Normal file
@@ -0,0 +1,172 @@
|
|||||||
|
# PROMPT BrowserMCP — E2E Onglet Pratiques régénératives
|
||||||
|
> Cascade onglet 1 — à coller dans une session Claude Code avec BrowserMCP attaché à Brave.
|
||||||
|
> Date de création : 2026-04-29
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Mission
|
||||||
|
|
||||||
|
Tester en E2E les deux nouvelles pages de `aep.trans-former.fr` liées à l'onglet "Pratiques régénératives" : la carte principale `/pratiques-regeneratives` et le formulaire de contribution `/proposer-pratique`. Couvrir desktop ET mobile. Reporter tous les bugs trouvés (console JS, visuels, fonctionnels).
|
||||||
|
|
||||||
|
**URL de base :** `https://aep.trans-former.fr`
|
||||||
|
**Navigateur :** Brave avec extension BrowserMCP
|
||||||
|
**Mode :** Full auto, rapport final structuré
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Setup initial
|
||||||
|
|
||||||
|
1. Ouvre BrowserMCP et navigue vers `https://aep.trans-former.fr/pratiques-regeneratives`
|
||||||
|
2. Attends que la page soit fully loaded (pas de spinner Leaflet)
|
||||||
|
3. Prends un screenshot de référence `desktop-initial.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Scenario 1 — Carte desktop (chargement + structure)
|
||||||
|
|
||||||
|
**Objectif :** vérifier que la carte s'affiche correctement avec markers et sidebar.
|
||||||
|
|
||||||
|
Étapes :
|
||||||
|
1. `navigate` vers `https://aep.trans-former.fr/pratiques-regeneratives`
|
||||||
|
2. Attendre 3s (Leaflet init)
|
||||||
|
3. `snapshot` — décrire ce qui est visible : carte Europe, sidebar gauche, onglet header actif
|
||||||
|
4. Vérifier dans le DOM :
|
||||||
|
- Présence d'au moins 1 marker Leaflet (chercher `.leaflet-marker-icon` ou `.leaflet-pane`)
|
||||||
|
- Sidebar visible avec des cartes de pratiques (chercher titres/noms)
|
||||||
|
- Bandeau DOM-TOM présent en bas (textes Guadeloupe/Martinique/Réunion...)
|
||||||
|
5. Ouvrir la console (`evaluate` `window.__AEP_DEBUG__ || 'no debug'`) — noter les erreurs JS si présentes
|
||||||
|
6. `evaluate` `fetch('/api/pratiques').then(r=>r.json()).then(d=>d.list.length)` — doit retourner 52
|
||||||
|
|
||||||
|
Bugs à surveiller :
|
||||||
|
- Carte blanche (Leaflet tiles non chargés)
|
||||||
|
- Markers manquants ou hors viewport
|
||||||
|
- CSS `--nav-primary-solid` non résolu (barre nav sans couleur)
|
||||||
|
- Erreurs console "leaflet", "vue warn", "hydration mismatch"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Scenario 2 — Filtres sidebar (criteres + pays + type)
|
||||||
|
|
||||||
|
**Objectif :** vérifier que les filtres réduisent bien les résultats.
|
||||||
|
|
||||||
|
Étapes :
|
||||||
|
1. Depuis `/pratiques-regeneratives` desktop, noter le nombre de fiches dans la sidebar (label "X résultats" ou count visible)
|
||||||
|
2. Cliquer sur le chip "Matériaux" dans les filtres critères
|
||||||
|
3. Attendre 500ms — `snapshot` — noter le nouveau count
|
||||||
|
4. Cliquer sur le chip "Pays" (ou sélectionner France dans le filtre pays si c'est un select)
|
||||||
|
5. `snapshot` — noter le count (doit être inférieur ou égal à l'étape 3)
|
||||||
|
6. Cliquer sur le type "Coopérative" si accessible
|
||||||
|
7. `snapshot` — noter le count
|
||||||
|
8. Cliquer "Réinitialiser" ou le bouton reset — vérifier que le count revient au total (52)
|
||||||
|
|
||||||
|
Bugs à surveiller :
|
||||||
|
- Filtre appliqué mais count ne change pas
|
||||||
|
- Markers sur la carte non synchronisés avec la sidebar
|
||||||
|
- Reset qui ne fonctionne pas
|
||||||
|
- Chip actif sans indicateur visuel
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Scenario 3 — Fiche pratique (clic marker ou card + retour)
|
||||||
|
|
||||||
|
**Objectif :** vérifier que l'ouverture d'une fiche fonctionne et que le retour préserve les filtres.
|
||||||
|
|
||||||
|
Étapes :
|
||||||
|
1. Appliquer un filtre (ex: "Matériaux") pour avoir < 52 résultats
|
||||||
|
2. Cliquer sur une card dans la sidebar OU un marker sur la carte
|
||||||
|
3. `snapshot` — décrire ce qui est affiché : modal ? Page fiche ? URL change ?
|
||||||
|
4. Vérifier que la fiche contient : nom, description, critères, type, pays, URL (si disponible)
|
||||||
|
5. Cliquer le bouton "Retour" ou `navigateBack`
|
||||||
|
6. `snapshot` — vérifier que le filtre "Matériaux" est toujours actif et le count identique à avant
|
||||||
|
|
||||||
|
Bugs à surveiller :
|
||||||
|
- Clic sur card ne navigue pas
|
||||||
|
- Page fiche vide ou 404
|
||||||
|
- Bouton retour recharge sans filtres
|
||||||
|
- Scroll position perdu
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Scenario 4 — Formulaire de contribution
|
||||||
|
|
||||||
|
**Objectif :** soumettre une proposition valide et vérifier le message de succès.
|
||||||
|
|
||||||
|
Étapes :
|
||||||
|
1. `navigate` vers `https://aep.trans-former.fr/proposer-pratique`
|
||||||
|
2. `snapshot` — décrire le formulaire visible
|
||||||
|
3. Remplir les champs suivants :
|
||||||
|
- `#nom` : "Test BrowserMCP E2E"
|
||||||
|
- `#url` : "https://example.com/test-e2e"
|
||||||
|
- `#description_user` : "Pratique de test soumise automatiquement par BrowserMCP pour valider le pipeline de contribution de l'onglet Pratiques régénératives. Cette description fait plus de 100 caractères."
|
||||||
|
- Critères : cocher au moins 3 checkboxes (ex: "Matériaux", "Posture", "Vivant")
|
||||||
|
- Type d'entité : sélectionner "Collectif"
|
||||||
|
- Pays : sélectionner "France" dans le select
|
||||||
|
4. `snapshot` avant envoi — vérifier que les champs sont remplis
|
||||||
|
5. Cliquer le bouton `submit` du formulaire
|
||||||
|
6. Attendre 3s
|
||||||
|
7. `snapshot` — chercher le message de succès "Merci !" + "Ta proposition est en attente de modération."
|
||||||
|
|
||||||
|
Bugs à surveiller :
|
||||||
|
- Validation côté client ne se déclenche pas
|
||||||
|
- Submit retourne une erreur réseau (verifier dans console : `fetch POST /api/submit-pratique`)
|
||||||
|
- Message succès ne s'affiche pas
|
||||||
|
- Rate limit 429 (normal si on a soumis plusieurs fois — attendre 1h ou ignorer si premier test)
|
||||||
|
|
||||||
|
Note : si rate limit 429, c'est le comportement attendu. Réessayer en changeant légèrement le nom.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Scenario 5 — Mobile (viewport 375x667)
|
||||||
|
|
||||||
|
**Objectif :** valider l'expérience mobile de base.
|
||||||
|
|
||||||
|
Étapes :
|
||||||
|
1. Changer le viewport à 375x667 (iPhone SE) via `setViewport` ou équivalent BrowserMCP
|
||||||
|
2. `navigate` vers `https://aep.trans-former.fr/pratiques-regeneratives`
|
||||||
|
3. Attendre 3s
|
||||||
|
4. `snapshot` — décrire : sheet en bas ? Carte en fond plein écran ? Header avec hamburger ?
|
||||||
|
5. Tenter d'interagir avec la sheet du bas (si elle existe) : tapper sur le header de la sheet pour l'agrandir
|
||||||
|
6. `snapshot` — sheet en mode "half" ou "full" ?
|
||||||
|
7. Vérifier que les filtres sont accessibles (dans la sheet ou dans un drawer)
|
||||||
|
8. Cliquer une card si visible
|
||||||
|
9. `snapshot` — fiche pleine page ou modal plein écran ?
|
||||||
|
10. `navigate` vers `https://aep.trans-former.fr/proposer-pratique`
|
||||||
|
11. `snapshot` — formulaire lisible et accessible sur mobile ?
|
||||||
|
|
||||||
|
Bugs à surveiller :
|
||||||
|
- Sheet absente ou non draggable
|
||||||
|
- Carte non visible derrière la sheet
|
||||||
|
- Hamburger nav manquant
|
||||||
|
- Formulaire /proposer-pratique avec overflow horizontal
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Format de récap final attendu
|
||||||
|
|
||||||
|
```
|
||||||
|
Cascade onglet 1 — E2E [PASS / FAIL avec [N] bugs H]
|
||||||
|
|
||||||
|
Scénarios : [N]/5 OK
|
||||||
|
Bugs : [N] High / [N] Medium / [N] Low
|
||||||
|
Erreurs console : [N] (liste si > 0)
|
||||||
|
|
||||||
|
Détail par scénario :
|
||||||
|
S1 Carte desktop : [PASS/FAIL] — [note courte]
|
||||||
|
S2 Filtres : [PASS/FAIL] — [note courte]
|
||||||
|
S3 Fiche + retour: [PASS/FAIL] — [note courte]
|
||||||
|
S4 Form submit : [PASS/FAIL] — [note courte]
|
||||||
|
S5 Mobile : [PASS/FAIL] — [note courte]
|
||||||
|
|
||||||
|
Bugs H :
|
||||||
|
- [description + étape]
|
||||||
|
|
||||||
|
Bugs M :
|
||||||
|
- [description + étape]
|
||||||
|
|
||||||
|
Bugs L :
|
||||||
|
- [description + étape]
|
||||||
|
|
||||||
|
Screenshots : [N] pris
|
||||||
|
```
|
||||||
|
|
||||||
|
Envoyer ce récap à Jules (copier dans la session pilote ou dans `aep-communaute-build/E2E-RESULTS.md`).
|
||||||
Reference in New Issue
Block a user