Merge pull request #71 from eBay/update-formatting

Update formatting / changelog / docs / new version #

Author: coreysprague

.travis.yml

@@ -7,7 +7,7 @@ before_script:
 script:
   - cd packages/golden_toolkit
   - ../../flutter/bin/flutter analyze
-  - ../../flutter/bin/cache/dart-sdk/bin/dartfmt -n ./lib -l 120 --set-exit-if-changed
+  - ../../flutter/bin/cache/dart-sdk/bin/dartfmt -n ./lib --set-exit-if-changed
   - ../../flutter/bin/flutter test --coverage --coverage-path=lcov.info
   - cd example
   - ../../../flutter/bin/flutter analyze

packages/golden_toolkit/.vscode/settings.json

@@ -1,4 +1,5 @@
 {
 	"editor.insertSpaces": false,
-	"editor.wordWrapColumn": 120
+	"editor.wordWrapColumn": 80,
+	"dart.lineLength": 80
 }

packages/golden_toolkit/CHANGELOG.md

@@ -1,19 +1,27 @@
 # Changelog
 
+## 0.7.0
+
+Thanks to @moonytoes29 for the following enhancements:
+
+A new helper widget `DeviceBuilder` has been added. This works conceptually similar to `GoldenBuilder` but is used for displaying multiple device renderings of a widget in a single golden. This is an alternative to the existing `multiScreenGolden()` API which captures separate golden images for each device variation under test.
+
+To assist with usage of `DeviceBuilder`, there is a new helper API: `tester.pumpDeviceBuilder(builder)` which assists in easily pumping a DeviceBuilder widget in your tests. Check out the documentation for more details.
+
 ## 0.6.0
 
-Added the ability to configure the default set of devices to use for ```multiScreenGolden``` assertions globally.
+Added the ability to configure the default set of devices to use for `multiScreenGolden` assertions globally.
 
 For example:
-```GoldenToolkitConfiguration(defaultDevices: [Device.iphone11, Device.iphone11.dark()])```
+`GoldenToolkitConfiguration(defaultDevices: [Device.iphone11, Device.iphone11.dark()])`
 
-As part of this, the default parameter value has been removed from ```multiScreenGolden```.
+As part of this, the default parameter value has been removed from `multiScreenGolden`.
 
 There was also a minor breaking change in that the const constructor of GoldenToolkitConfiguration is no longer const.
 
 ## 0.5.1
 
-Improved the reliability of the default behavior for ```tester.waitForAssets()``` to handle additional cases.
+Improved the reliability of the default behavior for `tester.waitForAssets()` to handle additional cases.
 
 ## 0.5.0
 
@@ -23,7 +31,7 @@ A new mechanism has been added for ensuring that images have been decoded before
 
 This may be a breaking change for some consumers. If you run into issues, you can revert to the old behavior, by applying the following configuration:
 
-```GoldenToolkitConfiguration(primeAssets: legacyPrimeAssets);```
+`GoldenToolkitConfiguration(primeAssets: legacyPrimeAssets);`
 
 Additionally, you can provide your own implementation that extends the new default behavior:
 
