Vérifier la restauration et les interactions

Une transition correcte isolée ne garantit pas que le gestionnaire fonctionne une fois ses modules reliés. Une tâche peut s’afficher sans être enregistrée, ou être restaurée sans que les commandes de modification répondent. Vous allez vérifier le parcours réel dans le navigateur, puis éprouver les cas où une API échoue.

Préparer une vérification reproductible

Servez la page depuis un serveur local plutôt que de l’ouvrir directement en fichier : les modules ES et certaines API du navigateur nécessitent une origine adaptée. Ouvrez les outils de développement, affichez l’onglet Console et, dans l’onglet Application ou Stockage, repérez les données de stockage du site. Le nom de la clé utilisée par persistance.js est celui que vous devrez observer ; ne le remplacez pas par une clé supposée.

Commencez avec une liste vide en supprimant les données de l’application depuis les outils du navigateur, puis rechargez la page. Vérifiez que le compteur indique zéro tâche terminée sur zéro et que la liste est vide. Cette remise à zéro rend les résultats du scénario comparables à chaque exécution.

Suivre le parcours complet

Dans le formulaire, ajoutez deux tâches, par exemple « Préparer le dossier » et « Envoyer le compte rendu ». Après chaque ajout, vérifiez que le libellé apparaît une seule fois et que le total augmente. Dans le stockage, contrôlez que les données enregistrées correspondent aux tâches affichées ; leur représentation JSON peut être compacte, mais doit rester cohérente avec la forme de tâche utilisée par le réducteur.

Cochez ensuite « Préparer le dossier ». La tâche doit apparaître comme terminée, et les nombres de tâches terminées et de tâches totales doivent refléter la nouvelle situation. Supprimez « Envoyer le compte rendu », puis vérifiez que la ligne disparaît et que le total diminue. Ces opérations contrôlent ensemble la conversion des événements en actions, la transition d’état, l’enregistrement et le rendu.

• Ajout : le champ est vidé après une soumission valide et la tâche apparaît une fois.
• Modification : la case change l’état de la tâche et met à jour la progression.
• Suppression : la tâche quitte la liste et le total est recalculé.
• Copie : une action explicite fournit un retour de réussite ou d’échec.

Laissez « Préparer le dossier » dans la liste, puis rechargez la page. La tâche doit être restaurée avec son état terminé et la progression doit rester correcte. Ce contrôle de l’état après rechargement distingue une simple mise à jour visuelle d’une persistance réellement raccordée à l’application.

Éprouver les erreurs d’API

La restauration doit aussi tolérer des données qui ne peuvent pas être lues. Pour tester ce cas, remplacez temporairement la valeur enregistrée par un texte qui n’est pas du JSON valide, puis rechargez. L’application doit revenir à un état utilisable, sans bloquer le formulaire ni produire une erreur non traitée dans la console. Vérifiez ensuite que l’action prévue par persistance.js est bien appliquée, par exemple ignorer les données invalides ou les remplacer par un état initial.

Pour contrôler une erreur d’écriture, rendez le stockage indisponible dans un contexte de test ou provoquez un échec depuis les outils de développement, puis ajoutez une tâche. Le comportement attendu est une interface encore utilisable et une erreur traitée par l’adaptateur, pas une exception qui interrompt l’application. Ne concluez pas qu’une tâche survivra à un rechargement si son enregistrement a échoué : le retour visuel et la persistance sont deux résultats distincts.

Testez enfin la copie du résumé dans un contexte sécurisé, puis dans un contexte où le presse-papiers est indisponible ou son accès refusé. Dans le premier cas, le texte doit être copié et le message de réussite affiché ; dans le second, un message d’échec doit être présenté sans empêcher l’ajout, la modification ou la suppression des tâches. Vérifiez également que le chargement différé du rapport échoue proprement si le module ne peut pas être obtenu.

À retenir

• Vérifiez les ajouts, changements d’état et suppressions depuis l’interface, pas seulement dans les fonctions isolées.
• Comparez l’affichage, la progression et les données enregistrées après chaque action.
• Rechargez la page pour confirmer la restauration des tâches et de leur état.
• Provoquez les erreurs de stockage et de presse-papiers : l’application doit rester utilisable et informer l’utilisateur.

La prochaine leçon portera sur la mesure du rendu et les vérifications de non-régression avant livraison.