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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

AWS Security LIVE!

Hosted by security experts, AWS Security LIVE! showcases AWS Partners tackling real-world security challenges. Join live and get your security questions answered.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️