Skip to content

Commit

Permalink
[dynamic_layouts] Refactor flaky test (#4681)
Browse files Browse the repository at this point in the history
This refactors a test for the example of a wrapped layout in dynamic_tests. This test had become brittle to small text changes because it would check the precise layout offset of the text.

It was patched in these cases in #4513 and #4677 to address tiny text variations across platforms and material 2/3 defaults. This refactor changes the test to check the layout offset of the parent Container of the text, which should not have these subtle variations.

Fixes flutter/flutter#132321
  • Loading branch information
Piinks authored Aug 11, 2023
1 parent 0bf0878 commit ea49db5
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 45 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ class WrapExample extends StatelessWidget {
),
body: DynamicGridView.builder(
gridDelegate: const SliverGridDelegateWithWrapping(),
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
height: index.isEven ? index % 7 * 50 + 150 : index % 4 * 50 + 100,
Expand Down
112 changes: 67 additions & 45 deletions packages/dynamic_layouts/example/test/wrap_example_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,59 +7,81 @@ import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
void withinTolerance(Offset actual, Offset expected, double tolerance) {
testWidgets('Check wrap layout', (WidgetTester tester) async {
const MaterialApp app = MaterialApp(
home: WrapExample(),
);
await tester.pumpWidget(app);
await tester.pumpAndSettle();

// Validate which children are laid out.
for (int i = 0; i <= 12; i++) {
expect(find.text('Index $i'), findsOneWidget);
}
for (int i = 13; i < 19; i++) {
expect(find.text('Index $i'), findsNothing);
}

// Validate with the position of the box, not the text.
Finder getContainer(String text) {
return find.ancestor(
of: find.text(text),
matching: find.byType(Container),
);
}

// Validate layout position.
expect(
actual.dx,
(double actual) => actual <= expected.dx + tolerance,
reason: '${actual.dx} <= ${expected.dx + tolerance}',
tester.getTopLeft(getContainer('Index 0')),
const Offset(0.0, 56.0),
);
expect(
actual.dx,
(double actual) => actual >= expected.dx - tolerance,
reason: '${actual.dx} >= ${expected.dx - tolerance}',
tester.getTopLeft(getContainer('Index 1')),
const Offset(40.0, 56.0),
);
expect(
actual.dy,
(double actual) => actual <= expected.dy + tolerance,
reason: '${actual.dy} <= ${expected.dy + tolerance}',
tester.getTopLeft(getContainer('Index 2')),
const Offset(190.0, 56.0),
);
expect(
actual.dy,
(double actual) => actual >= expected.dy - tolerance,
reason: '${actual.dy} >= ${expected.dy - tolerance}',
tester.getTopLeft(getContainer('Index 3')),
const Offset(270.0, 56.0),
);
}

testWidgets('Check that the children are layed out.',
(WidgetTester tester) async {
const MaterialApp app = MaterialApp(
home: WrapExample(),
expect(
tester.getTopLeft(getContainer('Index 4')),
const Offset(370.0, 56.0),
);
expect(
tester.getTopLeft(getContainer('Index 5')),
const Offset(490.0, 56.0),
);
expect(
tester.getTopLeft(getContainer('Index 6')),
const Offset(690.0, 56.0),
);
expect(
tester.getTopLeft(getContainer('Index 7')),
const Offset(0.0, 506.0),
);
expect(
tester.getTopLeft(getContainer('Index 8')),
const Offset(150.0, 506.0),
);
expect(
tester.getTopLeft(getContainer('Index 9')),
const Offset(250.0, 506.0),
);
expect(
tester.getTopLeft(getContainer('Index 10')),
const Offset(350.0, 506.0),
);
expect(
tester.getTopLeft(getContainer('Index 11')),
const Offset(390.0, 506.0),
);
expect(
tester.getTopLeft(getContainer('Index 12')),
const Offset(590.0, 506.0),
);
await tester.pumpWidget(app);
await tester.pumpAndSettle();

// See if there are children layed out.
expect(find.text('Index 0'), findsOneWidget);
expect(find.text('Index 1'), findsOneWidget);
expect(find.text('Index 2'), findsOneWidget);
expect(find.text('Index 3'), findsOneWidget);
expect(find.text('Index 4'), findsOneWidget);

// Material 3 changes the expected layout positioning.
final bool usesMaterial3 = (app.theme ?? ThemeData.light()).useMaterial3;
final Offset offset0 =
usesMaterial3 ? const Offset(0.0, 91.0) : const Offset(0.0, 103.0);
final Offset offset1 =
usesMaterial3 ? const Offset(65.0, 121.0) : const Offset(66.0, 124.0);
final Offset offset3 =
usesMaterial3 ? const Offset(270.0, 171.0) : const Offset(271.0, 174.0);
final Offset offset4 =
usesMaterial3 ? const Offset(380.0, 221.0) : const Offset(381.0, 224.0);

// See if they are in expected position.
withinTolerance(tester.getTopLeft(find.text('Index 0')), offset0, 0.2);
withinTolerance(tester.getTopLeft(find.text('Index 1')), offset1, 0.2);
withinTolerance(tester.getTopLeft(find.text('Index 3')), offset3, 0.2);
withinTolerance(tester.getTopLeft(find.text('Index 4')), offset4, 0.2);
});
}

0 comments on commit ea49db5

Please sign in to comment.