Vérifier le parcours complet

Une interface peut sembler fonctionner après un seul clic et pourtant perdre des données après actualisation, afficher une progression incorrecte ou rester bloquée lorsqu’une requête échoue. Vous allez vérifier le gestionnaire comme un utilisateur le ferait, en suivant un parcours complet et en contrôlant le résultat visible à chaque étape.

Le projet est maintenant assemblé : l’état des tâches alimente la liste et la progression, tandis que les modifications sont enregistrées dans le navigateur. Les tests ci-dessous ne demandent pas de modifier le code ; gardez la console du navigateur ouverte pour repérer une éventuelle erreur JavaScript.

Préparer un test reproductible

Ouvrez le projet dans un navigateur avec les fichiers servis depuis un serveur local. Un module JavaScript et les requêtes réseau se testent plus fiablement ainsi qu’en ouvrant directement le fichier HTML. Pour vérifier la restauration, utilisez une fenêtre de navigateur normale et ne videz pas le stockage entre les étapes.

• Actualisez la page et attendez la fin de l’initialisation ; la liste doit refléter les données déjà enregistrées, ou rester vide lors d’une première visite.
• Dans le champ « Nouvelle tâche », saisissez « Préparer le compte rendu », puis choisissez « Ajouter ». Le champ doit être nettoyé et la nouvelle tâche apparaître une seule fois.
• Ajoutez ensuite « Vérifier les résultats ». Cochez la première tâche : elle doit être marquée comme terminée, la progression doit passer à 1 tâche terminée sur 2 et la barre doit afficher 50 %.
• Utilisez le filtre « Terminées », puis « À faire ». Le contenu visible doit correspondre au filtre choisi sans modifier le statut réel des tâches.
• Supprimez une tâche avec son bouton « Supprimer ». Elle doit disparaître, le total et le pourcentage de progression doivent être recalculés, et le filtre actif doit rester compréhensible.

Vérifier la restauration et les cas limites

Après les actions précédentes, actualisez la page. Les tâches conservées doivent revenir avec leurs titres et leurs statuts, et le texte comme la barre de progression doivent correspondre à ces données. Ce contrôle vérifie la chaîne complète entre une modification, l’enregistrement et la restauration ; pour les détails sur le stockage et la validation, reportez-vous aux leçons « Enregistrer et restaurer les données » et « Contrôler les données restaurées ».

Testez ensuite des entrées qui ne doivent pas créer de tâche : envoyez le formulaire vide, puis saisissez uniquement des espaces. Le navigateur bloque normalement la soumission vide grâce à la validation du champ ; une chaîne composée d’espaces doit être nettoyée et ne pas produire une ligne sans titre. Vérifiez également le cas d’une liste vide : la progression doit rester à 0 tâche terminée sur 0, sans pourcentage invalide ni erreur dans la console.

Tester l’échec du chargement distant

Pour tester l’échec sans modifier le projet, ouvrez les outils de développement du navigateur et leur panneau Réseau. Activez le mode hors ligne, puis choisissez « Charger des tâches ». Le message doit signaler le problème, le bouton doit redevenir utilisable après la requête et les tâches déjà présentes doivent rester affichées : une panne distante ne doit pas effacer l’état local.

Désactivez le mode hors ligne et relancez le chargement pour vérifier que l’interface peut revenir à un état normal. La réussite ne doit pas créer de doublons si les mêmes tâches distantes sont chargées à nouveau ; la liste et la progression doivent être recalculées depuis l’état obtenu. Ce test complète ceux des leçons sur fetch et la gestion des erreurs réseau, sans introduire de nouveau mécanisme de requête.

À retenir

• Testez les actions dans un parcours réaliste : ajouter, basculer le statut, filtrer et supprimer.
• Après chaque modification, vérifiez la liste et la progression, puis actualisez pour contrôler la restauration.
• Vérifiez les entrées vides, la liste vide et l’absence d’erreurs dans la console.
• Simulez une panne réseau : le message doit être explicite, le bouton doit redevenir disponible et les tâches locales doivent rester intactes.
• Relancez le chargement après le retour du réseau et vérifiez que les tâches ne sont pas dupliquées.

Vous disposez maintenant d’un parcours de vérification complet pour contrôler le comportement du gestionnaire dans le navigateur.