goldentestのお試しをしてみた
https://pub.dev/packages/golden_toolkit
このライブラリを使って、検証する
ちなみにマスターのスクリーンショットをgoldenというらしい。
カウンターアプリでwidgetのカラーが違う場合をテストしてみた
| ok想定 | ng想定 |
|---|---|
 |
 |
手順
1. dev_dependenciesにgolden_toolkitを追加
2. testフォルダにgolden_test.dartを作成
3. golden_test.dartを編集
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart';
import 'package:flutter_golden_test_demo/main.dart';
void main() {
testgoldens('app', (widgettester tester) async {
//デバイスの画面サイズ
final size = size(415, 896);
//第一引数はどのwidgetをビルドするのか指定、どのサイズにビルドするかがsurfacesize
await tester.pumpwidgetbuilder(myapp(), surfacesize: size);
//正規のスクリーンショットと同じかテストする
await screenmatchesgolden(tester, 'myapp');
});
}
4. golden作成（マスターのスクリーンショット）
以下コマンドでtestフォルダにgoldensファイルが作成され、myapp.pngができているはずです。
flutter test --update-goldens
| golden(myapp.png) |
|---|
 |
5. 実際にテストしてみる（ok編）
| ok想定 |
|---|
|
以下コマンドでテストします。
flutter test
結果は
all tests passed!
のはず。
6. 実際にテストしてみる（ng編）
goldenは変えずに、main.dartのプライマリーカラーを変えてみます。
| ng想定 |
|---|
 |
以下コマンドでテストします。
flutter test
結果は
some tests failed.
のはず。
テストに失敗すると、testフォルダにfailuresファイルが作成され、その配下に何が違っていたかのスクショができあがっている.
見ての通り差分をちゃんと判定してくれている、
| myapp_masterimage.png | myapp_testimage.png | myapp_maskeddiff.png | myapp_isolateddiff.png |
|---|---|---|---|
 |
 |
 |
 |
Comments are closed.