Golden Test: Testando suas Páginas (Parte 1)

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)

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

Vamos utilizar esta tela para podermos rodar nossos testes

Este exemplo se encontra no meu github 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.

A estrutura de pasta do aplicativo é

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

Primeiramente vamos fazer os testes da home_page_test.dart

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

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

utilizaremos

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

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

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

Isso irá gerar uma imagem contendo seu widget

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

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:

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

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

ao executar o teste ele irá me apresentar um problema

Ele irá gerar uma pasta failure contendo imagens dos erros

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

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

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

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

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

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

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