No way to ensure google_fonts are loaded during golden tests.

[marcoNonvanilla]

Describe the bug
During golden tests, I noticed that any font coming from google_fonts is missing in the first golden. Creating the same golden again (with pumping the widget again) then works.

To Reproduce
Steps to reproduce the behavior:
Take the default main app and add a font from the google_fonts package:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(fontFamily: 'Teko'),
            ),
            Text(
              '$_counter',
              style: GoogleFonts.lato(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Running the following tests:

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:example/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(home: MyHomePage(title: 'Test')));

    await expectLater(
        find.byType(MyHomePage), matchesGoldenFile('goldens/test1.png'));
  });

  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(home: MyHomePage(title: 'Test')));

    await expectLater(
        find.byType(MyHomePage), matchesGoldenFile('goldens/test2.png'));
  });
}

Expected behavior
Both Goldens should look identical. Only the counter is of interest here. The other text that does not load properly is not relevant here.

Include the contents of your google_fonts directory
Pubspec.yaml:

flutter:
  uses-material-design: true
  assets:
    - images/
    - google_fonts/

Screenshots
goldens/test1.png

goldens/test2.png

Desktop (please complete the following information if applicable):

• OS: macOS BigSur 11.2.3
• Flutter 2.2.2 • channel stable • https://github.com/flutter/flutter.git
• Framework • revision d79295af24 (3 weeks ago) • 2021-06-11 08:56:01 -0700
• Engine • revision 91c9fc8fe0
• Tools • Dart 2.13.3

Additional context
This could probably be solved by the requests made in #151 or #150.

[marcoAtEnvidual]

Same issue here :S

[guidezpl]

curious if this still happens if you do a await tester.pumpAndSettle() after pumping the first widget

[marcoNonvanilla]

Yes. Still happens after calling pumpAndSettle(). This is because font loading does not schedule any new frames.

https://api.flutter.dev/flutter/flutter_test/WidgetTester/pumpAndSettle.html

[guidezpl]

This is a reasonable request. We have an internal implementation that we could leverage font_directory_loader.dart

[fredgrott]

why not borrow how eBay does it in their golden toolkit package?

See
https://github.com/eBay/flutter_glove_box/blob/master/packages/golden_toolkit/lib/src/font_loader.dart

their asset bundle loading
https://github.com/eBay/flutter_glove_box/blob/master/packages/golden_toolkit/lib/src/test_asset_bundle.dart

and their config class that implements font loading in the flutter-test_config file
https://github.com/eBay/flutter_glove_box/blob/master/packages/golden_toolkit/lib/src/configuration.dart