Testando componentes Vue

Este artigo assume que você tem um conhecimento básico sobre Vue.js. Caso não, recomendo o artigo Saindo do zero a zero com o Vue.js, do Luís Felipe Souza, se deseja conhecer esse poderoso progressive framework.

O que são testes unitários?

Basicamente, são a forma de checarmos automaticamente se uma unidade de um sistema funciona como deveria.

Um teste unitário testa uma única unidade desse sistema — que pode ser uma função ou até mesmo uma classe, em sistemas orientados a objetos — , e verifica se ela produz o resultado esperado.

Por que escrever testes?

Uma vez sabendo o que são testes unitários, necessitamos saber o porquê de escrevê-los.

Inicialmente, escrever um código que testa o nosso código pode soar estranho, mas imagine um sistema com milhares de unidades (métodos e/ou classes). Como podemos garantir que, no futuro, poderemos alterar esse código sem quebrar o nosso sistema? O risco de quebrarmos parte dele sem perceber e mandar essa deficiência para produção é enorme!

Por outro lado, uma cobertura de testes em nósso código nos entrega um mínimo de garantia de que, ao removermos/adicionarmos linhas ao nosso code base, nenhuma funcionalidade será quebrada, apenas rodando nossos testes de unidade.


Testando componentes do Vue.js

A ideia deste artigo é dar uma introdução a testes em componentes Vue. Portanto, os exemplos sugeridos serão simples, para que o conceito seja absorvido, e então seja exercitado em componentes mais complexos.

Setup

O Vue.js dispõe de uma interface de linha de comando sensacional para criarmos uma estrutura básica de desenvolvimento, incluindo setup para testes!

Para isso, basta instalar o vue-cli:

[sudo] npm install -g vue-cli

E iniciar um novo projeto com o comando vue init. No nosso caso, vamos usar o template com Webpack configurado, então rode o seguinde comando no seu terminal:

vue init webpack testando-componentes

Essas são as configurações mínimas para a estrutura básica que vamos precisar:

Respostas para as perguntas do comando vue init

Ao rodar esse comando um boilerplate será criado. O nosso foco estará nas pastas src e test.

Testando um método isolado

A primeira pergunta que pode surgir aqui é: eu preciso escrever um componente seguindo alguma regra específica para conseguir testá-lo? E a resposta é não. Em termos de estrutura de código, não precisamos fazer absolutamente nada que já não faríamos.

Para exemplificar, vamos criar alguns componentes e testá-los. O primeiro se chamará Message e terá um método chamado theCorrectMessage(), que exibirá uma mensagem no console do browser assim que o componente for montado.

Tudo o que precisamos fazer é importar nosso componente e criar os casos de teste que desejamos:

Para rodar os testes usamos o comando yarn unit no terminal, e se tudo estiver certo, teremos o seguinte resultado:

Testando comportamento dentro de uma instância Vue

Para isso, vamos criar um outro componente chamado Update. Ele atualizará o valor da propriedade message assim que o componente for criado. É possível fazer isso usando o método $mount(), que serve para iniciar manualmente a montagem de um componente. Você pode ler mais sobre ele aqui.

Vamos ao código:

Na linha 7 do teste nós criamos uma nova instância do Vue seguido de uma chamada ao $mount(), que executará o hook created do nosso componente, atualizando assim o valor da propriedade que especificamos na linha 11.

Rodando os testes novamente teremos o seguinte resultado:

$ yarn unit

Conclusão

Nós vimos aqui dois exemplos de testes unitários: testamos um método isolado e um comportamento dentro de uma instância do Vue.js. Acredito que sejam um bom ponto de partida para você escrever novos testes.

Escrever testes para componentes Vue se torna extremamente fácil, uma vez que, novamente falando, não precisamos fazer nada de especial para tornar um componente testável.

TDD é uma prática que pode enriquecer uma aplicação em termos de otimização e desenvolvimento, além de facilitar a escrita de código e melhorar a produtividade de uma equipe, sem falar na segurança de manter essa aplicação sempre de pé.

Caso surja alguma dúvida ou sugestão, espero vê-lo na sessão de comentários!