mirror of
https://github.com/flutter/samples.git
synced 2026-04-06 19:52:04 +00:00
Added M3 demo app (#1189)
* Added M3 demo app * Changed to use the centralized lint configuration. * Moved the app at the root level * Added to CI * Added app to beta CI and commented app on stable CI file * Update README.md * Addressed comments * fixed comments * Reverted app name in CI files. * Added project to the Pub Dependabot config * Linting pass for current beta channel standards Co-authored-by: Qun Cheng <quncheng@google.com> Co-authored-by: Craig Labenz <craig.labenz@gmail.com>
This commit is contained in:
Qun Cheng
GitHub
248
material_3_demo/test/component_screen_test.dart
Normal file
248
material_3_demo/test/component_screen_test.dart
Normal file
@@ -0,0 +1,248 @@
|
||||
// ignore_for_file: avoid_types_on_closure_parameters
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:material_3_demo/component_screen.dart';
|
||||
import 'package:material_3_demo/main.dart';
|
||||
|
||||
void main() {
|
||||
testWidgets('Default main page shows all M3 components',
|
||||
(WidgetTester tester) async {
|
||||
await tester.pumpWidget(const Material3Demo());
|
||||
|
||||
// Elements on the app bar
|
||||
expect(find.text('Material 3'), findsOneWidget);
|
||||
expect(find.widgetWithIcon(IconButton, Icons.wb_sunny_outlined),
|
||||
findsOneWidget);
|
||||
expect(find.widgetWithIcon(IconButton, Icons.filter_3), findsOneWidget);
|
||||
expect(find.widgetWithIcon(IconButton, Icons.more_vert), findsOneWidget);
|
||||
|
||||
// Elements on the component screen
|
||||
// Buttons
|
||||
expect(find.widgetWithText(ElevatedButton, "Elevated"), findsNWidgets(2));
|
||||
expect(find.widgetWithText(ElevatedButton, "Filled"), findsNWidgets(2));
|
||||
expect(
|
||||
find.widgetWithText(ElevatedButton, "Filled Tonal"), findsNWidgets(2));
|
||||
expect(find.widgetWithText(OutlinedButton, "Outlined"), findsNWidgets(2));
|
||||
expect(find.widgetWithText(TextButton, "Text"), findsNWidgets(2));
|
||||
expect(find.text("Icon"), findsNWidgets(5));
|
||||
|
||||
// FABs
|
||||
expect(
|
||||
find.widgetWithIcon(FloatingActionButton, Icons.add), findsNWidgets(4));
|
||||
expect(find.widgetWithText(FloatingActionButton, "Create"), findsOneWidget);
|
||||
|
||||
// Cards
|
||||
expect(find.widgetWithText(Card, "Elevated"), findsOneWidget);
|
||||
expect(find.widgetWithText(Card, "Filled"), findsOneWidget);
|
||||
expect(find.widgetWithText(Card, "Outlined"), findsOneWidget);
|
||||
|
||||
// Alert Dialog
|
||||
Finder dialogExample = find.widgetWithText(TextButton, "Open Dialog");
|
||||
await tester.scrollUntilVisible(
|
||||
dialogExample,
|
||||
500.0,
|
||||
);
|
||||
expect(dialogExample, findsOneWidget);
|
||||
});
|
||||
|
||||
testWidgets(
|
||||
'NavigationRail doesn\'t show when width value is small than 450 '
|
||||
'(in Portrait mode or narrow screen)', (tester) async {
|
||||
widgetSetup(tester, 449);
|
||||
await tester.pumpWidget(const Material3Demo());
|
||||
|
||||
// When screen width is less than 450, NavigationBar will show. At the same
|
||||
// time, the NavigationRail and the NavigationBar example will NOT show.
|
||||
expect(find.byType(NavigationBars), findsOneWidget);
|
||||
expect(find.widgetWithText(NavigationBar, "Components"), findsOneWidget);
|
||||
expect(find.widgetWithText(NavigationBar, "Color"), findsOneWidget);
|
||||
expect(find.widgetWithText(NavigationBar, "Typography"), findsOneWidget);
|
||||
expect(find.widgetWithText(NavigationBar, "Elevation"), findsOneWidget);
|
||||
|
||||
expect(find.byType(NavigationRailSection), findsNothing);
|
||||
expect(find.widgetWithText(NavigationBar, "Explore"), findsNothing);
|
||||
expect(find.widgetWithText(NavigationBar, "Pets"), findsNothing);
|
||||
expect(find.widgetWithText(NavigationBar, "Account"), findsNothing);
|
||||
});
|
||||
|
||||
testWidgets(
|
||||
'NavigationRail shows when width value is greater than or equal '
|
||||
'to 450 (in Landscape mode or wider screen)', (tester) async {
|
||||
widgetSetup(tester, 450);
|
||||
await tester.pumpWidget(const Material3Demo());
|
||||
|
||||
// When screen width is greater than or equal to 450, NavigationRail and
|
||||
// NavigationBar example will show. At the same time, the NavigationBar
|
||||
// will NOT show.
|
||||
expect(find.byType(NavigationRailSection), findsOneWidget);
|
||||
expect(find.byType(Tooltip, skipOffstage: false), findsWidgets);
|
||||
expect(find.widgetWithText(NavigationRailSection, "Components"),
|
||||
findsOneWidget);
|
||||
expect(find.widgetWithText(NavigationRailSection, "Color"), findsOneWidget);
|
||||
expect(find.widgetWithText(NavigationRailSection, "Typography"),
|
||||
findsOneWidget);
|
||||
expect(find.widgetWithText(NavigationRailSection, "Elevation"),
|
||||
findsOneWidget);
|
||||
|
||||
final navbarExample = find.byType(NavigationBars);
|
||||
await tester.scrollUntilVisible(
|
||||
navbarExample,
|
||||
500.0,
|
||||
);
|
||||
expect(find.byType(NavigationBars), findsOneWidget);
|
||||
expect(find.widgetWithText(NavigationBar, "Explore"), findsOneWidget);
|
||||
expect(find.widgetWithText(NavigationBar, "Pets"), findsOneWidget);
|
||||
expect(find.widgetWithText(NavigationBar, "Account"), findsOneWidget);
|
||||
|
||||
expect(find.widgetWithText(NavigationBar, "Components"), findsNothing);
|
||||
expect(find.widgetWithText(NavigationBar, "Colors"), findsNothing);
|
||||
expect(find.widgetWithText(NavigationBar, "Typography"), findsNothing);
|
||||
expect(find.widgetWithText(NavigationBar, "Elevation"), findsNothing);
|
||||
});
|
||||
|
||||
testWidgets(
|
||||
'Material version switches between Material3 and Material2 when'
|
||||
'the version icon is clicked', (tester) async {
|
||||
await tester.pumpWidget(const Material3Demo());
|
||||
Finder m3Icon = find.widgetWithIcon(IconButton, Icons.filter_3);
|
||||
Finder m2Icon = find.widgetWithIcon(IconButton, Icons.filter_2);
|
||||
BuildContext defaultElevatedButton =
|
||||
tester.firstElement(find.byType(ElevatedButton));
|
||||
BuildContext defaultFAB =
|
||||
tester.firstElement(find.byType(FloatingActionButton));
|
||||
BuildContext defaultCard = tester.firstElement(find.byType(Card));
|
||||
Finder dialog = find.text("Open Dialog");
|
||||
await tester.scrollUntilVisible(
|
||||
dialog,
|
||||
500.0,
|
||||
);
|
||||
await tester.tap(dialog);
|
||||
await tester.pumpAndSettle(const Duration(microseconds: 500));
|
||||
BuildContext defaultAlertDialog = tester.element(find.byType(AlertDialog));
|
||||
expect(Theme.of(defaultAlertDialog).useMaterial3, true);
|
||||
Finder dismiss = find.text("Dismiss");
|
||||
await tester.scrollUntilVisible(
|
||||
dismiss,
|
||||
500.0,
|
||||
);
|
||||
await tester.tap(dismiss);
|
||||
await tester.pumpAndSettle(const Duration(microseconds: 500));
|
||||
|
||||
expect(m3Icon, findsOneWidget);
|
||||
expect(m2Icon, findsNothing);
|
||||
expect(find.text("Material 3"), findsOneWidget);
|
||||
expect(Theme.of(defaultElevatedButton).useMaterial3, true);
|
||||
expect(Theme.of(defaultFAB).useMaterial3, true);
|
||||
expect(Theme.of(defaultCard).useMaterial3, true);
|
||||
|
||||
await tester.tap(m3Icon);
|
||||
await tester.pumpAndSettle(const Duration(microseconds: 500));
|
||||
BuildContext updatedElevatedButton =
|
||||
tester.firstElement(find.byType(ElevatedButton));
|
||||
BuildContext updatedFAB =
|
||||
tester.firstElement(find.byType(FloatingActionButton));
|
||||
BuildContext updatedCard = tester.firstElement(find.byType(Card));
|
||||
Finder updatedDialog = find.text("Open Dialog");
|
||||
await tester.scrollUntilVisible(
|
||||
updatedDialog,
|
||||
500.0,
|
||||
);
|
||||
await tester.tap(updatedDialog);
|
||||
await tester.pumpAndSettle(const Duration(microseconds: 500));
|
||||
BuildContext updatedAlertDialog =
|
||||
tester.firstElement(find.byType(AlertDialog));
|
||||
expect(Theme.of(updatedAlertDialog).useMaterial3, false);
|
||||
Finder updatedDismiss = find.text("Dismiss");
|
||||
await tester.scrollUntilVisible(
|
||||
updatedDismiss,
|
||||
500.0,
|
||||
);
|
||||
await tester.tap(updatedDismiss);
|
||||
await tester.pumpAndSettle(const Duration(microseconds: 500));
|
||||
|
||||
expect(m3Icon, findsNothing);
|
||||
expect(m2Icon, findsOneWidget);
|
||||
expect(find.text("Material 2"), findsOneWidget);
|
||||
expect(Theme.of(updatedElevatedButton).useMaterial3, false);
|
||||
expect(Theme.of(updatedFAB).useMaterial3, false);
|
||||
expect(Theme.of(updatedCard).useMaterial3, false);
|
||||
});
|
||||
|
||||
testWidgets(
|
||||
'Other screens become Material2 mode after changing mode from '
|
||||
'main screen', (tester) async {
|
||||
await tester.pumpWidget(const Material3Demo());
|
||||
await tester.tap(find.widgetWithIcon(IconButton, Icons.filter_3));
|
||||
await tester.tap(find.byIcon(Icons.format_paint_outlined));
|
||||
await tester.pumpAndSettle(const Duration(microseconds: 500));
|
||||
BuildContext lightThemeText = tester.element(find.text("Light Theme"));
|
||||
expect(Theme.of(lightThemeText).useMaterial3, false);
|
||||
await tester.tap(find.byIcon(Icons.text_snippet_outlined));
|
||||
await tester.pumpAndSettle(const Duration(microseconds: 500));
|
||||
BuildContext displayLargeText = tester.element(find.text("Display Large"));
|
||||
expect(Theme.of(displayLargeText).useMaterial3, false);
|
||||
await tester.tap(find.byIcon(Icons.invert_colors_on_outlined));
|
||||
await tester.pumpAndSettle(const Duration(microseconds: 500));
|
||||
BuildContext material = tester.firstElement(find.byType(Material));
|
||||
expect(Theme.of(material).useMaterial3, false);
|
||||
});
|
||||
|
||||
testWidgets(
|
||||
'Brightness mode switches between dark and light when'
|
||||
'the brightness icon is clicked', (tester) async {
|
||||
await tester.pumpWidget(const Material3Demo());
|
||||
Finder lightIcon = find.widgetWithIcon(IconButton, Icons.wb_sunny_outlined);
|
||||
Finder darkIcon = find.widgetWithIcon(IconButton, Icons.wb_sunny);
|
||||
BuildContext appBar = tester.element(find.byType(AppBar));
|
||||
BuildContext body = tester.element(find.byType(Scaffold));
|
||||
BuildContext navigationRail = tester.element(find.byType(NavigationRail));
|
||||
expect(lightIcon, findsOneWidget);
|
||||
expect(darkIcon, findsNothing);
|
||||
expect(Theme.of(appBar).brightness, Brightness.light);
|
||||
expect(Theme.of(body).brightness, Brightness.light);
|
||||
expect(Theme.of(navigationRail).brightness, Brightness.light);
|
||||
await tester.tap(lightIcon);
|
||||
await tester.pumpAndSettle(const Duration(microseconds: 500));
|
||||
|
||||
BuildContext appBar2 = tester.element(find.byType(AppBar));
|
||||
BuildContext body2 = tester.element(find.byType(Scaffold));
|
||||
BuildContext navigationRail2 = tester.element(find.byType(NavigationRail));
|
||||
expect(lightIcon, findsNothing);
|
||||
expect(darkIcon, findsOneWidget);
|
||||
expect(Theme.of(appBar2).brightness, Brightness.dark);
|
||||
expect(Theme.of(body2).brightness, Brightness.dark);
|
||||
expect(Theme.of(navigationRail2).brightness, Brightness.dark);
|
||||
});
|
||||
|
||||
testWidgets('Color theme changes when a color is selected from menu',
|
||||
(tester) async {
|
||||
await tester.pumpWidget(const Material3Demo());
|
||||
Finder menuIcon = find.widgetWithIcon(IconButton, Icons.more_vert);
|
||||
BuildContext appBar = tester.element(find.byType(AppBar));
|
||||
BuildContext body = tester.element(find.byType(Scaffold));
|
||||
BuildContext navigationRail = tester.element(find.byType(NavigationRail));
|
||||
|
||||
expect(Theme.of(appBar).primaryColor, m3BaseColor);
|
||||
expect(Theme.of(body).primaryColor, m3BaseColor);
|
||||
expect(Theme.of(navigationRail).primaryColor, m3BaseColor);
|
||||
await tester.tap(menuIcon);
|
||||
await tester.pumpAndSettle();
|
||||
await tester.tap(find.text("Blue"));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
BuildContext appBar2 = tester.element(find.byType(AppBar));
|
||||
BuildContext body2 = tester.element(find.byType(Scaffold));
|
||||
BuildContext navigationRail2 = tester.element(find.byType(NavigationRail));
|
||||
ThemeData expectedTheme = ThemeData(colorSchemeSeed: Colors.blue);
|
||||
expect(Theme.of(appBar2).primaryColor, expectedTheme.primaryColor);
|
||||
expect(Theme.of(body2).primaryColor, expectedTheme.primaryColor);
|
||||
expect(Theme.of(navigationRail2).primaryColor, expectedTheme.primaryColor);
|
||||
});
|
||||
}
|
||||
|
||||
void widgetSetup(WidgetTester tester, double width) {
|
||||
const height = 846;
|
||||
tester.binding.window.devicePixelRatioTestValue = (2);
|
||||
final dpi = tester.binding.window.devicePixelRatio;
|
||||
tester.binding.window.physicalSizeTestValue = Size(width * dpi, height * dpi);
|
||||
}
|
||||
Reference in New Issue
Block a user