What are golden tests?
A Flutter golden test is a test that compares actual painted pixels. First, the test generates a verified “good” image, known as a golden. Future test runs compare the new pixels to the golden pixels. If a difference is detected, the test fails.
The Golden font
Golden tests replace all fonts in your app with a special font called Ahem. The Ahem font renders large squares for every character of text. Rectangles are used for text to avoid curves that might cause irrelevant test failure when comparing pixels.
What's the problem?
The problem is that Ahem squares don’t reflect the reality of text layout. Short text appears very long, often breaking layouts. Space between characters isn’t visible, which prevents testing caret placement and text selection painting.
![](images/flutter-golden-example.png)
A better Golden font
The golden_bricks
package ships a custom font that still uses rectangles like Ahem, but uses rectangles of different sizes to simulate real text layout. Wide characters are wide, narrow characters are narrow, and space between character is still visible.
![](images/golden-bricks-font-catalog.png)
Use Golden bricks
To use the golden_bricks
font in your tests, there are two steps: load fonts for all tests, tell your text style to use the font.
Load real fonts in your tests
To easily load fonts in your tests, we recommend using the golden_toolkit
package. Create/update your Flutter test config file with the following...
import 'dart:async';
import 'package:golden_toolkit/golden_toolkit.dart';
Future<void> testExecutable(FutureOr<void> Function() testMain) async {
await loadAppFonts();
return testMain();
}
Use the font
Use the font in your tests by applying it to TextStyle
s. The easiest way to do this across your app is to configure the theme that you use in your tests.
testWidgets("renders in golden tests", (tester) async {
await tester.pumpWidget(
MaterialApp(
theme: ThemeData(
fontFamily: goldenBricks,
),
home: Scaffold(
// content
),
),
);
// TODO: implement the rest of the test.
});
Built by the
Flutter Bounty Hunters
This package was built by the Flutter Bounty Hunters (FBH). The Flutter Bounty Hunters is a development agency that works exclusively on open source Flutter and Dark packages.
With funding from corporate clients, the goal of the Flutter Bounty Hunters is to solve common problems for The Last Time™. If your team gets value from Flutter Bounty Hunter packages, please consider funding further development.
Other FBH packages
Other packages that the Flutter Bounty Hunters brought to the community...
Super Editor, Super Text, Attributed Text, Static Shock, Follow the Leader, Overlord, Flutter Test Robots, and more.
Contributors
The golden_bricks
package was built by...