Multi Snapshot Reviews

If you are using Widgetbook Cloud Review, you can now create multiple snapshots for a single use-case. This feature is useful if you want to test different states of your use-case using different addons or knobs configurations, instead of just using the default configurations.

Multi Snapshot for Addons

1. Go to the main file of your app, where your Widgetbook's @App annotation is defined.

2. Choose the addons you like to test and include them, e.g. Themes and Languages. Here are the available AddonConfig classes:

   • AlignmentAddonConfig
   • LocalizationAddonConfig
   • SemanticsAddonConfig 🧪
   • ThemeAddonConfig
   • TextScaleAddonConfig
   • ViewportAddonConfig 🧪
   • ZoomAddonConfig
   • Custom Addon Config

3. Add the configurations matrix to the cloudAddonsConfigs parameter of the @App annotation. In this example, we’d like to test German in dark mode but English in light mode, but both of them on an iPhone 12 viewport:

   @App(
     cloudAddonsConfigs: {
       'German Dark': [
         ViewportAddonConfig(IosViewports.iPhone12),
         LocalizationAddonConfig('de'),
         ThemeAddonConfig('Dark'),
       ],
       'English Light': [
         ViewportAddonConfig(IosViewports.iPhone12),
         LocalizationAddonConfig('en'),
         ThemeAddonConfig('Light'),
       ],
     },
   )
   class WidgetbookApp extends StatelessWidget {
     const WidgetbookApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return Widgetbook.material(...);
     }
   }
   

Multi Snapshot for Knobs

1. Go to the file where your use-case is defined.
2. Add the configurations matrix to the cloudKnobsConfigs parameter of the @UseCase annotation. In this example we want to test "Disabled Long Text" and "Enabled Short Text" variants of the use-case:

@UseCase(
  name: 'Default',
  type: Button,
  cloudAddonsConfigs: {
    'Disabled Long Text': [
      BooleanKnobConfig('enabled', false),
      StringKnobConfig('text', 'This is a very very long text for a button that might cause overflow'),
    ],
    'Enabled Short Text': [
      BooleanKnobConfig('enabled', true),
      StringKnobConfig('text', 'Button'),
    ],
  },
)
Widget buildButtonUseCase(BuildContext context) {
  return Button(
    text: context.knobs.string(label: 'text'),
    enabled: context.knobs.boolean(label: 'enabled'),
  );
}