Feature Checklist

Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page jeu ou d'un format de données.

Cible d'affichage

Concevoir et valider les fonctionnalités pour une fenêtre d'ordinateur en plein écran ou en demi-écran, à partir de 768px.
Ne pas ajouter de navigation, de composant, de libellé ou de parcours réservé au téléphone.
Sous 768px, vérifier uniquement que le contenu reste accessible, que la sidebar demeure utilisable et qu'aucun débordement horizontal global n'est introduit.
Conserver les adaptations internes nécessaires aux composants étroits, notamment les formulaires, tableaux et outils, sans en faire une interface mobile distincte.

Outil Toolbox

Ajouter ou modifier le composant dans website/src/features/toolboxes/modules/.
Déclarer ses métadonnées et son chargeur dans website/src/features/toolboxes/toolboxModuleRegistry.js. Le registre React modules/toolboxModuleComponents.jsx est partagé par la toolbox et la Librairie ; modules/index.jsx expose le shell.
Vérifier le chargement à la demande en toolbox et dans chaque catégorie de la Librairie.
Dans la Librairie, vérifier les liens directs vers un outil, les changements d'ancre et le retour navigateur ; une nouvelle sélection ou une sortie de page doit annuler les défilements différés précédents.
Ajouter les textes nécessaires dans website/public/data/site.json.
Mettre à jour la validation de site.json dans tests/helpers/data-validation.mjs.
Pour chaque type du registre, fournir une description non vide dans toolboxes.addToolDescriptions et vérifier que la fenêtre « Ajouter un outil » affiche le nom complet et la courte phrase d'usage aux largeurs compactes validées. Vérifier sa largeur réelle jusqu'à 900px, les cartes compactes avec icône à gauche du titre, les 4 et 5 colonnes selon la largeur, les cinq sections sans onglets, les couleurs et dimensions de scrollbar-control, ainsi que les infobulles de l'ajout rapide au survol comme au focus.
Mettre à jour la normalisation et le stockage compact dans website/src/features/toolboxes/storage/modules/<outil>.js, puis vérifier l'export public dans website/src/features/toolboxes/storage/toolboxStorage.js.
Mettre à jour docs/STORAGE_SCHEMA.md.
Vérifier l'import et l'export si l'outil stocke des données.
Pour une modification de persistance, vérifier les écritures successives en succès/échec, les suppressions, ainsi qu'un import concurrent avec une édition ; un échec ne doit pas restaurer une valeur jamais confirmée.
Vérifier qu'une erreur d'ouverture ou de lecture au démarrage bloque les écritures, créations, imports et exports sans afficher une fausse liste vide ; plusieurs tentatives puis une reprise réussie doivent retrouver les données initiales sans recharger la page ni les effacer.
Pour Images et Annotation d'images, vérifier la lecture différée en page complète et panneau latéral, la reprise après échec local et l'absence d'écrasement pendant le chargement. Les alertes des autres outils doivent rester actives sans ouvrir les médias.
Vérifier qu'une création, un import ou une suppression préserve les médias non lus des autres outils ; les exports doivent les inclure et refuser un téléchargement partiel en cas d'échec. Une lecture en cours ne doit pas réintroduire des données supprimées.
Si l'outil a un contenu représentable en texte, ajouter ou vérifier l'import/export texte round-trip depuis la section Données du panneau Configuration.
Si l'outil porte un état de progression, vérifier que l'import texte repart de l'état initial attendu.
Vérifier l'affichage dans la page toolbox complète.
Vérifier l'affichage dans le panneau latéral.
Vérifier l'ordre compact du header en une et deux colonnes et dans une fenêtre étroite : déplacement, icône, titre, scroll éventuel, ajout éventuel, Configuration, suppression, chevron. Le panneau Configuration doit prendre toute la largeur, placer Espace et Données sur deux colonnes puis les réglages spécifiques sur toute la ligne, et empiler ces sections sous la largeur prévue.
Vérifier que Configuration et ajout se ferment mutuellement, qu'Échap ferme Configuration et qu'un outil replié peut l'ouvrir sans afficher son contenu métier.
Pour le tutoriel toolbox, vérifier le démarrage unique, la fermeture et le changement de toolbox en cours de visite ; une autre toolbox doit démarrer à la première étape et ne pas consommer les indicateurs de la précédente.
Pour le Bloc Note, vérifier la sélection, l'ajout, le renommage et la suppression de pages en page complète, panneau latéral et fenêtre compacte.
Vérifier qu'un changement de page avec le focus actif remplace immédiatement le contenu de l'éditeur ; une mise à jour externe de la même page attend le blur sans déplacer la sélection pendant la saisie ni reprendre le focus ensuite.
Pour les dessins temporaires et l'historique du simulateur de chance, vérifier l'isolation par clé de session lors des changements de page/outil et après rechargement ; une navigation seule ne doit pas écraser les données de l'autre clé.
Pour le simulateur de chance, vérifier que les brouillons suivent le taux et l'outil actifs, restent intacts lors d'un rendu sans rapport et se valident au blur selon le champ.
Pour le visualiseur d'images, vérifier la remise à zéro des marqueurs et des modes dessin/gomme au remplacement de l'image.
Pour la galerie d'images, vérifier les boutons de taille − / +, leur blocage aux limites, le switch de ratio 4:3 / 1:1, la persistance de ces préférences après rechargement, les images et libellés contenus dans les deux formats, la redistribution centrée des vignettes, le padding périphérique et l'absence de scroll horizontal.
Pour l'éditeur de couverture, vérifier les décodages concurrents, les erreurs après fermeture et la libération des bitmaps/URLs ; une image en chargement ne doit pas permettre de valider la couverture précédente.
Les parcours e2e/toolbox-cover.spec.js vérifient le choix d'icône, l'enregistrement d'une couverture 620 × 248, sa persistance après rechargement et import/export, l'annulation et les fichiers illisibles. L'association à un jeu doit afficher sa couverture sans perdre l'image personnalisée, restaurée après dissociation ; choisir une icône doit supprimer la couverture personnalisée.
Les parcours e2e/table.spec.js vérifient les en-têtes éditables sans changer les références des formules, le redimensionnement sans restauration des cellules supprimées, la navigation et la sélection clavier, la copie des valeurs TSV, le collage et l'effacement de blocs, le déplacement à la souris et l'insertion d'une plage dans une formule. Les valeurs et dimensions doivent survivre au rechargement.
Les parcours e2e/text-exchange.spec.js vérifient les modales partagées via Tableau et Calculateur : export désactivé à vide, validation des imports, conservation des données après erreur, brouillon effacé à la réouverture, export en lecture seule et copie exacte. L'import doit persister avec ses formules, libellés et relations ; Annuler, Fermer, Échap et le fond de modale doivent fermer correctement, avec restitution du défilement.
Les parcours e2e/task-planner.spec.js couvrent création, renommage, description multiligne, catégorie, suppression et persistance. Un parent transmet sa catégorie ; un prérequis manquant avertit sans bloquer la validation. Supprimer un parent doit conserver l'enfant sans relation orpheline. Avec une horloge contrôlée, les tâches quotidiennes et hebdomadaires se réinitialisent, les ponctuelles restent cochées ; masquage et nettoyage doivent préserver les autres tâches.
Pour Mémos, vérifier l'édition courte, les couleurs, la réorganisation et la bande déroulante ; vérifier aussi les liaisons Aucun / Tous / planificateur précis, les alertes de tâches proches du reset et le retour à Aucun après suppression du dernier planificateur lié.
Les parcours e2e/calculator.spec.js vérifient la validation des formules, l'édition parent/enfant avec recalcul et persistance, la suppression d'une branche active, le retour à un calcul racine, la réinitialisation du brouillon sans effacer les résultats, la copie pour checklist et la persistance du défilement. La réorganisation des racines doit conserver leurs descendants et refuser de changer le parent d'un enfant.
Vérifier qu'une notification ou une mise à jour sans rapport ne remplace pas un brouillon Mémos avant sa validation au blur.
Vérifier que les confirmations ordinaires disparaissent après 6 secondes, que les durées explicites sont respectées et que les alertes Timer, Calendrier et sauvegarde restent présentes jusqu'à leur fermeture manuelle. La pile reste limitée à cinq alertes.
Pour l'arbre d'objectifs, vérifier la sélection après suppression/import et le retour à Base quand le nœud sélectionné devient une étape sans onglet Contenu.
Vérifier le mode une colonne et deux colonnes.
Vérifier que l'ajout, la suppression et la réorganisation respectent les moduleOrder.one et moduleOrder.two de l'espace actif.
Pour les espaces toolbox, vérifier la conversion de l'ancien ordre vers « Défaut », la limite de cinq, l'espace actif partagé avec le panneau jeu, l'ajout dans l'espace actif, le renommage, le réordonnancement hors défaut et la suppression avec rapatriement des outils.
Vérifier le déplacement d'un outil par sélecteur et par dépôt sur onglet : dépôt rapide sans changement d'espace, activation après 600 ms, dépôt précis après activation et pointercancel sans déplacement.
Pour les déplacements par pointeur, vérifier les dépôts avant/après, le rejet des cibles interdites et l'annulation navigateur (pointercancel) sans modification de l'ordre ; le démontage doit retirer les listeners actifs.
Vérifier le quota de stockage si l'outil manipule des données lourdes.
Pour la sauvegarde locale, vérifier la feature detection, les permissions sans popup au démarrage, le nommage en date locale, la déduplication quotidienne, le remplacement manuel, la rétention de dix fichiers et la conservation des fichiers étrangers.

