[material_ui] Enable localized time_picker_test cases - #12391
Conversation
There was a problem hiding this comment.
Code Review
This pull request adds regression and localization tests for the TimePicker widget, covering 24-hour Farsi formatting, centered separators in non-English locales, and spacing in locales using the 'a h:mm' pattern. It also updates the mediaQueryBoilerplate helper to support custom locales. Feedback recommends explicitly passing alwaysUse24HourFormat: true in the Farsi test to ensure robustness, and parameterizing the theme and golden file names in the separator alignment test to prevent test overwrites across different material types.
| await mediaQueryBoilerplate( | ||
| tester, | ||
| locale: const Locale('fa', 'IR'), | ||
| materialType: MaterialType.material3, | ||
| ); |
There was a problem hiding this comment.
The test is named 'Material3 - formats 24-hour numbers correctly in Farsi', but alwaysUse24HourFormat: true is not explicitly passed to mediaQueryBoilerplate. To ensure the test is robust and explicitly tests the 24-hour format regardless of any default locale settings, please pass alwaysUse24HourFormat: true.
await mediaQueryBoilerplate(
tester,
alwaysUse24HourFormat: true,
locale: const Locale('fa', 'IR'),
materialType: MaterialType.material3,
);There was a problem hiding this comment.
Valid suggestion, though I'm guessing the Farsi locale always uses 24-hours anyways? The test case as it is matches the original in flutter/flutter: https://github.com/flutter/flutter/blob/1abf8f42d372614c02ad78d1a00f3720f05af74c/packages/flutter/test/material/time_picker_test.dart#L239
| testWidgets( | ||
| 'TimePicker dialog displays centered separator between hour and minute inputs for non-english locale', | ||
| (WidgetTester tester) async { | ||
| tester.view.physicalSize = const Size(400, 800); | ||
| tester.view.devicePixelRatio = 1.0; | ||
| addTearDown(tester.view.reset); | ||
|
|
||
| await tester.pumpWidget( | ||
| const MaterialApp( | ||
| localizationsDelegates: GlobalMaterialLocalizations.delegates, | ||
| supportedLocales: <Locale>[Locale('en'), Locale('es')], | ||
| locale: Locale('es'), | ||
| home: Material( | ||
| child: TimePickerDialog( | ||
| initialTime: TimeOfDay(hour: 12, minute: 0), | ||
| initialEntryMode: TimePickerEntryMode.input, | ||
| ), | ||
| ), | ||
| ), | ||
| ); | ||
| await tester.pumpAndSettle(); | ||
|
|
||
| await expectLater( | ||
| find.byType(Dialog), | ||
| matchesGoldenFile('time_picker.dialog.separator.alignment.non_english_locale.png'), | ||
| ); | ||
| }, | ||
| ); |
There was a problem hiding this comment.
This test is defined inside the for (final MaterialType materialType in MaterialType.values) loop, meaning it runs twice (once for Material 2 and once for Material 3). However, it currently has two issues:
- It pumps a
MaterialAppwithout specifying atheme, so it always uses the default theme (Material 3) in both runs, leaving Material 2 untested. - Both runs use the exact same golden file name (
'time_picker.dialog.separator.alignment.non_english_locale.png'), which causes them to overwrite each other and can lead to flaky or incorrect test results.
To fix this, configure the MaterialApp's theme using materialType and parameterize the golden file name using ${materialType.name}.
testWidgets(
'TimePicker dialog displays centered separator between hour and minute inputs for non-english locale',
(WidgetTester tester) async {
tester.view.physicalSize = const Size(400, 800);
tester.view.devicePixelRatio = 1.0;
addTearDown(tester.view.reset);
await tester.pumpWidget(
MaterialApp(
theme: ThemeData(useMaterial3: materialType == MaterialType.material3),
localizationsDelegates: GlobalMaterialLocalizations.delegates,
supportedLocales: const <Locale>[Locale('en'), Locale('es')],
locale: const Locale('es'),
home: const Material(
child: TimePickerDialog(
initialTime: TimeOfDay(hour: 12, minute: 0),
initialEntryMode: TimePickerEntryMode.input,
),
),
),
);
await tester.pumpAndSettle();
await expectLater(
find.byType(Dialog),
matchesGoldenFile('${materialType.name}_time_picker.dialog.separator.alignment.non_english_locale.png'),
);
},
);There was a problem hiding this comment.
Again, seems like a valid suggestion but this matches the original test case: https://github.com/flutter/flutter/blob/1abf8f42d372614c02ad78d1a00f3720f05af74c/packages/flutter/test/material/time_picker_test.dart#L1538
Follow up to #12061, #12119
Port over the remaining
time_picker_testcases from flutter/flutter#184279 that were initially excluded in #12061 due to lack of localization support inmaterial_ui.Work towards flutter/flutter#182636 and flutter/flutter#188395
Pre-Review Checklist
[shared_preferences]///).If you need help, consider asking for advice on the #hackers-new channel on Discord.
Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the
gemini-code-assistbot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.Footnotes
Regular contributors who have demonstrated familiarity with the repository guidelines only need to comment if the PR is not auto-exempted by repo tooling. ↩ ↩2