DEV Community

Cover image for Golden Test: Fazendo testes dos widgets (parte 2)
Toshi Ossada for flutterbrasil

Posted on • Edited on

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.


import 'package:golden_toolkit/golden_toolkit.dart';
import 'package:goldentest/widgets/custom_textbox_widget.dart';
void main() {
testGoldens('Password Input', (tester) async {
//arrange
await loadAppFonts();
final builder = GoldenBuilder.grid(
columns: 2,
widthToHeightRatio: 1,
)
..addScenario(
"Password Initial",
const CustomTextWidget(),
);
//act
await tester.pumpWidgetBuilder(builder.build());
//assert
await screenMatchesGolden(tester, 'password-input');
});
}

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
Enter fullscreen mode Exit fullscreen mode

Ele irá gerar a pasta goldens com os snapshots

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

import 'package:golden_toolkit/golden_toolkit.dart';
import 'package:goldentest/widgets/custom_textbox_widget.dart';
void main() {
testGoldens('Password Input', (tester) async {
//arrange
await loadAppFonts();
final builder = GoldenBuilder.grid(
columns: 2,
widthToHeightRatio: 1,
)
..addScenario(
"Password Empty",
const CustomTextWidget(obscureText: true),
)
..addScenario(
"Password Hided",
const CustomTextWidget(obscureText: true, initialValue: 'Teste'),
)
..addScenario(
"Password Showed",
const CustomTextWidget(obscureText: false, initialValue: 'Teste'),
);
//act
await tester.pumpWidgetBuilder(builder.build());
//assert
await screenMatchesGolden(tester, 'password-input');
});
}



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
Enter fullscreen mode Exit fullscreen mode

E as imagens seguem a mesma logica do artigo anterior

BONUS

extension GoldenTest on GoldenBuilder {
void addScenarioBuilder(
String name, Widget Function(BuildContext context) fn) async {
addScenario(name, Builder(builder: fn));
}
}
view raw goldentest.dart hosted with ❤ by GitHub



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.

testGoldens('Testing Theme', (tester) async {
await loadAppFonts();
final builder = GoldenBuilder.grid(
columns: 2,
widthToHeightRatio: 1,
)
..addScenarioBuilder("Primary Color", (context) {
var color = Theme.of(context).colorScheme.primary;
return Container(
color: color,
);
});
await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'golden_builder_theme');
});

Image description

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

Top comments (0)