🧪
FlutterのGoldenTestで日本語を表示する
今回はgolden_toolkitを用いた際のGolden（マスターのスクリーンショット）に日本語を表示していく方法をまとめました。
| Before | After |
|---|---|
 |
 |
GoldenTestとは
GoldenTestなにそれ？って方や、とりえあず動かしてみたいという方は以前の記事を参考にしてください。
前提条件
golden_toolkitを導入している
今回このライブラリを参考にしています。残念なことにNullSafetyではないので使えない・・・
手順
- pubspec.ymalにassets追加
- assetフォルダを作成してフォント（tff）を追加
- フォントを読み込む関数作成
- テストコード作成
- テスト実行
assetフォルダを作成してフォント（tff）を追加
プロジェクトの直下にassetフォルダを作成して、表示したいフォントファイルを追加します。
今回はNotoSansCJKjp-Regular.ttfを使いました。フォントファイルをググれば色々でてきます。
pubspec.ymalにassets追加
あとでフォントを読み込めるように追記しておきます。
pubspec.yaml
flutter:
assets:
- asset/
フォントを読み込む関数作成
これでフォントを読み込みます。
Future<void> loadJapaneseFont() async {
TestWidgetsFlutterBinding.ensureInitialized();
final binary = rootBundle.load('asset/NotoSansCJKjp-Regular.ttf');
final loader = FontLoader('Roboto')..addFont(binary);
await loader.load();
}
テストコード作成
実際にテストが走る前にフォント読み込みを実行してやれば、ちゃんと日本語表示してくれるようになります。
Future<void> loadJapaneseFont() async {
TestWidgetsFlutterBinding.ensureInitialized();
final binary = rootBundle.load('asset/NotoSansCJKjp-Regular.ttf');
final loader = FontLoader('Roboto')..addFont(binary);
await loader.load();
}
void main() {
testGoldens('firstPage', (WidgetTester tester) async {
//ここでフォント読み込みを実行する
await loadJapaneseFont();
final builder = DeviceBuilder()
..overrideDevicesForAllScenarios(devices: [
Device.iphone11,
])
..addScenario(
widget: FirstPage(),
name: 'default page',
);
await tester.pumpDeviceBuilder(builder);
await screenMatchesGolden(tester, 'firstPage');
});
}
テスト実行
あとはターミナルで以下コマンドを叩いたら日本語が表示されているはず！
flutter test --update-goldens
| Before | After |
|---|---|
|
|
終わりに
振り返ってみるとめっちゃ簡単だけど、すごい時間が掛かったので参考になれば幸いです。
Discussion