typography_test.dart 8.75 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5
import 'package:flutter/foundation.dart';
6 7 8 9 10
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  test('Typography is defined for all target platforms', () {
11
    for (final TargetPlatform platform in TargetPlatform.values) {
12
      final Typography typography = Typography.material2018(platform: platform);
13 14 15 16 17 18
      expect(typography, isNotNull, reason: 'null typography for $platform');
      expect(typography.black, isNotNull, reason: 'null black typography for $platform');
      expect(typography.white, isNotNull, reason: 'null white typography for $platform');
    }
  });

19
  test('Typography on non-Apple platforms defaults to the correct font', () {
20 21 22 23 24 25 26 27 28 29
    expect(Typography.material2018(platform: TargetPlatform.android).black.headline6!.fontFamily, 'Roboto');
    expect(Typography.material2018(platform: TargetPlatform.fuchsia).black.headline6!.fontFamily, 'Roboto');
    expect(Typography.material2018(platform: TargetPlatform.linux).black.headline6!.fontFamily, 'Roboto');
    expect(Typography.material2018(platform: TargetPlatform.linux).black.headline6!.fontFamilyFallback, <String>['Ubuntu', 'Cantarell', 'DejaVu Sans', 'Liberation Sans', 'Arial']);
    expect(Typography.material2018(platform: TargetPlatform.windows).black.headline6!.fontFamily, 'Segoe UI');
    expect(Typography.material2018(platform: TargetPlatform.android).white.headline6!.fontFamily, 'Roboto');
    expect(Typography.material2018(platform: TargetPlatform.fuchsia).white.headline6!.fontFamily, 'Roboto');
    expect(Typography.material2018(platform: TargetPlatform.linux).white.headline6!.fontFamily, 'Roboto');
    expect(Typography.material2018(platform: TargetPlatform.linux).white.headline6!.fontFamilyFallback, <String>['Ubuntu', 'Cantarell', 'DejaVu Sans', 'Liberation Sans', 'Arial']);
    expect(Typography.material2018(platform: TargetPlatform.windows).white.headline6!.fontFamily, 'Segoe UI');
30 31
  });

Dan Field's avatar
Dan Field committed
32
  // Ref: https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/
33
  final Matcher isSanFranciscoDisplayFont = predicate((TextStyle s) {
Dan Field's avatar
Dan Field committed
34 35
    return s.fontFamily == '.SF UI Display';
  }, 'Uses SF Display font');
36

37
  final Matcher isSanFranciscoTextFont = predicate((TextStyle s) {
Dan Field's avatar
Dan Field committed
38 39
    return s.fontFamily == '.SF UI Text';
  }, 'Uses SF Text font');
40

41 42 43 44
  final Matcher isMacOSSanFranciscoMetaFont = predicate((TextStyle s) {
    return s.fontFamily == '.AppleSystemUIFont';
  }, 'Uses macOS system meta-font');

Dan Field's avatar
Dan Field committed
45
  test('Typography on iOS defaults to the correct SF font family based on size', () {
46
    final Typography typography = Typography.material2018(platform: TargetPlatform.iOS);
47
    for (final TextTheme textTheme in <TextTheme>[typography.black, typography.white]) {
48 49 50 51 52 53 54 55 56 57 58 59 60
      expect(textTheme.headline1, isSanFranciscoDisplayFont);
      expect(textTheme.headline2, isSanFranciscoDisplayFont);
      expect(textTheme.headline3, isSanFranciscoDisplayFont);
      expect(textTheme.headline4, isSanFranciscoDisplayFont);
      expect(textTheme.headline5, isSanFranciscoDisplayFont);
      expect(textTheme.headline6, isSanFranciscoDisplayFont);
      expect(textTheme.subtitle1, isSanFranciscoTextFont);
      expect(textTheme.bodyText1, isSanFranciscoTextFont);
      expect(textTheme.bodyText2, isSanFranciscoTextFont);
      expect(textTheme.caption, isSanFranciscoTextFont);
      expect(textTheme.button, isSanFranciscoTextFont);
      expect(textTheme.subtitle2, isSanFranciscoTextFont);
      expect(textTheme.overline, isSanFranciscoTextFont);
61 62
    }
  });
63

64
  test('Typography on macOS defaults to the system UI meta-font', () {
Dan Field's avatar
Dan Field committed
65 66
    final Typography typography = Typography.material2018(platform: TargetPlatform.macOS);
    for (final TextTheme textTheme in <TextTheme>[typography.black, typography.white]) {
67 68 69 70 71 72 73 74 75 76 77 78 79
      expect(textTheme.headline1, isMacOSSanFranciscoMetaFont);
      expect(textTheme.headline2, isMacOSSanFranciscoMetaFont);
      expect(textTheme.headline3, isMacOSSanFranciscoMetaFont);
      expect(textTheme.headline4, isMacOSSanFranciscoMetaFont);
      expect(textTheme.headline5, isMacOSSanFranciscoMetaFont);
      expect(textTheme.headline6, isMacOSSanFranciscoMetaFont);
      expect(textTheme.subtitle1, isMacOSSanFranciscoMetaFont);
      expect(textTheme.bodyText1, isMacOSSanFranciscoMetaFont);
      expect(textTheme.bodyText2, isMacOSSanFranciscoMetaFont);
      expect(textTheme.caption, isMacOSSanFranciscoMetaFont);
      expect(textTheme.button, isMacOSSanFranciscoMetaFont);
      expect(textTheme.subtitle2, isMacOSSanFranciscoMetaFont);
      expect(textTheme.overline, isMacOSSanFranciscoMetaFont);
Dan Field's avatar
Dan Field committed
80 81 82
    }
  });

