Widget Test

Isac
Flutter — Comunidade BR
2 min readMar 10, 2020

--

Testando seus widgets em Flutter

Quando criamos os nossos Widgets, tais possuem comportamentos que irão interagir junto as ações do usuário e para garantirmos que tais interações irão se comportar de forma correta, o Flutter nos provê ferramentas para garantirmos tais comportamentos. Flutter nos disponibiliza um cara chamado flutter_test para testarmos nossos Widgets e iremos entender melhor adiante de como esse cara pode nos ajudar.

Vantagens do uso:

  • Custo de manutenção é um pouco alto pois precisamos lidar com os comportamentos de cada Widget e isso pode gerar uma manutenção nas alterações dos mesmos.
  • A confiança que o teste nos da é alta e isso traz uma maior segurança no uso da nossa aplicação.
  • E o mais favorável na minha opinião, é o tempo de execução do teste. O custo é bem baixo e os testes são executados na mesma proporção de um teste unitário.

Resumindo, além de garantirmos os comportamentos que foram escritos em nossos Widgets, o teste também vem para garantirmos o mesmo comportamento após modificações do nosso Widget.

O Widget Test também pode ser chamado como Teste de Fumaça e o principal intuito é verificarmos nossa UI e suas interações sem ter a necessidade de termos um emulador para podermos simular nossa UI.

Elementos

Antes de darmos início em nosso teste, precisamos conhecer e estar alinhados com alguns itens e nomes que serão comuns daqui em diante.

  • WidgetTester: Classe responsável por interagir com os Widgets e nos auxiliar a testá-los.
  • Finder: Utilizamos um cara chamado find para encontrarmos elementos na árvore de widgets, o resultado disso é do tipo Finder. Existem diversos métodos para serem utilizados e facilitarem o uso, você pode encontrar elementos por tipo, texto, dentre outras diversas possibilidades.
  • Matcher: Auxiliares que nos dão a possibilidade de realizar a comparação dado um determinado Finder.

O que iremos testar?

Este é um Widget que envolve uma animação ao clicar no mesmo. As alterações ocorrem no tamanho, na troca do ícone e na cor. Dito isso, temos o comportamento esperado e já podemos escrever o nosso teste.

Nosso teste

Abaixo se encontra o teste do Widget, contendo a descrição em cada linha para que possamos ter um melhor embasamento de como nosso teste foi construído.

Se o artigo te ajudou, deixe seu clap e não deixa de me seguir em minhas redes sociais:

https://www.linkedin.com/in/isacjunior/
https://twitter.com/@isac_sacramento
https://github.com/isacjunior

--

--