Golden Test: Fazendo testes dos widgets (parte 2)

Golden Test: Fazendo testes dos widgets (parte 2)

Bom, na primeira parte https://blog.flutterando.com.br/golden-test-testando-suas-p%C3%A1ginas-parte-1-a8b2b490f4ea vimos como fazer a configuração inicial do Golden Test e também vimos como fazer o teste da página completa. Agora nesta parte iremos ver como podemos fazer o testes dos widgets menores.

A primeira diferença logo de cara é que ao invés de utilizar o DeviceBuilder() utilizaremos o GoldenBuilder.grid() que na imagem ele irá renderizar o widget como se fosse uma tabela, espera-se dois parâmetros o primeiro é a columns que irá representar a quantidade de widgets que será mostrado por linha e o segundo é o widthToHeightRatio que é a proporção da imagem é uma relação proporcional entre a largura e a altura de uma imagem, eu costumo deixar como padrão com o valor 1.

Logo em seguida também utilizamos o addScenario() que espera uma descrição e o widget.

A segunda diferença é que ao invés de utilizarmos o pumpDeviceBuilder(builder) utilizaremos o pumpWidgetBuilder(builder) que assim como o anterior espera o objeto builder.

Agora executando o comando para gerar os snapshots

flutter test --update-goldens

Ele irá gerar a pasta goldens com os snapshots

Posso gerar quantas variações do meu cenário eu quiser.

Simulando Erro

Para simular o erro troquei o Icone e o HintText

Agora igual o teste das paginas irá ser gerado uma pasta chamada failure contendo os artefatos dos erros ao rodar

flutter test

E as imagens seguem a mesma logica do artigo anterior

BONUS

As vezes precisamos do contexto para fazer determinados testes, como por exemplo recuperar alguma cor do Tema da aplicação, uma solução que encontrei foi sempre que necessitar envolver o widget do cenário com o Builder(), para não ter que ficar adicionando o Builder em todo lugar criei uma extension para fazer isso. Basta adicionar essa extension em seu código e ao invés de utilizar o addScenario utilizar o addScenarioBuilder.

A utilização dele é bem simples, basta ao invés de passar o widget direto será necessário passar uma função que tem como parâmetro o context e ele retorna o widget que será testando.

Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil