Corrigir o Teste em async.spec.js

Introdução

Neste projeto, você aprenderá como corrigir um problema no arquivo async.spec.js dentro do projeto vue-router-3.0.1. O arquivo async.spec.js contém um caso de teste que não está detectando um erro corretamente, e sua tarefa é modificar o código para garantir que o teste passe como esperado.

👀 Pré-visualização

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

🎯 Tarefas

Neste projeto, você aprenderá:

• Como localizar e modificar o arquivo async.spec.js no projeto vue-router-3.0.1
• Como entender o problema com o caso de teste existente
• Como implementar as alterações necessárias para corrigir o caso de teste

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Identificar e corrigir problemas em testes unitários
• Trabalhar com código assíncrono e a função utilitária runQueue
• Aplicar técnicas para depurar e solucionar problemas em casos de teste

Corrigir o Teste em async.spec.js

Para começar, podemos ver a pasta vue-router-3.0.1 no diretório à esquerda do editor.

Nesta etapa, você aprenderá como corrigir o problema no arquivo async.spec.js no projeto vue-router-3.0.1.

1. Abra o arquivo vue-router-3.0.1/test/unit/specs/async.spec.js.
2. Localize o bloco it("should work", (done) => { ... }).
3. Altere const queue = [1, 2, 3, 4, 5].map para const queue = [1, 2, 3].map para facilitar o teste.

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

4. Abra o diretório vue-router-3.0.1 no terminal.
5. Execute o comando npm install para instalar as dependências. Este processo pode levar um tempo, por favor, seja paciente. (Se ficar preso por muito tempo, pressione Ctrl+C para interromper o processo e, em seguida, execute este comando novamente.)
6. Após instalar com sucesso todas as dependências, execute o teste unitário executando o comando npm run test:unit no terminal. Antes da correção, você notará que o script de teste acima não detectou nenhum erro. (No código acima, o valor de calls é [1, 2, 3] que não é igual a [1, 2, 3, 4, 5]).
7. Para corrigir o problema acima, vamos em frente e alterar dentro do arquivo vue-router-3.0.1/test/unit/specs/async.spec.js para o seguinte código:

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

A alteração aqui é que mudamos setTimeout(done, 0) para setTimeout(next, 0) fazendo com que a função não saia imediatamente.

Executar os Testes

Nesta etapa, você reconstruirá o projeto vue-router-3.0.1 e testará o efeito corrigido.

1. Re-execute o comando npm run test:unit para executar os testes unitários.
2. Após a correção, você deverá ver a seguinte saída:

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

Isso indica que o teste async.spec.js foi corrigido com sucesso.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.