Quando estamos iniciando em um projeto de software, na maioria das vezes, algum (ou muito) código já existe, e não são todos que tem o privilégio de trabalhar nos chamados green field projects, ou seja, projetos que estão começando do zero.
Estruturei este curso trazendo situações reais de projetos de software, porém em uma escala menor, para focarmos no aprendizado de diferentes conceitos e técnicas, onde você irá trabalhar com uma base de código existente, com alguns testes já escritos (nem sempre da melhor forma) e com cenários de teste ainda à serem cobertos.
A aplicação em teste é chamada Hacker Stories e foi desenvolvida baseada nos exercícios do livro The Road to React, escrito por Robin Wieruch, um livro que altamente recomendo à qualquer um interessado em aprender ou se aprimorar no framework React.
A aplicação foi escrita em TypeScript utilizando React no frontend, a API púbilica do Hackernews como "backend", e encontra-se hospedada no Firebase.
Obs.: Apesar da aplicação ter sido escrita em TypeScript, os testes deste curso foram (e continuarão sendo) escritos em JavaScript para facilitar a sua vida.
Atenção: não execute testes de performance contra a aplicação do curso! Ela não é destinada para isso.
A principal funcionalidade da aplicação Hacker Stories é realizar buscas via API do Hackernews e listar os resultados de 20 em 20, com título, autor, número de comentários e pontuação.
Quando acessada pela primeira vez, por padrão a aplicação faz uma busca pelo termo 'React'. Dessa forma, podemos garantir que a mesma está integrada corretamente com a API desde o início.
Além disso, o último termo buscado é guardado no localStorage do navegador, para que no caso de um refresh, o mesmo esteja disponível no campo de busca.
Cada história (story) possui um botão que a remove da lista.
Além disso, é possível ordenar os resultados da busca, de forma crescente ou decrescente, por título, autor, número de comentários e pontuação.
Após a listagem das primeiras 20 histórias é possível clicar o botão More para buscar pelas próximas 20 histórias (algo como uma paginação).
Também existe a funcionalidade dos últimos termos buscados, onde um máximo de 5 botões são exibidos abaixo do campo de busca, com o texto dos últimos termos buscados, para consulta rápida.
Por fim, caso ocorra um erro na busca, um componente de fallback é exibido ao usuário com a mensagem "Something went wrong ..."
Obs.: Nesta versão da aplicação, não há cache dos resultados, ou seja, cada busca faz uma nova requisição à API.
A aplicação Hacker Stories já possui testes end-to-end. Eles são:
- Teste que garante que o footer é exibido, visto que para o botão de remover uma história utilizei um ícone do Freepick e preciso citálo em algum lugar para dar-lhe os créditos
- Teste que garante que 20 histórias são exibidas e então as próximas histórias são exibidas após clicar no botão More
- Teste que garante que uma história é removida da lista corretamente
- Teste que busca por um termo digitando e pressionando ENTER
- Teste que busca por um termo digitando e clicando no botão de Submit
- Teste de busca rápida por últimos termos
- Teste que garante um máximo de 5 botões para os últimos termos buscados
Além dos testes já implementados, ainda há alguns à serem escritos para garantir uma maior cobertura de código. Eles são:
- Teste que garante que os dados corretos são exibidos em cada campo da lista
- Testes para ordenação por título, autor, número de comentários e pontuação
- Testes para situações de erro no servidor ou na rede
Apesar de já termos parte do código coberto por testes e estarmos planejando aumentar a cobertura, a abordagem atual sofre de alguns problemas. Eles são:
- Todos os cenários dependem da API real do Hackernews, ou seja, caso esta esteja "fora do ar", todos os testes (com exceção ao teste do footer) irão falhar
- Uma vez que a API é externa, não temos como controlar o que será retornado ao frontend, tornando alguns testes difíceis de serem implementados (por exemplo, os testes pendentes de ordenação), ou mais complicados do que deveriam
- Testar situações de erro não é algo trivial quando se fala de testes end-to-end
Durante o curso, irei lhe apresentar um problema específico de cada vez, algumas opções para resolvê-lo (umas melhores que outras) e exercícios para você resolver tais problemas e poder exercitar como melhorar a velocidade e independência dos testes, além de aumentar a cobertura de funcionalidades sendo exercitadas por testes automatizados.
Ao final do curso, você estará preparado(a) para colocar todo esse conhecimento em prática em projetos de software reais e em maior escala.
Tudo certo até aqui?
Vá para a aula 2 e vamos começar a refatorar os testes. 🤓