83 84
  testWidgets('Typography implements debugFillProperties', (WidgetTester tester) async {
    final DiagnosticPropertiesBuilder builder = DiagnosticPropertiesBuilder();
85
    Typography.material2014(
86 87 88 89 90 91 92 93 94 95
      platform: TargetPlatform.android,
      black: Typography.blackCupertino,
      white: Typography.whiteCupertino,
      englishLike: Typography.englishLike2018,
      dense: Typography.dense2018,
      tall: Typography.tall2018,
    ).debugFillProperties(builder);

    final List<String> nonDefaultPropertyNames = builder.properties
      .where((DiagnosticsNode node) => !node.isFiltered(DiagnosticLevel.info))
96
      .map((DiagnosticsNode node) => node.name!).toList();
97 98 99

    expect(nonDefaultPropertyNames, <String>['black', 'white', 'englishLike', 'dense', 'tall']);
  });
100 101 102 103 104 105 106 107 108 109 110

  test('englishLike2018 TextTheme matches Material Design spec', () {
    // Check the default material text theme against the style values
    // shown https://material.io/design/typography/#type-scale.

    final TextTheme theme = Typography.englishLike2018.merge(Typography.blackMountainView);
    const FontWeight light = FontWeight.w300;
    const FontWeight regular = FontWeight.w400;
    const FontWeight medium = FontWeight.w500;

    // H1 Roboto light 96 -1.5
111 112 113 114
    expect(theme.headline1!.fontFamily, 'Roboto');
    expect(theme.headline1!.fontWeight, light);
    expect(theme.headline1!.fontSize, 96);
    expect(theme.headline1!.letterSpacing, -1.5);
115 116

    // H2 Roboto light 60 -0.5
117 118 119 120
    expect(theme.headline2!.fontFamily, 'Roboto');
    expect(theme.headline2!.fontWeight, light);
    expect(theme.headline2!.fontSize, 60);
    expect(theme.headline2!.letterSpacing, -0.5);
121 122

    // H3 Roboto regular 48 0
123 124 125 126
    expect(theme.headline3!.fontFamily, 'Roboto');
    expect(theme.headline3!.fontWeight, regular);
    expect(theme.headline3!.fontSize, 48);
    expect(theme.headline3!.letterSpacing, 0);
127 128

    // H4 Roboto regular 34 0.25
129 130 131 132
    expect(theme.headline4!.fontFamily, 'Roboto');
    expect(theme.headline4!.fontWeight, regular);
    expect(theme.headline4!.fontSize, 34);
    expect(theme.headline4!.letterSpacing, 0.25);
133 134

    // H5 Roboto regular 24 0
135 136 137 138
    expect(theme.headline5!.fontFamily, 'Roboto');
    expect(theme.headline5!.fontWeight, regular);
    expect(theme.headline5!.fontSize, 24);
    expect(theme.headline5!.letterSpacing, 0);
139 140

    // H6 Roboto medium 20 0.15
141 142 143 144
    expect(theme.headline6!.fontFamily, 'Roboto');
    expect(theme.headline6!.fontWeight, medium);
    expect(theme.headline6!.fontSize, 20);
    expect(theme.headline6!.letterSpacing, 0.15);
145 146

    // Subtitle1 Roboto regular 16 0.15
147 148 149 150
    expect(theme.subtitle1!.fontFamily, 'Roboto');
    expect(theme.subtitle1!.fontWeight, regular);
    expect(theme.subtitle1!.fontSize, 16);
    expect(theme.subtitle1!.letterSpacing, 0.15);
151 152

    // Subtitle2 Roboto medium 14 0.1
153 154 155 156
    expect(theme.subtitle2!.fontFamily, 'Roboto');
    expect(theme.subtitle2!.fontWeight, medium);
    expect(theme.subtitle2!.fontSize, 14);
    expect(theme.subtitle2!.letterSpacing, 0.1);
157 158

    // Body1 Roboto regular 16 0.5
159 160 161 162
    expect(theme.bodyText1!.fontFamily, 'Roboto');
    expect(theme.bodyText1!.fontWeight, regular);
    expect(theme.bodyText1!.fontSize, 16);
    expect(theme.bodyText1!.letterSpacing, 0.5);
163 164

    // Body2 Roboto regular 14 0.25
165 166 167 168
    expect(theme.bodyText2!.fontFamily, 'Roboto');
    expect(theme.bodyText2!.fontWeight, regular);
    expect(theme.bodyText2!.fontSize, 14);
    expect(theme.bodyText2!.letterSpacing, 0.25);
169 170

    // BUTTON Roboto medium 14 1.25
171 172 173 174
    expect(theme.button!.fontFamily, 'Roboto');
    expect(theme.button!.fontWeight, medium);
    expect(theme.button!.fontSize, 14);
    expect(theme.button!.letterSpacing, 1.25);
175 176

    // Caption Roboto regular 12 0.4
177 178 179 180
    expect(theme.caption!.fontFamily, 'Roboto');
    expect(theme.caption!.fontWeight, regular);
    expect(theme.caption!.fontSize, 12);
    expect(theme.caption!.letterSpacing, 0.4);
181 182

    // OVERLINE Roboto regular 10 1.5
183 184 185 186
    expect(theme.overline!.fontFamily, 'Roboto');
    expect(theme.overline!.fontWeight, regular);
    expect(theme.overline!.fontSize, 10);
    expect(theme.overline!.letterSpacing, 1.5);
187
  });
188
}