# Multi Snapshot Reviews

If you are using [Widgetbook Cloud Review](/cloud/reviews), 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.

<YouTube id="GJGGhUTT7LE?start=2941&end=3077" />

## Multi Snapshot for Addons

1. Open the main file of your app where your Widgetbook's `@App` annotation is defined.
1. Select the addons you want to test and include them, such as Themes and Languages. The following `AddonConfig` classes are available:

   - [`AlignmentAddonConfig`](/addons/alignment-addon#multi-snapshot-support)
   - [`LocalizationAddonConfig`](/addons/localization-addon#multi-snapshot-support)
   - [`SemanticsAddonConfig`](/addons/semantics-addon#multi-snapshot-support) 🧪
   - [`ThemeAddonConfig`](/addons/theme-addon#multi-snapshot-support)
   - [`TextScaleAddonConfig`](/addons/text-scale-addon#multi-snapshot-support)
   - [`ViewportAddonConfig`](/addons/viewport-addon#multi-snapshot-support)
   - [`ZoomAddonConfig`](/addons/zoom-addon#multi-snapshot-support)
   - [Custom Addon Config](/addons/custom-addon#multi-snapshot-support)

1. 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:

   ```dart
   @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.
1. Add the configurations matrix to the `cloudKnobsConfigs` parameter of the `@UseCase` annotation. For example, to test two common variants of the use case:

```dart
@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'),
  );
}
```
