nv_golden

Description:

nv golden

NvGolden #
Table of Contents #

NvGolden

init
singular
grid
devices


Golden Creation

createGolden
createSequenceGolden


Display

Device
Screen


Gestures

tap



NvGolden #
init #
The init method has to be called before running any golden test which includes text or icons. The init method attempts to load all fonts registered within the pubspec.yaml file. If init is unable to load your fonts you can manually load them using NvGolden.loadFont(...). Without your fonts being loaded, your screenshots will display black squares instead of readable text.
setUpAll(NvGolden.init);

// Or alternatively (in case your fonts aren't automatically picked up)
setUpAll(() => Future.wait([
NvGolden.init(),
NvGolden.loadFont(
name: 'Roboto',
paths: ['lib/fonts/Roboto-Regular.ttf'],
),
]),
);
copied to clipboard
singular #
The singular constructor allows you to render a single scenario. This is especially useful when added to regular widget tests so you can see what is being rendered during your test.
testWidgets('your test name', (tester) async {
final nvGolden = NvGolden.singular(
widget: nvWrapper.wrap(YourWidget(...)),
screen: Screen(size: Size(200, 100)),
);

await tester.createGolden(nvGolden, 'your-golden-name');

// Expect statements have to happen after the createGolden or createSequenceGolden call
// because those calls also take care of pumping your widget!
expect(find.byType(YourWidget), findsOneWidget);
});
copied to clipboard
grid #
The grid constructor allows you to render a several golden scenarios into a single file.
testWidgets('your test name', (tester) async {
final nvGolden = NvGolden.grid(
nrColumns: 2,
screen: Screen(size: Size(200, 100)),
)
..addScenario(
name: 'Icon 1',
widget: nvWrapper.wrap(YourWidget(...)),
)
..addScenario(...)
..addScenario(...)
..addScenario(...);

await tester.createGolden(nvGolden, 'your-golden-name');

// Expect statements have to happen after the createGolden or createSequenceGolden call
// because those calls also take care of pumping your widget!
// Keep in mind that your widget will be rendered once per scenario!
expect(find.byType(YourWidget), findsNWidgets(4));
});
copied to clipboard
devices #
The devices constructor renders every scenario once per device. It is highly recommended to add these test on a page/screen level with a very small device (such as the Device.iphone5s) and a rather large one (such as the 'Device.iphone12proMax`) to ensure your designs look nice on big screens and don't overflow on small ones.
testWidgets('your test name', (tester) async {
final nvGolden = NvGolden.devices(
deviceSizes: [Device.iphone5s, Device.iphone12proMax],
)
..addScenario(
name: 'scenario name',
widget: YourWidgt(...),
)
..addScenario(...);

await tester.createGolden(nvGolden, 'your-golden-name');

// Expect statements have to happen after the createGolden or createSequenceGolden call
// because those calls also take care of pumping your widget!
// Keep in mind that your widget will be rendered once per Device for every scenario!
expect(find.byType(YourWidget), findsNWidgets(4));
});
copied to clipboard
Golden Creation #
The golden creation methods are extensions on the WidgetTester instance. They'll take an instance of NvGolden as the first argument and the name of the golden file as the second one.
createGolden #
The createGolden(...) method renders the NvGolden instances scenario(s). For singular Goldens it will merely render the widget while it will add a title for both the grid and the devices constructor.
await tester.createGolden(nvGolden, 'your-golden-name');
copied to clipboard
Example Grid:

Example Device:

createSequenceGolden #
During widget testing one might also want to tap certain elements on the screen (maybe even several of them in order). This is where Sequence testing comes in. It renders where the tap event(s) occurred to also add a visible check whether the correct element was clicked or not.
The following code example shows you a swipe gesture on a carousel component and how it can be handy to visualize where the gesture occured.
createSequenceGolden(...) is only compatible with NvGolden.singular(...).
await tester.createSequenceGolden(
nvGolden,
'your-golden-name',
// Renders taps and optionally applies them to the pumped widget
gestures: [
NvGestureDrag(
finder: () => find.byType(Image).at(1),
offset: Offset(-100, 0),
),
],
);
copied to clipboard
Example:



Before interaction
Interaction
After Interaction










Display #
The golden builder methods need to know how much space is available to the widget being rendered.
Device #
Device is an abstract class holding some common test devices readily available for you.
Screen #
You can also create your own Device using the Screen class.
Screen(
name: 'Iphone 12 Pro',
size: Size(390, 844),
safeArea: const EdgeInsets.fromLTRB(0.0, 47.0, 0.0, 34.0),
);
copied to clipboard
Gestures #
createSequenceGolden allows for interactive golden testing. All gestures are rendered on the golden first and applied after the golden file has been saved. The result of a sequence golden will be used as the input for the following sequence golden.
tap #
tap simulates a tap event on the specified finder.
drag #
drag simulates a drag event from the specified finder to the given offset.
More are soon to come. #