nv_golden 0.2.1

nv_golden: ^0.2.1 copied to clipboard

NvGolden #

init() #

The init method must be called in the setUpAll callback to load the fonts. Otherwise your screenshots will contain black squares instead of readable text.

device() #

The NvGolden.device(...) constructor takes a list of Screen Objects. You can create your own or use the ones provided in Device.

grid() #

The NvGolden.grid(...) constructor takes a nrColumns argument specifying the number of columns for your golden file. You can pass in one global Screen Object or have each Scenario with it's own Screen.

addScenario() #

The addScenario(...) method is the place where all the magic happens. Pass in a name and the widget you want to test and you are good to go.

TL;DR #

The following test shows you pretty much everything there is to know.

  setUpAll(loadAppFonts);

  testWidgets('test widget with universal screen size in 2x2 grid',
      (tester) async {
    final smallDevice = Screen(size: Size(150, 60));

    final nvGolden = NvGolden.grid(nrColumns: 2, screen: smallDevice)
      ..addScenario(
        name: 'Title',
        widget: nvWrapper.wrap(
          SampleIconButton(
            text: 'Title',
            icon: Icons.title,
          ),
        ),
      )
      ..addScenario(
        name: 'Circle',
        widget: nvWrapper.wrap(
          SampleIconButton(
            text: 'Circle',
            icon: Icons.circle,
          ),
        ),
      );

    await tester.createGolden(nvGolden, 'icon_button_universal_size');
  });
}

It produces the following screenshot/golden:

Google Fonts #

To user this plugin with google_fonts you'll need to first download the font (as recommended by google_fonts) and then use the NvGolden.loadFonts(...) method with the correct font name as well as paths to your font files.