flutter/dev/integration_tests/flutter_gallery/test/smoke_test.dart
Michael Goderbauer 6f09064e78
Stand-alone widget tree with multiple render trees to enable multi-view rendering (#125003)
This change enables Flutter to generate multiple Scenes to be rendered into separate FlutterViews from a single widget tree. Each Scene is described by a separate render tree, which are all associated with the single widget tree.

This PR implements the framework-side mechanisms to describe the content to be rendered into multiple views. Separate engine-side changes are necessary to provide these views to the framework and to draw the framework-generated Scene into them.

## Summary of changes

The details of this change are described in [flutter.dev/go/multiple-views](https://flutter.dev/go/multiple-views). Below is a high-level summary organized by layers.

### Rendering layer changes

* The `RendererBinding` no longer owns a single `renderView`. In fact, it doesn't OWN any `RenderView`s at all anymore. Instead, it offers an API (`addRenderView`/`removeRenderView`) to add and remove `RenderView`s that then will be MANAGED by the binding. The `RenderView` itself is now owned by a higher-level abstraction (e.g. the `RawView` Element of the widgets layer, see below), who is also in charge of adding it to the binding. When added, the binding will interact with the `RenderView` to produce a frame (e.g. by calling `compositeFrame` on it) and to perform hit tests for incoming pointer events. Multiple `RenderView`s can be added to the binding (typically one per `FlutterView`) to produce multiple Scenes.
* Instead of owning a single `pipelineOwner`, the `RendererBinding` now owns the root of the `PipelineOwner` tree (exposed as `rootPipelineOwner` on the binding). Each `PipelineOwner` in that tree (except for the root) typically manages its own render tree typically rooted in one of the `RenderView`s mentioned in the previous bullet. During frame production, the binding will instruct each `PipelineOwner` of that tree to flush layout, paint, semantics etc. A higher-level abstraction (e.g. the widgets layer, see below) is in charge of adding `PipelineOwner`s to this tree.
* Backwards compatibility: The old `renderView` and `pipelineOwner` properties of the `RendererBinding` are retained, but marked as deprecated. Care has been taken to keep their original behavior for the deprecation period, i.e. if you just call `runApp`, the render tree bootstrapped by this call is rooted in the deprecated `RendererBinding.renderView` and managed by the deprecated `RendererBinding.pipelineOwner`.

### Widgets layer changes

* The `WidgetsBinding` no longer attaches the widget tree to an existing render tree. Instead, it bootstraps a stand-alone widget tree that is not backed by a render tree. For this, `RenderObjectToWidgetAdapter` has been replaced by `RootWidget`.
* Multiple render trees can be bootstrapped and attached to the widget tree with the help of the `View` widget, which internally is backed by a `RawView` widget. Configured with a `FlutterView` to render into, the `RawView` creates a new `PipelineOwner` and a new `RenderView` for the new render tree. It adds the new `RenderView` to the `RendererBinding` and its `PipelineOwner` to the pipeline owner tree.
* The `View` widget can only appear in certain well-defined locations in the widget tree since it bootstraps a new render tree and does not insert a `RenderObject` into an ancestor. However, almost all Elements expect that their children insert `RenderObject`s, otherwise they will not function properly. To produce a good error message when the `View` widget is used in an illegal location, the `debugMustInsertRenderObjectIntoSlot` method has been added to Element, where a child can ask whether a given slot must insert a RenderObject into its ancestor or not. In practice, the `View` widget can be used as a child of the `RootWidget`, inside the `view` slot of the `ViewAnchor` (see below) and inside a `ViewCollection` (see below). In those locations, the `View` widget may be wrapped in other non-RenderObjectWidgets (e.g. InheritedWidgets).
* The new `ViewAnchor` can be used to create a side-view inside a parent `View`. The `child` of the `ViewAnchor` widget renders into the parent `View` as usual, but the `view` slot can take on another `View` widget, which has access to all inherited widgets above the `ViewAnchor`. Metaphorically speaking, the view is anchored to the location of the `ViewAnchor` in the widget tree.
* The new `ViewCollection` widget allows for multiple sibling views as it takes a list of `View`s as children. It can be used in all the places that accept a `View` widget.

## Google3

As of July 5, 2023 this change passed a TAP global presubmit (TGP) in google3: tap/OCL:544707016:BASE:545809771:1688597935864:e43dd651

## Note to reviewers

This change is big (sorry). I suggest focusing the initial review on the changes inside of `packages/flutter` first. The majority of the changes describe above are implemented in (listed in suggested review order):

* `rendering/binding.dart`
* `widgets/binding.dart`
* `widgets/view.dart`
* `widgets/framework.dart`

All other changes included in the PR are basically the fallout of what's implemented in those files. Also note that a lot of the lines added in this PR are documentation and tests.

I am also very happy to walk reviewers through the code in person or via video call, if that is helpful.

I appreciate any feedback.

## Feedback to address before submitting ("TODO")
2023-07-17 16:14:08 +00:00

193 lines
8.1 KiB
Dart

// Copyright 2014 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.
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_gallery/gallery/app.dart' show GalleryApp;
import 'package:flutter_gallery/gallery/demos.dart';
import 'package:flutter_test/flutter_test.dart';
// This title is visible on the home and demo category pages. It's
// not visible when the demos are running.
const String kGalleryTitle = 'Flutter gallery';
// All of the classes printed by debugDump etc, must have toString()
// values approved by verityToStringOutput().
int toStringErrors = 0;
// There are 3 places where the Gallery demos are traversed.
// 1- In widget tests such as dev/integration_tests/flutter_gallery/test/smoke_test.dart
// 2- In driver tests such as dev/integration_tests/flutter_gallery/test_driver/transitions_perf_test.dart
// 3- In on-device instrumentation tests such as dev/integration_tests/flutter_gallery/test/live_smoketest.dart
//
// If you change navigation behavior in the Gallery or in the framework, make
// sure all 3 are covered.
void reportToStringError(String name, String route, int lineNumber, List<String> lines, String message) {
// If you're on line 12, then it has index 11.
// If you want 1 line before and 1 line after, then you want lines with index 10, 11, and 12.
// That's (lineNumber-1)-margin .. (lineNumber-1)+margin, or lineNumber-(margin+1) .. lineNumber+(margin-1)
const int margin = 5;
final int firstLine = math.max(0, lineNumber - margin);
final int lastLine = math.min(lines.length, lineNumber + margin);
print('$name : $route : line $lineNumber of ${lines.length} : $message; nearby lines were:\n ${lines.sublist(firstLine, lastLine).join("\n ")}');
toStringErrors += 1;
}
void verifyToStringOutput(String name, String route, String testString) {
int lineNumber = 0;
final List<String> lines = testString.split('\n');
if (!testString.endsWith('\n')) {
reportToStringError(name, route, lines.length, lines, 'does not end with a line feed');
}
for (final String line in lines) {
lineNumber += 1;
if (line == '' && lineNumber != lines.length) {
reportToStringError(name, route, lineNumber, lines, 'found empty line');
} else if (line.contains('Instance of ')) {
reportToStringError(name, route, lineNumber, lines, 'found a class that does not have its own toString');
} else if (line.endsWith(' ')) {
reportToStringError(name, route, lineNumber, lines, 'found a line with trailing whitespace');
}
}
}
Future<void> smokeDemo(WidgetTester tester, GalleryDemo demo) async {
// Don't use pumpUntilNoTransientCallbacks in this function, because some of
// the smoketests have infinitely-running animations (e.g. the progress
// indicators demo).
await tester.tap(find.text(demo.title));
await tester.pump(); // Launch the demo.
await tester.pump(const Duration(milliseconds: 400)); // Wait until the demo has opened.
expect(find.text(kGalleryTitle), findsNothing);
// Leave the demo on the screen briefly for manual testing.
await tester.pump(const Duration(milliseconds: 400));
// Scroll the demo around a bit.
await tester.flingFrom(const Offset(400.0, 300.0), const Offset(-100.0, 0.0), 500.0);
await tester.flingFrom(const Offset(400.0, 300.0), const Offset(0.0, -100.0), 500.0);
await tester.pump();
await tester.pump(const Duration(milliseconds: 50));
await tester.pump(const Duration(milliseconds: 200));
await tester.pump(const Duration(milliseconds: 400));
// Verify that the dumps are pretty.
final String routeName = demo.routeName;
verifyToStringOutput('debugDumpApp', routeName, WidgetsBinding.instance.rootElement!.toStringDeep());
verifyToStringOutput('debugDumpRenderTree', routeName, RendererBinding.instance.renderViews.single.toStringDeep());
verifyToStringOutput('debugDumpLayerTree', routeName, RendererBinding.instance.renderViews.single.debugLayer?.toStringDeep() ?? '');
verifyToStringOutput('debugDumpFocusTree', routeName, WidgetsBinding.instance.focusManager.toStringDeep());
// Scroll the demo around a bit more.
await tester.flingFrom(const Offset(400.0, 300.0), const Offset(0.0, 400.0), 1000.0);
await tester.pump();
await tester.pump(const Duration(milliseconds: 400));
await tester.flingFrom(const Offset(400.0, 300.0), const Offset(-200.0, 0.0), 500.0);
await tester.pump();
await tester.pump(const Duration(milliseconds: 50));
await tester.pump(const Duration(milliseconds: 200));
await tester.pump(const Duration(milliseconds: 400));
await tester.flingFrom(const Offset(400.0, 300.0), const Offset(100.0, 0.0), 500.0);
await tester.pump();
await tester.pump(const Duration(milliseconds: 400));
// Go back
await tester.pageBack();
await tester.pumpAndSettle();
await tester.pump(); // Start the pop "back" operation.
await tester.pump(); // Complete the willPop() Future.
await tester.pump(const Duration(milliseconds: 400)); // Wait until it has finished.
}
Future<void> smokeOptionsPage(WidgetTester tester) async {
final Finder showOptionsPageButton = find.byTooltip('Toggle options page');
// Show the options page
await tester.tap(showOptionsPageButton);
await tester.pumpAndSettle();
// Switch to the dark theme: first menu button, choose 'Dark'
await tester.tap(find.byIcon(Icons.arrow_drop_down).first);
await tester.pumpAndSettle();
await tester.tap(find.text('Dark'));
await tester.pumpAndSettle();
// Switch back to system theme setting: first menu button, choose 'System Default'
await tester.tap(find.byIcon(Icons.arrow_drop_down).first);
await tester.pumpAndSettle();
await tester.tap(find.text('System Default').at(1), warnIfMissed: false); // https://github.com/flutter/flutter/issues/82908
await tester.pumpAndSettle();
// Switch text direction: first switch
await tester.tap(find.byType(Switch).first);
await tester.pumpAndSettle();
// Switch back to system text direction: first switch control again
await tester.tap(find.byType(Switch).first);
await tester.pumpAndSettle();
// Scroll the 'Send feedback' item into view
await tester.drag(find.text('Theme'), const Offset(0.0, -1000.0));
await tester.pumpAndSettle();
await tester.tap(find.text('Send feedback'));
await tester.pumpAndSettle();
// Close the options page
expect(showOptionsPageButton, findsOneWidget);
await tester.tap(showOptionsPageButton);
await tester.pumpAndSettle();
}
Future<void> smokeGallery(WidgetTester tester) async {
bool sendFeedbackButtonPressed = false;
await tester.pumpWidget(
GalleryApp(
testMode: true,
onSendFeedback: () {
sendFeedbackButtonPressed = true; // see smokeOptionsPage()
},
),
);
await tester.pump(); // see https://github.com/flutter/flutter/issues/1865
await tester.pump(); // triggers a frame
expect(find.text(kGalleryTitle), findsOneWidget);
for (final GalleryDemoCategory category in kAllGalleryDemoCategories) {
await Scrollable.ensureVisible(tester.element(find.text(category.name)), alignment: 0.5);
await tester.tap(find.text(category.name));
await tester.pumpAndSettle();
for (final GalleryDemo demo in kGalleryCategoryToDemos[category]!) {
await Scrollable.ensureVisible(tester.element(find.text(demo.title)));
await smokeDemo(tester, demo);
tester.binding.debugAssertNoTransientCallbacks('A transient callback was still active after running $demo');
}
await tester.pageBack();
await tester.pumpAndSettle();
}
expect(toStringErrors, 0);
await smokeOptionsPage(tester);
expect(sendFeedbackButtonPressed, true);
}
void main() {
testWidgets(
'Flutter Gallery app smoke test',
smokeGallery,
variant: const TargetPlatformVariant(<TargetPlatform>{ TargetPlatform.android, TargetPlatform.macOS }),
);
testWidgets('Flutter Gallery app smoke test with semantics', (WidgetTester tester) async {
final SemanticsHandle handle = SemanticsBinding.instance.ensureSemantics();
await smokeGallery(tester);
handle.dispose();
});
}