A better font for golden tests.

This project is a Flutter Bounty Hunters proof-of-concept. Want font adjustments? Fund a milestone today!

Golden Bricks Font #

Like the traditional Ahem font, the Golden Bricks font renders every character as a rectangle to avoid test failures due to anti-aliasing. Unlike the traditional Ahem font, the Golden Bricks font sizes each character rectangle similar to the standard English character, and also adds space between characters. As a result, text in your golden tests will be a similar size to regular text, and your test can render text selections that you can see across multiple characters.

How to use the Golden Bricks font in an app #

Use the Golden Bricks font by setting the fontFamily of a TextStyle:

Text(
  "Some text",
  style: const TextStyle(
    // The "goldenBricks" variable is a constant that's 
    // exported from the golden_bricks package.
    fontFamily: goldenBricks,
  ),
);

How to use the Golden Bricks font in golden tests #

To use a font in Flutter golden tests, you must explicitly load that font before your tests run. The easiest way to load fonts for golden tests is to use the golden_toolkit package. After adding the golden_toolkit package to your test dependencies, create a flutter_test_config.dart file in your /test directory. Include the following implementation:

import 'dart:async';

import 'package:golden_toolkit/golden_toolkit.dart';

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

Once the font is loaded, use the font in your tests, as desired. The easiest way to use the Golden Bricks font in a test is to configure the default theme font family to use the Golden Bricks font.

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