Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#162 #163

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

#162 #163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
26d3621
feat: add onCreate to GoldenBuilder.addScenario
jtdLab Oct 20, 2022
108b5cc
fix: add key to scenario widget
jtdLab Oct 20, 2022
5709ed2
fix tests
jtdLab Oct 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 65 additions & 24 deletions packages/golden_toolkit/lib/src/golden_builder.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,29 +74,45 @@ class GoldenBuilder {
final double widthToHeightRatio;

/// List of tests [scenarios] being run within GoldenBuilder
final List<Widget> 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
Expand All @@ -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),
);
}

Expand All @@ -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,
Expand Down
22 changes: 22 additions & 0 deletions packages/golden_toolkit/lib/src/testing_tools.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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<void> 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]
Expand Down
56 changes: 36 additions & 20 deletions packages/golden_toolkit/test/font_loading_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,30 +16,46 @@ Future<void> 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');
});
Expand Down
81 changes: 54 additions & 27 deletions packages/golden_toolkit/test/golden_builder_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
);
Expand All @@ -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),
);
Expand All @@ -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),
Expand Down