Fix the Test in async.spec.js

Introduction

In this project, you will learn how to fix an issue in the async.spec.js file within the vue-router-3.0.1 project. The async.spec.js file contains a test case that is not correctly detecting an error, and your task is to modify the code to ensure the test passes as expected.

👀 Preview

Message:
    Expected $.length = 3 to equal 5.
    Expected $[3] = undefined to equal 4.
    Expected $[4] = undefined to equal 5.

🎯 Tasks

In this project, you will learn:

• How to locate and modify the async.spec.js file in the vue-router-3.0.1 project
• How to understand the issue with the existing test case
• How to implement the necessary changes to fix the test case

🏆 Achievements

After completing this project, you will be able to:

• Identify and fix issues in unit tests
• Work with asynchronous code and the runQueue utility function
• Apply techniques for debugging and troubleshooting test cases

Fix the Test in async.spec.js

To get started, we can see the vue-router-3.0.1 folder in the left directory of the editor.

In this step, you will learn how to fix the issue in the async.spec.js file in the vue-router-3.0.1 project.

1. Open the vue-router-3.0.1/test/unit/specs/async.spec.js file.
2. Locate the it("should work", (done) => { ... }) block.
3. Change const queue = [1, 2, 3, 4, 5].map to const queue = [1, 2, 3].map to make it easier for us to test.

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

4. Open the vue-router-3.0.1 directory in the terminal.
5. Run the command npm install to install the dependencies. This process might take a while, please be patient. (If it gets stuck for a long time, please press Ctrl+C to terminate the process and then run this command again.)
6. After successfully installing all the dependencies, run the unit test by executing the command npm run test:unit in the terminal. Before the fix, you'll notice that the above test script didn't detect any errors. (In the above code, the value of calls is [1, 2, 3] which is not equal to [1, 2, 3, 4, 5]).
7. To fix the above issue, let's go ahead and change inside the vue-router-3.0.1/test/unit/specs/async.spec.js file to the following code:

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

The change here is that we changed setTimeout(done, 0) to setTimeout(next, 0) making the function not jump right out.

Run the Tests

In this step, you will rebuild the vue-router-3.0.1 project and test the fixed effect.

1. Re-execute the npm run test:unit command to run the unit tests.
2. After the fix, you should see the following output:

Message:
    Expected $.length = 3 to equal 5.
    Expected $[3] = undefined to equal 4.
    Expected $[4] = undefined to equal 5.

This indicates that the async.spec.js test has been successfully fixed.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.