[ci][web] Run tests in canvaskit mode. (#6879)

Configures the flutter/packages CI to run web tests using the `canvaskit` renderer, which is the new default for web apps. It also does some minor changes: * Skips tests on the web for `package:palette_generator` (cleanup issue created below) * Makes the `palette_generator` example run on the web. This was used to manually verify that the package still works as expected with canvaskit. * Tweaks the README of the `pointer_interceptor` example apps, so they match what's happening in there. ## Issues * Fixes flutter/flutter#143543 Co-authored-by: David Iglesias <ditman@gmail.com>
flutter · Jul 11, 2024 · da04812 · da04812
1 parent 0ae6dda
commit da04812
Show file tree

Hide file tree

Showing 17 changed files with 146 additions and 36 deletions.
diff --git a/packages/palette_generator/CHANGELOG.md b/packages/palette_generator/CHANGELOG.md
@@ -1,5 +1,6 @@
-## NEXT
+## 0.3.3+4
 
+* Makes the example app compatible with the `web`.
 * Updates minimum supported SDK version to Flutter 3.16/Dart 3.2.
 
 ## 0.3.3+3

diff --git a/packages/palette_generator/dart_test.yaml b/packages/palette_generator/dart_test.yaml
@@ -0,0 +1,2 @@
+# TODO(dit): Reenable web tests and remove this file, https://github.com/flutter/flutter/issues/151498
+test_on: vm
diff --git a/packages/palette_generator/example/lib/main.dart b/packages/palette_generator/example/lib/main.dart
@@ -275,17 +275,20 @@ class PaletteSwatch extends StatelessWidget {
               fallbackHeight: 20.0,
               color: Color(0xff404040),
             )
-          : Container(
-              decoration: BoxDecoration(
-                  color: color,
-                  border: Border.all(
-                    color: _kPlaceholderColor,
-                    style: colorDistance < 0.2
-                        ? BorderStyle.solid
-                        : BorderStyle.none,
-                  )),
-              width: 34.0,
-              height: 20.0,
+          : Tooltip(
+              message: color!.toRGB(),
+              child: Container(
+                decoration: BoxDecoration(
+                    color: color,
+                    border: Border.all(
+                      color: _kPlaceholderColor,
+                      style: colorDistance < 0.2
+                          ? BorderStyle.solid
+                          : BorderStyle.none,
+                    )),
+                width: 34.0,
+                height: 20.0,
+              ),
             ),
     );
 
@@ -304,3 +307,18 @@ class PaletteSwatch extends StatelessWidget {
     return swatch;
   }
 }
+
+/// Converts a [Color] into a #RRGGBB string.
+extension on Color {
+  String toRGB() {
+    // In the example all alphas are 255, so no need to show it.
+    return '#${red.toHex()}${green.toHex()}${blue.toHex()}';
+  }
+}
+
+/// Converts an [int] to a uppercase hexadecimal string of at least [minDigits] length.
+extension on int {
+  String toHex([int minDigits = 2]) {
+    return toRadixString(16).toUpperCase().padLeft(minDigits, '0');
+  }
+}
diff --git a/packages/palette_generator/example/web/favicon.png b/packages/palette_generator/example/web/favicon.png
diff --git a/packages/palette_generator/example/web/icons/Icon-192.png b/packages/palette_generator/example/web/icons/Icon-192.png
diff --git a/packages/palette_generator/example/web/icons/Icon-512.png b/packages/palette_generator/example/web/icons/Icon-512.png
diff --git a/packages/palette_generator/example/web/icons/Icon-maskable-192.png b/packages/palette_generator/example/web/icons/Icon-maskable-192.png
diff --git a/packages/palette_generator/example/web/icons/Icon-maskable-512.png b/packages/palette_generator/example/web/icons/Icon-maskable-512.png
diff --git a/packages/palette_generator/example/web/index.html b/packages/palette_generator/example/web/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- Copyright 2013 The Flutter Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file. -->
+<html>
+<head>
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="Flutter Palette Generator example app.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="example">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>Image Colors</title>
+  <link rel="manifest" href="manifest.json">
+</head>
+<body>
+  <script src="flutter_bootstrap.js" async></script>
+</body>
+</html>
diff --git a/packages/palette_generator/example/web/manifest.json b/packages/palette_generator/example/web/manifest.json
@@ -0,0 +1,35 @@
+{
+    "name": "Flutter Palette Generator example app",
+    "short_name": "Palette Generator Example",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A demonstration of the Palette Generator Flutter package.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}
diff --git a/packages/palette_generator/pubspec.yaml b/packages/palette_generator/pubspec.yaml
@@ -2,7 +2,7 @@ name: palette_generator
 description: Flutter package for generating palette colors from a source image.
 repository: https://github.com/flutter/packages/tree/main/packages/palette_generator
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+palette_generator%22
-version: 0.3.3+3
+version: 0.3.3+4
 
 environment:
   sdk: ^3.2.0

