[two_dimensional_scrollables] Post 3.16 stable tech debt clean up (#5671)

Fixes https://github.com/flutter/flutter/issues/136933 Fixes https://github.com/flutter/flutter/issues/132782 This cleans up some TODOs in the TableView and its tests after the stable release - removes an assertion on the builder delegate bounds now that the super class handles the assertions - refactors all of the golden file tests using PaintPattern, removing all of the golden files and enabling web testing
2025-06-26 20:36:06 +08:00 · 2023-12-14 09:03:50 -06:00
parent 1151191c8c
commit 77579ba740
7 changed files with 240 additions and 104 deletions
--- a/packages/two_dimensional_scrollables/dart_test.yaml
+++ b/packages/two_dimensional_scrollables/dart_test.yaml
@ -1,3 +0,0 @@
-# TODO(Piinks): Web cannot support temp golden files, re-enable once mock_canvas
-# makes it to stable. See
-test_on: vm
--- a/packages/two_dimensional_scrollables/lib/src/table_view/table_delegate.dart
+++ b/packages/two_dimensional_scrollables/lib/src/table_view/table_delegate.dart
@ -150,8 +150,6 @@ class TableCellBuilderDelegate extends TwoDimensionalChildBuilderDelegate
  int get columnCount => maxXIndex! + 1;
  set columnCount(int value) {
    assert(pinnedColumnCount <= value);
-    // TODO(Piinks): remove once this assertion is added in the super class
-    assert(value >= -1);
    maxXIndex = value - 1;
  }

@ -180,8 +178,6 @@ class TableCellBuilderDelegate extends TwoDimensionalChildBuilderDelegate
  int get rowCount => maxYIndex! + 1;
  set rowCount(int value) {
    assert(pinnedRowCount <= value);
-    // TODO(Piinks): remove once this assertion is added in the super class
-    assert(value >= -1);
    maxYIndex = value - 1;
  }

--- a/packages/two_dimensional_scrollables/test/table_view/goldens/reversed.pinned.painting.png
+++ b/packages/two_dimensional_scrollables/test/table_view/goldens/reversed.pinned.painting.png
--- a/packages/two_dimensional_scrollables/test/table_view/goldens/single-reversed.pinned.painting.png
+++ b/packages/two_dimensional_scrollables/test/table_view/goldens/single-reversed.pinned.painting.png
--- a/packages/two_dimensional_scrollables/test/table_view/goldens/tableSpanDecoration.defaultMainAxis.png
+++ b/packages/two_dimensional_scrollables/test/table_view/goldens/tableSpanDecoration.defaultMainAxis.png
--- a/packages/two_dimensional_scrollables/test/table_view/goldens/tableSpanDecoration.horizontalMainAxis.png
+++ b/packages/two_dimensional_scrollables/test/table_view/goldens/tableSpanDecoration.horizontalMainAxis.png
--- a/packages/two_dimensional_scrollables/test/table_view/table_test.dart
+++ b/packages/two_dimensional_scrollables/test/table_view/table_test.dart
@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

-import 'dart:io' show Platform;
-
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
@ -40,14 +38,6 @@ TableSpan getMouseTrackingSpan(
  );
 }

