Merge pull request #33 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.0
+
+Add support for configuring safe area (to simulate a device notch) and platform brightness (light/dark mode) on a multiScreenGolden device.
+
 ## 0.2.3
 
 Breaking: Removed Future return type from `testGoldens`.

packages/golden_toolkit/lib/src/device.dart

@@ -7,6 +7,7 @@
 /// ***************************************************
 
 import 'dart:ui';
+import 'package:flutter/widgets.dart';
 import 'package:meta/meta.dart';
 
 /// This [Device] is a configuration for golden test. Can be provided for [multiScreenGolden]
@@ -17,6 +18,8 @@ class Device {
     this.devicePixelRatio = 1.0,
     @required this.name,
     this.textScale = 1.0,
+    this.brightness = Brightness.light,
+    this.safeArea = const EdgeInsets.all(0),
   });
 
   /// [phone] one of the smallest phone screens
@@ -43,18 +46,28 @@ class Device {
   /// [textScale] specify custom text scale
   final double textScale;
 
+  /// [brightness] specify platform brightness
+  final Brightness brightness;
+
+  /// [safeArea] specify insets to define a safe area
+  final EdgeInsets safeArea;
+
   /// [copyWith] convenience function for [Device] modification
   Device copyWith({
     Size size,
     double devicePixelRatio,
     String name,
     double textScale,
+    Brightness brightness,
+    EdgeInsets safeArea,
   }) {
     return Device(
       size: size ?? this.size,
       devicePixelRatio: devicePixelRatio ?? this.devicePixelRatio,
       name: name ?? this.name,
       textScale: textScale ?? this.textScale,
+      brightness: brightness ?? this.brightness,
+      safeArea: safeArea ?? this.safeArea,
     );
   }
 }

packages/golden_toolkit/lib/src/multi_screen_golden.dart

@@ -61,6 +61,13 @@ Future<void> multiScreenGolden(
     tester.binding.window.physicalSizeTestValue = device.size;
     tester.binding.window.devicePixelRatioTestValue = device.devicePixelRatio;
     tester.binding.window.textScaleFactorTestValue = device.textScale;
+    tester.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,
@@ -71,3 +78,24 @@ Future<void> multiScreenGolden(
     );
   }
 }
+
+class _FakeWindowPadding implements WindowPadding {
+  const _FakeWindowPadding({
+    this.bottom = 0,
+    this.left = 0,
+    this.right = 0,
+    this.top = 0,
+  });
+
+  @override
+  final double bottom;
+
+  @override
+  final double left;
+
+  @override
+  final double right;
+
+  @override
+  final double top;
+}

packages/golden_toolkit/pubspec.yaml

@@ -1,6 +1,6 @@
 name: golden_toolkit
 description: Common patterns for screenshot-based widget testing using Goldens.
-version: 0.2.3
+version: 0.3.0
 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

@@ -8,6 +8,7 @@
 ///
 
 import 'dart:ui';
+import 'package:flutter/widgets.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:golden_toolkit/golden_toolkit.dart';
 
@@ -20,6 +21,8 @@ void main() {
       expect(copied.name, equals(Device.phone.name));
       expect(copied.size, equals(Device.phone.size));
       expect(copied.textScale, equals(Device.phone.textScale));
+      expect(copied.brightness, equals(Device.phone.brightness));
+      expect(copied.safeArea, equals(Device.phone.safeArea));
     });
 
     test('copy with parameters', () {
@@ -28,11 +31,15 @@ void main() {
         devicePixelRatio: 2.0,
         name: 'foo',
         size: const Size(100, 100),
+        brightness: Brightness.dark,
+        safeArea: const EdgeInsets.symmetric(vertical: 16),
       );
       expect(copied.devicePixelRatio, equals(2.0));
       expect(copied.name, equals('foo'));
       expect(copied.size, equals(const Size(100, 100)));
       expect(copied.textScale, equals(3.0));
+      expect(copied.brightness, equals(Brightness.dark));
+      expect(copied.safeArea, equals(const EdgeInsets.symmetric(vertical: 16)));
     });
   });
 }

packages/golden_toolkit/test/goldens/brightness.dark.png

@@ -53,6 +53,61 @@ Future<void> main() async {
           skip: !Platform.isMacOS,
         );
       });
+
+      testGoldens('Safe Area test', (tester) async {
+        await tester.pumpWidgetBuilder(
+          Container(
+              color: Colors.white,
+              child: SafeArea(child: Container(color: Colors.blue))),
+        );
+        await multiScreenGolden(
+          tester,
+          'safe_area',
+          devices: [
+            const Device(
+              name: 'no_safe_area',
+              size: Size(200, 200),
+            ),
+            const Device(
+              name: 'safe_area',
+              size: Size(200, 200),
+              safeArea: EdgeInsets.fromLTRB(5, 10, 15, 20),
+            )
+          ],
+          skip: !Platform.isMacOS,
+        );
+      });
+
+      testGoldens('Platform Brightness Test', (tester) async {
+        await tester.pumpWidgetBuilder(
+          Builder(
+            builder: (context) => Container(
+              color:
+                  MediaQuery.of(context).platformBrightness == Brightness.dark
+                      ? Colors.grey
+                      : Colors.white,
+              child: Text(MediaQuery.of(context).platformBrightness.toString()),
+            ),
+          ),
+        );
+        await multiScreenGolden(
+          tester,
+          'brightness',
+          devices: [
+            const Device(
+              name: 'light',
+              size: Size(200, 200),
+              brightness: Brightness.light,
+            ),
+            const Device(
+              name: 'dark',
+              size: Size(200, 200),
+              brightness: Brightness.dark,
+            )
+          ],
+          skip: !Platform.isMacOS,
+        );
+      });
     });
   });
 }