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
testGoldens('Home Page Test', (tester) async { | |
}); |
test(‘testGoldens’, (WidgetTester tester){
});
Então nosso primeiro teste da tela Home ficará da seguinte forma
import 'package:goldentest/home_page.dart'; | |
import 'package:golden_toolkit/golden_toolkit.dart'; | |
void main() { | |
testGoldens('Home Page Test', (tester) async { | |
//arrange | |
await loadAppFonts(); | |
final builder = DeviceBuilder() | |
..addScenario( | |
name: 'First Test', | |
widget: const HomePage(), | |
); | |
//act | |
await tester.pumpDeviceBuilder(builder); | |
//assert | |
await screenMatchesGolden(tester, 'Home Screen'); | |
}); | |
} |
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
Top comments (0)