Unverified Commit f3a7485b authored by Taha Tesser's avatar Taha Tesser Committed by GitHub

Update `RadioListTile` tests to M3 (#129718)

This updates the `RadioListTile` test which was modified in https://github.com/flutter/flutter/pull/128839

### Description
- Update the layout to the proper order `MaterialApp` -> `Material` -> `RadioListTile`
- Add M3 overlay test. (fixed problem faced in https://github.com/flutter/flutter/pull/128839)
- Separate the M2  overlay test.
parent cd97b439
......@@ -1016,8 +1016,7 @@ void main() {
tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
int? groupValue = 0;
final Color? hoverColor = Colors.orange[500];
final ThemeData theme = ThemeData();
final bool material3 = theme.useMaterial3;
final ThemeData theme = ThemeData(useMaterial3: true);
Widget buildApp({bool enabled = true}) {
return wrap(
child: MaterialApp(
......@@ -1045,8 +1044,8 @@ void main() {
Material.of(tester.element(find.byType(Radio<int>))),
paints
..rect()
..circle(color: material3 ? theme.colorScheme.primary : const Color(0xff2196f3))
..circle(color: material3 ? theme.colorScheme.primary : const Color(0xff2196f3)),
..circle(color: theme.colorScheme.primary)
..circle(color: theme.colorScheme.primary),
);
// Start hovering
......@@ -1074,8 +1073,8 @@ void main() {
Material.of(tester.element(find.byType(Radio<int>))),
paints
..rect()
..circle(color: material3 ? theme.colorScheme.onSurface.withOpacity(0.38) : const Color(0x61000000))
..circle(color: material3 ? theme.colorScheme.onSurface.withOpacity(0.38) : const Color(0x61000000)),
..circle(color: theme.colorScheme.onSurface.withOpacity(0.38))
..circle(color: theme.colorScheme.onSurface.withOpacity(0.38)),
);
});
......@@ -1101,13 +1100,11 @@ void main() {
return null;
}
final ThemeData theme = ThemeData(useMaterial3: false);
final bool material3 = theme.useMaterial3;
Widget buildRadio({bool active = false, bool useOverlay = true}) {
return wrap(
child: MaterialApp(
theme: theme,
home: RadioListTile<bool>(
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: Material(
child: RadioListTile<bool>(
value: active,
groupValue: true,
onChanged: (_) { },
......@@ -1125,13 +1122,13 @@ void main() {
expect(
Material.of(tester.element(find.byType(Radio<bool>))),
material3 ? (paints..circle(
color: fillColor.withAlpha(kRadialReactionAlpha),
radius: 20,
)) : (paints..circle()..circle(
color: fillColor.withAlpha(kRadialReactionAlpha),
radius: 20,
)),
paints
..rect(color: const Color(0x00000000))
..rect(color: const Color(0x66bcbcbc))
..circle(
color: fillColor.withAlpha(kRadialReactionAlpha),
radius: 20.0,
),
reason: 'Default inactive pressed Radio should have overlay color from fillColor',
);
......@@ -1141,13 +1138,13 @@ void main() {
expect(
Material.of(tester.element(find.byType(Radio<bool>))),
material3 ? (paints..circle(
color: fillColor.withAlpha(kRadialReactionAlpha),
radius: 20,
)) : (paints..circle()..circle(
color: fillColor.withAlpha(kRadialReactionAlpha),
radius: 20,
)),
paints
..rect(color: const Color(0x00000000))
..rect(color: const Color(0x66bcbcbc))
..circle(
color: fillColor.withAlpha(kRadialReactionAlpha),
radius: 20.0,
),
reason: 'Default active pressed Radio should have overlay color from fillColor',
);
......@@ -1157,13 +1154,13 @@ void main() {
expect(
Material.of(tester.element(find.byType(Radio<bool>))),
material3 ? (paints..circle(
color: inactivePressedOverlayColor,
radius: 20,
)) : (paints..circle()..circle(
color: inactivePressedOverlayColor,
radius: 20,
)),
paints
..rect(color: const Color(0x00000000))
..rect(color: const Color(0x66bcbcbc))
..circle(
color: inactivePressedOverlayColor,
radius: 20.0,
),
reason: 'Inactive pressed Radio should have overlay color: $inactivePressedOverlayColor',
);
......@@ -1173,17 +1170,17 @@ void main() {
expect(
Material.of(tester.element(find.byType(Radio<bool>))),
material3 ? (paints..circle(
color: activePressedOverlayColor,
radius: 20,
)) : (paints..circle()..circle(
color: activePressedOverlayColor,
radius: 20,
)),
paints
..rect(color: const Color(0x00000000))
..rect(color: const Color(0x66bcbcbc))
..circle(
color: activePressedOverlayColor,
radius: 20.0,
),
reason: 'Active pressed Radio should have overlay color: $activePressedOverlayColor',
);
// Start hovering
// Start hovering.
final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
await gesture.addPointer();
await gesture.moveTo(tester.getCenter(find.byType(Radio<bool>)));
......@@ -1195,13 +1192,13 @@ void main() {
expect(
Material.of(tester.element(find.byType(Radio<bool>))),
material3 ? (paints..circle(
color: hoverOverlayColor,
radius: 20,
)) : (paints..circle(
color: hoverOverlayColor,
radius: 20,
)),
paints
..rect(color: const Color(0x00000000))
..rect(color: const Color(0x0a000000))
..circle(
color: hoverOverlayColor,
radius: 20.0,
),
reason: 'Hovered Radio should use overlay color $hoverOverlayColor over $hoverColor',
);
});
......@@ -1336,4 +1333,179 @@ void main() {
expect(feedback.hapticCount, 0);
});
});
group('Material 2', () {
// These tests are only relevant for Material 2. Once Material 2
// support is deprecated and the APIs are removed, these tests
// can be deleted.
testWidgets('RadioListTile respects overlayColor in active/pressed/hovered states', (WidgetTester tester) async {
tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
const Color fillColor = Color(0xFF000000);
const Color activePressedOverlayColor = Color(0xFF000001);
const Color inactivePressedOverlayColor = Color(0xFF000002);
const Color hoverOverlayColor = Color(0xFF000003);
const Color hoverColor = Color(0xFF000005);
Color? getOverlayColor(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) {
if (states.contains(MaterialState.selected)) {
return activePressedOverlayColor;
}
return inactivePressedOverlayColor;
}
if (states.contains(MaterialState.hovered)) {
return hoverOverlayColor;
}
return null;
}
Widget buildRadio({bool active = false, bool useOverlay = true}) {
return MaterialApp(
theme: ThemeData(useMaterial3: false),
home: Material(
child: RadioListTile<bool>(
value: active,
groupValue: true,
onChanged: (_) { },
fillColor: const MaterialStatePropertyAll<Color>(fillColor),
overlayColor: useOverlay ? MaterialStateProperty.resolveWith(getOverlayColor) : null,
hoverColor: hoverColor,
),
),
);
}
await tester.pumpWidget(buildRadio(useOverlay: false));
await tester.press(find.byType(Radio<bool>));
await tester.pumpAndSettle();
expect(
Material.of(tester.element(find.byType(Radio<bool>))),
paints
..circle()
..circle(
color: fillColor.withAlpha(kRadialReactionAlpha),
radius: 20,
),
reason: 'Default inactive pressed Radio should have overlay color from fillColor',
);
await tester.pumpWidget(buildRadio(active: true, useOverlay: false));
await tester.press(find.byType(Radio<bool>));
await tester.pumpAndSettle();
expect(
Material.of(tester.element(find.byType(Radio<bool>))),
paints
..circle()
..circle(
color: fillColor.withAlpha(kRadialReactionAlpha),
radius: 20,
),
reason: 'Default active pressed Radio should have overlay color from fillColor',
);
await tester.pumpWidget(buildRadio());
await tester.press(find.byType(Radio<bool>));
await tester.pumpAndSettle();
expect(
Material.of(tester.element(find.byType(Radio<bool>))),
paints
..circle()
..circle(
color: inactivePressedOverlayColor,
radius: 20,
),
reason: 'Inactive pressed Radio should have overlay color: $inactivePressedOverlayColor',
);
// Start hovering.
final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
await gesture.addPointer();
await gesture.moveTo(tester.getCenter(find.byType(Radio<bool>)));
await tester.pumpAndSettle();
await tester.pumpWidget(Container());
await tester.pumpWidget(buildRadio());
await tester.pumpAndSettle();
expect(
Material.of(tester.element(find.byType(Radio<bool>))),
paints
..circle(
color: hoverOverlayColor,
radius: 20,
),
reason: 'Hovered Radio should use overlay color $hoverOverlayColor over $hoverColor',
);
});
testWidgets('RadioListTile respects hoverColor', (WidgetTester tester) async {
tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
int? groupValue = 0;
final Color? hoverColor = Colors.orange[500];
Widget buildApp({bool enabled = true}) {
return wrap(
child: MaterialApp(
theme: ThemeData(useMaterial3: false),
home: StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
return RadioListTile<int>(
value: 0,
onChanged: enabled ? (int? newValue) {
setState(() {
groupValue = newValue;
});
} : null,
hoverColor: hoverColor,
groupValue: groupValue,
);
}),
),
);
}
await tester.pumpWidget(buildApp());
await tester.pump();
await tester.pumpAndSettle();
expect(
Material.of(tester.element(find.byType(Radio<int>))),
paints
..rect()
..circle(color:const Color(0xff2196f3))
..circle(color:const Color(0xff2196f3)),
);
// Start hovering
final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
await gesture.moveTo(tester.getCenter(find.byType(Radio<int>)));
// Check when the radio isn't selected.
groupValue = 1;
await tester.pumpWidget(buildApp());
await tester.pump();
await tester.pumpAndSettle();
expect(
Material.of(tester.element(find.byType(Radio<int>))),
paints
..rect()
..circle(color: hoverColor)
);
// Check when the radio is selected, but disabled.
groupValue = 0;
await tester.pumpWidget(buildApp(enabled: false));
await tester.pump();
await tester.pumpAndSettle();
expect(
Material.of(tester.element(find.byType(Radio<int>))),
paints
..rect()
..circle(color:const Color(0x61000000))
..circle(color:const Color(0x61000000)),
);
});
});
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment