Désormais avec création de pages par IA via le serveur MCP

Tester une application cmssy

L'éditeur est le chemin que votre build ne peut pas vérifier. Un seul test de fumée le couvre.

Un site dont l'éditeur est mort compile encore, se sert encore et passe encore vos tests unitaires. Rien dans un build normal ne touche au chemin d'édition, donc rien dans un build normal ne vous prévient quand il casse.

checkCmssyEditMode est la vérification qui, elle, le fait.

Le test de fumée

import { checkCmssyEditMode } from "@cmssy/next/testing";

const result = await checkCmssyEditMode({
  baseUrl: "http://localhost:3000",
  secret: process.env.CMSSY_DRAFT_SECRET!,
  path: "/",
  // Seulement si vos URL portent la langue. La vérification lit <html lang> -
  // un contrat - au lieu de chercher un mot de votre contenu, qu'un éditeur
  // peut réécrire à tout moment.
  localizedPath: "/fr",
});

expect(result.failures).toEqual([]);

Exécutez-le contre un build de production démarré (next build && next start), pas contre le serveur de développement. C'est justement le rendu statique qui a rendu la route d'édition nécessaire : le serveur de développement teste donc la mauvaise application.

Une option de plus existe pour les sites dont le préfixe d'URL n'est pas le code de locale. localizedLocale nomme la langue que localizedPath doit rendre ; par défaut c'est le premier segment du chemin, qui est la langue sur un site préfixé. Définissez-la explicitement quand préfixe et locale diffèrent - /en-gb servant la locale en, par exemple - sinon la vérification compare à une langue inexistante et échoue pour la mauvaise raison.

Ce qu'il garantit

  1. La page publique renvoie 200 sans l'éditeur, avec en-tête et pied de page rendus côté serveur.
  2. Un simple ?cmssyEdit=1 sans secret n'entre pas en mode édition. Une requête non vérifiée ne doit jamais ouvrir la porte.
  3. Un cmssyEdit=1 vérifié avec cmssySecret affiche l'éditeur et déplace en-tête et pied de page sur le pont d'édition.
  4. Optionnellement : l'aperçu localisé déclare la langue que son URL demande, via <html lang>.

Pourquoi "pas d'en-tête dans le SSR" signifie succès

Cette assertion se lit à l'envers jusqu'à ce qu'on en voie la raison.

En mode édition, l'en-tête et le pied de page se montent via le pont d'édition, qui s'affiche côté client. Un en-tête encore présent dans le HTML rendu par le serveur est donc un en-tête que l'éditeur peut sélectionner mais pas modifier - toute la différence entre un bloc éditable et du simple balisage.

En cas d'échec, le message nomme la cause plutôt que le symptôme :

edit /shop: the header and footer are still server-rendered - they will be
selectable but have no fields (is CMSSY_EDIT_HEADER set on the rewrite?)

En CI

- run: pnpm build
- run: |
    pnpm start &
    npx wait-on http://localhost:3000 --timeout 60000
- run: pnpm smoke:edit

Sautez le job quand les secrets de l'espace de travail sont absents. Une coche verte qui ne vérifie rien est pire que pas de vérification : elle transforme une inconnue en fausse assurance.

Le câbler comme script

L'application de référence le garde comme script autonome plutôt que comme cas de test runner, pour qu'il tourne en CI sans framework :

{
  "scripts": {
    "smoke:edit": "node smoke-edit.mjs"
  }
}
// smoke-edit.mjs
import { checkCmssyEditMode } from "@cmssy/next/testing";

const result = await checkCmssyEditMode({
  baseUrl: "http://localhost:3000",
  secret: process.env.CMSSY_DRAFT_SECRET,
  localizedPath: "/fr",
});

console.log(result.ok ? "EDITOR OK" : "EDITOR BROKEN");
for (const f of result.failures) console.log("  -", f);
process.exit(result.ok ? 0 : 1);

Quoi tester d'autre

Les blocs sont des composants React ordinaires : testez-les ordinairement. Deux habitudes propres à cmssy méritent d'être gardées :

  • Rendez chaque bloc avec data: undefined - c'est ce que passe l'éditeur, et un bloc qui lève une erreur sans le résultat de son loader est un bloc qui casse l'éditeur.
  • Rendez avec une locale manquante - le contenu n'est peut-être pas encore traduit, et le chemin de repli est le premier que rencontreront vos visiteurs dans une nouvelle langue.

Étapes suivantes