Fazendo uma aplicação em Vue.js com TDD — Um guia extensivo para quem quer aprender — parte 2
Continuando a UserView
Este é o segundo de uma série de artigos:
- Parte 1: Setup e o primeiro teste
- Parte 2: Continuando a UserView
- Parte 3: Testando a store e o restante dos componentes de apresentação
- Parte 4: Testando o serviço de requisições para a API
- Parte 5: Adicionando e testando com dependências de terceiros
- Parte 6: Resumo geral — 26/11
Semana passada expliquei um pouco sobre o projeto, passei alguns conceitos e começamos a fazer o nosso projeto com o primeiro teste. Agora podemos seguir para uma das partes mais interessantes na minha opinião e provavelmente o artigo mais breve.
Segundo teste
Agora que já validamos se o nosso componente está renderizando, vamos testar se ele renderiza a coisa certa. Nesse caso, queremos garantir que ele contem um componente para o VUserSearchForm e o VUserProfile.
No segundo teste, na linha 17, a partir do wrapper buscamos os nossos filhos principais. Nas linhas 18 e 19 através do método find do vue-test-utils, verificar se eles existem.
Novamente, nossos testes estarão falhando, pois nenhum dos componentes mencionados, existem.
Vamos resolver isso… Basta criá-los e referenciá-los no nosso UserView
Agora sim, nosso teste já está passando. Precisamos apenas atualizar as nossas snapshots. Pressione u no terminal.
Algumas pessoas acham que este teste acaba inviabilizando o primeiro teste que nós fizemos. Porém aqui nós estamos apenas garantindo os componentes principais.
Não precisamos colocar neste teste TODOS os filhos do nosso componente se tivermos um h1 ou um p ou qualquer outro elemento que não é “vital” para o funcionamento do nosso componente.
A snapshot já será o suficiente, e ela também garantirá qualquer alteração textual, sendo uma mudança de classe ou propriedade.
Então ambos os testes são uteis e importantes.
Refactor
Aproveitando que estamos no VERDE, podemos refatorar um pouco dos nossos testes, se perceberam, temos algumas coisas duplicadas, agora vou propor uma mudança na estrutura para utilizar uma forma que eu aplico em todas as minhas aplicações.
Criamos na linha 7 uma função para buildar a nossa estrutura de testes.
Na linha 10 eu retorno um objeto contendo o nosso wrapper e todos os seletores/elementos/utilitarios que podem ser usados entre testes.
Vale o ponto de atenção aqui que estes seletores são funções, isso é importante, pois queremos controlar em que momento o elemento é buscado. Se não utilizamos funções, a partir do momento que o buildé chamado, o wrapper.findseria chamado imediatamente, e caso tenha alguma mudança na interface, teriamos que fazer uma nova busca manualmente.
Nas linhas 19 e 26, através do destructuring, chamamos a função de build e pegamos aquilo que iremos utilizar para o teste, lembrando que agora os nossos seletores são funções, precisando serem invocadas nas linhas 29 e 30.
Neste primeiro momento, a função de build pode não parecer fazer muito sentido, e algumas pessoas vão dizer “por que você não cria toda a estrutura no beforeEach” , mas confiem em mim, com o passar do desenvolvimento, isso vai começar a fazer sentido.
Terceiro teste
Para o terceiro teste, podemos validar os binds do componente, vamos ver se ele está passando uma propriedade para o componente VUserProfile contendo um objeto, esse objeto terá todas as informações do usuário pesquisado.
Irei reforçar aqui, que eu não estarei discutindo se o teste é de integração ou unitário, para todo o artigo, vamos encarar tudo como se fossem testes unitários, já que este é um assunto que geralmente gera muita discussão no mundo do front.
Para manter o teste simples, eu apenas na linha 9, passei a propriedade data para o nosso componente, contendo o nosso usuário do Github.
Na linha 27, estou setando o valor deste objeto para { name: 'Daniel' } e então eu verifico se o nosso componente VUserProfile recebeu este mesmo usuário como props.
Agora que temos o nosso teste falhando, vamos fazer ele passar, não esquecendo de atualizar as nossas snapshots.
Apenas inserindo a propriedade não é o suficiente, precisamos colocar essa declaração no nosso VUserProfile.
Estamos garantindo aqui, que o nosso UserView.vue está passando a propriedade desejada para o VUserProfile.vue.
Aproveitando que estamos no verde, podemos pensar que neste caso, estaria perfeitamente OK guardar o estado da nossa aplicação dentro do UserView.vue, porém por motivos de demonstração, digamos que esse usuário pesquisado pelo Github estará sendo utilizado em outros lugares na nossa aplicação.
Então o que iremos fazer agora é, passar este usuário para a nossa store, e testar se estamos passando o user da store ao invés da propriedade do data.
Resumo da obra
Neste segundo artigo, fizemos:
- Criamos o nosso segundo e terceiro teste
- Refatoramos os testes fazendo a utilização de uma função responsável por montar o nosso componente e expor seletores
Fiquem atentos que próxima semana estaremos finalizando os testes dos nossos componentes junto da integração com a store.
Muito obrigado pela atenção, se gostou, por favor, clique no 💚, e qualquer dúvida, sugestões ou correções sinta-se a vontade para me mandar uma mensagem, eu agradeço muuito 😄.
Meu Twitter: @DKuroski
Vejo você próxima semana 😄
