ある勉強会向けにFlutterでタイマーアプリを作成しました
![unnamed.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F597113%2F517b5b24-c7c6-065b-d47b-addb30fb52ce.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2610ecc0962dfbaaa4644e9dcf35ba87)
このアプリのウィジェットテストに、前々から試してみたかったGolden Testsを導入したので、その共有になります。
Golden Testsとは
Golden Testsは、一般的にVRT(Visual Regression Test)と呼ばれるものです。ウィジェットテスト中にアプリのスクショを取って、変更前のスクショと比較することで、意図しない変更がないかを検知できます。
Golden Tests 自体はFlutterのフレームワークの一部として提供されている機能 ですが、より簡単かつ効率的にテストを実行する為のgolden_toolkitというパッケージがあり、こちらが使われることが多いと思います1。自分のアプリでもgolden_toolkitを使ってGolden Testsを導入しました。
ちなみにGolden
とは、とったスクショの画像ファイルを指すようです(なぜGolden...? )
実際のアプリでの使用例
アプリ内の実際のGoldenテストのソースコードがこちらです:
testGoldens('Lightning talkセッションの30秒後', (WidgetTester tester) async {
await loadAppFonts();
const size6 = Size(375, 667);
final settings = Settings(
sessionMode: TimerType.lightning,
sessionTime: const Duration(minutes: 2),
longSessionTime: const Duration(minutes: 40),
isContinuous: true,
intervalTime: const Duration(minutes: 1),
bell1: const Duration(seconds: 10),
bell2: const Duration(seconds: 30),
bell3: const Duration(seconds: 150), // セッション時間を超えているので表示されない
longModeBell1: Duration.zero,
longModeBell2: Duration.zero,
longModeBell3: Duration.zero,
isDarkMode: true,
showCongratsAnimation: true,
congratsDanmakuComments: '');
final controller = TimerController();
final container = await createProviderContainer(controller, settings);
await tester.pumpWidgetBuilder(
TestWidget(![golden_lightning_in_30sec.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597113/63aada56-4794-3db5-f46e-dde14baa7a82.png)
container: container,
),
surfaceSize: size6);
controller.elapse(const Duration(seconds: 30));
await screenMatchesGolden(tester, 'golden_lightning_in_30sec');
});
このテストでは、主に以下の三点を確認しています:
- 30秒経過後のタイマーの秒数の表示
- 30秒経過後のタイマーの円の描画
- タイマーに設定したベルの位置
このテストを用意してGolden生成コマンドを実行すると、以下のようなスクショが撮られます。
画像を目視で確認し、問題なければこのファイルをGoldenとして採用します。
仮にこの後の実装で、タイマーの秒数表示にバグが混入したとします。すると、ウィジェットテスト実行時にテストが失敗し、以下の4種類の画像ファイルが生成されます。
このように、UIのどの部分でバグが発生したのか分かるようになっています。
ハマった点
Github Actionsを使ってテストを回しているのですが、ローカルでは通ってるGolden Testsが、CIだと落ちてしまう現象に遭遇しました。調べたところ、Goldenを生成したローカル環境のOSと、CIのOSを合わせておかないと、テキスト描画などで差分が出ててしまうようです...
こちらは、CIとローカルのOSを合わせることで解決しています。
感想
今回、初めてFlutterのGoldenテストを触ってみましたが、想像していたより使い所は多いと感じました。
Flutterでは色々な種類のテストが揃っているので、使い所を覚えていきたい!