test: add vrt for different themes

integration/helpers.ts

@@ -14,6 +14,7 @@ import path from 'path';
 import { getStorybook, configure } from '@storybook/react';
 
 import { Rotation } from '../packages/charts/src';
+import { ThemeId } from '../storybook/use_base_theme';
 // @ts-ignore
 import { isLegacyVRTServer } from './config';
 
@@ -144,4 +145,21 @@ export const eachRotation = {
   },
 };
 
+const themeIds = Object.values(ThemeId);
+
+/**
+ * This is a wrapper around it.each for Themes
+ * Returns the requried query params to trigger correct theme
+ */
+export const eachTheme = {
+  it(fn: (theme: ThemeId, urlParam: string) => any, title = 'theme - %s') {
+    // eslint-disable-next-line jest/valid-title
+    return it.each<ThemeId>(themeIds)(title, (theme) => fn(theme, `&globals=theme:${theme}`));
+  },
+  describe(fn: (theme: ThemeId, urlParam: string) => any, title = 'theme - %s') {
+    // eslint-disable-next-line jest/valid-title, jest/valid-describe
+    return describe.each<ThemeId>(themeIds)(title, (theme) => fn(theme, `&globals=theme:${theme}`));
+  },
+};
+
 /* eslint-enable jest/no-export */

integration/tests/goal_stories.test.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { eachTheme } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Goal stories', () => {
@@ -14,10 +15,31 @@ describe('Goal stories', () => {
       'http://localhost:9001/?path=/story/goal-alpha--gaps&knob-show target=false&knob-target=260',
     );
   });
+
   it('should render actual tooltip color on hover', async () => {
     await common.expectChartWithMouseAtUrlToMatchScreenshot(
       'http://localhost:9001/?path=/story/goal-alpha--gaps&knob-show target=false&knob-target=260&globals=background:white',
       { right: 245, bottom: 120 },
     );
   });
+
+  eachTheme.describe((_, params) => {
+    it('should render gauge with target story', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--gauge-with-target${params}`,
+      );
+    });
+
+    it('should render minimal goal story', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--minimal-goal${params}`,
+      );
+    });
+
+    it('should render vertical negative story', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--vertical-negative${params}`,
+      );
+    });
+  });
 });