Golden Test: Fazendo testes dos widgets (parte 2)
Tags: flutter, dart, goldentest, ebay
Published: 2024-04-19 03:03:58

### 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](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.

![](https://cdn-images-1.medium.com/max/800/1*yFAMJ0vTOoc2-SOIDzuqxw.png)
{% gist https://gist.github.com/toshiossada/1b534c30ac7557671d7c44e42d725dbb/549be8e62fcd00d8039f2b6697ef669e5ba4f755 file=teste_itnit.dart %}

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

![](https://cdn-images-1.medium.com/max/800/1*vw9WrfcKTKLjBTAKcopkiA.png)

![](https://cdn-images-1.medium.com/max/800/1*7FdZuNlo8_7t90QJUGPHGA.png)

Posso gerar quantas variações do meu cenário eu quiser.
{% gist https://gist.github.com/toshiossada/1e031dd48696e7bc07f0597891af52b0 file=widget_goldern.dart %}
![](https://cdn-images-1.medium.com/max/800/1*mcbhuKdbrpYbGDSGFX5mNg.png)

### Simulando Erro

Para simular o erro troquei o Icone e o HintText

![](https://cdn-images-1.medium.com/max/800/1*Cbkxh2d7PoyeEsAqL2kM5g.png)

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

    flutter test

![](https://cdn-images-1.medium.com/max/800/1*iFBcdpWHlFyz7z56rmI43g.png)

E as imagens seguem a mesma logica do artigo anterior

![](https://cdn-images-1.medium.com/max/600/1*MACIvC18c9cZ3K8FANMICg.png)

![](https://cdn-images-1.medium.com/max/600/1*3ruPrzHyUJrgqyigfHOrzw.png)

![](https://cdn-images-1.medium.com/max/600/1*D4VHT3HlB5EXY9HOKmagWg.png)

![](https://cdn-images-1.medium.com/max/600/1*Vm5094kRhQhDCpyjcwCyBg.png)

### BONUS
{% gist https://gist.github.com/toshiossada/f9a9f4a3eadee81a78a8b768c41eb51b file=goldentest.dart %}
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.
{% gist https://gist.github.com/toshiossada/a30a4b1d94067ff355d4704524d20061 file=buildercontext.dart %}

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obcg0d2y00yddve9quky.png)


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