request: support multiple themes

[Giuspepe]

Is there an existing feature request for this?

• I have searched the existing issues.

Command

I'd like to run a golden test with multiple themes, not just a single theme

Description

I would like to be able to pass AlchemistConfig a List<ThemeData>? instead of just a ThemeData?.
The goldenTest method should then run the test with all given themes in the current AlchemistConfig.
This would remove redundancy when testing a widget with multiple themes. Currently you would need a separate goldenTest for each theme that should be tested, even if the widget under test is the same.

So instead of

void main() {
  AlchemistConfig.runWithConfig(
      config: AlchemistConfig(
        theme: MyLightTheme()
      ),
      run: () => goldenTest('widget should look good with light theme', ..., widget: MyWidget());
  );

  AlchemistConfig.runWithConfig(
      config: AlchemistConfig(
        theme: MyDarkTheme()
      ),
      run: () => goldenTest('widget should look good with dark theme', ..., widget: MyWidget());
  );

  // etc. for all other themes
}

I would like to be able to write the following

void main() {
  AlchemistConfig.runWithConfig(
      config: AlchemistConfig(
        themes: [MyLightTheme(), MyDarkTheme(), ...]
      ),
      run: () => goldenTest('widget should look good with all themes', ..., widget: MyWidget());
  );

}

Reasoning

Many apps have multiple themes. E.g. a default light theme and a dark theme. If your app cares about accessibility it may even have a high contrast light theme and a high contrast dark theme.

If you want to write a golden test for a widget and ensure that it looks good on each theme, you would have to write a separate test for each theme because right now you can only pass a single theme to AlchemistConfig. If you could pass a list of themes as suggested, you would have to write only one golden test and pass it all the themes the widget should be tested with.

Additional context and comments

No response

[jolexxa]

Hi! Thanks for the idea!

@Kirpal We could also consider allowing a theme (or even an entire config) to be passed in as a parameter override in the following:

alchemist/lib/src/golden_test.dart

Lines 125 to 135 in 109b799

	Future<void> goldenTest(
	String description, {
	required String fileName,
	bool skip = false,
	List<String> tags = const ['golden'],
	double textScaleFactor = 1.0,
	BoxConstraints constraints = const BoxConstraints(),
	PumpAction pumpBeforeTest = onlyPumpAndSettle,
	Interaction? whilePerforming,
	required Widget widget,
	}) async {

If we did, that would potentially enable something like the following to be possible.

void main() {
  AlchemistConfig.runWithConfig(
      config: AlchemistConfig.current(),
      run: () {
        for (final theme in myThemes) {
          goldenTest('widget should look good with all themes', ..., widget: MyWidget(), theme: theme);
        }
      }
  );
}

[jeroen-meijer]

Great question!

@Giuspepe
Is there any reason why simply using a Theme widget in a list of testable widgets wouldn't work? 👀

goldenTest(
  'renders correctly for all themes',
  fileName: 'my_widget',
  builder: () {
    final themes = <ThemeData>[/* ... */];

    return GoldenTestGroup(
      children: [
        for (final theme in themes)
          GoldenTestScenario(
            name: 'using theme $theme',
            child: Theme(
              data: theme,
              child: MyWidget(),
            ),
          ),
      ],
    );
  },
);