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

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_test/flutter_test.dart';
9
import 'package:leak_tracker_flutter_testing/leak_tracker_flutter_testing.dart';
10

11
Widget boilerplate({required Widget child}) {
12 13 14 15 16 17 18 19 20 21 22 23
  return Directionality(
    textDirection: TextDirection.ltr,
    child: Center(child: child),
  );
}

void main() {
  test('ToggleButtonsThemeData copyWith, ==, hashCode basics', () {
    expect(const ToggleButtonsThemeData(), const ToggleButtonsThemeData().copyWith());
    expect(const ToggleButtonsThemeData().hashCode, const ToggleButtonsThemeData().copyWith().hashCode);
  });

24 25 26 27 28 29
  test('ToggleButtonsThemeData lerp special cases', () {
    expect(ToggleButtonsThemeData.lerp(null, null, 0), null);
    const ToggleButtonsThemeData data = ToggleButtonsThemeData();
    expect(identical(ToggleButtonsThemeData.lerp(data, data, 0.5), data), true);
  });

30
  test('ToggleButtonsThemeData defaults', () {
31
    const ToggleButtonsThemeData themeData = ToggleButtonsThemeData();
32
    expect(themeData.textStyle, null);
33
    expect(themeData.constraints, null);
34 35 36 37 38 39 40 41 42 43 44 45 46 47
    expect(themeData.color, null);
    expect(themeData.selectedColor, null);
    expect(themeData.disabledColor, null);
    expect(themeData.fillColor, null);
    expect(themeData.focusColor, null);
    expect(themeData.highlightColor, null);
    expect(themeData.hoverColor, null);
    expect(themeData.splashColor, null);
    expect(themeData.borderColor, null);
    expect(themeData.selectedBorderColor, null);
    expect(themeData.disabledBorderColor, null);
    expect(themeData.borderRadius, null);
    expect(themeData.borderWidth, null);

48
    const ToggleButtonsTheme theme = ToggleButtonsTheme(data: ToggleButtonsThemeData(), child: SizedBox());
49
    expect(theme.data.textStyle, null);
50
    expect(theme.data.constraints, null);
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
    expect(theme.data.color, null);
    expect(theme.data.selectedColor, null);
    expect(theme.data.disabledColor, null);
    expect(theme.data.fillColor, null);
    expect(theme.data.focusColor, null);
    expect(theme.data.highlightColor, null);
    expect(theme.data.hoverColor, null);
    expect(theme.data.splashColor, null);
    expect(theme.data.borderColor, null);
    expect(theme.data.selectedBorderColor, null);
    expect(theme.data.disabledBorderColor, null);
    expect(theme.data.borderRadius, null);
    expect(theme.data.borderWidth, null);
  });

66
  testWidgetsWithLeakTracking('Default ToggleButtonsThemeData debugFillProperties', (WidgetTester tester) async {
67 68 69 70 71 72 73 74 75 76 77
    final DiagnosticPropertiesBuilder builder = DiagnosticPropertiesBuilder();
    const ToggleButtonsThemeData().debugFillProperties(builder);

    final List<String> description = builder.properties
      .where((DiagnosticsNode node) => !node.isFiltered(DiagnosticLevel.info))
      .map((DiagnosticsNode node) => node.toString())
      .toList();

    expect(description, <String>[]);
  });

78
  testWidgetsWithLeakTracking('ToggleButtonsThemeData implements debugFillProperties', (WidgetTester tester) async {
79 80
    final DiagnosticPropertiesBuilder builder = DiagnosticPropertiesBuilder();
    const ToggleButtonsThemeData(
81
      textStyle: TextStyle(fontSize: 10),
82
      constraints: BoxConstraints(minHeight: 10.0, maxHeight: 20.0),
83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
      color: Color(0xfffffff0),
      selectedColor: Color(0xfffffff1),
      disabledColor: Color(0xfffffff2),
      fillColor: Color(0xfffffff3),
      focusColor: Color(0xfffffff4),
      highlightColor: Color(0xfffffff5),
      hoverColor: Color(0xfffffff6),
      splashColor: Color(0xfffffff7),
      borderColor: Color(0xfffffff8),
      selectedBorderColor: Color(0xfffffff9),
      disabledBorderColor: Color(0xfffffffa),
      borderRadius: BorderRadius.all(Radius.circular(4.0)),
      borderWidth: 2.0,
    ).debugFillProperties(builder);

98
    final List<String> description = builder.properties
99 100 101 102
        .where((DiagnosticsNode node) => !node.isFiltered(DiagnosticLevel.info))
        .map((DiagnosticsNode node) => node.toString())
        .toList();

103
    expect(description, <String>[
104 105
      'textStyle.inherit: true',
      'textStyle.size: 10.0',
106
      'constraints: BoxConstraints(0.0<=w<=Infinity, 10.0<=h<=20.0)',
107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
      'color: Color(0xfffffff0)',
      'selectedColor: Color(0xfffffff1)',
      'disabledColor: Color(0xfffffff2)',
      'fillColor: Color(0xfffffff3)',
      'focusColor: Color(0xfffffff4)',
      'highlightColor: Color(0xfffffff5)',
      'hoverColor: Color(0xfffffff6)',
      'splashColor: Color(0xfffffff7)',
      'borderColor: Color(0xfffffff8)',
      'selectedBorderColor: Color(0xfffffff9)',
      'disabledBorderColor: Color(0xfffffffa)',
      'borderRadius: BorderRadius.circular(4.0)',
      'borderWidth: 2.0',
    ]);
  });

123
  testWidgetsWithLeakTracking('Theme text style, except color, is applied', (WidgetTester tester) async {
124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149
    await tester.pumpWidget(
      Material(
        child: boilerplate(
          child: ToggleButtonsTheme(
            data: const ToggleButtonsThemeData(
              textStyle: TextStyle(
                color: Colors.orange,
                textBaseline: TextBaseline.ideographic,
                fontSize: 20.0,
              ),
            ),
            child: ToggleButtons(
              isSelected: const <bool>[false, true],
              onPressed: (int index) {},
              children: const <Widget>[
                Text('First child'),
                Text('Second child'),
              ],
            ),
          ),
        ),
      ),
    );

    TextStyle textStyle;
    textStyle = tester.widget<DefaultTextStyle>(find.descendant(
150 151
      of: find.widgetWithText(TextButton, 'First child'),
      matching: find.byType(DefaultTextStyle),
152 153 154 155 156 157
    )).style;
    expect(textStyle.textBaseline, TextBaseline.ideographic);
    expect(textStyle.fontSize, 20.0);
    expect(textStyle.color, isNot(Colors.orange));

    textStyle = tester.widget<DefaultTextStyle>(find.descendant(
158
        of: find.widgetWithText(TextButton, 'Second child'),
159 160 161 162 163 164 165
        matching: find.byType(DefaultTextStyle),
    )).style;
    expect(textStyle.textBaseline, TextBaseline.ideographic);
    expect(textStyle.fontSize, 20.0);
    expect(textStyle.color, isNot(Colors.orange));
  });

166
  testWidgetsWithLeakTracking('Custom BoxConstraints', (WidgetTester tester) async {
167 168 169 170 171 172 173 174 175 176 177 178
    // Test for minimum constraints
    await tester.pumpWidget(
      Material(
        child: boilerplate(
          child: ToggleButtonsTheme(
            data: const ToggleButtonsThemeData(
              constraints: BoxConstraints(
                minWidth: 50.0,
                minHeight: 60.0,
              ),
            ),
            child: ToggleButtons(
179
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
180 181 182 183 184 185 186 187 188 189 190 191 192
              isSelected: const <bool>[false, false, false],
              onPressed: (int index) {},
              children: const <Widget>[
                Icon(Icons.check),
                Icon(Icons.access_alarm),
                Icon(Icons.cake),
              ],
            ),
          ),
        ),
      ),
    );

193
    Rect firstRect = tester.getRect(find.byType(TextButton).at(0));
194 195
    expect(firstRect.width, 50.0);
    expect(firstRect.height, 60.0);
196
    Rect secondRect = tester.getRect(find.byType(TextButton).at(1));
197 198
    expect(secondRect.width, 50.0);
    expect(secondRect.height, 60.0);
199
    Rect thirdRect = tester.getRect(find.byType(TextButton).at(2));
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214
    expect(thirdRect.width, 50.0);
    expect(thirdRect.height, 60.0);

    // Test for maximum constraints
    await tester.pumpWidget(
      Material(
        child: boilerplate(
          child: ToggleButtonsTheme(
            data: const ToggleButtonsThemeData(
              constraints: BoxConstraints(
                maxWidth: 20.0,
                maxHeight: 10.0,
              ),
            ),
            child: ToggleButtons(
215
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
216 217 218 219 220 221 222 223 224 225 226 227 228
              isSelected: const <bool>[false, false, false],
              onPressed: (int index) {},
              children: const <Widget>[
                Icon(Icons.check),
                Icon(Icons.access_alarm),
                Icon(Icons.cake),
              ],
            ),
          ),
        ),
      ),
    );

229
    firstRect = tester.getRect(find.byType(TextButton).at(0));
230 231
    expect(firstRect.width, 20.0);
    expect(firstRect.height, 10.0);
232
    secondRect = tester.getRect(find.byType(TextButton).at(1));
233 234
    expect(secondRect.width, 20.0);
    expect(secondRect.height, 10.0);
235
    thirdRect = tester.getRect(find.byType(TextButton).at(2));
236 237 238 239
    expect(thirdRect.width, 20.0);
    expect(thirdRect.height, 10.0);
  });

240
  testWidgetsWithLeakTracking(
241 242
    'Theme text/icon colors for enabled, selected and disabled states',
    (WidgetTester tester) async {
243 244
      TextStyle buttonTextStyle(String text) {
        return tester.widget<DefaultTextStyle>(find.descendant(
245
          of: find.widgetWithText(TextButton, text),
246 247 248 249 250
          matching: find.byType(DefaultTextStyle),
        )).style;
      }
      IconTheme iconTheme(IconData icon) {
        return tester.widget(find.descendant(
251
          of: find.widgetWithIcon(TextButton, icon),
252 253 254
          matching: find.byType(IconTheme),
        ));
      }
255 256 257 258 259 260 261 262 263
      final ThemeData theme = ThemeData();
      const Color enabledColor = Colors.lime;
      const Color selectedColor = Colors.green;
      const Color disabledColor = Colors.yellow;

      await tester.pumpWidget(
        Material(
          child: boilerplate(
            child: ToggleButtonsTheme(
264
              data: const ToggleButtonsThemeData(),
265 266 267 268
              child: ToggleButtons(
                color: enabledColor,
                isSelected: const <bool>[false],
                onPressed: (int index) {},
269
                children: const <Widget>[
270 271
                  // This Row is used like this to test for both TextStyle
                  // and IconTheme for Text and Icon widgets respectively.
272
                  Row(children: <Widget>[
273 274 275 276 277 278 279 280 281
                    Text('First child'),
                    Icon(Icons.check),
                  ]),
                ],
              ),
            ),
          ),
        ),
      );
282
      // Custom theme enabled color
283
      expect(theme.colorScheme.onSurface, isNot(enabledColor));
284 285
      expect(buttonTextStyle('First child').color, enabledColor);
      expect(iconTheme(Icons.check).data.color, enabledColor);
286 287 288 289 290

      await tester.pumpWidget(
        Material(
          child: boilerplate(
            child: ToggleButtonsTheme(
291 292 293
              data: const ToggleButtonsThemeData(
                selectedColor: selectedColor,
              ),
294 295 296 297
              child: ToggleButtons(
                color: enabledColor,
                isSelected: const <bool>[true],
                onPressed: (int index) {},
298 299
                children: const <Widget>[
                  Row(children: <Widget>[
300 301 302 303 304 305 306 307 308 309
                    Text('First child'),
                    Icon(Icons.check),
                  ]),
                ],
              ),
            ),
          ),
        ),
      );
      await tester.pumpAndSettle();
310
      // Custom theme selected color
311
      expect(theme.colorScheme.primary, isNot(selectedColor));
312 313
      expect(buttonTextStyle('First child').color, selectedColor);
      expect(iconTheme(Icons.check).data.color, selectedColor);
314 315 316 317 318

      await tester.pumpWidget(
        Material(
          child: boilerplate(
            child: ToggleButtonsTheme(
319 320 321
              data: const ToggleButtonsThemeData(
                disabledColor: disabledColor,
              ),
322 323 324
              child: ToggleButtons(
                color: enabledColor,
                isSelected: const <bool>[false],
325 326
                children: const <Widget>[
                  Row(children: <Widget>[
327 328 329 330 331 332 333 334 335 336
                    Text('First child'),
                    Icon(Icons.check),
                  ]),
                ],
              ),
            ),
          ),
        ),
      );
      await tester.pumpAndSettle();
337
      // Custom theme disabled color
338
      expect(theme.disabledColor, isNot(disabledColor));
339 340
      expect(buttonTextStyle('First child').color, disabledColor);
      expect(iconTheme(Icons.check).data.color, disabledColor);
341 342 343
    },
  );

344
  testWidgetsWithLeakTracking('Theme button fillColor', (WidgetTester tester) async {
345 346 347 348 349
    const Color customFillColor = Colors.green;
    await tester.pumpWidget(
      Material(
        child: boilerplate(
          child: ToggleButtonsTheme(
350
            data: const ToggleButtonsThemeData(fillColor: customFillColor),
351 352 353
            child: ToggleButtons(
              isSelected: const <bool>[true],
              onPressed: (int index) {},
354 355
              children: const <Widget>[
                Row(children: <Widget>[
356 357 358 359 360 361 362 363 364
                  Text('First child'),
                ]),
              ],
            ),
          ),
        ),
      ),
    );

365
    final Material material = tester.widget<Material>(find.descendant(
366
      of: find.byType(TextButton),
367 368
      matching: find.byType(Material),
    ));
369 370 371 372
    expect(material.color, customFillColor);
    expect(material.type, MaterialType.button);
  });

373
  testWidgetsWithLeakTracking('Custom Theme button fillColor in different states', (WidgetTester tester) async {
374 375 376
    Material buttonColor(String text) {
      return tester.widget<Material>(
        find.descendant(
377
          of: find.byType(TextButton),
378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439
          matching: find.widgetWithText(Material, text),
        ),
      );
    }

    const Color enabledFillColor = Colors.green;
    const Color selectedFillColor = Colors.blue;
    const Color disabledFillColor = Colors.yellow;

    Color getColor(Set<MaterialState> states) {
      if (states.contains(MaterialState.selected)) {
        return selectedFillColor;
      } else if (states.contains(MaterialState.disabled)) {
        return disabledFillColor;
      }
      return enabledFillColor;
    }

    await tester.pumpWidget(
      Material(
        child: boilerplate(
          child: ToggleButtonsTheme(
            data: ToggleButtonsThemeData(fillColor: MaterialStateColor.resolveWith(getColor)),
            child: ToggleButtons(
              isSelected: const <bool>[true, false],
              onPressed: (int index) {},
              children: const <Widget> [
                Text('First child'),
                Text('Second child'),
              ],
            ),
          ),
        ),
      ),
    );

    await tester.pumpAndSettle();

    expect(buttonColor('First child').color, selectedFillColor);
    expect(buttonColor('Second child').color, enabledFillColor);

    await tester.pumpWidget(
      Material(
        child: boilerplate(
          child: ToggleButtonsTheme(
            data: ToggleButtonsThemeData(fillColor: MaterialStateColor.resolveWith(getColor)),
            child: ToggleButtons(
              isSelected: const <bool>[true, false],
              children: const <Widget>[
                Text('First child'),
                Text('Second child'),
              ],
            ),
          ),
        ),
      ),
    );

    expect(buttonColor('First child').color, disabledFillColor);
    expect(buttonColor('Second child').color, disabledFillColor);
  });

440
  testWidgetsWithLeakTracking('Theme InkWell colors', (WidgetTester tester) async {
441 442 443 444 445 446 447 448 449 450
    const Color splashColor = Color(0xff4caf50);
    const Color highlightColor = Color(0xffcddc39);
    const Color hoverColor = Color(0xffffeb3b);
    const Color focusColor = Color(0xffffff00);
    final FocusNode focusNode = FocusNode();

    await tester.pumpWidget(
      Material(
        child: boilerplate(
          child: ToggleButtonsTheme(
451 452 453 454 455 456
            data: const ToggleButtonsThemeData(
              splashColor: splashColor,
              highlightColor: highlightColor,
              hoverColor: hoverColor,
              focusColor: focusColor,
            ),
457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502
            child: ToggleButtons(
              isSelected: const <bool>[true],
              onPressed: (int index) {},
              focusNodes: <FocusNode>[focusNode],
              children: const <Widget>[
                Text('First child'),
              ],
            ),
          ),
        ),
      ),
    );

    final Offset center = tester.getCenter(find.text('First child'));

    // splashColor
    // highlightColor
    final TestGesture touchGesture = await tester.createGesture();
    await touchGesture.down(center);
    await tester.pumpAndSettle();

    RenderObject inkFeatures;
    inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) {
      return object.runtimeType.toString() == '_RenderInkFeatures';
    });
    expect(
      inkFeatures,
      paints
        ..circle(color: splashColor)
    );

    await touchGesture.up();
    await tester.pumpAndSettle();

    // hoverColor
    final TestGesture hoverGesture = await tester.createGesture(
      kind: PointerDeviceKind.mouse,
    );
    await hoverGesture.addPointer();
    await hoverGesture.moveTo(center);
    await tester.pumpAndSettle();

    inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) {
      return object.runtimeType.toString() == '_RenderInkFeatures';
    });
    expect(inkFeatures, paints..rect(color: hoverColor));
