Exercice 14 - 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 14 pour le prochain cours!
  • IMPORTANT: supprimer le dossier node_modules avant la remise!

À faire (étapes)

Exercice formatif noté

Fichier à utiliser

exer14.zip

Vous allez voir deux dossiers à l'intérieur du dossier exer14, 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 14
• 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.

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

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
  
• Écrire le code des TODOs des tests unitaire de l'application.
  • SortedNumbers.test.ts => À faire à 100%
  • WelcomeMessage.test.ts => À faire à 100%
  • AdminDashboard.test.ts => 4 TODO à faire
  • ClickCounter.test.ts => 4 TODO à faire
  • ColorAdder.test.ts => 4 TODO à faire
  • ColorAdderList.test.ts => 4 TODO à faire
  • SimpleColorAdder.test.ts => 4 TODO à faire

EXPERT:

• ShipName.test.ts => 4 TODO à faire

Étape 2

Assurez-vous que TOUS les tests passent!

Partie 2

Utiliser le dossier todo-app

Consignes

Étape 0

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

Étape 1

• Écrire le code des tests unitaire de l'application selon leur description fournie.
  • Il y a deux fichiers de tests à compléter
• Faire npm run test pour lancer les tests

Étape 2

Assurez-vous que TOUS les tests passent!

Remise

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