Guide de Test - Page d'accueil avec PageBuilder (Golden Path - Slice 1)

Date : 2026-09-14
Composant : Page d’accueil (PageBuilder + SSG + Sanity)
Phase : Golden Path - Slice 1

---

Prérequis

Avant de commencer les tests, assurez-vous que :

• Le fichier .env à la racine du projet est configuré avec les variables Sanity
• Les dépendances sont installées : task install
• Le Sanity Studio est accessible et configuré

---

1. Démarrage des serveurs locaux

Terminal 1 - Serveur Astro (Web)

cd /home/anderson/PP
task dev

Le serveur démarre sur http://localhost:4321

Terminal 2 - Sanity Studio

cd /home/anderson/PP
task dev:studio

Le Studio démarre sur http://localhost:3333

---

2. Création d’une page de test dans Sanity Studio

1. Ouvrez http://localhost:3333 dans votre navigateur
2. Connectez-vous à Sanity Studio
3. Cliquez sur “Page” dans le menu latéral
4. Cliquez sur “New page”
5. Remplissez les champs obligatoires :
   • Title : “Homepage Test”
   • Slug : “home”
   • Status : “Published”
6. (Optionnel) Remplissez les champs SEO :
   • SEO Title : “Test Homepage”
   • SEO Description : “This is a test homepage for the PageBuilder”
7. Ajoutez des blocs PageBuilder dans la section Page Builder :
   • Cliquez sur “Add item”
   • Sélectionnez “Hero Section”
   • Remplissez :
     • Title : “Welcome to Our Site”
     • Subtitle : “Built with Astro + Sanity”
     • Description : “This is a test of the PageBuilder system”
     • Primary CTA text : “Get Started”
     • Primary CTA href : “/about”
   • Ajoutez un bloc “Features Section” :
     • Title : “Key Features”
     • Features : Ajoutez 2-3 features avec titres et descriptions
8. Cliquez sur “Publish”

---

3. Test de la page d’accueil en production (SSG)

3.1. Vérification du build SSG

cd /home/anderson/PP/apps/web
pnpm build

Vérifications :

• Le build se termine sans erreur
• Le dossier dist/ est généré
• Les fichiers HTML statiques sont présents

3.2. Test du serveur de prévisualisation

cd /home/anderson/PP/apps/web
pnpm preview

Vérifications :

• Ouvrez http://localhost:4321
• La page d’accueil s’affiche
• Le contenu depuis Sanity est visible (Hero, Features)
• Les métadonnées SEO sont correctes (inspectez la page)
• Les boutons CTA fonctionnent

---

4. Test du mode Preview

4.1. Activation du mode Preview

1. Dans Sanity Studio, créez une nouvelle page ou modifiez la page existante
2. Changez le Status en “Draft”
3. Modifiez le titre du Hero : “Preview Mode Test”
4. Cliquez sur le bouton “Open preview” en haut à droite
5. Une nouvelle fenêtre s’ouvre avec l’URL de preview

Vérifications :

• La page s’ouvre avec le contenu draft
• Le titre affiché est “Preview Mode Test”
• Un indicateur de preview est visible (si implémenté)
• Le cookie sanity-preview est présent dans le navigateur

4.2. Sortie du mode Preview

1. Naviguez vers http://localhost:4321/api/exit-preview
2. Vous êtes redirigé vers /welcome

Vérifications :

• Le cookie sanity-preview est supprimé
• Le contenu draft n’est plus visible
• Seul le contenu publié s’affiche

---

5. Test des blocs PageBuilder

5.1. Test du bloc Hero

• Le titre s’affiche correctement
• Le sous-titre s’affiche
• La description est visible
• Les boutons CTA sont cliquables
• L’alignement (left/center/right) fonctionne
• L’image s’affiche si ajoutée

5.2. Test du bloc Features

• Le titre de section s’affiche
• Les features sont en grille
• Chaque feature a son titre et description
• Les icônes/images s’affichent
• Le hover effect fonctionne

5.3. Test du bloc Testimonials

• Les témoignages s’affichent en grille
• Chaque témoignage a la citation, l’auteur, le rôle
• Les avatars s’affichent
• Le style est cohérent

5.4. Test du bloc CTA

• Le titre s’affiche
• La description est visible
• Les boutons sont cliquables
• La couleur de fond change selon l’option

5.5. Test du bloc RichText

• Le contenu Portable Text s’affiche
• Les titres (h1, h2, h3, h4) sont stylisés
• Les paragraphes sont lisibles
• Les liens sont cliquables
• Les blockquotes sont stylisés

5.6. Test du bloc ImageGallery

• Les images s’affichent en grille
• Les captions sont visibles
• Le layout (grid-3, grid-4, masonry) fonctionne
• Le hover effect sur les images fonctionne

---

6. Test du middleware Cloudflare

6.1. Vérification des headers CSP

Ouvrez les DevTools (F12) → Network → Rechargez la page → Cliquez sur la requête principale

Vérifications :

• Le header Content-Security-Policy est présent
• Les directives CSP sont correctes
• Aucune erreur CSP dans la console

6.2. Test du bypass cache en mode Preview

1. Activez le mode preview (voir section 4)
2. Ouvrez les DevTools → Network
3. Rechargez la page

Vérifications :

• Le header Cache-Control est no-store, no-cache, must-revalidate
• Le header X-Preview-Mode est active
• Le header Pragma est no-cache

---

7. Génération des types TypeScript

7.1. Génération des types

cd /home/anderson/PP/apps/web
pnpm sanity:typegen

Vérifications :

• Le fichier src/sanity.types.ts est généré
• Les types pour page et les blocs PageBuilder sont présents
• Aucune erreur TypeScript dans le projet

---

8. Checklist de validation finale

Avant de considérer le Slice 1 comme terminé :

• La page d’accueil s’affiche correctement en production (SSG)
• Les blocs PageBuilder sont rendus correctement
• Les métadonnées SEO sont injectées (title, description, OG)
• Le mode Preview permet de voir les brouillons de page
• Le cache Edge fonctionne correctement
• Le middleware Cloudflare applique les CSP headers
• Le middleware bypass le cache en mode preview
• Les types TypeScript sont générés correctement
• Le build SSG se termine sans erreur
• Aucune erreur dans les logs

---

9. Dépannage

Problème : La page affiche “No page content found”

Solution :

• Vérifiez qu’une page avec slug “home” existe dans Sanity
• Vérifiez que le status est “Published”
• Vérifiez que les variables d’environnement Sanity sont correctes

Problème : Le mode Preview ne fonctionne pas

Solution :

• Vérifiez que SANITY_PREVIEW_SECRET est défini dans .env
• Vérifiez que le secret est identique dans .env et Sanity Studio
• Vérifiez que le cookie sanity-preview est posé
• Vérifiez que SANITY_API_READ_TOKEN est défini (nécessaire pour les drafts)

Problème : Les images ne s’affichent pas

Solution :

• Vérifiez que les images sont uploadées dans Sanity
• Vérifiez que l’asset est publié
• Vérifiez les permissions de l’asset

Problème : Erreur TypeScript

Solution :

• Lancez pnpm sanity:typegen pour régénérer les types
• Vérifiez que le fichier sanity.types.ts existe dans apps/web/src/

---

10. Prochaines étapes

Une fois le Slice 1 validé :

• Passer au Slice 2 : Article de blog (SSG + Sanity + Portable Text)
• Intégrer Pagefind pour la recherche
• Configurer le webhook de rebuild (Slice 6)

---

Historique des modifications

Date	Version	Description	Auteur
2026-09-14	1.0	Création du guide de test pour la page d’accueil	Cascade