FlutterでGoldenTestを試してみた

GoldenTestとは

WidgetTestの手法の一つになります。

いわゆるFlutterのWidget TestとGolden Test比較すると、

Widget Test　-> WidgetTreeを確認
Golden Test -> 画像を確認

となります。

従って、Golden Testの特徴としてはこんな感じになります。

• ユーザーが使用する画面そのものをテストできる
• 速い（らしい）
• 画面サイズが変わっても対応できる

なんといってもユーザーが使用する画面そのものをテストできるのはメリットがあると思います。

例えば、WidgetTree上ではTextがきちんと表示されているけど、実際は文字が隠れちゃっているなんてことが有りうるからです。（画像の字が小さくてすみません・・・・）

文字が隠れている	文字が全部表示

メリットを分かってもらえたところで、簡単なGoldenTestをやっていきます。

GoldenTestの手順

今回はカウンターアプリでWidgetのカラーが違う場合をテストします。
ライブラリーはgolden_toolkitを使います。
https://pub.dev/packages/golden_toolkit

1.　dev_dependenciesにgolden_toolkitを追加
2.　testフォルダにgolden_test.dartを作成
3.　golden_test.dartを編集
4.　Golden作成（マスターのスクリーンショット作成）
5.　実際にテストしてみる（OK編）
6.　実際にテストしてみる（NG編）

今回のソースコードはGithubにおいてあるので詳細気になる方は見てください。
https://github.com/MatsumaruTsuyoshi/flutter_golden_test_demo

dev_dependenciesにgolden_toolkitを追加

pubspec.ymalにgolden_toolkitを追加してpub getしましょう。

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter
  golden_toolkit: ^0.11.0

testフォルダにgolden_test.dartを作成

ファイル名はgolden_test.dartでなくても良いです。

golden_test.dartを編集

中身を編集していきます。

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');
  });
}

デバイスの画面サイズを変えることでレスポンシブなテストが可能になります。

Golden作成（マスターのスクリーンショット作成）

Golden作成とはマスターのスクリーンショット作成のことを示しています。Golden = マスターのスクリーンショットらしいです。

ターミナルで以下コマンドを叩いてください。

flutter test --update-goldens

成功すれば、testフォルダにgoldensファイルが作成され、myApp.pngができているはずです。

ビルド画面	Golden(myApp.png)

フォントを読み込めていないので文字化けしていますが、今回はこのまま進めます。

実際にテストしてみる（OK編）

さきほど、Goldenを作成したまま変更せずにテストを実行してみます。当然テストはパスできるはずです。

以下コマンドでテストします。

flutter test

結果は

All tests passed! 

のはず。

実際にテストしてみる（NG編）

Goldenは変えずに、main.dartのプライマリーカラーを変えてみます。

以下コマンドでテストします。

flutter test

結果は

Some tests failed. 

のはず。

テストに失敗すると、testフォルダにfailuresフォルダが作成され、その配下に何が違っていたかのスクショができあがっているはずです。
それを見ると、差分をちゃんと判定してくれています。

myApp_masterImage.png	myApp_testImage.png	myApp_maskedDiff.png	myApp_isolatedDiff.png

終わりに

今回はお試しに簡単なテストをしてみましたが、ライブラリを使えばかなりお手軽でした。