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 for testing different states of your use case using various addon or knob configurations, rather than just the default configuration.

Multi Snapshot for Addons

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

2. Select the addons you want to test and include them, such as Themes and Languages. The following AddonConfig classes are available:

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

3. Add the configurations matrix to the cloudAddonsConfigs parameter of the @App annotation. For example, to test German in dark mode and English in light mode, both 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. Open the file where your use case is defined.
2. Add the configurations matrix to the cloudKnobsConfigs parameter of the @UseCase annotation. For example, to test two common variants of the use case:

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