diff --git a/packages/golden_toolkit/lib/src/golden_builder.dart b/packages/golden_toolkit/lib/src/golden_builder.dart index db76f8f..e217e8b 100644 --- a/packages/golden_toolkit/lib/src/golden_builder.dart +++ b/packages/golden_toolkit/lib/src/golden_builder.dart @@ -74,29 +74,45 @@ class GoldenBuilder { final double widthToHeightRatio; /// List of tests [scenarios] being run within GoldenBuilder - final List scenarios = []; + final List<_Scenario> scenarios = []; /// [addTextScaleScenario] will add a test to GoldenBuilder where u can provide custom font size - void addTextScaleScenario( - String name, - Widget widget, { + void addTextScaleScenario({ + required String name, + OnScenarioCreate? onCreate, + required Widget widget, double textScaleFactor = textScaleFactorMaxSupported, }) { addScenario( - '$name ${textScaleFactor}x', - _TextScaleFactor( - textScaleFactor: textScaleFactor, - child: widget, - )); + name: '$name ${textScaleFactor}x', + onCreate: onCreate, + widget: _TextScaleFactor( + textScaleFactor: textScaleFactor, + child: widget, + ), + ); } /// [addScenario] will add a test GoldenBuilder - void addScenario(String name, Widget widget) { - scenarios.add(_Scenario( - name: name, - widget: widget, - wrap: wrap, - )); + void addScenario({ + required String name, + OnScenarioCreate? onCreate, + required Widget widget, + }) { + final key = Key(name); + + scenarios.add( + _Scenario( + key: key, + onCreate: onCreate, + widget: _ScenarioWidget( + key: key, + name: name, + widget: widget, + wrap: wrap, + ), + ), + ); } /// [addScenarioBuilder] will add a test with BuildContext GoldenBuilder @@ -108,11 +124,15 @@ class GoldenBuilder { /// return Container(color: color); /// }, /// ) - void addScenarioBuilder( - String name, Widget Function(BuildContext context) fn) { + void addScenarioBuilder({ + required String name, + OnScenarioCreate? onCreate, + required Widget Function(BuildContext context) builder, + }) { addScenario( - name, - Builder(builder: fn), + name: name, + onCreate: onCreate, + widget: Builder(builder: builder), ); } @@ -135,16 +155,37 @@ class GoldenBuilder { mainAxisSpacing: 16, shrinkWrap: true, crossAxisCount: columns, - children: scenarios, + children: scenarios.map((e) => e.widget).toList(), ); } - Column _column() => - Column(mainAxisSize: MainAxisSize.min, children: scenarios); + Column _column() => Column( + mainAxisSize: MainAxisSize.min, + children: scenarios.map((e) => e.widget).toList(), + ); +} + +/// Class containing whats required to create a Scenario +class _Scenario { + /// constructs a Scenario + _Scenario({ + required this.key, + this.onCreate, + required this.widget, + }); + + /// key that references created scenario and specific device + final Key key; + + /// function that is executed after initial pump of widget + final OnScenarioCreate? onCreate; + + /// widget that represents this scenario + final _ScenarioWidget widget; } -class _Scenario extends StatelessWidget { - const _Scenario({ +class _ScenarioWidget extends StatelessWidget { + const _ScenarioWidget({ Key? key, required this.name, required this.widget, diff --git a/packages/golden_toolkit/lib/src/testing_tools.dart b/packages/golden_toolkit/lib/src/testing_tools.dart index d1077b3..d84adf6 100644 --- a/packages/golden_toolkit/lib/src/testing_tools.dart +++ b/packages/golden_toolkit/lib/src/testing_tools.dart @@ -19,6 +19,7 @@ import 'package:meta/meta.dart'; import 'configuration.dart'; import 'device.dart'; import 'device_builder.dart'; +import 'golden_builder.dart'; import 'test_asset_bundle.dart'; import 'widget_tester_extensions.dart'; @@ -59,6 +60,27 @@ extension TestingToolsExtension on WidgetTester { ); } + /// Extension for a [WidgetTester] that pumps a [GoldenBuilder] class + /// + /// [WidgetWrapper] defaults to [materialAppWrapper] + /// + /// [textScaleSize] set's the text scale size (usually in a range from 1 to 3) + Future pumpGoldenBuilder( + GoldenBuilder goldenBuilder, { + WidgetWrapper? wrapper, + Size surfaceSize = _defaultSize, + }) async { + await pumpWidgetBuilder( + goldenBuilder.build(), + wrapper: wrapper, + surfaceSize: surfaceSize, + ); + + for (final scenario in goldenBuilder.scenarios) { + await scenario.onCreate?.call(scenario.key); + } + } + /// Extension for a [WidgetTester] that pumps a [DeviceBuilder] class /// /// [WidgetWrapper] defaults to [materialAppWrapper] diff --git a/packages/golden_toolkit/test/font_loading_test.dart b/packages/golden_toolkit/test/font_loading_test.dart index 100e440..cb1d3ac 100644 --- a/packages/golden_toolkit/test/font_loading_test.dart +++ b/packages/golden_toolkit/test/font_loading_test.dart @@ -16,30 +16,46 @@ Future main() async { group('Font loading integration test', () { testGoldens('Roboto fonts should work', (tester) async { final golden = GoldenBuilder.column() - ..addScenario('Material Fonts should work', - const Text('This is material text in "Roboto"')) ..addScenario( - 'Fonts from packages should work', - const Text('This is a custom font', - style: TextStyle( - fontFamily: 'OpenSans', package: 'sample_dependency'))) + name: 'Material Fonts should work', + widget: const Text('This is material text in "Roboto"'), + ) ..addScenario( - 'Different Font weights are not well supported (w900)', - const Text('This should be weight 900', - style: TextStyle( - fontFamily: 'Roboto', fontWeight: FontWeight.w900))) + name: 'Fonts from packages should work', + widget: const Text( + 'This is a custom font', + style: + TextStyle(fontFamily: 'OpenSans', package: 'sample_dependency'), + ), + ) ..addScenario( - 'Different Font weights are not well supported (w100)', - const Text('This should be weight 100)', - style: TextStyle( - fontFamily: 'Roboto', fontWeight: FontWeight.w100))) + name: 'Different Font weights are not well supported (w900)', + widget: const Text( + 'This should be weight 900', + style: TextStyle(fontFamily: 'Roboto', fontWeight: FontWeight.w900), + ), + ) ..addScenario( - 'Italics are supported', - const Text('This should be italic', - style: TextStyle( - fontFamily: 'Roboto', fontStyle: FontStyle.italic))) - ..addScenario('Unknown fonts render in Ahem (Foo.ttf)', - const Text('unknown font', style: TextStyle(fontFamily: 'foo'))); + name: 'Different Font weights are not well supported (w100)', + widget: const Text( + 'This should be weight 100)', + style: TextStyle(fontFamily: 'Roboto', fontWeight: FontWeight.w100), + ), + ) + ..addScenario( + name: 'Italics are supported', + widget: const Text( + 'This should be italic', + style: TextStyle(fontFamily: 'Roboto', fontStyle: FontStyle.italic), + ), + ) + ..addScenario( + name: 'Unknown fonts render in Ahem (Foo.ttf)', + widget: const Text( + 'unknown font', + style: TextStyle(fontFamily: 'foo'), + ), + ); await tester.pumpWidgetBuilder(golden.build()); await screenMatchesGolden(tester, 'material_fonts'); }); diff --git a/packages/golden_toolkit/test/golden_builder_test.dart b/packages/golden_toolkit/test/golden_builder_test.dart index a2e85a2..862d50b 100644 --- a/packages/golden_toolkit/test/golden_builder_test.dart +++ b/packages/golden_toolkit/test/golden_builder_test.dart @@ -17,32 +17,45 @@ void main() { columns: 2, widthToHeightRatio: 1, ) - ..addScenarioBuilder("Primary Color", (context) { - var color = Theme.of(context).colorScheme.primary; - return Container( - color: color, - ); - }) - ..addScenarioBuilder("Secondary Color", (context) { - var color = Theme.of(context).colorScheme.primary; - return Container( - color: color, - ); - }); + ..addScenarioBuilder( + name: "Primary Color", + builder: (context) { + var color = Theme.of(context).colorScheme.primary; + return Container( + color: color, + ); + }) + ..addScenarioBuilder( + name: "Secondary Color", + builder: (context) { + var color = Theme.of(context).colorScheme.primary; + return Container( + color: color, + ); + }); await tester.pumpWidgetBuilder(builder.build()); await screenMatchesGolden(tester, 'golden_builder_theme'); }); + testGoldens('Column layout example', (tester) async { await tester.pumpWidgetBuilder( Center( child: (GoldenBuilder.column() - ..addScenario('red', - Container(height: 50, width: 50, color: Colors.red)) - ..addScenario('green', - Container(height: 50, width: 50, color: Colors.green)) - ..addScenario('blue', - Container(height: 50, width: 50, color: Colors.blue))) + ..addScenario( + name: 'red', + widget: Container(height: 50, width: 50, color: Colors.red), + ) + ..addScenario( + name: 'green', + widget: + Container(height: 50, width: 50, color: Colors.green), + ) + ..addScenario( + name: 'blue', + widget: + Container(height: 50, width: 50, color: Colors.blue), + )) .build()), surfaceSize: const Size(100, 300), ); @@ -54,12 +67,20 @@ void main() { await tester.pumpWidgetBuilder( Center( child: (GoldenBuilder.grid(columns: 2, widthToHeightRatio: 1) - ..addScenario('red', - Container(height: 50, width: 50, color: Colors.red)) - ..addScenario('green', - Container(height: 50, width: 50, color: Colors.green)) - ..addScenario('blue', - Container(height: 50, width: 50, color: Colors.blue))) + ..addScenario( + name: 'red', + widget: Container(height: 50, width: 50, color: Colors.red), + ) + ..addScenario( + name: 'green', + widget: + Container(height: 50, width: 50, color: Colors.green), + ) + ..addScenario( + name: 'blue', + widget: + Container(height: 50, width: 50, color: Colors.blue), + )) .build()), surfaceSize: const Size(300, 300), ); @@ -71,11 +92,17 @@ void main() { await tester.pumpWidgetBuilder( Center( child: (GoldenBuilder.column() - ..addTextScaleScenario('small', const Text('text'), + ..addTextScaleScenario( + name: 'small', + widget: const Text('text'), textScaleFactor: 1.0) - ..addTextScaleScenario('medium', const Text('text'), + ..addTextScaleScenario( + name: 'medium', + widget: const Text('text'), textScaleFactor: 2.0) - ..addTextScaleScenario('large', const Text('text'), + ..addTextScaleScenario( + name: 'large', + widget: const Text('text'), textScaleFactor: 3.2)) .build()), surfaceSize: const Size(100, 300),