Integration test shows white screen when setting tester.view.physicalSize, but tests pass functionally
#167726
Comments
|
Thanks for the detailed report @Bilawal-Mehfooz-Malik |
Thanks for your reponse @darshankawar I tried the workaround, but it is not producing the expected results. Instead of using However, the actual UI I am seeing appears to be the larger screen layout simply scaled down: Here is the attached video of what i am getting: In my code, I display different UIs based on the screen size determined by Widget build(BuildContext context) {
final size = MediaQuery.sizeOf(context);
final width = size.width;
final height = size.height;
final screenType = ScreenType.determine(width: width, height: height);
// Auto-close bottom sheet on large screens
if (screenType == ScreenType.desktop || screenType == ScreenType.tablet) {
if (_isBottomSheetVisible) {
_controller?.close();
}
}
return Scaffold(
key: _scaffoldKey,
body: SafeArea(
child: switch (screenType) {
ScreenType.smallHeight => ResponsiveScrollable(
padding: const EdgeInsets.all(Sizes.p16),
child: StartupContent(
isLargeScreen: false,
onGetStarted: _openBottomSheet,
),
),
ScreenType.mobile => Padding(
padding: const EdgeInsets.all(Sizes.p16),
child: StartupContent(
useSpacer: true,
isLargeScreen: false,
onGetStarted: _openBottomSheet,
),
),
ScreenType.tablet => ResponsiveCenter(
showCard: true,
paddingInsideCard: const EdgeInsets.all(Sizes.p24),
child: ResponsiveTwoColumnLayout(
spacing: Sizes.p16,
rowLayoutOnly: true,
startContent: StartupContent(
isLargeScreen: true,
onGetStarted: _openBottomSheet,
),
endContent: const GetLocationContent(isLargeScreen: true),
),
),
ScreenType.desktop => ResponsiveCenter(
showCard: true,
paddingInsideCard: const EdgeInsets.all(Sizes.p48),
child: ResponsiveTwoColumnLayout(
spacing: Sizes.p32,
rowLayoutOnly: true,
startContent: StartupContent(
isLargeScreen: true,
onGetStarted: _openBottomSheet,
),
endContent: const GetLocationContent(),
),
),
},
),
);
}
}Here’s how the screen type is determined: class Breakpoint {
static const double desktop = 840;
static const double tablet = 600;
static const double mobile = 300;
static const double smallHeight = 450;
}
enum ScreenType {
desktop(Breakpoint.desktop),
tablet(Breakpoint.tablet),
mobile(Breakpoint.mobile),
smallHeight(Breakpoint.smallHeight);
const ScreenType(this.value);
final double value;
factory ScreenType.determine({
required double width,
required double height,
}) {
if (height < Breakpoint.smallHeight) {
return ScreenType.smallHeight;
} else if (width >= Breakpoint.desktop) {
return ScreenType.desktop;
} else if (width >= Breakpoint.tablet) {
return ScreenType.tablet;
} else {
return ScreenType.mobile;
}
}
}Both of the above screenshots in start are golden images generated by this golden test setup: @isTest
Future<Robot> _setupGoldenTestEnvironment(
WidgetTester tester,
Size size,
) async {
final r = Robot(tester);
await r.golden.setSurfaceSize(size);
await r.golden.loadRobotoFont();
await r.golden.loadMaterialIconFont();
await r.pumpMyApp();
await r.golden.precacheImages();
return r;
}
void main() {
final kMobileSize = Size(350, 600);
final kDesktopSize = Size(1000, 1000);
group('Golden - Startup Screen', () {
testWidgets('Get Current Location (Mobile)', (tester) async {
final r = await _setupGoldenTestEnvironment(tester, kMobileSize);
await expectLater(
find.byType(MyApp),
matchesGoldenFile('startup/Mobile/1_startup_screen.png'),
);
await r.startupRobot.tapGetStartedButton();
r.startupRobot.expectModalBottomSheet();
await expectLater(
find.byType(MyApp),
matchesGoldenFile('startup/Mobile/2_bottom_sheet_opened.png'),
);
await r.startupRobot.tapGetCurrentButton();
await expectLater(
find.byType(MyApp),
matchesGoldenFile('startup/Mobile/3_saved_current_location.png'),
);
await r.startupRobot.tapSaveButton();
await expectLater(
find.byType(MyApp),
matchesGoldenFile('startup/Mobile/4_categories_list_screen.png'),
);
}, tags: ['golden']);
testWidgets('Get Current Location (Desktop)', (tester) async {
final r = await _setupGoldenTestEnvironment(tester, kDesktopSize);
await expectLater(
find.byType(MyApp),
matchesGoldenFile('startup/Desktop/1_startup_screen.png'),
);
await r.startupRobot.tapGetCurrentButton();
await expectLater(
find.byType(MyApp),
matchesGoldenFile('startup/Desktop/2_saved_current_location.png'),
);
await r.startupRobot.tapSaveButton();
await expectLater(
find.byType(MyApp),
matchesGoldenFile('startup/Desktop/3_categories_list_screen.png'),
);
}, tags: ['golden']);
});
} |
|
Thanks for the details. I think the root-cause seems to be same as discussed in the linked issue. |
Sorry for delayed response. I created a github repo of the project without third party packages. You can clone it from here https://github.com/Bilawal-Mehfooz-Malik/test The test is in integration_test/app_flow_test.dart Looking forward for your reponse |
|
Thanks for the update. Using the repo, I was able to replicate the reported behavior, although as discussed in earlier thread, this is very closely related to #149209, the root-cause seems to be #149209 (comment), but the workaround mentioned #149209 (comment) doesn't seem to work properly for small screen UI. |
Steps to reproduce
flutter_test(and potentially theintegration_testpackage).setUpor within the test), set a specific screen size usingtester.view.physicalSize = Size(width, height);andtester.view.devicePixelRatio = 1.0;. Remember to reset these inaddTearDown.tester.pumpWidget()or a helper function.tester.pumpAndSettle()after pumping the initial widget and after interactions.find.byKey,find.byType) and tapping them (tester.tap).flutter test integration_test/my_test.dart).Expected results
The integration test should run, interact with the widgets, and the visual output should show the app's UI rendering correctly for the specified screen size. Widgets should be visible.
Actual results
The integration test passes functionally:
expect(finder, findsOneWidget)passes).tester.tap(finder)executes without error, and subsequent expectations based on the tap's effect might pass).tester.pumpAndSettle()completes without throwing errors related to timeouts (usually).tester.view.physicalSize = Size(width, height);andtester.view.devicePixelRatio = 1.0;it succeed and shows integration test running with content.Code sample
Code sample
Screenshots or Video
Screenshots / Video demonstration
bandicam.2025-04-24.20-13-00-417.mp4
Logs
Logs
Flutter Doctor output
Doctor output
The text was updated successfully, but these errors were encountered: