I use flutter_driver to do my integration tests in Flutter. On some screens text on buttons gives overflow errors. I want to create a test which can show that overflow happened. So when I will run all integration tests on a bunch of virtual/real devices I can see that UI is not positioned correctly.
1
-
Why integration test specifically? This can be tested using widget tests.Rémi Rousselet– Rémi Rousselet2019-05-02 09:50:05 +00:00Commented May 2, 2019 at 9:50
Add a comment
|
2 Answers
There is no need for integration tests for that. Widget tests will do.
Since Widget testing runs with asserts enabled, calling tester.pumpWidget with a widget that would overflow will throw an exception and therefore make a failing test.
For example, the following test will fail:
testWidgets('overflow', (tester) async {
await tester.pumpWidget(Row(
textDirection: TextDirection.ltr,
children: <Widget>[
// too big to fit in the default size of the row
Container(width: 99999),
],
));
});
Note that the screen size for widget testing can be customized. See How to test Flutter widgets on different screen sizes?
Alternatively, we can wrap our tested widget into a Container like so:
await tester.pumpWidget(Container(
alignment: Alignment.center,
width: <my screen widget>,
height: <my screen height>,
child: <the widget which I want to test overflow on>,
);
1 Comment
TSR
Using widget testing to catch Renderflex overflows is not working properly because we need to customize the screen size of the tester but the text size are not matching the real device text size. Please check this stackoverflow.com/questions/62447898/… and github.com/flutter/flutter/issues/59755
I have published 3 helper functions on my package called hrk_flutter_test_batteries.
They are as follows:
You can use them as follows:
- First import the package
flutter pub add dev:hrk_flutter_test_batteries
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:hrk_flutter_test_batteries/hrk_flutter_test_batteries.dart';
void main() {
group('getOverflowRenderFlexList()', () {
const overflowFlexKey = Key('overflow_flex');
final overflowFlexFinder = find.byKey(overflowFlexKey);
// Doesn't work. See test/error/disable_overflow_error_test.dart
// setUp(() {
// disableOverflowError();
// });
// Doesn't work. See test/error/disable_overflow_error_test.dart
// setUpAll(() {
// disableOverflowError();
// });
// setUpAll(() {
// configureHrkLogging();
// packageLogger.level = Level.ALL;
// });
testWidgets('1', (tester) async {
disableOverflowError();
tester.view.physicalSize = Size(100, tester.view.physicalSize.height);
addTearDown(() => tester.view.resetPhysicalSize());
await tester.pumpWidget(const Row(
textDirection: TextDirection.ltr,
children: <Widget>[
SizedBox(width: 110),
],
));
final overflowRenderFlexList = tester.getOverflowRenderFlexList();
expect(overflowRenderFlexList.length, 1);
});
testWidgets('0', (tester) async {
disableOverflowError();
tester.view.physicalSize = Size(100, tester.view.physicalSize.height);
addTearDown(() => tester.view.resetPhysicalSize());
await tester.pumpWidget(const Row(
key: overflowFlexKey,
textDirection: TextDirection.ltr,
children: <Widget>[
SizedBox(width: 10),
],
));
final overflowRenderFlexList = tester.getOverflowRenderFlexList();
expect(overflowRenderFlexList.length, 0);
tester.expectNoOverflow();
});
testWidgets('2', (tester) async {
disableOverflowError();
tester.view.physicalSize = Size(100, tester.view.physicalSize.height);
addTearDown(() => tester.view.resetPhysicalSize());
await tester.pumpWidget(const Column(
children: [
Row(
textDirection: TextDirection.ltr,
children: <Widget>[
SizedBox(width: 110),
],
),
Row(
textDirection: TextDirection.ltr,
children: <Widget>[
SizedBox(width: 110),
],
),
],
));
final overflowRenderFlexList = tester.getOverflowRenderFlexList();
expect(overflowRenderFlexList.length, 2);
});
testWidgets('of, 2', (tester) async {
disableOverflowError();
tester.view.physicalSize = Size(100, tester.view.physicalSize.height);
addTearDown(() => tester.view.resetPhysicalSize());
await tester.pumpWidget(const Column(
children: [
Row(
textDirection: TextDirection.ltr,
children: <Widget>[
SizedBox(width: 110),
],
),
Column(
key: overflowFlexKey,
children: [
Row(
textDirection: TextDirection.ltr,
children: <Widget>[
SizedBox(width: 110),
],
),
Row(
textDirection: TextDirection.ltr,
children: <Widget>[
SizedBox(width: 110),
],
),
],
),
],
));
final overflowRenderFlexList = tester.getOverflowRenderFlexList(
of: overflowFlexFinder,
);
expect(overflowRenderFlexList.length, 2);
});
testWidgets('of, matchRoot, 1', (tester) async {
disableOverflowError();
tester.view.physicalSize = Size(100, tester.view.physicalSize.height);
addTearDown(() => tester.view.resetPhysicalSize());
await tester.pumpWidget(const Column(
children: [
Row(
textDirection: TextDirection.ltr,
children: <Widget>[
SizedBox(width: 110),
],
),
Row(
key: overflowFlexKey,
textDirection: TextDirection.ltr,
children: <Widget>[
SizedBox(width: 110),
],
),
],
));
final overflowRenderFlexList = tester.getOverflowRenderFlexList(
of: overflowFlexFinder,
matchRoot: true,
);
expect(overflowRenderFlexList.length, 1);
});
});
}
