Golden Test: Testando suas Páginas (Parte 1)
Tags: goldentest, flutter, dart, test
Published: 2024-04-19 02:44:40

Fala Devs, Blz?

Fazer testes no Flutter é uma tarefa muito comum entre os desenvolvedores e sua exigência vem ficando cada vez mais forte devido ao fato de ser muito simples desenvolver testes no Flutter, principalmente quando falamos de testes unitários e testes de widgets.

Entretanto desta vez iremos falar sobre um outro tipo de teste que é muito útil e divertido, os Golden Tests.

Mas o que é Golden Test? Bom, Golden Test é um tipo de teste de unidade que irá garantir que a qualquer alteração em regra de negocio da sua aplicação não irá afetar a camada de UI do aplicativo. Ele irá salvar snapshots em imagens que irão ser comparados posteriormente ao rodar.

`flutter test`

Para este exemplo iremos utilizar o pacote desenvolvido pela eBay, o ([golden_toolkit](https://pub.dev/packages/golden_toolkit))

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

Vamos então começar a configurar nosso projeto para utilizar o golden test, primeiramente vamos instalar o pacote golden_toolkit

`flutter pub add --dev golden_toolkit`

{% gist https://gist.github.com/toshiossada/438bc8dd80c13331ea1f7d79f2cd49ef/101e91cc003acaa0421d08975b30eab7b40accab file=gistfile1.dart %}

Vamos utilizar esta tela para podermos rodar nossos testes

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

Este exemplo se encontra no meu github [https://github.com/toshiossada/golden_test_example](https://github.com/toshiossada/golden_test_example)

Aqui faremos dois testes, criaremos um teste para verificar a tela toda do aplicativo. A parte da tela ficará neste artigo e a parte do widget farei em um próximo.

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

A estrutura de pasta do aplicativo é

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

Então a primeira coisa que faremos é criar os arquivos de testes com a mesma estrutura de pasta, não se esqueça que os arquivos de testes tem que ter o sufixo **_test**

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

Primeiramente vamos fazer os testes da **home_page_test.dart**

Para fazer o golden test, ao invés de utilizarmos

```dart
test(‘descrição’, (){  
});
```

utilizaremos

{% gist https://gist.github.com/toshiossada/1bd3d980b645b2ddc9cf1d47a1ea4559/daf8f6e6fbe27d6b34d25c76799f5baff84f858d file=golden_start.dart %}



```
test(‘testGoldens’, (WidgetTester tester){  
});
```

Então nosso primeiro teste da tela Home ficará da seguinte forma

{% gist https://gist.github.com/toshiossada/faa223c1afeabac12a422e29003d3a31/4d491e657261212beca9c16bb4ff3b203dc71e4f file=first_test.dart %}


Assim como no testes de widgets, no golden test teremos um objeto **WidgetTester** para conseguirmos manipular nosso widget. Primeiramente para evitar problemas com fontes iremos executar a função do pacote **golden_toolkit** chamada **loadAppFonts()**.

Logo em seguida utilizaremos o **DeviceBuilder()** e podemos configurar variações do nosso widget com o **addScenario(**).

o **addScenario()** é esperado um name (que irá aparecer em nosso snapshot) e logo em seguida o widget que iremos querer testar.

Agora precisaremos executar o **pumpDeviceBuilder(builder)** passando o objeto que criamos com os cenários, esse funcionará semelhante com o **pump()** do widgetTests, ele simplesmente irá renderizar os cenários em memória.

Após isso executaremos o **screenMatchesGolden(tester, ‘Home Screen’)** para comparar o widget gerado com o snapshot que iremos gerar, sendo que ele recebe como parâmetro de entrada primeiramente o objeto **tester** com o widget renderizado e depois o nome do snapshot que será gerado.

Agora iremos gerar os snapshots que irão ser usados como base para quando quisermos testar, basta executar em seu prompt.

`flutter test --update-goldens`

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

Isso irá gerar uma imagem contendo seu widget

O snapshot por default vem simulando dois tipos de tela, no celular e no tablet

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

Eu também consigo configurar os tipos de telas que quero gerar basta utilizarmos a função **overrideDevicesForAllScenarios()** do builder ele possui o parâmetro **devices** que espera um **List** de **devices**. basta especificarmos o que queremos.

E após executar novamente o comando para atualizar os snapshots

`flutter test --update-goldens`

Isso irá resultar:

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

Também é possível manipularmos nosso widget, assim como se fosse um widget test. Para isso, ao configurarmos o cenário temos o parâmetro **onCreate** que iremos manipular assim que o cenário estiver criado.

No exemplo abaixo apenas recuperei o **TextFormField** por sua key e o **IconButton** e apenas inseri um texto qualquer e pedi para clicar no **IconButton**

Isso irá me gerar

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

Pronto! agora toda vez que rodar no meu teste ele irá comparar se o seu código atual está gerando um widget idêntico ao snaptshot.

`flutter test`

### Simulando Erro

Vou simular um problema: Supondo que o desenvolvedor foi lá e sem querer trocou a cor do app bar

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

ao executar o teste ele irá me apresentar um problema

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

Ele irá gerar uma pasta **failure** contendo imagens dos erros

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

A primeira imagem “**_isolatedDiff.png**” irá conter uma imagem apresentando quais os pixels que houve as divergências

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

A segunda imagem “**_maskedDiff**” irá conter uma imagem sobreposta a outra

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

A terceira imagem “_masterImage” é a imagem do snapshot, ou seja o esperado.

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

e a ultima imagem ”**_testImage**” é a foto do widget com o estado atual.

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

Com isso o desenvolvedor já consegue identificar o problema e aplicar a solução.

### DICA

Eu costumo colocar no **.gitignore** para não subir as falhas

```
# Golden Tests Failures

test/**/failures
```

Então, achou útil os Golden Tests? Bom, neste artigo fizemos os testes das páginas e no próximo artigo falarei de como podemos testar widgets individuais.

Vlw!!!

Confira a parte 2 [https://medium.com/flutterando/golden-test-fazendo-testes-dos-widgets-parte-2-d26b2b770e17](https://medium.com/flutterando/golden-test-fazendo-testes-dos-widgets-parte-2-d26b2b770e17)

O projeto que criei neste artigo você pode conferir no meu GitHub.
https://github.com/toshiossada/flutter_micro_frontend/ 

![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