Behebe den Test in async.spec.js

Einführung

In diesem Projekt lernst du, wie du ein Problem in der Datei async.spec.js im Projekt vue-router-3.0.1 beheben kannst. Die Datei async.spec.js enthält einen Testfall, der einen Fehler nicht richtig erkennt, und deine Aufgabe ist es, den Code zu ändern, um sicherzustellen, dass der Test wie erwartet erfolgreich abläuft.

👀 Vorschau

Meldung:
    Es wurde erwartet, dass $.length = 3 gleich 5 ist.
    Es wurde erwartet, dass $[3] = undefined gleich 4 ist.
    Es wurde erwartet, dass $[4] = undefined gleich 5 ist.

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Datei async.spec.js im Projekt vue-router-3.0.1 finden und ändern kannst
• Wie du das Problem mit dem vorhandenen Testfall verstehst
• Wie du die erforderlichen Änderungen durchführst, um den Testfall zu beheben

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Probleme in Unit-Tests zu identifizieren und zu beheben
• Mit asynchronem Code und der Hilfsfunktion runQueue umzugehen
• Techniken zum Debuggen und zur Behebung von Problemen in Testfällen anzuwenden

Behebe den Test in async.spec.js

Um loszulegen, können wir im linken Verzeichnis des Editors das Verzeichnis vue-router-3.0.1 sehen.

In diesem Schritt lernst du, wie du das Problem in der Datei async.spec.js im Projekt vue-router-3.0.1 beheben kannst.

1. Öffne die Datei vue-router-3.0.1/test/unit/specs/async.spec.js.
2. Locate the it("should work", (done) => {... }) block.
3. Ändere const queue = [1, 2, 3, 4, 5].map zu const queue = [1, 2, 3].map, um es einfacher für uns zu testen.

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

4. Öffne das Verzeichnis vue-router-3.0.1 im Terminal.
5. Führe den Befehl npm install aus, um die Abhängigkeiten zu installieren. Dieser Prozess kann einige Zeit in Anspruch nehmen, bitte seien Sie geduldig. (Wenn es lange anhält, drücken Sie bitte Ctrl+C, um den Prozess zu beenden, und führen Sie dann diesen Befehl erneut aus.)
6. Nachdem alle Abhängigkeiten erfolgreich installiert wurden, führen Sie den Unit-Test aus, indem Sie im Terminal den Befehl npm run test:unit ausführen. Bevor die Behebung erfolgt, werden Sie feststellen, dass das obige Testskript keine Fehler erkannt hat. (Im obigen Code ist der Wert von calls [1, 2, 3], was nicht gleich [1, 2, 3, 4, 5] ist.)
7. Um das obige Problem zu beheben, ändern wir nun im Inneren der Datei vue-router-3.0.1/test/unit/specs/async.spec.js den Code wie folgt:

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

Die Änderung besteht darin, dass wir setTimeout(done, 0) zu setTimeout(next, 0) geändert haben, wodurch die Funktion nicht sofort ausgeht.

Führe die Tests aus

In diesem Schritt werden Sie das Projekt vue-router-3.0.1 neu aufbauen und die Wirkung der Behebung testen.

1. Führen Sie erneut den Befehl npm run test:unit aus, um die Unit-Tests auszuführen.
2. Nach der Behebung sollten Sie die folgende Ausgabe sehen:

Meldung:
    Es wurde erwartet, dass $.length = 3 gleich 5 ist.
    Es wurde erwartet, dass $[3] = undefined gleich 4 ist.
    Es wurde erwartet, dass $[4] = undefined gleich 5 ist.

Dies zeigt an, dass der Test in async.spec.js erfolgreich behoben wurde.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Projekt abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.