Merge pull request #35 from eBay/add-dark-mode-and-safe-area-support

Add dark mode and safe area support

Author: coreysprague

packages/golden_toolkit/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.3.1
+
+Resolve an issue where configuration performed on WidgetTester during multiScreenGolden could bleed over to other tests in the same file. Add additional convenience helpers for the Device class.
+
 ## 0.3.0
 
 Add support for configuring safe area (to simulate a device notch) and platform brightness (light/dark mode) on a multiScreenGolden device.

packages/golden_toolkit/lib/src/device.dart

@@ -25,6 +25,14 @@ class Device {
   /// [phone] one of the smallest phone screens
   static const Device phone = Device(name: 'phone', size: Size(375, 667));
 
+  /// [iphone11] matches specs of iphone11, but with lower DPI for performance
+  static const Device iphone11 = Device(
+    name: 'iphone11',
+    size: Size(414, 896),
+    devicePixelRatio: 1.0,
+    safeArea: EdgeInsets.only(top: 44, bottom: 34),
+  );
+
   /// [tabletLandscape] example of tablet that in landscape mode
   static const Device tabletLandscape =
       Device(name: 'tablet_landscape', size: Size(1366, 1024));
@@ -70,4 +78,16 @@ class Device {
       safeArea: safeArea ?? this.safeArea,
     );
   }
+
+  /// [dark] convenience method to copy the current device and apply dark theme
+  Device dark() {
+    return Device(
+      size: size,
+      devicePixelRatio: devicePixelRatio,
+      textScale: textScale,
+      brightness: Brightness.dark,
+      safeArea: safeArea,
+      name: '$name\_dark',
+    );
+  }
 }

packages/golden_toolkit/lib/src/multi_screen_golden.dart

@@ -55,27 +55,50 @@ Future<void> multiScreenGolden(
   bool skip = false,
 }) async {
   for (final device in devices) {
-    final size =
-        Size(device.size.width, overrideGoldenHeight ?? device.size.height);
-    await tester.binding.setSurfaceSize(size);
-    tester.binding.window.physicalSizeTestValue = device.size;
-    tester.binding.window.devicePixelRatioTestValue = device.devicePixelRatio;
-    tester.binding.window.textScaleFactorTestValue = device.textScale;
-    tester.binding.window.paddingTestValue = _FakeWindowPadding(
+    await tester._applyDeviceOverrides(
+      device,
+      overriddenHeight: overrideGoldenHeight,
+      operation: () async {
+        await deviceSetup(device, tester);
+        await screenMatchesGolden(
+          tester,
+          '$goldenFileName.${device.name}',
+          customPump: customPump,
+          skip: skip,
+          finder: finder,
+        );
+      },
+    );
+  }
+}
+
+extension on WidgetTester {
+  Future<void> _applyDeviceOverrides(
+    Device device, {
+    double overriddenHeight,
+    Future<void> Function() operation,
+  }) async {
+    await binding.setSurfaceSize(
+        Size(device.size.width, overriddenHeight ?? device.size.height));
+    binding.window.physicalSizeTestValue = device.size;
+    binding.window.devicePixelRatioTestValue = device.devicePixelRatio;
+    binding.window.textScaleFactorTestValue = device.textScale;
+    binding.window.paddingTestValue = _FakeWindowPadding(
       bottom: device.safeArea.bottom,
       left: device.safeArea.left,
       right: device.safeArea.right,
       top: device.safeArea.top,
     );
-    tester.binding.window.platformBrightnessTestValue = device.brightness;
-    await deviceSetup(device, tester);
-    await screenMatchesGolden(
-      tester,
-      '$goldenFileName.${device.name}',
-      customPump: customPump,
-      skip: skip,
-      finder: finder,
-    );
+    binding.window.platformBrightnessTestValue = device.brightness;
+
+    await operation();
+
+    binding.window.clearDevicePixelRatioTestValue();
+    binding.window.clearPlatformBrightnessTestValue();
+    binding.window.clearPaddingTestValue();
+    binding.window.clearTextScaleFactorTestValue();
+    binding.window.clearPhysicalSizeTestValue();
+    await binding.setSurfaceSize(null);
   }
 }
 

packages/golden_toolkit/pubspec.yaml

@@ -1,6 +1,6 @@
 name: golden_toolkit
 description: Common patterns for screenshot-based widget testing using Goldens.
-version: 0.3.0
+version: 0.3.1
 homepage: https://github.com/eBay/flutter_glove_box/
 repository: https://github.com/eBay/flutter_glove_box/tree/master/packages/golden_toolkit
 issue_tracker: https://github.com/eBay/flutter_glove_box/issues

packages/golden_toolkit/test/device_test.dart

@@ -41,5 +41,15 @@ void main() {
       expect(copied.brightness, equals(Brightness.dark));
       expect(copied.safeArea, equals(const EdgeInsets.symmetric(vertical: 16)));
     });
+
+    test('dark() helper', () {
+      final dark = Device.iphone11.dark();
+      expect(dark.devicePixelRatio, equals(Device.iphone11.devicePixelRatio));
+      expect(dark.name, equals('iphone11_dark'));
+      expect(dark.size, equals(Device.iphone11.size));
+      expect(dark.textScale, equals(Device.iphone11.textScale));
+      expect(dark.brightness, equals(Brightness.dark));
+      expect(dark.safeArea, equals(Device.iphone11.safeArea));
+    });
   });
 }

packages/golden_toolkit/test/goldens/empty.anything.png

@@ -108,6 +108,42 @@ Future<void> main() async {
           skip: !Platform.isMacOS,
         );
       });
+
+      testGoldens('Should restore window binding settings', (tester) async {
+        final size = tester.binding.createViewConfiguration().size;
+        final initialSize = tester.binding.window.physicalSize;
+        final initialBrightness = tester.binding.window.platformBrightness;
+        final initialDevicePixelRatio = tester.binding.window.devicePixelRatio;
+        final initialTextScaleFactor = tester.binding.window.textScaleFactor;
+        final initialViewInsets = tester.binding.window.padding;
+
+        await tester.pumpWidgetBuilder(Container());
+        await multiScreenGolden(
+          tester,
+          'empty',
+          devices: [
+            const Device(
+              name: 'anything',
+              size: Size(50, 75),
+              brightness: Brightness.light,
+              safeArea: EdgeInsets.all(4),
+              devicePixelRatio: 2.0,
+              textScale: 1.5,
+            )
+          ],
+          skip: !Platform.isMacOS,
+        );
+
+        expect(tester.binding.createViewConfiguration().size, equals(size));
+        expect(tester.binding.window.physicalSize, equals(initialSize));
+        expect(tester.binding.window.platformBrightness,
+            equals(initialBrightness));
+        expect(tester.binding.window.devicePixelRatio,
+            equals(initialDevicePixelRatio));
+        expect(tester.binding.window.textScaleFactor,
+            equals(initialTextScaleFactor));
+        expect(tester.binding.window.padding, equals(initialViewInsets));
+      });
     });
   });
 }