![]() 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") |
||
---|---|---|
.. | ||
android | ||
example | ||
integration_test_macos | ||
ios | ||
lib | ||
test | ||
test_fixes | ||
analysis_options.yaml | ||
CHANGELOG.md | ||
pubspec.yaml | ||
README.md |
integration_test
This package enables self-driving testing of Flutter code on devices and emulators.
It adapts flutter_test results into a format that is compatible with flutter drive
and native Android instrumentation testing.
Usage
Add a dependency on the integration_test
and flutter_test
package in the
dev_dependencies
section of pubspec.yaml
. For plugins, do this in the
pubspec.yaml
of the example app:
dev_dependencies:
integration_test:
sdk: flutter
flutter_test:
sdk: flutter
Create a integration_test/
directory for your package. In this directory,
create a <name>_test.dart
, using the following as a starting point to make
assertions.
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
void main() {
IntegrationTestWidgetsFlutterBinding.ensureInitialized();
testWidgets("failing test example", (WidgetTester tester) async {
expect(2 + 2, equals(5));
});
}
Driver Entrypoint
An accompanying driver script will be needed that can be shared across all
integration tests. Create a file named integration_test.dart
in the
test_driver/
directory with the following contents:
import 'package:integration_test/integration_test_driver.dart';
Future<void> main() => integrationDriver();
You can also use different driver scripts to customize the behavior of the app
under test. For example, FlutterDriver
can also be parameterized with
different options.
See the extended driver for an example.
Package Structure
Your package should have a structure that looks like this:
lib/
...
integration_test/
foo_test.dart
bar_test.dart
test/
# Other unit tests go here.
test_driver/
integration_test.dart
Using Flutter Driver to Run Tests
These tests can be launched with the flutter drive
command.
To run the integration_test/foo_test.dart
test with the
test_driver/integration_test.dart
driver, use the following command:
flutter drive \
--driver=test_driver/integration_test.dart \
--target=integration_test/foo_test.dart
Web
Make sure you have enabled web support then download and run the web driver in another process.
Use following command to execute the tests:
flutter drive \
--driver=test_driver/integration_test.dart \
--target=integration_test/foo_test.dart \
-d web-server
Screenshots
You can use integration_test
to take screenshots of the UI rendered on the mobile device or
Web browser at a specific time during the test.
This feature is currently supported on Android, iOS, and Web.
Android and iOS
integration_test/screenshot_test.dart
void main() {
final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized()
as IntegrationTestWidgetsFlutterBinding;
testWidgets('screenshot', (WidgetTester tester) async {
// Build the app.
app.main();
// This is required prior to taking the screenshot (Android only).
await binding.convertFlutterSurfaceToImage();
// Trigger a frame.
await tester.pumpAndSettle();
await binding.takeScreenshot('screenshot-1');
});
}
You can use a driver script to pull in the screenshot from the device. This way, you can store the images locally on your computer. On iOS, the screenshot will also be available in Xcode test results.
test_driver/integration_test.dart
import 'dart:io';
import 'package:integration_test/integration_test_driver_extended.dart';
Future<void> main() async {
await integrationDriver(
onScreenshot: (String screenshotName, List<int> screenshotBytes) async {
final File image = File('$screenshotName.png');
image.writeAsBytesSync(screenshotBytes);
// Return false if the screenshot is invalid.
return true;
},
);
}
Web
integration_test/screenshot_test.dart
void main() {
final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized()
as IntegrationTestWidgetsFlutterBinding;
testWidgets('screenshot', (WidgetTester tester) async {
// Build the app.
app.main();
// Trigger a frame.
await tester.pumpAndSettle();
await binding.takeScreenshot('screenshot-1');
});
}
Android Device Testing
Create an instrumentation test file in your application's
android/app/src/androidTest/java/com/example/myapp/ directory (replacing
com, example, and myapp with values from your app's package name). You can name
this test file MainActivityTest.java
or another name of your choice.
package com.example.myapp;
import androidx.test.rule.ActivityTestRule;
import dev.flutter.plugins.integration_test.FlutterTestRunner;
import org.junit.Rule;
import org.junit.runner.RunWith;
@RunWith(FlutterTestRunner.class)
public class MainActivityTest {
@Rule
public ActivityTestRule<MainActivity> rule = new ActivityTestRule<>(MainActivity.class, true, false);
}
Update your application's myapp/android/app/build.gradle to make sure it
uses androidx's version of AndroidJUnitRunner
and has androidx libraries as a
dependency.
android {
...
defaultConfig {
...
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
}
dependencies {
testImplementation 'junit:junit:4.12'
// https://developer.android.com/jetpack/androidx/releases/test/#1.2.0
androidTestImplementation 'androidx.test:runner:1.2.0'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}
To run integration_test/foo_test.dart
on a local Android device (emulated or
physical):
./gradlew app:connectedAndroidTest -Ptarget=`pwd`/../integration_test/foo_test.dart
Note:
To use --dart-define
with gradlew
you must base64
encode all parameters,
and pass them to gradle in a comma separated list:
./gradlew project:task -Pdart-defines="{base64(key=value)},[...]"
Firebase Test Lab
If this is your first time testing with Firebase Test Lab, you'll need to follow the guides in the Firebase test lab documentation to set up a project.
To run a test on Android devices using Firebase Test Lab, use gradle commands to build an
instrumentation test for Android, after creating androidTest
as suggested in the last section.
pushd android
# flutter build generates files in android/ for building the app
flutter build apk
./gradlew app:assembleAndroidTest
./gradlew app:assembleDebug -Ptarget=<path_to_test>.dart
popd
Upload the build apks Firebase Test Lab, making sure to replace <PATH_TO_KEY_FILE>, <PROJECT_NAME>, <RESULTS_BUCKET>, and <RESULTS_DIRECTORY> with your values.
gcloud auth activate-service-account --key-file=<PATH_TO_KEY_FILE>
gcloud --quiet config set project <PROJECT_NAME>
gcloud firebase test android run --type instrumentation \
--app build/app/outputs/apk/debug/app-debug.apk \
--test build/app/outputs/apk/androidTest/debug/app-debug-androidTest.apk\
--timeout 2m \
--results-bucket=<RESULTS_BUCKET> \
--results-dir=<RESULTS_DIRECTORY>
You can pass additional parameters on the command line, such as the devices you want to test on. See gcloud firebase test android run.
iOS Device Testing
Open ios/Runner.xcworkspace
in Xcode. Create a test target if you
do not already have one via File > New > Target...
and select Unit Testing Bundle
.
Change the Product Name
to RunnerTests
. Make sure Target to be Tested
is set to Runner
and language is set to Objective-C
.
Select Finish
.
Make sure that the iOS Deployment Target of RunnerTests
within the Build Settings section is the same as Runner
.
Add the new test target to ios/Podfile
by embedding in the existing Runner
target.
target 'Runner' do
# Do not change existing lines.
...
target 'RunnerTests' do
inherit! :search_paths
end
end
To build integration_test/foo_test.dart
from the command line, run:
flutter build ios --config-only integration_test/foo_test.dart
In Xcode, add a test file called RunnerTests.m
(or any name of your choice) to the new target and
replace the file:
@import XCTest;
@import integration_test;
INTEGRATION_TEST_IOS_RUNNER(RunnerTests)
Run Product > Test
to run the integration tests on your selected device.
To deploy it to Firebase Test Lab you can follow these steps:
Execute this script at the root of your Flutter app:
output="../build/ios_integ"
product="build/ios_integ/Build/Products"
dev_target="14.3"
# Pass --simulator if building for the simulator.
flutter build ios integration_test/foo_test.dart --release
pushd ios
xcodebuild build-for-testing \
-workspace Runner.xcworkspace \
-scheme Runner \
-xcconfig Flutter/Release.xcconfig \
-configuration Release \
-derivedDataPath \
$output -sdk iphoneos
popd
pushd $product
zip -r "ios_tests.zip" "Release-iphoneos" "Runner_iphoneos$dev_target-arm64.xctestrun"
popd
You can verify locally that your tests are successful by running the following command:
xcodebuild test-without-building \
-xctestrun "build/ios_integ/Build/Products/Runner_iphoneos14.3-arm64.xctestrun" \
-destination id=<YOUR_DEVICE_ID>
Once everything is ok, you can upload the resulting zip to Firebase Test Lab (change the model with your values):
gcloud firebase test ios run \
--test "build/ios_integ/Build/Products/ios_tests.zip" \
--device model=iphone11pro,version=14.1,locale=fr_FR,orientation=portrait