fix: platform test are not displaying text.

[hawkbee1]

On my locals, when running the example test on fresh install (flutter create or very_good create), the linux and macos goldens don't display text. The CI font is not used because the result is different if you look at the icon and the spaces.

the result should be:

I tried different PlatformGoldensConfig with no success. Adding Roboto fonts from alchemist package into the project is solving the issue.

flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.10.4, on Ubuntu 21.10 5.13.0-37-generic, locale en_US.UTF-8) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2020.3) [✓] VS Code [✓] Connected device (2 available) [✓] HTTP Host Availability

[mrgnhnt96]

Is there an ETA for a fix for this?

Adding Roboto fonts from alchemist package into the project is solving the issue.

Also, how can this be done in the meantime?

[Giuspepe]

@mrgnhnt96 You can use the loadAppFonts function from golden_toolkit until alchemist supports this as well. Then text should be rendered in the platform goldens as well.

import 'package:alchemist/alchemist.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart' show loadAppFonts;

void main() {
  setUpAll(() async {
    // this is the relevant line of code
    await loadAppFonts();
  });

  group('ListTile Golden Tests', () {
    goldenTest(
      'renders correctly',
      fileName: 'alchemist_sample',
      constraints: const BoxConstraints(maxWidth: 600),
      builder: () => GoldenTestGroup(
        columnWidthBuilder: (_) => const FlexColumnWidth(),
        children: [
          GoldenTestScenario(
            name: 'with title',
            child: const ListTile(
              title: Text('ListTile.title'),
            ),
          ),
          GoldenTestScenario(
            name: 'with title and subtitle',
            child: const ListTile(
              title: Text('ListTile.title'),
              subtitle: Text('ListTile.subtitle'),
            ),
          ),
          GoldenTestScenario(
            name: 'with trailing icon',
            child: const ListTile(
              title: Text('ListTile.title'),
              trailing: Icon(Icons.chevron_right_rounded),
            ),
          ),
        ],
      ),
    );
  });
}

[mrgnhnt96]

You can use the loadAppFonts function from golden_toolkit until alchemist supports this as well. Then text should be rendered in the platform goldens as well.

Thank you! This made it work for me. 👍 Looking forward to removing it when the works out of the box 😎

[jeroen-meijer]

This is fixed by #55 I believe.

Closing this. If it still occurs, feel free to ask to reopen, or open another ticket. Thanks!

[TesteurManiak]

Well it seems like the problem is still occuring, I had to write a small utility function to load the Roboto font:

/// This method is used to load the default Roboto font family from the
/// alchemist package.
Future<void> loadDefaultTestFont() async {
  TestWidgetsFlutterBinding.ensureInitialized();

  const robotoPath = 'assets/fonts/Roboto';
  await _loadFamily(
    package: 'alchemist',
    name: 'Roboto',
    assets: [
      '$robotoPath/Roboto-Black.ttf',
      '$robotoPath/Roboto-Bold.ttf',
      '$robotoPath/Roboto-Light.ttf',
      '$robotoPath/Roboto-Medium.ttf',
      '$robotoPath/Roboto-Regular.ttf',
      '$robotoPath/Roboto-Thin.ttf',
    ],
  );
}

Future<void> _loadFamily({
  required String package,
  required String name,
  required List<String> assets,
}) async {
  final prefix = 'packages/$package/';
  final fontLoader = FontLoader(name);

  for (final asset in assets) {
    final bytes = rootBundle.load('$prefix$asset');
    fontLoader.addFont(bytes);
  }
  await fontLoader.load();
}

Then you have to setup a call loadDefaultTestFont() before your test:

void main() {
  setUpAll(() async {
    await loadDefaultTestFont();
  });

  goldenTest('test', fileName: 'test', builder: () {});
}

[renefloor]

@jeroen-meijer You've solved this by stripping away the package name of the font. However, this assume the package is provided by the flutter project where the snapshot is being made. However, in our setup we have 2 different theme packages that provide their font. The main package runs snapshot tests using both theme packages, but the fonts cannot be found because the package name is removed from it.

[jeroen-meijer]

@TesteurManiak @renefloor Thanks for the info, both of you :)

Pinging @Kirpal, you had experience with font asset loading IIRC, and might have more context on this than I do. If not, feel free to pass it back to me and I'll have a look.

I'll reopen this issue.

@renefloor, does a workaround like @TesteurManiak's work in the meantime? Perhaps you could add the setup in your Flutter test setup file.