Исправьте тест в async.spec.js

Введение

В этом проекте вы научитесь исправлять проблему в файле async.spec.js проекта vue-router-3.0.1. Файл async.spec.js содержит тестовый случай, который не правильно определяет ошибку, и ваша задача — изменить код, чтобы тест проходил как ожидается.

👀 Предварительный просмотр

Message:
    Ожидалось, что $.length = 3 равно 5.
    Ожидалось, что $[3] = undefined равно 4.
    Ожидалось, что $[4] = undefined равно 5.

🎯 Задачи

В этом проекте вы научитесь:

• Как найти и изменить файл async.spec.js в проекте vue-router-3.0.1
• Как понять проблему с существующим тестовым случаем
• Как внедрить необходимые изменения, чтобы исправить тестовый случай

🏆 Достижения

После завершения этого проекта вы сможете:

• Идентифицировать и исправлять проблемы в юнит-тестах
• Работать с асинхронным кодом и утилитарной функцией runQueue
• Применять методы отладки и устранения неполадок в тестовых случаях

Исправьте тест в async.spec.js

Для начала работы мы можем увидеть папку vue-router-3.0.1 в левом каталоге редактора.

В этом шаге вы научитесь исправлять проблему в файле async.spec.js проекта vue-router-3.0.1.

1. Откройте файл vue-router-3.0.1/test/unit/specs/async.spec.js.
2. Найдите блок it("should work", (done) => {... }).
3. Замените const queue = [1, 2, 3, 4, 5].map на const queue = [1, 2, 3].map, чтобы сделать тестирование проще для нас.

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

4. Откройте папку vue-router-3.0.1 в терминале.
5. Запустите команду npm install, чтобы установить зависимости. Этот процесс может занять некоторое время, будьте терпеливы. (Если процесс зависнет долго, нажмите Ctrl+C, чтобы прервать процесс, а затем запустите эту команду снова.)
6. После успешной установки всех зависимостей запустите юнит-тест, выполнив команду npm run test:unit в терминале. До исправления вы заметите, что вышеописанный тестовый сценарий не обнаружил никаких ошибок. (В вышеприведенном коде значение calls равно [1, 2, 3], что не равно [1, 2, 3, 4, 5]).
7. Чтобы исправить вышеописанную проблему, давайте изменим в файле vue-router-3.0.1/test/unit/specs/async.spec.js код на следующий:

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

Здесь изменилось то, что мы заменили setTimeout(done, 0) на setTimeout(next, 0), чтобы функция не сразу же выскакивала.

Запустите тесты

В этом шаге вы перестроите проект vue-router-3.0.1 и протестируете исправленный эффект.

1. Перезапустите команду npm run test:unit, чтобы запустить юнит-тесты.
2. После исправления вы должны увидеть следующий вывод:

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

Это означает, что тест async.spec.js был успешно исправлен.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.