-final bool masterChannel = !Platform.environment.containsKey('CHANNEL') ||
-    Platform.environment['CHANNEL'] == 'master';
-
-// TODO(Piinks): Remove once painting can be validated by mock_canvas in
-//  flutter_test, and re-enable web tests in https://github.com/flutter/flutter/issues/132782
-// Regenerate goldens on a Mac computer by running `flutter test --update-goldens`
-final bool runGoldens = Platform.isMacOS && masterChannel;
-
 void main() {
  group('TableView.builder', () {
    test('creates correct delegate', () {
@ -1253,11 +1243,6 @@ void main() {

    testWidgets('paints decorations in correct order',
        (WidgetTester tester) async {
-      // TODO(Piinks): Rewrite this to remove golden files from this repo when
-      //  mock_canvas is public - https://github.com/flutter/flutter/pull/131631
-      //  * foreground, background, and precedence per mainAxis
-      //  * Break out a separate test for padding and radius decorations to
-      //    validate paint rect calls
      TableView tableView = TableView.builder(
        rowCount: 2,
        columnCount: 2,
@ -1304,17 +1289,123 @@ void main() {
            height: 200,
            width: 200,
            color: Colors.grey.withOpacity(0.5),
-            child: const Center(child: FlutterLogo()),
          );
        },
      );

      await tester.pumpWidget(MaterialApp(home: tableView));
      await tester.pumpAndSettle();
-      await expectLater(
-        find.byType(TableView),
-        matchesGoldenFile('goldens/tableSpanDecoration.defaultMainAxis.png'),
-        skip: !runGoldens,
+      expect(
+        find.byType(TableViewport),
+        paints
+          // background row
+          ..rrect(
+            rrect: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(0.0, 210.0, 410.0, 410.0),
+              const Radius.circular(30.0),
+            ),
+            color: const Color(0xff2196f3),
+          )
+          // background column
+          ..rrect(
+            rrect: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(0.0, 0.0, 210.0, 410.0),
+              const Radius.circular(30.0),
+            ),
+            color: const Color(0xfff44336),
+          )
+          // child at 0,0
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 0.0, 200.0, 200.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 0,1
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 210.0, 200.0, 410.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 1,0
+          ..rect(
+            rect: const Rect.fromLTRB(210.0, 0.0, 410.0, 200.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 1,1
+          ..rect(
+            rect: const Rect.fromLTRB(210.0, 210.0, 410.0, 410.0),
+            color: const Color(0x809e9e9e),
+          )
+          // foreground row border (1)
+          ..drrect(
+            outer: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(0.0, 0.0, 410.0, 200.0),
+              const Radius.circular(30.0),
+            ),
+            inner: RRect.fromLTRBAndCorners(
+              0.0,
+              3.0,
+              410.0,
+              200.0,
+              topLeft: const Radius.elliptical(30.0, 27.0),
+              topRight: const Radius.elliptical(30.0, 27.0),
+              bottomRight: const Radius.circular(30.0),
+              bottomLeft: const Radius.circular(30.0),
+            ),
+            color: const Color(0xff4caf50),
+          )
+          // foreground row border (2)
+          ..drrect(
+            outer: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(0.0, 200.0, 410.0, 410.0),
+              const Radius.circular(30.0),
+            ),
+            inner: RRect.fromLTRBAndCorners(
+              0.0,
+              203.0,
+              410.0,
+              410.0,
+              topLeft: const Radius.elliptical(30.0, 27.0),
+              topRight: const Radius.elliptical(30.0, 27.0),
+              bottomRight: const Radius.circular(30.0),
+              bottomLeft: const Radius.circular(30.0),
+            ),
+            color: const Color(0xff4caf50),
+          )
+          // foreground column border (1)
+          ..drrect(
+            outer: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(0.0, 0.0, 200.0, 410.0),
+              const Radius.circular(10.0),
+            ),
+            inner: RRect.fromLTRBAndCorners(
+              0.0,
+              0.0,
+              197.0,
+              410.0,
+              topLeft: const Radius.circular(10.0),
+              topRight: const Radius.elliptical(7.0, 10.0),
+              bottomRight: const Radius.elliptical(7.0, 10.0),
+              bottomLeft: const Radius.circular(10.0),
+            ),
+            color: const Color(0xffff9800),
+          )
+          // foreground column border (2)
+          ..drrect(
+            outer: RRect.fromRectAndRadius(
+              const Rect.fromLTRB(210.0, 0.0, 410.0, 410.0),
+              const Radius.circular(10.0),
+            ),
+            inner: RRect.fromLTRBAndCorners(
+              210.0,
+              0.0,
+              407.0,
+              410.0,
+              topLeft: const Radius.circular(10.0),
+              topRight: const Radius.elliptical(7.0, 10.0),
+              bottomRight: const Radius.elliptical(7.0, 10.0),
+              bottomLeft: const Radius.circular(10.0),
+            ),
+            color: const Color(0xffff9800),
+          ),
      );

      // Switch main axis
@ -1351,27 +1442,90 @@ void main() {
          ),
        ),
        cellBuilder: (_, TableVicinity vicinity) {
-          return const SizedBox.square(
-            dimension: 200,
-            child: Center(child: FlutterLogo()),
+          return Container(
+            height: 200,
+            width: 200,
+            color: Colors.grey.withOpacity(0.5),
          );
        },
      );

      await tester.pumpWidget(MaterialApp(home: tableView));
      await tester.pumpAndSettle();
-      await expectLater(
-        find.byType(TableView),
-        matchesGoldenFile('goldens/tableSpanDecoration.horizontalMainAxis.png'),
-        skip: !runGoldens,
+      expect(
+        find.byType(TableViewport),
+        paints
+          // background column goes first this time
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 0.0, 200.0, 400.0),
+            color: const Color(0xfff44336),
+          )
+          // background row
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 200.0, 400.0, 400.0),
+            color: const Color(0xff2196f3),
+          )
+          // child at 0,0
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 0.0, 200.0, 200.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 1,0
+          ..rect(
+            rect: const Rect.fromLTRB(0.0, 200.0, 200.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 0,1
+          ..rect(
+            rect: const Rect.fromLTRB(200.0, 0.0, 400.0, 200.0),
+            color: const Color(0x809e9e9e),
+          )
+          // child at 1,1
+          ..rect(
+            rect: const Rect.fromLTRB(200.0, 200.0, 400.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          // foreground column border (1)
+          ..path(
+            includes: <Offset>[
+              const Offset(200.0, 0.0),
+              const Offset(200.0, 200.0),
+              const Offset(200.0, 400.0),
+            ],
+            color: const Color(0xffff9800),
+          )
+          // foreground column border (2)
+          ..path(
+            includes: <Offset>[
+              const Offset(400.0, 0.0),
+              const Offset(400.0, 200.0),
+              const Offset(400.0, 400.0),
+            ],
+            color: const Color(0xffff9800),
+          )
+          // foreground row border
+          ..path(
+            includes: <Offset>[
+              Offset.zero,
+              const Offset(200.0, 0.0),
+              const Offset(400.0, 0.0),
+            ],
+            color: const Color(0xff4caf50),
+          )
+          // foreground row border(2)
+          ..path(
+            includes: <Offset>[
+              const Offset(0.0, 200.0),
+              const Offset(200.0, 200.0),
+              const Offset(400.0, 200.0),
+            ],
+            color: const Color(0xff4caf50),
+          ),
      );
    });

-    testWidgets('paint rects are correct when reversed and pinned',
+    testWidgets('child paint rects are correct when reversed and pinned',
        (WidgetTester tester) async {
-      // TODO(Piinks): Rewrite this to remove golden files from this repo when
-      //  mock_canvas is public - https://github.com/flutter/flutter/pull/131631
-      //  * foreground, background, and precedence per mainAxis
      // Both reversed - Regression test for https://github.com/flutter/flutter/issues/135386
      TableView tableView = TableView.builder(
        verticalDetails: const ScrollableDetails.vertical(reverse: true),
@ -1380,48 +1534,43 @@ void main() {
        pinnedRowCount: 1,
        columnCount: 2,
        pinnedColumnCount: 1,
-        columnBuilder: (int index) => TableSpan(
-          extent: const FixedTableSpanExtent(200.0),
-          foregroundDecoration: const TableSpanDecoration(
-            border: TableSpanBorder(
-              trailing: BorderSide(
-                color: Colors.orange,
-                width: 3,
-              ),
-            ),
-          ),
-          backgroundDecoration: TableSpanDecoration(
-            color: index.isEven ? Colors.red : null,
-          ),
-        ),
-        rowBuilder: (int index) => TableSpan(
-          extent: const FixedTableSpanExtent(200.0),
-          foregroundDecoration: const TableSpanDecoration(
-            border: TableSpanBorder(
-              leading: BorderSide(
-                color: Colors.green,
-                width: 3,
-              ),
-            ),
-          ),
-          backgroundDecoration: TableSpanDecoration(
-            color: index.isOdd ? Colors.blue : null,
+        columnBuilder: (int index) => const TableSpan(
+          extent: FixedTableSpanExtent(200.0),
        ),
+        rowBuilder: (int index) => const TableSpan(
+          extent: FixedTableSpanExtent(200.0),
        ),
        cellBuilder: (_, TableVicinity vicinity) {
-          return const SizedBox.square(
-            dimension: 200,
-            child: Center(child: FlutterLogo()),
+          return Container(
+            height: 200,
+            width: 200,
+            color: Colors.grey.withOpacity(0.5),
          );
        },
      );

      await tester.pumpWidget(MaterialApp(home: tableView));
      await tester.pumpAndSettle();
-      await expectLater(
-        find.byType(TableView),
-        matchesGoldenFile('goldens/reversed.pinned.painting.png'),
-        skip: !runGoldens,
+      // All children are painted in the right place
+      expect(
+        find.byType(TableViewport),
+        paints
+          ..rect(
+            rect: const Rect.fromLTRB(400.0, 200.0, 600.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(600.0, 200.0, 800.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(400.0, 400.0, 600.0, 600.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(600.0, 400.0, 800.0, 600.0),
+            color: const Color(0x809e9e9e),
+          ),
      );

      // Only one axis reversed - Regression test for https://github.com/flutter/flutter/issues/136897
@ -1431,48 +1580,42 @@ void main() {
        pinnedRowCount: 1,
        columnCount: 2,
        pinnedColumnCount: 1,
-        columnBuilder: (int index) => TableSpan(
-          extent: const FixedTableSpanExtent(200.0),
-          foregroundDecoration: const TableSpanDecoration(
-            border: TableSpanBorder(
-              trailing: BorderSide(
-                color: Colors.orange,
-                width: 3,
-              ),
-            ),
-          ),
-          backgroundDecoration: TableSpanDecoration(
-            color: index.isEven ? Colors.red : null,
-          ),
-        ),
-        rowBuilder: (int index) => TableSpan(
-          extent: const FixedTableSpanExtent(200.0),
-          foregroundDecoration: const TableSpanDecoration(
-            border: TableSpanBorder(
-              leading: BorderSide(
-                color: Colors.green,
-                width: 3,
-              ),
-            ),
-          ),
-          backgroundDecoration: TableSpanDecoration(
-            color: index.isOdd ? Colors.blue : null,
+        columnBuilder: (int index) => const TableSpan(
+          extent: FixedTableSpanExtent(200.0),
        ),
+        rowBuilder: (int index) => const TableSpan(
+          extent: FixedTableSpanExtent(200.0),
        ),
        cellBuilder: (_, TableVicinity vicinity) {
-          return const SizedBox.square(
-            dimension: 200,
-            child: Center(child: FlutterLogo()),
+          return Container(
+            height: 200,
+            width: 200,
+            color: Colors.grey.withOpacity(0.5),
          );
        },
      );

      await tester.pumpWidget(MaterialApp(home: tableView));
      await tester.pumpAndSettle();
-      await expectLater(
-        find.byType(TableView),
-        matchesGoldenFile('goldens/single-reversed.pinned.painting.png'),
-        skip: !runGoldens,
+      expect(
+        find.byType(TableViewport),
+        paints
+          ..rect(
+            rect: const Rect.fromLTRB(400.0, 200.0, 600.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(600.0, 200.0, 800.0, 400.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(400.0, 0.0, 600.0, 200.0),
+            color: const Color(0x809e9e9e),
+          )
+          ..rect(
+            rect: const Rect.fromLTRB(600.0, 0.0, 800.0, 200.0),
+            color: const Color(0x809e9e9e),
+          ),
      );
    });