503
    await hoverGesture.moveTo(Offset.zero);
504 505 506 507 508 509 510 511

    // focusColor
    focusNode.requestFocus();
    await tester.pumpAndSettle();
    inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) {
      return object.runtimeType.toString() == '_RenderInkFeatures';
    });
    expect(inkFeatures, paints..rect(color: focusColor));
512 513

    await hoverGesture.removePointer();
514 515

    focusNode.dispose();
516 517
  });

518
  testWidgetsWithLeakTracking(
519 520 521 522 523 524 525 526 527 528 529
    'Theme border width and border colors for enabled, selected and disabled states',
    (WidgetTester tester) async {
      const Color borderColor = Color(0xff4caf50);
      const Color selectedBorderColor = Color(0xffcddc39);
      const Color disabledBorderColor = Color(0xffffeb3b);
      const double customWidth = 2.0;

      await tester.pumpWidget(
        Material(
          child: boilerplate(
            child: ToggleButtonsTheme(
530 531 532 533
              data: const ToggleButtonsThemeData(
                borderColor: borderColor,
                borderWidth: customWidth,
              ),
534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552
              child: ToggleButtons(
                isSelected: const <bool>[false],
                onPressed: (int index) {},
                children: const <Widget>[
                  Text('First child'),
                ],
              ),
            ),
          ),
        ),
      );

      RenderObject toggleButtonRenderObject;
      toggleButtonRenderObject = tester.allRenderObjects.firstWhere((RenderObject object) {
        return object.runtimeType.toString() == '_SelectToggleButtonRenderObject';
      });
      expect(
        toggleButtonRenderObject,
        paints
553 554
          // physical model layer paint
          ..path()
555 556 557 558 559 560 561 562 563 564 565
          ..path(
            style: PaintingStyle.stroke,
            color: borderColor,
            strokeWidth: customWidth,
          ),
      );

      await tester.pumpWidget(
        Material(
          child: boilerplate(
            child: ToggleButtonsTheme(
566 567 568 569
              data: const ToggleButtonsThemeData(
                selectedBorderColor: selectedBorderColor,
                borderWidth: customWidth,
              ),
570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587
              child: ToggleButtons(
                isSelected: const <bool>[true],
                onPressed: (int index) {},
                children: const <Widget>[
                  Text('First child'),
                ],
              ),
            ),
          ),
        ),
      );

      toggleButtonRenderObject = tester.allRenderObjects.firstWhere((RenderObject object) {
        return object.runtimeType.toString() == '_SelectToggleButtonRenderObject';
      });
      expect(
        toggleButtonRenderObject,
        paints
588 589
          // physical model layer paint
          ..path()
590 591 592 593 594 595 596 597 598 599 600
          ..path(
            style: PaintingStyle.stroke,
            color: selectedBorderColor,
            strokeWidth: customWidth,
          ),
      );

      await tester.pumpWidget(
        Material(
          child: boilerplate(
            child: ToggleButtonsTheme(
601 602 603 604
              data: const ToggleButtonsThemeData(
                disabledBorderColor: disabledBorderColor,
                borderWidth: customWidth,
              ),
605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621
              child: ToggleButtons(
                isSelected: const <bool>[false],
                children: const <Widget>[
                  Text('First child'),
                ],
              ),
            ),
          ),
        ),
      );

      toggleButtonRenderObject = tester.allRenderObjects.firstWhere((RenderObject object) {
        return object.runtimeType.toString() == '_SelectToggleButtonRenderObject';
      });
      expect(
        toggleButtonRenderObject,
        paints
622 623
          // physical model layer paint
          ..path()
624 625 626 627 628 629 630 631
          ..path(
            style: PaintingStyle.stroke,
            color: disabledBorderColor,
            strokeWidth: customWidth,
          ),
      );
    },
  );
632
}