Corrige la prueba en async.spec.js

Introducción

En este proyecto, aprenderás a corregir un problema en el archivo async.spec.js dentro del proyecto vue-router-3.0.1. El archivo async.spec.js contiene un caso de prueba que no detecta correctamente un error, y tu tarea es modificar el código para asegurarte de que la prueba pase como se espera.

👀 Vista previa

Mensaje:
    Se esperaba que $.length = 3 fuera igual a 5.
    Se esperaba que $[3] = undefined fuera igual a 4.
    Se esperaba que $[4] = undefined fuera igual a 5.

🎯 Tareas

En este proyecto, aprenderás:

• Cómo localizar y modificar el archivo async.spec.js en el proyecto vue-router-3.0.1
• Cómo entender el problema con el caso de prueba existente
• Cómo implementar los cambios necesarios para corregir el caso de prueba

🏆 Logros

Después de completar este proyecto, podrás:

• Identificar y corregir problemas en las pruebas unitarias
• Trabajar con código asincrónico y la función de utilidad runQueue
• Aplicar técnicas de depuración y solución de problemas en casos de prueba

Corrige la prueba en async.spec.js

Para comenzar, podemos ver la carpeta vue-router-3.0.1 en el directorio izquierdo del editor.

En este paso, aprenderás a corregir el problema en el archivo async.spec.js del proyecto vue-router-3.0.1.

1. Abre el archivo vue-router-3.0.1/test/unit/specs/async.spec.js.
2. Localiza el bloque it("should work", (done) => {... }).
3. Cambia const queue = [1, 2, 3, 4, 5].map a const queue = [1, 2, 3].map para que sea más fácil para nosotros probar.

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

4. Abre la carpeta vue-router-3.0.1 en la terminal.
5. Ejecuta el comando npm install para instalar las dependencias. Este proceso puede tomar un tiempo, por favor, sea paciente. (Si se atasca durante mucho tiempo, presione Ctrl+C para terminar el proceso y luego ejecute este comando nuevamente.)
6. Después de instalar correctamente todas las dependencias, ejecuta la prueba unitaria ejecutando el comando npm run test:unit en la terminal. Antes de la corrección, notarás que el script de prueba anterior no detectó ningún error. (En el código anterior, el valor de calls es [1, 2, 3] que no es igual a [1, 2, 3, 4, 5]).
7. Para corregir el problema anterior, vamos a cambiar dentro del archivo vue-router-3.0.1/test/unit/specs/async.spec.js al siguiente código:

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

El cambio aquí es que cambiamos setTimeout(done, 0) a setTimeout(next, 0) para que la función no salga inmediatamente.

Ejecuta las pruebas

En este paso, volverás a construir el proyecto vue-router-3.0.1 y probarás el efecto de la corrección.

1. Vuelve a ejecutar el comando npm run test:unit para ejecutar las pruebas unitarias.
2. Después de la corrección, deberías ver la siguiente salida:

Mensaje:
    Se esperaba que $.length = 3 fuera igual a 5.
    Se esperaba que $[3] = undefined fuera igual a 4.
    Se esperaba que $[4] = undefined fuera igual a 5.

Esto indica que la prueba async.spec.js se ha corregido con éxito.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.