📝
Flutterで複数解像度のGoldenTestを同時実行してみた
今回は複数解像度（複数端末）を同時にテストする方法を紹介します。
GoldenTestなにそれって方は前回の記事を参考にしてください。
やりたいこと
画像のように、色んなサイズのデバイスをまとめてスクリーンショット化してくれるので見た目の部分の確認もできるし、もちろんコードの中身を変更した時にUIが変わっていないかテストもできます。
けっこう簡単なので使ってみるのオススメです。
前提条件
今回もgolden_toolkitを使います。これからやることも公式サイトに書いてあります。
ライブラリの導入は前回の記事に書いたので省きます。
ソースコード
一応Githubはあげておきましたので、詳細気になる方は参考にしてください。
テストコード
以下コードで、FirstPageというWidgetを複数解像度でGoldenTestできます。
FirstPageはTextとButtonがあるだけのシンプルな画面です。任意に置き換えて大丈夫です。
first_page_golden_test.dart
void main() {
testGoldens('firstPage', (WidgetTester tester) async {
//配列で複数解像度を追加していく
final builder = DeviceBuilder()
..overrideDevicesForAllScenarios(devices: [
Device.phone,
Device.iphone11,
Device.tabletPortrait,
Device.tabletLandscape,
])
//どのWidgetでテストするか指定する
..addScenario(
widget: FirstPage(),
name: 'default page',
);
//複数解像度でスクリーンショットをビルドする
await tester.pumpDeviceBuilder(builder);
//マスターのスクリーンショットと現在のスクリーンショットを比較テストを実行する
await screenMatchesGolden(tester, 'firstPage');
});
}
ここまで書けたら以下コマンドを叩いてGolden（マスターのスクリーンショット）を作成します。
flutter test --update-goldens
無事に成功すればgoldenフォルダが生成されて、その配下にスクリーンショットが出来上がります。
あとは、以下コマンドを叩けばgoldenフォルダのマスタースクリーンショットと現在のスクリーンショットを比較してばちゃんとWidgetTestしてくれます。
flutter test
終わりに
レスポンシブがちゃんと出来ているか実機やシミュレータを使って確認するのって地味にだるいので、テストに使わないとしてもけっこう便利だなと思いました。
Discussion