CODEWITHSUNDEEP
fluttermobileflutter-testgoogle-fonts
Prabhath Darshana
Prabhath Darshana

Reputation: 173

Write flutter widget tests that uses GoogleFonts

I need to write a flutter widget test to test a widget with GoogleFonts plugin in use. However, it gives network failer which is correct as the test suit doesn't have access to the internet. The problem is GoogleFonts.majorMonoDisplayTextTheme is a static method which makes it impossible to mock the GoogleFont class when using in the widget test.

Error: google_fonts was unable to load font MajorMonoDisplay-Regular because the following exception occurred: 
Exception: Failed to load font with URL: https://fonts.gstatic.com/s/a/9901077f5681d4ec7e01e0ebe4bd61ba47669c64a7aedea472cd94fe1175751b.ttf

Widget usage:

 Container(
      padding: EdgeInsets.only(top: 10),
      child: Text(
        _now,
        style: GoogleFonts.majorMonoDisplayTextTheme(Theme.of(context).textTheme).headline3,
      ),
    ),

Widget test method:

testWidgets(
  'Shoudl display _now text',
  (WidgetTester tester) async {
  await tester.pumpWidget(_TestWidgetWithGoogleFont);
  await tester.pumpAndSettle();
  expect(find.byType(Text), findsOneWidget);
});

Upvotes: 2

Views: 1370

Answers (3)

Riccardo Gibello
Riccardo Gibello

Reputation: 21

I've just had the same issue.

I've tried to follow the solution given by Ilia Kurtov (Write flutter widget tests that uses GoogleFonts), but this has raised another error: Exception: GoogleFonts.config.allowRuntimeFetching is false but font Lato-Regular was not found in the application assets. Ensure Lato-Regular.ttf exists in a folder that is included in your pubspec's assets.

The only solution I've found is to:

  1. download the required [font_name].ttf file (e.g., Lato-Regular.ttf) from the link provided by the error raised without the line of code suggested (e.g., https://fonts.gstatic.com/s/a/6e6ed20d655bef45270197c043b98acc546b2455874705cd35adda969c35c2c3.ttf);

  2. add it to the assets folder, and add the given path in "pubspec.yaml" (e.g., "assets/Lato-Regular.ttf");

  3. at this point, you can remove setUp(() => GoogleFonts.config.allowRuntimeFetching = false);, because the required fonts will be loaded from the assets;

Upvotes: 2

Ilia Kurtov
Ilia Kurtov

Reputation: 1090

There is another way to silence the error. Especially handy if you don't want to (or can't) add additional files to a project.

Simply add this line of code to a desired test:

setUp(() => GoogleFonts.config.allowRuntimeFetching = false);

This code disallows runtime fetching which is a process that raises the erorr in the first place.

Upvotes: 2

monzim
monzim

Reputation: 636

enter image description hereFirst you have to provide the font in pubspec.yaml file Just follow those step Download the fort extract it. Go to your project file and create a folder name it "assets" and inside assets folder create another folder called "fonts". In this fonts folder paste the font .tiff copy the file name in this case it is"MajorMonoDisplay-Regular.ttf"

Next you have to provide the font information in pubspec.yaml file just copy paste those code.

  fonts:
- family: MajorMonoDisplay
  fonts:
    - asset: assets/fonts/MajorMonoDisplay-Regular.ttf

Next in open terminal run "flutter pub get" and now just provide the fort family in your TextStyle. Example:

child: Column(
              children: [
                Text(
                  'Should display _now text',
                  style: TextStyle(
                    fontSize: 20,
                    fontFamily: 'MajorMonoDisplay',
                  ),
                )
              ],
            ),

If the front is not showing then close the app and rerun it.

Upvotes: 0

Related Questions