Corrigez le test dans async.spec.js

Introduction

Dans ce projet, vous allez apprendre à corriger un problème dans le fichier async.spec.js du projet vue-router-3.0.1. Le fichier async.spec.js contient un cas de test qui ne détecte pas correctement une erreur, et votre tâche est de modifier le code pour vous assurer que le test passe comme prévu.

👀 Aperçu

Message:
    Attendu $.length = 3 pour être égal à 5.
    Attendu $[3] = undefined pour être égal à 4.
    Attendu $[4] = undefined pour être égal à 5.

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment localiser et modifier le fichier async.spec.js dans le projet vue-router-3.0.1
Comment comprendre le problème avec le cas de test existant
Comment implémenter les modifications nécessaires pour corriger le cas de test

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Identifier et corriger les problèmes dans les tests unitaires
Travailler avec du code asynchrone et la fonction utilitaire runQueue
Appliquer des techniques de débogage et de résolution de problèmes pour les cas de test

Pour commencer, on peut voir le dossier vue-router-3.0.1 dans le répertoire gauche de l'éditeur.

Dans cette étape, vous allez apprendre à corriger le problème dans le fichier async.spec.js du projet vue-router-3.0.1.

Ouvrez le fichier vue-router-3.0.1/test/unit/specs/async.spec.js.
Localisez le bloc it("should work", (done) => {... }).
Changez const queue = [1, 2, 3, 4, 5].map en const queue = [1, 2, 3].map pour faciliter nos tests.

const queue = [1, 2, 3].map((i) => (next) => {
  //...
});

Ouvrez le dossier vue-router-3.0.1 dans le terminal.
Exécutez la commande npm install pour installer les dépendances. Ce processus peut prendre un certain temps, veuillez être patient. (Si cela reste bloqué longtemps, appuyez sur Ctrl+C pour terminer le processus puis exécutez cette commande à nouveau.)
Après avoir installé avec succès toutes les dépendances, exécutez les tests unitaires en exécutant la commande npm run test:unit dans le terminal. Avant la correction, vous remarquerez que le script de test ci-dessus n'a détecté aucune erreur. (Dans le code ci-dessus, la valeur de calls est [1, 2, 3] qui n'est pas égale à [1, 2, 3, 4, 5]).
Pour corriger le problème ci-dessus, modifions à présent le contenu du fichier vue-router-3.0.1/test/unit/specs/async.spec.js avec le code suivant :

const queue = [1, 2, 3].map((i) => (next) => {
  calls.push(i);
  setTimeout(next, 0);
});

Le changement ici est que nous avons remplacé setTimeout(done, 0) par setTimeout(next, 0) pour empêcher la fonction de sortir immédiatement.

Exécutez les tests

Dans cette étape, vous allez reconstruire le projet vue-router-3.0.1 et tester l'effet du corrigé.

Exécutez à nouveau la commande npm run test:unit pour exécuter les tests unitaires.
Après la correction, vous devriez voir la sortie suivante :

Message:
    Attendu $.length = 3 pour être égal à 5.
    Attendu $[3] = undefined pour être égal à 4.
    Attendu $[4] = undefined pour être égal à 5.

Cela indique que le test async.spec.js a été corrigé avec succès.

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.