Test d'Intégration - Welcome, AMN

Objectif : Tester l’infrastructure complète avec un simple message “welcome, amn”
Statut : En cours

1. Vue d’ensemble

Ce test valide que l’infrastructure complète fonctionne :

Sanity Studio : schéma et donnée
Astro : page qui affiche la donnée Sanity
Cloudflare Pages : déploiement de la page

2. Schéma Sanity

Fichier : apps/studio/schemaTypes/amn.ts

import { defineType, defineField } from 'sanity'

export default defineType({
  name: 'amn',
  title: 'AMN',
  type: 'document',
  fields: [
    defineField({
      name: 'message',
      title: 'Message',
      type: 'string',
      description: 'Le message à afficher sur la page welcome',
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'status',
      title: 'Status',
      type: 'string',
      options: {
        list: [
          { title: 'Active', value: 'active' },
          { title: 'Inactive', value: 'inactive' },
        ],
        layout: 'radio',
      },
      initialValue: 'active',
    }),
  ],
})

3. Page Astro

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

---
import { getAmn } from '../lib/sanity'

const amn = await getAmn()
---

<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Welcome, AMN</title>
  </head>
  <body>
    <main>
      <h1>Welcome, AMN</h1>
      {amn ? (
        <div>
          <p>Message from Sanity: {amn.message}</p>
          <p>Status: {amn.status}</p>
        </div>
      ) : (
        <p>No active AMN message found in Sanity</p>
      )}
    </main>
  </body>
</html>

4. Étapes de test

4.1. Démarrer le Studio Sanity

cd apps/studio
npm run dev

Le Studio sera accessible sur http://localhost:3333.

4.2. Créer une donnée AMN

Aller sur http://localhost:3333
Créer un nouveau document “AMN”
Remplir les champs :
- Message : “Welcome, AMN - Infrastructure test successful!”
- Status : Active
Publier le document

4.3. Configurer les variables d’environnement

Créer le fichier .env à la racine du projet :

SANITY_PROJECT_ID=4wa7mvsz
SANITY_DATASET=development
SANITY_API_READ_TOKEN=your-read-token
SANITY_API_WRITE_TOKEN=your-write-token
SANITY_PREVIEW_SECRET=your-preview-secret

CLOUDFLARE_ACCOUNT_ID=your-account-id
CLOUDFLARE_API_TOKEN=your-api-token

ENVIRONMENT=dev

4.4. Tester localement

cd apps/web
npm install
npm run dev

Accéder à http://localhost:4321/welcome

Résultat attendu :

Page affiche “Welcome, AMN”
Message from Sanity: “Welcome, AMN - Infrastructure test successful!”
Status: active

4.5. Déployer sur Cloudflare Pages (dev)

# Commiter les changements
git add .
git commit -m "test: add welcome amn integration test"
git push origin main

# Le déploiement se fera automatiquement via GitHub Actions

4.6. Vérifier le déploiement

Accéder à l’URL Cloudflare Pages dev :

https://amn-dev.pages.dev/welcome

Résultat attendu :

Page affiche “Welcome, AMN”
Message from Sanity: “Welcome, AMN - Infrastructure test successful!”
Status: active

5. Checklist de validation

Schéma AMN créé dans Sanity
Donnée AMN créée dans le Studio
Page Astro welcome créée
Variables d’environnement configurées
Test local réussi (localhost:4321/welcome)
Déploiement Cloudflare Pages dev réussi
Page accessible sur Cloudflare Pages
Mode Preview configuré (/api/preview & /api/exit-preview)

6. Résolution de problèmes

Problème	Solution
Studio Sanity ne démarre pas	Vérifier que `npm install` a été exécuté dans `apps/studio`
Page Astro affiche “No active AMN message”	Vérifier que la donnée Sanity est publiée et que le status est “active”
Erreur de connexion Sanity	Vérifier les variables d’environnement SANITY_PROJECT_ID et SANITY_DATASET
Déploiement Cloudflare échoue	Vérifier les secrets GitHub Actions (CLOUDFLARE_ACCOUNT_ID, CLOUDFLARE_API_TOKEN)
Mode Preview affiche 401 Unauthorized	Vérifier que le paramètre `secret` correspond à `SANITY_PREVIEW_SECRET`
Mode Preview n’affiche pas le draft Sanity	Vérifier que `SANITY_API_READ_TOKEN` est bien configuré avec les droits de lecture des drafts

7. Procédure de Test du Mode Preview (Drafts Sanity)

Cette étape valide la prévisualisation en temps réel d’un contenu en brouillon (Draft non publié).

7.1. Préparer les données dans Sanity Studio

Accéder au Studio Sanity (local http://localhost:3333 ou sur Cloudflare Pages Studio https://amn-studio-dev.pages.dev).
S’assurer que le document AMN possède un message publié :
- Message (Published) : "Welcome, AMN - Infrastructure test successful!"
Modifier le champ Message dans le Studio sans le publier :
- Nouveau Message (Draft) : "Welcome, AMN - DRAFT Preview Version!"
- Ne pas cliquer sur Publish (un macaron jaune “Draft” apparaît dans Sanity).

7.2. Vérifier le Mode Normal (Published)

Naviguer sur http://localhost:4321/welcome (ou https://amn-dev.pages.dev/welcome).
Résultat attendu :
- La page affiche le message publié : "Welcome, AMN - Infrastructure test successful!".
- Aucun bandeau de prévisualisation n’est visible.

7.3. Activer le Mode Preview

Accéder à l’URL d’activation de preview dans le navigateur :
- http://localhost:4321/api/preview?secret=your-preview-secret&slug=/welcome
- (Remplacer your-preview-secret par la valeur de SANITY_PREVIEW_SECRET).
Résultat attendu :
- L’API valide le secret, pose le cookie HTTP sanity-preview=true et redirige automatiquement vers /welcome.
- Une bannière d’avertissement jaune apparaît en haut de page : ⚠️ Mode Preview Activé — Visualisation des brouillons Sanity non publiés (Drafts). [Quitter la preview].
- Le message affiché est le brouillon non publié : "Welcome, AMN - DRAFT Preview Version!".
- L’indicateur 📄 Ce contenu est rendu via la perspective Drafts Sanity. apparaît dans la carte.

7.4. Désactiver le Mode Preview

Cliquer sur le lien Quitter la preview dans la bannière (ou naviguer directement sur /api/exit-preview).
Résultat attendu :
- Le cookie sanity-preview est supprimé.
- Redirection automatique vers /welcome.
- La bannière disparaît et la page réaffiche le message publié : "Welcome, AMN - Infrastructure test successful!".