Test : Page d'accueil

Documentation technique

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 Astro1/2

Commande :

task build:web

3.1. Build Astro2/2

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 Studio1/2

Procédure :

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

5.5. Test depuis Sanity Studio2/2

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 configuration1/2

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

Configuration :

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

6.1. Vérification de la configuration2/2

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 GROQ1/2

Query utilisée :

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

7.1. Query GROQ2/2

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