Test : Page d'accueil

Slice : Slice 1 (Page d’accueil)
Cycle : DOC → SPEC → CODE → TEST → INTÉG
Statut : TEST

---

1. Objectif

Valider l’implémentation de la page d’accueil avec rendu PageBuilder depuis Sanity en mode SSG.

---

2. Prérequis

• Sanity Studio configuré avec le schéma page
• Page Sanity créée avec slug “/”
• Contenu PageBuilder ajouté (hero, features, etc.)
• Middleware preview configuré

---

3. Tests de build

3.1. Build Astro

Commande :

task build:web

Attendu :

• Build réussi sans erreurs
• Page d’accueil générée en HTML statique
• Fichiers CSS générés
• Aucune erreur GROQ

Résultat : ✅ Build réussi

---

4. Tests de rendu local

4.1. Démarrage du serveur de développement

Commande :

cd apps/web
npx astro dev --background

Attendu :

• Serveur démarré sur http://localhost:4321
• Message : Dev server running at http://localhost:4321

4.2. Test de la page d’accueil

Commande :

curl http://localhost:4321/

Attendu :

• HTML valide retourné
• Structure MainLayout présente
• Contenu PageBuilder rendu

Résultat : ✅ Page accessible et rendue

4.3. Arrêt du serveur

Commande :

npx astro dev stop

---

5. Tests mode preview

5.1. Configuration preview dans Sanity Studio

Fichiers modifiés :

• apps/studio/schemaTypes/page.ts : Configuration preview ajoutée
• apps/studio/sanity.config.ts : Logique de preview pour type page

Configuration :

• Preview URL générée automatiquement pour le type page
• Gestion spécifique du slug “/” pour la page d’accueil
• Bouton “Open Preview” fonctionnel dans le Studio

5.2. Démarrage du middleware preview

Commande :

./scripts/inject_secret_to_cloudflare.sh --env=dev --service=preview-middleware

Attendu :

• Secret injecté dans Cloudflare
• Worker créé/déployé
• .dev.vars créé pour tests locaux

5.3. Démarrage local du middleware

Commande :

cd services/preview-middleware
npx wrangler dev --env dev --show-interactive-dev-session false --port 8791

Attendu :

• Middleware démarré sur http://localhost:8791
• Message : Ready on http://localhost:8791

5.4. Test de validation du secret

Commande :

curl "http://localhost:8791/api/preview?secret=$(grep SANITY_PREVIEW_SECRET .env | cut -d '=' -f2- | tr -d '"')&slug=/"

Attendu :

• Redirect avec cookie sanity-preview
• Code HTTP 307

Résultat : ✅ Middleware fonctionne

5.5. Test depuis Sanity Studio

Procédure :

1. Ouvrir Sanity Studio
2. Créer/éditer un document page avec slug “/” ou “/test”
3. Cliquer sur “Open Preview”
4. Vérifier que la page correspondante s’affiche avec le contenu preview
5. Cliquer sur “Quitter la preview” pour tester la route exit-preview

Attendu :

• Navigation vers la page correspondante (accueil pour “/”, /test pour “/test”)
• Cookie sanity-preview posé
• Bannière preview affichée
• Contenu draft visible si mode preview activé
• Route exit-preview supprime le cookie et redirige vers “/”

---

6. Configuration SSG

6.1. Vérification de la configuration

Fichier : apps/web/src/pages/index.astro

Configuration :

---
export const prerender = true;
---

Attendu :

• prerender = true présent
• Page générée en HTML statique au build
• Conforme à l’ADR-SSR-Pur.md

Résultat : ✅ Configuration correcte

---

7. Intégration Sanity

7.1. Query GROQ

Query utilisée :

*[_type == "page" && slug.current == "/"][0]{
  title,
  description,
  pageBuilder[]{
    _type,
    _key,
    ...select(
      _type == "hero" => {...},
      _type == "features" => {...},
      ...
    )
  }
}

Attendu :

• Syntaxe GROQ valide
• Récupération correcte des données
• Select conditionnel fonctionne

Résultat : ✅ Query valide

7.2. Mode preview

Fichier : apps/web/src/lib/sanity.ts

Intégration :

• Utilisation de getSanityClient() existant
• Détection automatique du cookie sanity-preview
• Basculement vers previewDrafts si cookie présent

Résultat : ✅ Intégration fonctionnelle

---

8. Composants PageBuilder

8.1. Composants créés

• Hero.astro : Section hero avec heading, subheading, CTA
• Features.astro : Grille de features
• Testimonials.astro : Témoignages clients
• CTA.astro : Call-to-action
• RichText.astro : Rendu Portable Text
• ImageGallery.astro : Galerie d’images

Résultat : ✅ Tous les composants créés

8.2. Rendu conditionnel

Fichier : apps/web/src/pages/index.astro

Logique :

{page?.pageBuilder?.map((block) => {
  switch (block._type) {
    case 'hero': return <Hero {...block} />;
    case 'features': return <Features {...block} />;
    ...
  }
})}

Résultat : ✅ Rendu conditionnel fonctionnel

---

9. Checklist de validation

• Build Astro réussi
• Page d’accueil accessible en local
• Contenu PageBuilder rendu correctement
• Mode preview configuré
• Middleware preview fonctionnel
• Configuration SSG conforme à l’ADR
• Query GROQ valide
• Composants PageBuilder créés
• SEO et métadonnées configurés

---

10. Problèmes rencontrés et solutions

10.1. Erreur GROQ select()

Problème : Syntaxe select() incorrecte dans la query

Solution : Utilisation de ...select() avec syntaxe conditionnelle correcte

10.2. Conflit port 8790

Problème : Port 8790 déjà utilisé par un autre processus

Solution : Utilisation du port 8791 pour les tests

10.3. Cache Vite corrompu

Problème : Erreur de cache Vite lors du démarrage du dev server

Solution : Nettoyage du cache Vite et utilisation du mode background

10.4. Preview Studio non fonctionnel pour type page

Problème : Le bouton “Open Preview” redirigeait vers /welcome au lieu de la page d’accueil

Solution :

• Ajout de configuration preview dans le schéma page.ts
• Correction de la logique productionUrl dans sanity.config.ts pour gérer spécifiquement le type page
• Gestion spécifique du slug “/” pour la page d’accueil
• Régénération du schéma Sanity

10.5. Preview non fonctionnel pour slugs autres que “/”

Problème : Pour les slugs comme “/test” ou “/test1”, le preview redirigeait toujours vers /welcome

Solution :

• Correction de la logique productionUrl pour ne pas faire de distinction entre “/” et autres slugs
• Utilisation uniforme de slug directement dans l’URL preview

10.6. Route exit-preview manquante

Problème : Pas de route pour quitter le mode preview

Solution :

• Ajout de la route /api/exit-preview dans le middleware preview-middleware
• Suppression du cookie sanity-preview et redirect vers “/”
• Référence au pattern utilisé dans welcome.astro

---

11. État final

Statut : ✅ Page d’accueil implémentée et testée

Fonctionnalités validées :

• SSG via prerender = true
• Rendu PageBuilder depuis Sanity
• Mode preview via middleware
• SEO et métadonnées
• Composants responsive

Suivant : Création de contenu dans Sanity pour tester le rendu réel

---

12. Historique des modifications

Date	Version	Description	Auteur
2026-09-17	1.0	Tests initiaux de la page d’accueil	Devin