diff --git a/packages/pointer_interceptor/pointer_interceptor/example/README.md b/packages/pointer_interceptor/pointer_interceptor/example/README.md
@@ -4,14 +4,11 @@ An example for the PointerInterceptor widget.
 
 ## Getting Started
 
-`flutter run -d chrome` to run the sample. You can tweak some code in the `lib/main.dart`, but be careful, changes there can break integration tests!
+Use `flutter run` to run the sample.
 
-## Running tests
+## Tests
 
-`flutter drive --target integration_test/widget_test.dart --driver test_driver/integration_test.dart --show-web-server-device -d web-server --web-renderer=html`
+Per-platform tests live in their respective implementation packages:
 
-The command above will run the integration tests for this package.
-
-Make sure that you have `chromedriver` running in port `4444`.
-
-Read more on: [flutter.dev > Docs > Testing & debugging > Integration testing](https://docs.flutter.dev/testing/integration-tests).
+* **Web**: See [`package:pointer_interceptor_web`](https://github.com/flutter/packages/tree/main/packages/pointer_interceptor/pointer_interceptor_web)
+* **iOS**: See [`package:pointer_interceptor_ios`](https://github.com/flutter/packages/tree/main/packages/pointer_interceptor/pointer_interceptor_ios)
diff --git a/packages/pointer_interceptor/pointer_interceptor_web/example/README.md b/packages/pointer_interceptor/pointer_interceptor_web/example/README.md
@@ -7,3 +7,32 @@ package.
 
 Unless you are making changes to this implementation package, this example is
 very unlikely to be relevant.
+
+## Getting Started
+
+`flutter run -d chrome` to run the sample. You can tweak some code in the `lib/main.dart`, but be careful, changes there can break integration tests!
+
+## Running tests
+
+You may use the [Flutter Plugin Tools](https://github.com/flutter/packages/blob/main/script/tool/README.md)
+to run the integration tests of this package.
+
+See [How to Run Dart Integration Tests](https://github.com/flutter/packages/blob/main/script/tool/README.md#run-dart-integration-tests)
+for the latest documentation.
+
+### Web-specific options
+
+Use the following options to build and drive the integration examples on the web:
+
+* `--web` as platform
+* `--packages pointer_interceptor_web` as package
+* `--run-chromedriver` to start a `chromedriver` session from `drive-examples`.
+
+### Chromedriver
+
+**Make sure that you have `chromedriver` in your `$PATH`.**
+
+You may download the appropriate version of `chromedriver` for your OS and
+Chrome version from the
+[Chrome for Testing availability](https://googlechromelabs.github.io/chrome-for-testing/)
+website.
diff --git a/script/tool/lib/src/dart_test_command.dart b/script/tool/lib/src/dart_test_command.dart
@@ -108,8 +108,8 @@ class DartTestCommand extends PackageLoopingCommand {
       platform = 'chrome';
     }
 
-    // All the web tests assume the html renderer currently.
-    final String? webRenderer = (platform == 'chrome') ? 'html' : null;
+    // All the web tests assume the canvaskit renderer currently.
+    final String? webRenderer = (platform == 'chrome') ? 'canvaskit' : null;
     bool passed;
     if (package.requiresFlutter()) {
       passed = await _runFlutterTests(package,

diff --git a/script/tool/lib/src/drive_examples_command.dart b/script/tool/lib/src/drive_examples_command.dart
@@ -119,7 +119,7 @@ class DriveExamplesCommand extends PackageLoopingCommand {
           'web-server',
           '--web-port=7357',
           '--browser-name=chrome',
-          '--web-renderer=html',
+          '--web-renderer=canvaskit',
           if (platform.environment.containsKey('CHROME_EXECUTABLE'))
             '--chrome-binary=${platform.environment['CHROME_EXECUTABLE']}',
         ],

diff --git a/script/tool/test/dart_test_command_test.dart b/script/tool/test/dart_test_command_test.dart
@@ -331,7 +331,7 @@ test_on: vm && browser
                 'test',
                 '--color',
                 '--platform=chrome',
-                '--web-renderer=html'
+                '--web-renderer=canvaskit',
               ],
               package.path),
         ]),
@@ -360,7 +360,7 @@ test_on: vm && browser
                 'test',
                 '--color',
                 '--platform=chrome',
-                '--web-renderer=html'
+                '--web-renderer=canvaskit',
               ],
               plugin.path),
         ]),
