Vérifier les parcours de saisie et de consultation

Un tableau de bord peut sembler correct au premier affichage tout en échouant dès qu’une requête tarde, qu’un champ est incomplet ou qu’un filtre ne renvoie aucun résultat. Vous allez vérifier les parcours réels, depuis l’ouverture de la page jusqu’à la consultation du récapitulatif, en comparant chaque résultat à ce qui est attendu.

Effectuez ces contrôles dans le navigateur avec le projet exécuté, sans changer son code entre les scénarios. Pour chaque essai, notez les actions effectuées, le résultat affiché et tout écart observé ; cette trace évite de confondre un défaut reproductible avec une impression ponctuelle. Les composants et leurs responsabilités sont déjà définis : ici, vous vérifiez leur comportement ensemble.

1. Vérifier le chargement et les états de la liste

Rechargez la page et observez la zone d’état de la liste dès le début. Si le chargement est assez rapide pour que vous ne voyiez pas cet état, ralentissez temporairement le réseau dans les outils de développement du navigateur, puis rechargez. Pendant l’attente, un indicateur de chargement doit être visible et la page ne doit pas présenter les dépenses comme si elles avaient déjà été reçues.

Quand la requête aboutit, vérifiez que les lignes attendues apparaissent avec leur libellé, leur catégorie, leur date et leur montant. Assurez-vous aussi que le message de chargement disparaît. Pour provoquer un échec sans modifier l’application, vous pouvez couper la connexion avant le rechargement ou utiliser les outils du navigateur pour faire échouer la requête ; un message d’erreur doit alors remplacer l’attente, sans afficher une liste de succès fictive.

2. Parcourir la validation et l’ajout

Soumettez d’abord le formulaire vide, puis testez séparément un libellé absent, un montant nul ou négatif, une date absente et une catégorie non sélectionnée. Dans chaque cas, la saisie invalide doit être refusée et l’erreur doit être associée au champ concerné. Contrôlez aussi que les autres champs conservent leurs valeurs afin que la personne puisse corriger le formulaire sans tout recommencer.

Complétez ensuite le formulaire avec des valeurs valides et ajoutez une dépense dont le libellé est facile à repérer, par exemple « Test transport », avec un montant et une date connus. Après soumission, vérifiez que la dépense apparaît une seule fois dans la liste, que ses informations sont exactes et que les champs du formulaire sont réinitialisés. Refaites l’essai avec un montant comportant des centimes pour repérer un éventuel problème de saisie ou d’affichage.

3. Vérifier les filtres et le récapitulatif

Choisissez un mois pour lequel vous connaissez les dépenses, puis vérifiez que la liste ne conserve que celles de ce mois. Le récapitulatif doit indiquer le mois choisi, le nombre de dépenses correspondantes et la somme de leurs montants. Faites le calcul à la main sur quelques lignes, en tenant compte des centimes, afin de comparer un résultat concret plutôt que de vous fier uniquement à la présentation.

Ajoutez maintenant un filtre de catégorie, puis essayez une catégorie qui ne correspond à aucune dépense du mois sélectionné. Dans le premier cas, seules les lignes correspondant aux deux critères doivent rester ; dans le second, la liste doit signaler l’absence de résultat sans présenter une dépense qui ne correspond pas. Le total et le nombre doivent suivre les mêmes critères que la liste, et non ceux d’un filtre précédent.

4. Consigner les résultats

Un scénario de vérification fonctionnelle décrit une action réalisable et le résultat attendu, par exemple : « sélectionner un mois sans dépense » doit conduire à une liste vide et à un total nul. Cette formulation vous permet de refaire le même contrôle après une correction. Testez aussi les cas limites, comme un champ vide, une valeur de montant invalide ou l’absence de correspondance, car ils révèlent souvent des défauts invisibles avec des données ordinaires.

À retenir

• Vérifiez séparément l’attente, le succès et l’échec du chargement.
• Testez les champs vides et les valeurs invalides avant une soumission valide.
• Confirmez qu’un ajout apparaît une seule fois et que le formulaire est réinitialisé.
• Comparez manuellement la liste filtrée, le nombre et le total aux critères choisis.
• Notez les actions et résultats attendus pour pouvoir reproduire chaque contrôle.

Dans la prochaine leçon, vous finaliserez le projet en examinant la cohérence de l’état et des calculs dans l’ensemble du tableau de bord.