Merge pull request #20 from eBay/improve-font-loading

Improve font loading

Author: coreysprague

packages/golden_toolkit/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.2.0-dev
+
+Improved the mechanism for loading font assets. Consumers no longer need to supply a directory to read the .ttf files from.
+
+They can now simply call: `await loadAppFonts()` and the package will automatically load any font assets from their pubspec.yaml or
+from any packages they depend on.
+
 ## 0.1.0-dev
 
 Initial release. Includes utility methods for easily pumping complex widgets, loading real fonts, and for writing more advanced Golden-based tests.

packages/golden_toolkit/README.md

@@ -149,14 +149,37 @@ By default, flutter test only uses a single "test" font called Ahem.
 This font is designed to show black spaces for every character and icon. This obviously makes goldens much less valuable.
 
 To make the goldens more useful, we have a utility to dynamically inject additional fonts into the flutter test engine so that we can get more human viewable output.
-In order to inject your fonts, just call font loader function on top of your test file:
+In order to inject your fonts, we have a helper method:
 
 ```dart
-  await loadAppFonts(from: 'yourFontDirectoryPath');
+  await loadAppFonts();
 ```
 
-Function will load all the fonts from that directory using FontLoader so they are properly rendered during the test.
-Material icons like `Icons.battery` will be rendered in goldens ONLY if your pre-load MaterialIcons-Regular.ttf font that contains all the icons.
+This function will automatically load the `Roboto` font, and any fonts included from packages you depend on so that they are properly rendered during the test.
+
+Material icons like `Icons.battery` will be rendered in goldens ONLY if your pubspec.yaml includes:
+
+```yaml
+flutter:
+  uses-material-design: true
+```
+
+Note, if you need Cupertino fonts, you will need to find a copy of .SF UI Display Text, and .SF UI Text to include in your package's yaml. These are not included in this package by default for licensing reasons.
+
+The easiest, and recommended way to use this, is to create a `flutter_test_config.dart` file in the root of your package's test directory with the following content:
+
+```dart
+import 'dart:async';
+
+import 'package:golden_toolkit/golden_toolkit.dart';
+
+Future<void> main(FutureOr<void> testMain()) async {
+  await loadAppFonts();
+  return testMain();
+}
+```
+
+For more information on `flutter_test_config.dart`, see the [Flutter Docs](https://api.flutter.dev/flutter/flutter_test/flutter_test-library.html)
 
 ### testGoldens()
 
@@ -221,11 +244,11 @@ This software contains some 3rd party software licensed under open source licens
    Available at URL: [https://github.com/google/fonts/tree/master/apache/roboto](https://github.com/google/fonts/tree/master/apache/roboto)
    License: Available under Apache license at [https://github.com/google/fonts/blob/master/apache/roboto/LICENSE.txt](https://github.com/google/fonts/blob/master/apache/roboto/LICENSE.txt)
 
-2. Material Icon File:
-   URL: [https://github.com/google/material-design-icons](https://github.com/google/material-design-icons)
-   License: Available under Apache license at [https://github.com/google/material-design-icons/blob/master/LICENSE](https://github.com/google/material-design-icons/blob/master/LICENSE)
-
-3. Icons at:
+2. Icons at:
    Author: Adnen Kadri
    URL: [https://www.iconfinder.com/iconsets/weather-281](https://www.iconfinder.com/iconsets/weather-281)
    License: Free for commercial use
+
+3. OpenSans Font File:
+   Available at URL: [https://github.com/googlefonts/opensans](https://github.com/googlefonts/opensans)
+   License: Available under Apache license at [https://github.com/googlefonts/opensans/blob/master/LICENSE.txt](https://github.com/googlefonts/opensans/blob/master/LICENSE.txt)

packages/golden_toolkit/fonts/MaterialIcons-Regular.ttf

@@ -5,53 +5,54 @@
 /// license that can be found in the LICENSE file or at
 /// https://opensource.org/licenses/BSD-3-Clause
 /// ***************************************************
-import 'dart:io';
-import 'dart:typed_data';
+
+import 'dart:convert';
 import 'package:flutter/services.dart';
-import 'package:meta/meta.dart';
+import 'package:flutter_test/flutter_test.dart';
 
 ///By default, flutter test only uses a single "test" font called Ahem.
 ///
 ///This font is designed to show black spaces for every character and icon. This obviously makes goldens much less valuable.
 ///
-///To make the goldens more useful, we have a utility to dynamically inject additional fonts into the flutter test engine so that we can get more human viewable output.
-/// Path to your folder with fonts [from] in required
-Future<void> loadAppFonts({@required String from}) async {
-  if (_hasLoaded) {
-    print('skipping fonts');
-    return;
-  }
+///To make the goldens more useful, we will automatically load any fonts included in your pubspec.yaml as well as from
+///packages you depend on.
+Future<void> loadAppFonts() async {
+  TestWidgetsFlutterBinding.ensureInitialized();
+  final fontManifest = await rootBundle.loadStructuredData<List<dynamic>>(
+    'FontManifest.json',
+    (string) async => json.decode(string),
+  );
 
-  final fontsDir = Directory.fromUri(Uri(path: _getPath(from)));
-  final Map<String, List<ByteData>> fontFamilies = {};
-  await for (final entity in fontsDir.list()) {
-    if (entity.path.endsWith('.ttf')) {
-      final fontName =
-          Uri.parse(entity.path).pathSegments.last.split('.ttf').first;
-      final family = fontName.split('-').first;
-      final Uint8List bytes = await File.fromUri(entity.uri).readAsBytes();
-      final byteData = ByteData.view(bytes.buffer);
-      fontFamilies[family] =
-          [byteData].followedBy(fontFamilies[family] ?? []).toList();
-    }
-  }
-  for (final family in fontFamilies.keys) {
-    final loader = FontLoader(family);
-    for (final font in fontFamilies[family]) {
-      loader.addFont(Future.value(font));
+  for (final Map<String, dynamic> font in fontManifest) {
+    final fontLoader = FontLoader(_processedFontFamily(font['family']));
+    for (final Map<String, dynamic> fontType in font['fonts']) {
+      fontLoader.addFont(rootBundle.load(fontType['asset']));
     }
-    await loader.load();
+    await fontLoader.load();
   }
-
-  _hasLoaded = true;
 }
 
-bool _hasLoaded = false;
-
-String _getPath(String directory) {
-  if (Directory.current.path.endsWith('test')) {
-    return '../$directory';
-  } else {
-    return directory;
+String _processedFontFamily(String fontFamily) {
+  /// There is no way to easily load the Roboto or Cupertino fonts.
+  /// To make them available in tests, a package needs to include their own copies of them.
+  ///
+  /// GoldenToolkit supplies Roboto because it is free to use.
+  ///
+  /// However, when a downstream package includes a font, the font family will be prefixed with
+  /// /packages/<package name>/<fontFamily> in order to disambiguate when multiple packages include
+  /// fonts with the same name.
+  ///
+  /// Ultimately, the font loader will load whatever we tell it, so if we see a font that looks like
+  /// a Material or Cupertino font family, let's treat it as the main font family
+  if (fontFamily.startsWith('packages/') &&
+      _overridableFonts.any(fontFamily.contains)) {
+    return fontFamily.split('/').last;
   }
+  return fontFamily;
 }
+
+const List<String> _overridableFonts = [
+  'Roboto',
+  '.SF UI Display',
+  '.SF UI Text',
+];

packages/golden_toolkit/fonts/Roboto-Regular.ttf renamed to packages/golden_toolkit/lib/fonts/Roboto-Regular.ttf

@@ -116,6 +116,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.5"
+  sample_dependency:
+    dependency: "direct dev"
+    description:
+      path: "test/sample_dependency"
+      relative: true
+    source: path
+    version: "0.0.1"
   sky_engine:
     dependency: transitive
     description: flutter

packages/golden_toolkit/lib/src/font_loader.dart

@@ -1,6 +1,6 @@
 name: golden_toolkit
 description: Common patterns for screenshot-based widget testing using Goldens.
-version: 0.1.0-dev
+version: 0.2.0-dev
 homepage: https://github.com/eBay/flutter_glove_box/
 repository: https://github.com/eBay/flutter_glove_box/tree/master/packages/golden_toolkit
 issue_tracker: https://github.com/eBay/flutter_glove_box/issues
@@ -17,8 +17,15 @@ dependencies:
 
 dev_dependencies:
   pedantic: ^1.8.0
+  sample_dependency:
+    path: test/sample_dependency
 
 # needed so the images can be loaded in the example tests
 flutter:
+  uses-material-design: true
   assets:
     - images/
+  fonts:
+    - family: Roboto
+      fonts:
+        - asset: packages/golden_toolkit/fonts/Roboto-Regular.ttf

packages/golden_toolkit/pubspec.lock

@@ -0,0 +1,17 @@
+/// ***************************************************
+/// Copyright 2019-2020 eBay Inc.
+///
+/// Use of this source code is governed by a BSD-style
+/// license that can be found in the LICENSE file or at
+/// https://opensource.org/licenses/BSD-3-Clause
+/// ***************************************************
+///
+
+import 'dart:async';
+
+import 'package:golden_toolkit/golden_toolkit.dart';
+
+Future<void> main(FutureOr<void> testMain()) async {
+  await loadAppFonts();
+  return testMain();
+}

packages/golden_toolkit/pubspec.yaml

@@ -0,0 +1,36 @@
+/// ***************************************************
+/// Copyright 2019-2020 eBay Inc.
+///
+/// Use of this source code is governed by a BSD-style
+/// license that can be found in the LICENSE file or at
+/// https://opensource.org/licenses/BSD-3-Clause
+/// ***************************************************
+///
+
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:golden_toolkit/golden_toolkit.dart';
+
+Future<void> main() async {
+  group('Font loading', () {
+    testGoldens('Roboto fonts should work', (tester) async {
+      final golden = GoldenBuilder.column()
+        ..addScenario('Material Fonts should work',
+            const Text('This is material text in "Roboto"'))
+        ..addScenario(
+            'Material Icons should work', const Icon(Icons.phone_in_talk))
+        ..addScenario(
+            'Fonts from packages should work',
+            const Text('This is a custom font',
+                style: TextStyle(
+                    fontFamily: 'OpenSans', package: 'sample_dependency')))
+        ..addScenario('Unknown fonts render in Ahem',
+            const Text('unknown font', style: TextStyle(fontFamily: 'foo')));
+      await tester.pumpWidgetBuilder(golden.build());
+      await screenMatchesGolden(tester, 'material_fonts',
+          skip: !Platform.isMacOS);
+    });
+  });
+}

packages/golden_toolkit/test/flutter_test_config.dart

@@ -8,18 +8,13 @@
 
 import 'dart:io';
 import 'package:golden_toolkit/golden_toolkit.dart';
-import 'package:golden_toolkit/src/font_loader.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 import 'sample_weather_widget.dart';
 
 Future<void> main() async {
-  /// Note: In order to see fonts and icons on goldens,
-  /// you need to preload all the fonts with this function in all test files
-  await loadAppFonts(from: 'fonts');
-
   group('Basic golden test for empty container', () {
     final squareContainer = Container(
       width: 100,