[Flutter] 個人開発のアプリでGolden Testsを使ってみた

Posted at 2023-09-24

ある勉強会向けにFlutterでタイマーアプリを作成しました

lttimer

このアプリのウィジェットテストに、前々から試してみたかったGolden Testsを導入したので、その共有になります。

Golden Testsとは

Golden Testsは、一般的にVRT(Visual Regression Test)と呼ばれるものです。ウィジェットテスト中にアプリのスクショを取って、変更前のスクショと比較することで、意図しない変更がないかを検知できます。

Golden Tests 自体はFlutterのフレームワークの一部として提供されている機能ですが、より簡単かつ効率的にテストを実行する為のgolden_toolkitというパッケージがあり、こちらが使われることが多いと思います¹。自分のアプリでも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');
  });