Page Jeu

Ajouter les données dans website/public/data/.
Ajouter les images dans website/public/static/img/games/<gameId>/.
Déclarer le jeu dans website/public/data/site.json.
Vérifier la page /games.
Vérifier la page /games/<gameId>.
Vérifier le chargement à la première visite, la conservation des données pendant la navigation et les erreurs réseau ; sous StrictMode, les requêtes abandonnées ne doivent pas remplacer les données actuelles ni afficher d'erreur d'annulation.
Sous 1440px, vérifier la bascule « Guide / Toolbox », la conservation des deux vues après leur première activation et la restauration de leur défilement. À partir de 1440px, vérifier que le bouton « Afficher la toolbox » devient « Masquer la toolbox » avec le panneau latéral ouvert.
Sans toolbox liée, vérifier la création ainsi que l'association directe d'une toolbox existante ; le sélecteur ne doit proposer que les toolboxes qui ne sont liées à aucun jeu.
Vérifier le breadcrumb.
Vérifier les textes avec retours à la ligne.
Pour les guides à cartes, vérifier le toggle de lien à côté du « + » dans l'en-tête de chaque checklist compatible : il affiche les commandes, masquées par défaut. Vérifier l'association exclusive, le masquage désactivé sur les autres listes et la mise à jour immédiate depuis le panneau latéral. Refermer les commandes conserve l'association. La checkbox des cartes met à jour toutes les lignes exactes correspondantes, respecte les quantités cibles et ne retourne pas les cartes.
Vérifier le changement de checklist, la dissociation, la restauration de session, la suppression d'un module et le changement de toolbox. La réinitialisation des filtres conserve la liaison ; une liste devenue sans correspondance reste sélectionnée avec un message.
Pour les résultats filtrables Aniimo, MHW et Diablo, vérifier que le bouton visible « Résultats vers checklist » utilise l'icône checklist, conserve un libellé accessible contextuel et ouvre une modale rappelant que seuls les éléments visibles sont utilisés. Le groupe titre, compteur et action doit revenir à la ligne sans débordement dès 768 px. La copie reste disponible sans toolbox liée ; la création est alors désactivée avec une indication explicite. Avec une toolbox liée, la création ajoute une nouvelle checklist dans son espace actif sans remplacer l'association guide/checklist existante.
Pour Aniimo, vérifier la copie et la création des espèces ou des formes selon l'affichage, les noms français/anglais, la priorité des formes et le masquage avant regroupement. Compteurs, copie et création doivent correspondre aux résultats affichés.