@@ -48,26 +56,26 @@ GoldenToolkit.runWithConfiguration((){/* callback() */}, config: GoldenToolkitCo
 
 ### Added the ability to customize the generated filenames
 
-When using ```screenMatchesGolden``` or ```multiGoldenFile```, you can now supply your own functions for controlling the naming of the files. This can be done using the configuration API mentioned above.
+When using `screenMatchesGolden` or `multiGoldenFile`, you can now supply your own functions for controlling the naming of the files. This can be done using the configuration API mentioned above.
 
 ```dart
 GoldenToolkit.runWithConfiguration((){ /* callback() */}, config: GoldenToolkitConfiguration(fileNameFactory: (filename) => '' /*output filename*/));
 ```
 
 There are two methods that can be overridden:
 
-* ```fileNameFactory``` is used for screenMatchesGolden
-* ```deviceFileNameFactory``` is used for multiScreenGolden
+- `fileNameFactory` is used for screenMatchesGolden
+- `deviceFileNameFactory` is used for multiScreenGolden
 
 Future releases will likely consolidate these APIs.
 
 Thanks to @christian-muertz for this enhancement.
 
 ### Added additional utility functions for preparing for goldens
 
-Extracted out some public extension methods that were previously private implementation details of ```multiScreenGolden``` & ```screenMatchesGolden```
+Extracted out some public extension methods that were previously private implementation details of `multiScreenGolden` & `screenMatchesGolden`
 
-Added the following extensions. These can be used with any vanilla golden assertions and do not require ```multiScreenGolden```, ```screenMatchesGolden```, or ```GoldenBuilder```.
+Added the following extensions. These can be used with any vanilla golden assertions and do not require `multiScreenGolden`, `screenMatchesGolden`, or `GoldenBuilder`.
 
 ```dart
 // configures the simulated device to mirror the supplied device configuration (dimensions, pixel density, safe area, etc)
@@ -95,7 +103,7 @@ A few API / parameters were marked as deprecated and will be removed in future r
 
 ### Configuration API
 
-Added a configuration API so that you can control the behavior of skipping golden assertions in a single location, rather than at each call to ```screenMatchesGolden``` or ```multiScreenGolden```.
+Added a configuration API so that you can control the behavior of skipping golden assertions in a single location, rather than at each call to `screenMatchesGolden` or `multiScreenGolden`.
 
 You can now call:
 
@@ -109,7 +117,7 @@ GoldenToolkit.configure(GoldenToolkitConfiguration(skipGoldenAssertion: () => /*
 
 ### Auto-Sized Goldens
 
-A new optional parameter ```autoHeight``` has been added to ```screenMatchesGolden``` and ```multiScreenGolden```. If set to true, the height of the golden will adapt to fit the widget under test. Thanks to @christian-muertz!
+A new optional parameter `autoHeight` has been added to `screenMatchesGolden` and `multiScreenGolden`. If set to true, the height of the golden will adapt to fit the widget under test. Thanks to @christian-muertz!
 
 ## 0.3.2
 

packages/golden_toolkit/README.md

@@ -74,7 +74,6 @@ The output of this test will be this golden file: `weather_accessibility.png`:
 
 See tests for usage examples: [golden_builder_test.dart](example/test/golden_builder_test.dart)
 
-
 ### DeviceBuilder
 
 DeviceBuilder class is like the GoldenBuilder except that it constrains scenario widget sizes to Device configurations. This removes the need
@@ -83,9 +82,6 @@ to specify a column or grid based layout.
 It will generate a widget that lays out its scenarios vertically and the Device configurations of those scenarios horizontally. All in one single
 golden png file.
 
-In the case of a single scenario the helper method of (#multiDeviceGolden) can simplify DeviceBuilder usage. For multiple scenarios, DeviceBuilder
-can help
-
 ```dart
 testGoldens('DeviceBuilder - multiple scenarios - with onCreate',
       (tester) async {
@@ -142,7 +138,6 @@ This will generate the following golden:
 
 ![example widget captured](example/test/goldens/flutter_demo_page_multiple_scenarios.png)
 
-
 ### multiScreenGolden
 
 The multiScreenGolden assertion is used to capture multiple goldens of a single widget using different simulated device sizes & characteristics.
@@ -227,10 +222,7 @@ If you use VSCode, we highly recommend adding this configuration to your `.vscod
       "request": "launch",
       "type": "dart",
       "codeLens": {
-        "for": [
-          "run-test",
-          "run-test-file"
-        ]
+        "for": ["run-test", "run-test-file"]
       },
       "args": ["--update-goldens"]
     }
@@ -358,7 +350,7 @@ See more usage examples here: [golden_builder_test.dart](test/golden_builder_tes
 
 There are global settings that can be configured by calling the following API:
 
-```GoldenToolkit.runWithConfiguration()```
+`GoldenToolkit.runWithConfiguration()`
 
 Currently, the primary option is to allow consumers to holistically skip golden assertions. For example, perhaps you only want to perform golden assertions on certain platforms.
 

packages/golden_toolkit/example/lib/src/weather_widgets.dart

@@ -56,7 +56,8 @@ class WeatherForecast extends StatelessWidget {
                       shape: const CircleBorder(),
                     ),
                     textTheme: theme.textTheme.copyWith(
-                      bodyText2: theme.textTheme.bodyText2.copyWith(fontSize: 24),
+                      bodyText2:
+                          theme.textTheme.bodyText2.copyWith(fontSize: 24),
                     ),
                   ),
                   child: WeatherCard.forecast(today),
@@ -70,8 +71,10 @@ class WeatherForecast extends StatelessWidget {
           Column(
             mainAxisSize: MainAxisSize.min,
             children: [
-              Text('This Week\'s Forecast', style: Theme.of(context).textTheme.headline6),
-              if (MediaQuery.of(context).size.width > 400 && MediaQuery.of(context).size.height > 600)
+              Text('This Week\'s Forecast',
+                  style: Theme.of(context).textTheme.headline6),
+              if (MediaQuery.of(context).size.width > 400 &&
+                  MediaQuery.of(context).size.height > 600)
                 WeeklyForecastExpanded(forecasts: _list)
               else
                 WeeklyForecastCompact(forecasts: _list),
@@ -107,7 +110,9 @@ class WeeklyForecastExpanded extends StatelessWidget {
                   const SizedBox(width: 8),
                   Flexible(
                     flex: 5,
-                    child: Align(alignment: Alignment.centerLeft, child: Text(f.description)),
+                    child: Align(
+                        alignment: Alignment.centerLeft,
+                        child: Text(f.description)),
                   ),
                 ],
               ))
@@ -293,7 +298,8 @@ enum Weather {
   cloudy,
 }
 
-final RoundedRectangleBorder _cardShape = RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0));
+final RoundedRectangleBorder _cardShape =
+    RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0));
 
 class Forecast {
   const Forecast({this.day, this.temp, this.weather, this.description});

packages/golden_toolkit/example/pubspec.lock

@@ -66,7 +66,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.6.0"
+    version: "0.7.0"
   matcher:
     dependency: transitive
     description:

packages/golden_toolkit/example/test/example_test.dart

@@ -30,9 +30,12 @@ void main() {
         bgColor: Colors.white,
         widthToHeightRatio: 1,
       )
-        ..addScenario('Sunny', const WeatherCard(temp: 66, weather: Weather.sunny))
-        ..addScenario('Cloudy', const WeatherCard(temp: 56, weather: Weather.cloudy))
-        ..addScenario('Raining', const WeatherCard(temp: 37, weather: Weather.rain))
+        ..addScenario(
+            'Sunny', const WeatherCard(temp: 66, weather: Weather.sunny))
+        ..addScenario(
+            'Cloudy', const WeatherCard(temp: 56, weather: Weather.cloudy))
+        ..addScenario(
+            'Raining', const WeatherCard(temp: 37, weather: Weather.rain))
         ..addScenario(
           'Cold',
           const WeatherCard(temp: 25, weather: Weather.cold),
@@ -46,15 +49,20 @@ void main() {
     });
 
     /// lays out the results in a column
-    testGoldens('COLUMN: Different weather types with extra frame', (tester) async {
+    testGoldens('COLUMN: Different weather types with extra frame',
+        (tester) async {
       final gb = GoldenBuilder.column(
         bgColor: Colors.white,
         wrap: _simpleFrame,
       )
-        ..addScenario('Sunny', const WeatherCard(temp: 66, weather: Weather.sunny))
-        ..addScenario('Cloudy', const WeatherCard(temp: 56, weather: Weather.cloudy))
-        ..addScenario('Raining', const WeatherCard(temp: 37, weather: Weather.rain))
-        ..addScenario('Cold', const WeatherCard(temp: 25, weather: Weather.cold));
+        ..addScenario(
+            'Sunny', const WeatherCard(temp: 66, weather: Weather.sunny))
+        ..addScenario(
+            'Cloudy', const WeatherCard(temp: 56, weather: Weather.cloudy))
+        ..addScenario(
+            'Raining', const WeatherCard(temp: 37, weather: Weather.rain))
+        ..addScenario(
+            'Cold', const WeatherCard(temp: 25, weather: Weather.cold));
 
       await tester.pumpWidgetBuilder(
         gb.build(),
@@ -65,13 +73,19 @@ void main() {
 
     /// Demonstrates how golden builder can be combined with multiScreenGolden to
     /// test with multiple dimensions of parameters
-    testGoldens('Card should look right on different devices / screen sizes', (tester) async {
+    testGoldens('Card should look right on different devices / screen sizes',
+        (tester) async {
       final gb = GoldenBuilder.column(bgColor: Colors.white)
-        ..addScenario('Sunny', const WeatherCard(temp: 66, weather: Weather.sunny))
-        ..addScenario('Cloudy', const WeatherCard(temp: 56, weather: Weather.cloudy))
-        ..addScenario('Raining', const WeatherCard(temp: 37, weather: Weather.rain))
-        ..addScenario('Cold', const WeatherCard(temp: 25, weather: Weather.cold))
-        ..addTextScaleScenario('Cold', const WeatherCard(temp: 25, weather: Weather.cold));
+        ..addScenario(
+            'Sunny', const WeatherCard(temp: 66, weather: Weather.sunny))
+        ..addScenario(
+            'Cloudy', const WeatherCard(temp: 56, weather: Weather.cloudy))
+        ..addScenario(
+            'Raining', const WeatherCard(temp: 37, weather: Weather.rain))
+        ..addScenario(
+            'Cold', const WeatherCard(temp: 25, weather: Weather.cold))
+        ..addTextScaleScenario(
+            'Cold', const WeatherCard(temp: 25, weather: Weather.cold));
 
       await tester.pumpWidgetBuilder(
         gb.build(),
@@ -88,13 +102,17 @@ void main() {
 
     group('GoldenBuilder examples of accessibility testing', () {
       // With those test we want to make sure our widgets look right when user changes system font size
-      testGoldens('Card should look right when user bumps system font size', (tester) async {
+      testGoldens('Card should look right when user bumps system font size',
+          (tester) async {
         const widget = WeatherCard(temp: 56, weather: Weather.cloudy);
 
-        final gb = GoldenBuilder.column(bgColor: Colors.white, wrap: _simpleFrame)
-          ..addScenario('Regular font size', widget)
-          ..addTextScaleScenario('Large font size', widget, textScaleFactor: 2.0)
-          ..addTextScaleScenario('Largest font size', widget, textScaleFactor: 3.2);
+        final gb =
+            GoldenBuilder.column(bgColor: Colors.white, wrap: _simpleFrame)
+              ..addScenario('Regular font size', widget)
+              ..addTextScaleScenario('Large font size', widget,
+                  textScaleFactor: 2.0)
+              ..addTextScaleScenario('Largest font size', widget,
+                  textScaleFactor: 3.2);
 
         await tester.pumpWidgetBuilder(
           gb.build(),
@@ -119,17 +137,23 @@ void main() {
     ///then you may run into issues with some images not displaying properly.
     ///
     ///This is an example of the the "issue"
-    testGoldens('Some images missing in multiScreenGoldens that require additional setup', (tester) async {
-      await tester.pumpWidgetBuilder(_forecastWithDifferentImagesForLargeAndSmallScreen());
+    testGoldens(
+        'Some images missing in multiScreenGoldens that require additional setup',
+        (tester) async {
+      await tester.pumpWidgetBuilder(
+          _forecastWithDifferentImagesForLargeAndSmallScreen());
       await multiScreenGolden(
         tester,
         'example_of_images_not_properly_loading',
       );
     });
 
     ///here is an example of how to workaround it.
-    testGoldens('Should render images in multiScreenGoldens that require additional setup', (tester) async {
-      await tester.pumpWidgetBuilder(_forecastWithDifferentImagesForLargeAndSmallScreen());
+    testGoldens(
+        'Should render images in multiScreenGoldens that require additional setup',
+        (tester) async {
+      await tester.pumpWidgetBuilder(
+          _forecastWithDifferentImagesForLargeAndSmallScreen());
       await multiScreenGolden(
         tester,
         'weather_image_async_load_correct_duration',
@@ -176,7 +200,9 @@ Widget _forecastWithDifferentImagesForLargeAndSmallScreen() {
 }
 
 class FutureWidgetTester extends StatefulWidget {
-  const FutureWidgetTester({Key key, this.child, this.duration = const Duration(milliseconds: 100)}) : super(key: key);
+  const FutureWidgetTester(
+      {Key key, this.child, this.duration = const Duration(milliseconds: 100)})
+      : super(key: key);
   final Widget child;
   final Duration duration;
   @override
@@ -205,7 +231,8 @@ class _FutureWidgetTesterState extends State<FutureWidgetTester> {
 }
 
 class InvalidateWidgetTreeWhenSizeChanges extends StatelessWidget {
-  const InvalidateWidgetTreeWhenSizeChanges({Key key, this.child}) : super(key: key);
+  const InvalidateWidgetTreeWhenSizeChanges({Key key, this.child})
+      : super(key: key);
   final Widget child;
 
   @override

packages/golden_toolkit/example/test/flutter_demo_page_test.dart

@@ -18,7 +18,8 @@ void main() {
     await screenMatchesGolden(tester, 'flutter_demo_page_single_scenario');
   });
 
-  testGoldens('DeviceBuilder - one scenario - override devices', (tester) async {
+  testGoldens('DeviceBuilder - one scenario - override devices',
+      (tester) async {
     final builder = DeviceBuilder()
       ..overrideDevicesForAllScenarios(devices: [
         Device.phone,
@@ -33,10 +34,12 @@ void main() {
 
     await tester.pumpDeviceBuilder(builder);
 
-    await screenMatchesGolden(tester, 'flutter_demo_page_single_scenario_more_devices');
+    await screenMatchesGolden(
+        tester, 'flutter_demo_page_single_scenario_more_devices');
   });
 
-  testGoldens('DeviceBuilder - multiple scenarios - with onCreate', (tester) async {
+  testGoldens('DeviceBuilder - multiple scenarios - with onCreate',
+      (tester) async {
     final builder = DeviceBuilder()
       ..overrideDevicesForAllScenarios(devices: [
         Device.phone,

packages/golden_toolkit/lib/src/configuration.dart

@@ -21,7 +21,8 @@ import 'device.dart';
 class GoldenToolkit {
   GoldenToolkit._();
 
-  static GoldenToolkitConfiguration _configuration = GoldenToolkitConfiguration();
+  static GoldenToolkitConfiguration _configuration =
+      GoldenToolkitConfiguration();
 
   /// Applies a GoldenToolkitConfiguration to a block of code to effectively provide a scoped
   /// singleton. The configuration will apply to just the injected body function.
@@ -121,7 +122,8 @@ class GoldenToolkitConfiguration {
     return GoldenToolkitConfiguration(
       skipGoldenAssertion: skipGoldenAssertion ?? this.skipGoldenAssertion,
       fileNameFactory: fileNameFactory ?? this.fileNameFactory,
-      deviceFileNameFactory: deviceFileNameFactory ?? this.deviceFileNameFactory,
+      deviceFileNameFactory:
+          deviceFileNameFactory ?? this.deviceFileNameFactory,
       primeAssets: primeAssets ?? this.primeAssets,
       defaultDevices: defaultDevices ?? this.defaultDevices,
     );