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
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
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)); | |
} | |
} |
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'); | |
}); |
Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil
Top comments (0)