Flutterで見る、見えない世界: Golden Test入門

Golden Testとは何か?

Golden Testは、UIが期待通りにレンダリングされていることを確認するためのテスト方法です。
Golden fileと呼ばれる正しいUIの画像ファイルと、テスト結果を比較し期待通りにUIがレンダリングされているかを確認します。
FlutterのGolden Testは描画結果を比較します。これはバイナリレベルで行われるため、画像のピクセルまで検証できます。

なぜGolden Testは必要なのか？

結論、UIの変更はUX（ユーザ体験）に大きく影響を及ぼすからです。
例えばTwitterの投稿ボタンは右下に置かれていますよね？あれは片手（右手）で持っても簡単に押せるように右下に置かれています。ではある日突然、投稿ボタンが左上に行ってしまったらどうなるでしょうか。おそらく「使いにくい」と感じるでしょう。
このようにUIの小さな変更は、ユーザに大きな影響を及ぼす可能性があります。そのため、UIの変更を迅速かつ正確に確認することは重要です。そしてGolden Testはこれを効率的に行うことができるのです。

FlutterでGolden Testを行う方法

まず、golden testのライブラリをインストールします。

flutter pub add golden_toolkit  

次にフォントのインストールを行う設定を行います。testディレクトリ直下にflutter_test_config.dartを作成し、以下のように記述してください。
※flutter testではAhemというフォントを使っていますが、このフォントはGolden Testと相性が良くないためフォントの設定を行います。詳しくはこちら

flutter_test_config.dart

import 'dart:async';

import 'package:golden_toolkit/golden_toolkit.dart';

Future<void> testExecutable(FutureOr<void> Function() testMain) async {
  await loadAppFonts();
  return testMain();
}

これで準備はOKです。Golden Testを実際に書いて行きます。

widget_test.dart

import 'package:golden_test/main.dart';
import 'package:golden_toolkit/golden_toolkit.dart';

void main() {
  testGoldens('ゴールデンテスト', (tester) async {
    final builder = DeviceBuilder()
      ..overrideDevicesForAllScenarios(devices: [Device.phone, Device.iphone11])
      ..addScenario(widget: MyApp(), name: 'my_app');

    await tester.pumpDeviceBuilder(builder);

    await screenMatchesGolden(tester, 'my_app');
  });
}

DeviceBuilderはgolden_toolkitのクラスで、Golden Testを行うサイズをモバイルデバイスのサイズに限定することができます（今回はphoneとiphone11）
addaddScenarioでテストしたいWidgetとそのシナリオの名前をつけます。
そしてscreenMatchesGoldenで期待される画像との比較を行います。今現在はGolden fileが存在しないため、まずはそちらの作成を行います。

flutter test --update-goldens

これでGolden fileが出力されました。

本当にピクセル単位で比較できるのか、もとのアプリのプラスボタンを1ピクセル左に動かしてみました。みなさんは違いはわかりますでしょうか？

人間の目では見てない変化もGolden Testなら見ることができます。
flutter testを実行するとtestディレクトリ直下にfailuresディレクトリができ、そこに差分の画像が出力されます。

まとめ

本記事では、FlutterのGolden Testについて解説しました。
1ピクセルの変化も見逃さないため、上手く活用すればUIの品質保証に大きく貢献できるでしょう。
Flutterにはこの他にもWidget TestやIntegration Testなどもあるので上手く組み合わせて効率的に品質保証してきたいですね！

コラム：なぜ"Golden"なのか？

Goldenは昔から「標準的な」や「理想的な」という意味で使われてきたらしいです。（金は不変なので標準的だからですかね？）
そのため、レンダリングが正しく、期待通りに行われているかを確認するため、"Golden"という言葉が使われているらしいです。