typography_test.dart 8.57 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

Dan Field's avatar
Dan Field committed
41
  test('Typography on iOS defaults to the correct SF font family based on size', () {
42
    final Typography typography = Typography.material2018(platform: TargetPlatform.iOS);
43
    for (final TextTheme textTheme in <TextTheme>[typography.black, typography.white]) {
44 45 46 47 48 49 50 51 52 53 54 55 56
      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);
57 58
    }
  });
59

Dan Field's avatar
Dan Field committed
60 61 62
  test('Typography on macOS defaults to the correct SF font family based on size', () {
    final Typography typography = Typography.material2018(platform: TargetPlatform.macOS);
    for (final TextTheme textTheme in <TextTheme>[typography.black, typography.white]) {
63 64 65 66 67 68 69 70 71 72 73 74 75
      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);
Dan Field's avatar
Dan Field committed
76 77 78
    }
  });

79 80
  testWidgets('Typography implements debugFillProperties', (WidgetTester tester) async {
    final DiagnosticPropertiesBuilder builder = DiagnosticPropertiesBuilder();
81
    Typography.material2014(
82 83 84 85 86 87 88 89 90 91
      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))
92
      .map((DiagnosticsNode node) => node.name!).toList();
93 94 95

    expect(nonDefaultPropertyNames, <String>['black', 'white', 'englishLike', 'dense', 'tall']);
  });
96 97 98 99 100 101 102 103 104 105 106

  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
107 108 109 110
    expect(theme.headline1!.fontFamily, 'Roboto');
    expect(theme.headline1!.fontWeight, light);
    expect(theme.headline1!.fontSize, 96);
    expect(theme.headline1!.letterSpacing, -1.5);
111 112

    // H2 Roboto light 60 -0.5
113 114 115 116
    expect(theme.headline2!.fontFamily, 'Roboto');
    expect(theme.headline2!.fontWeight, light);
    expect(theme.headline2!.fontSize, 60);
    expect(theme.headline2!.letterSpacing, -0.5);
117 118

    // H3 Roboto regular 48 0
119 120 121 122
    expect(theme.headline3!.fontFamily, 'Roboto');
    expect(theme.headline3!.fontWeight, regular);
    expect(theme.headline3!.fontSize, 48);
    expect(theme.headline3!.letterSpacing, 0);
123 124

    // H4 Roboto regular 34 0.25
125 126 127 128
    expect(theme.headline4!.fontFamily, 'Roboto');
    expect(theme.headline4!.fontWeight, regular);
    expect(theme.headline4!.fontSize, 34);
    expect(theme.headline4!.letterSpacing, 0.25);
129 130

    // H5 Roboto regular 24 0
131 132 133 134
    expect(theme.headline5!.fontFamily, 'Roboto');
    expect(theme.headline5!.fontWeight, regular);
    expect(theme.headline5!.fontSize, 24);
    expect(theme.headline5!.letterSpacing, 0);
135 136

    // H6 Roboto medium 20 0.15
137 138 139 140
    expect(theme.headline6!.fontFamily, 'Roboto');
    expect(theme.headline6!.fontWeight, medium);
    expect(theme.headline6!.fontSize, 20);
    expect(theme.headline6!.letterSpacing, 0.15);
141 142

    // Subtitle1 Roboto regular 16 0.15
143 144 145 146
    expect(theme.subtitle1!.fontFamily, 'Roboto');
    expect(theme.subtitle1!.fontWeight, regular);
    expect(theme.subtitle1!.fontSize, 16);
    expect(theme.subtitle1!.letterSpacing, 0.15);
147 148

    // Subtitle2 Roboto medium 14 0.1
149 150 151 152
    expect(theme.subtitle2!.fontFamily, 'Roboto');
    expect(theme.subtitle2!.fontWeight, medium);
    expect(theme.subtitle2!.fontSize, 14);
    expect(theme.subtitle2!.letterSpacing, 0.1);
153 154

    // Body1 Roboto regular 16 0.5
155 156 157 158
    expect(theme.bodyText1!.fontFamily, 'Roboto');
    expect(theme.bodyText1!.fontWeight, regular);
    expect(theme.bodyText1!.fontSize, 16);
    expect(theme.bodyText1!.letterSpacing, 0.5);
159 160

    // Body2 Roboto regular 14 0.25
161 162 163 164
    expect(theme.bodyText2!.fontFamily, 'Roboto');
    expect(theme.bodyText2!.fontWeight, regular);
    expect(theme.bodyText2!.fontSize, 14);
    expect(theme.bodyText2!.letterSpacing, 0.25);
165 166

    // BUTTON Roboto medium 14 1.25
167 168 169 170
    expect(theme.button!.fontFamily, 'Roboto');
    expect(theme.button!.fontWeight, medium);
    expect(theme.button!.fontSize, 14);
    expect(theme.button!.letterSpacing, 1.25);
171 172

    // Caption Roboto regular 12 0.4
173 174 175 176
    expect(theme.caption!.fontFamily, 'Roboto');
    expect(theme.caption!.fontWeight, regular);
    expect(theme.caption!.fontSize, 12);
    expect(theme.caption!.letterSpacing, 0.4);
177 178

    // OVERLINE Roboto regular 10 1.5
179 180 181 182
    expect(theme.overline!.fontFamily, 'Roboto');
    expect(theme.overline!.fontWeight, regular);
    expect(theme.overline!.fontSize, 10);
    expect(theme.overline!.letterSpacing, 1.5);
183
  });
184
}