Exercice 16 - Mise en place de tests

Mise en situation

Vous avez compris le pourquoi et la raison d'être de Vitest, maintenant il est temps de le mettre en pratique avec un exercice pratique!

Modalités

• Exercice seul
• Réaliser durant le cours
• Durée approximative le reste du cours
• Remettre le tout sur Léa dans Exercice 16 pour le prochain cours!

Exercice formatif noté 1%.

À faire (étapes)

Fichier à utiliser

exer16.zip

Vous allez voir deux dossiers à l'intérieur du dossier exer16, c'est pour les deux parties.

Partie 1

Utiliser le dossier exemple-tests

Prérequis

• Écouter la vidéo de démonstration de l'exercice 16
• Consulter la documentation complète sur les wrapper de test-utils

Faire les lectures ci-dessous, dans l'ordre suggéré. Les noms de fichiers font références aux fichiers du projet exemple-tests. Pendant la lecture, ne pas hésiter à exécuter le code et à regarder les résultats dans le navigateur.

• WelcomeMessage.vue et WelcomeMessage.spec.ts
• ClickCounter.vue et ClickCounter.spec.ts
• AdminDashboard.vue et AdminDashboard.spec.ts
• SortedNumbers.vue et SortedNumbers.spec.ts
• SimpleColorAdder.vue et SimpleColorAdder.spec.ts
• ColorAdder.vue et ColorAdder.spec.ts
• ColorAdderList.vue et ColorAdderList.spec.ts
• ShipName.vue et ShipName.spec.ts

Consignes

Étape 0

• Faire npm install pour installer les dépendances
• Faire npm run dev pour lancer l'application

Étape 1

• Faire npm run test pour lancer les tests — ils devraient tous échouer
  

Important : les composants .vue sont déjà fonctionnels. Les tests échouent parce que les assertions sont manquantes (TODO). Ne pas modifier les composants.

Pour quitter le mode watch de Vitest, appuyez sur q.

• Écrire le code des TODOs dans les fichiers de tests suivants :
  • WelcomeMessage.spec.ts => À faire à 100%
  • SortedNumbers.spec.ts => À faire à 100%
  • AdminDashboard.spec.ts => 4 TODO à faire
  • ClickCounter.spec.ts => 4 TODO à faire
  • ColorAdder.spec.ts => 4 TODO à faire
  • ColorAdderList.spec.ts => 4 TODO à faire
  • SimpleColorAdder.spec.ts => 4 TODO à faire

EXPERT (bonus) : ShipName.spec.ts => 4 TODO à faire (requêtes asynchrones — plus complexe que les autres)

Étape 2

Assurez-vous que TOUS les tests passent!

Partie 2

Utiliser le dossier todo-app

En vous inspirant des patterns vus en Partie 1, vous allez maintenant écrire des tests de zéro, sans TODOs guidés.

Consignes

Étape 0

• Faire npm install pour installer les dépendances
• Faire npm run dev pour lancer l'application

Étape 1

• Ouvrir les deux fichiers de tests dans le projet: les descriptions des tests à écrire se trouvent directement dans ces fichiers (commentaires it('...') vides).
• Écrire le code des tests unitaires selon ces descriptions.
• Faire npm run test pour lancer les tests.

Étape 2

Assurez-vous que TOUS les tests passent!

Remise

Sur Léa dans Exercice 16 pour la date prévue.
IMPORTANT : supprimer le dossier node_modules avant la remise!