Listes de jeu

Ajouter la liste JSON dans website/public/data/<gameId>/lists/.
Lancer npm run lists:index.
Vérifier que index.json est régénéré.
Vérifier que nom est présent sur chaque élément.
Vérifier que description et quantite restent facultatifs.
Vérifier la copie au format checklist.
Vérifier la création directe de checklist quand une toolbox est associée.

Style

Réutiliser les tokens existants avant d'ajouter une nouvelle couleur ou taille.
Réutiliser les classes de boutons existantes.
Vérifier les boutons icon, danger, primary et secondary.
Vérifier les cartes, panels et scrollbars.
Vérifier les états hover/focus.
Vérifier les fenêtres de 768, 960, 1024, 1280, 1440 et 1920 px quand le changement touche la mise en page, avec une hauteur de 720 px pour les parcours compacts.
Effectuer seulement un contrôle minimal sous 768 px : accès au contenu, sidebar utilisable et absence de débordement horizontal global.
Sur l'accueil vide, vérifier que l'action principale ouvre la création avec tutoriel ; avec au moins une toolbox, vérifier qu'elle devient « Voir mes toolboxes ». L'action « Voir les jeux » et le rappel de création en fin de prise en main restent disponibles.
Les tests e2e/card-surfaces.spec.js compilent le Sass complet et vérifient les styles calculés des cartes NDS, home jeux et MHW en fenêtre large/compacte : fonds, bordures, séparateurs dorés, hover sans redimensionnement, focus clavier NDS et faces MHW. Ils ne créent pas de snapshots visuels et ne remplacent pas les parcours des pages réelles.
Les suites nds-controls, nds-patterns, style-layouts et tool-style-states complètent cette couverture : tailles et états NDS, panneaux, feedbacks, modales/drawers/toasts, scrollbars, mouvement réduit, états des outils et masques d'icônes décodables. Les layouts home/À propos/librairie sont aussi vérifiés sur les pages réelles en fenêtre large et demi-écran.
tests/static-styles.test.mjs conserve les frontières d'architecture, les conventions publiques et les limites de taille des fichiers, pas des preuves de rendu basées sur la présence d'un nom de classe ou de mixin dans le Sass.

Validation avant push

npm run check

Le check doit passer avant de pousser :

syntaxe serveur et Vite ;
génération des index de listes ;
tests Node ;
build de production.

npm run check:full ajoute les parcours navigateur de développement puis de production. Pour la prise en main de la home, vérifier sa présence sans toolbox, sa disparition après création en production, son retour après suppression de la dernière toolbox et la persistance de ces états après rechargement. Elle reste visible en développement et sur la page À propos.

16 KiB Raw Blame History Unescape Escape