@@ -390,7 +390,7 @@ test_on: vm && browser
                 'test',
                 '--color',
                 '--platform=chrome',
-                '--web-renderer=html'
+                '--web-renderer=canvaskit',
               ],
               plugin.path),
         ]),
@@ -420,7 +420,7 @@ test_on: vm && browser
                 'test',
                 '--color',
                 '--platform=chrome',
-                '--web-renderer=html'
+                '--web-renderer=canvaskit',
               ],
               plugin.path),
         ]),
@@ -495,7 +495,7 @@ test_on: vm && browser
                 'test',
                 '--color',
                 '--platform=chrome',
-                '--web-renderer=html'
+                '--web-renderer=canvaskit',
               ],
               plugin.path),
         ]),

diff --git a/script/tool/test/drive_examples_command_test.dart b/script/tool/test/drive_examples_command_test.dart
@@ -678,7 +678,7 @@ void main() {
                   'web-server',
                   '--web-port=7357',
                   '--browser-name=chrome',
-                  '--web-renderer=html',
+                  '--web-renderer=canvaskit',
                   '--driver',
                   'test_driver/integration_test.dart',
                   '--target',
@@ -727,7 +727,7 @@ void main() {
                   'web-server',
                   '--web-port=7357',
                   '--browser-name=chrome',
-                  '--web-renderer=html',
+                  '--web-renderer=canvaskit',
                   '--driver',
                   'test_driver/integration_test.dart',
                   '--target',
@@ -779,7 +779,7 @@ void main() {
                   'web-server',
                   '--web-port=7357',
                   '--browser-name=chrome',
-                  '--web-renderer=html',
+                  '--web-renderer=canvaskit',
                   '--chrome-binary=/path/to/chrome',
                   '--driver',
                   'test_driver/integration_test.dart',
@@ -1226,7 +1226,7 @@ void main() {
                   'web-server',
                   '--web-port=7357',
                   '--browser-name=chrome',
-                  '--web-renderer=html',
+                  '--web-renderer=canvaskit',
                   '--driver',
                   'test_driver/integration_test.dart',
                   '--target',
@@ -1241,7 +1241,7 @@ void main() {
                   'web-server',
                   '--web-port=7357',
                   '--browser-name=chrome',
-                  '--web-renderer=html',
+                  '--web-renderer=canvaskit',
                   '--driver',
                   'test_driver/integration_test.dart',
                   '--target',
@@ -1339,7 +1339,7 @@ void main() {
                     'web-server',
                     '--web-port=7357',
                     '--browser-name=chrome',
-                    '--web-renderer=html',
+                    '--web-renderer=canvaskit',
                     '--driver',
                     'test_driver/integration_test.dart',
                     '--target',
@@ -1419,7 +1419,7 @@ void main() {
                     'web-server',
                     '--web-port=7357',
                     '--browser-name=chrome',
-                    '--web-renderer=html',
+                    '--web-renderer=canvaskit',
                     '--driver',
                     'test_driver/integration_test.dart',
                     '--target',