From 8ff8894c235a40994b5e5a18142b7777bb6e4635 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 6 Sep 2024 17:41:17 +0200
Subject: [PATCH] set up vitest plugin

---
 .storybook/main.ts         |  1 +
 .storybook/vitest.setup.ts |  9 +++++++++
 package.json               |  1 +
 vitest.workspace.ts        | 29 +++++++++++++++++++++++++++++
 yarn.lock                  | 14 ++++++++++++++
 5 files changed, 54 insertions(+)
 create mode 100644 .storybook/vitest.setup.ts
 create mode 100644 vitest.workspace.ts

diff --git a/.storybook/main.ts b/.storybook/main.ts
index fb7ec60..5425649 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -13,6 +13,7 @@ const config: StorybookConfig = {
     '@chromatic-com/storybook',
     '@storybook/addon-a11y',
     '@storybook/addon-designs',
+    '@storybook/experimental-addon-test'
   ],
   staticDirs: ['../public'],
   framework: '@storybook/react-vite',
diff --git a/.storybook/vitest.setup.ts b/.storybook/vitest.setup.ts
new file mode 100644
index 0000000..273710c
--- /dev/null
+++ b/.storybook/vitest.setup.ts
@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);
\ No newline at end of file
diff --git a/package.json b/package.json
index 3a4ae86..2b4f4c0 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "@storybook/addon-interactions": "^8.3.0-beta.3",
     "@storybook/addon-themes": "^8.3.0-beta.3",
     "@storybook/blocks": "^8.3.0-beta.3",
+    "@storybook/experimental-addon-test": "^8.3.0-beta.3",
     "@storybook/manager-api": "^8.3.0-beta.3",
     "@storybook/react": "^8.3.0-beta.3",
     "@storybook/react-vite": "^8.3.0-beta.3",
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
new file mode 100644
index 0000000..0cc4f0b
--- /dev/null
+++ b/vitest.workspace.ts
@@ -0,0 +1,29 @@
+import { defineWorkspace } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-test/vite-plugin';
+
+
+// More info at: https://storybook.js.org/docs/writing-tests/test-runner-with-vitest
+export default defineWorkspace([
+  'vite.config.ts',
+  {
+    extends: 'vite.config.ts',
+    plugins: [
+      // See options at: https://storybook.js.org/docs/writing-tests/test-runner-with-vitest#storybooktest
+      storybookTest({
+        storybookScript: 'yarn storybook --ci'
+      }),
+    ],
+    test: {
+      name: 'storybook',
+      browser: {
+        enabled: true,
+        headless: true,
+        name: 'chromium',
+        provider: 'playwright',
+      },
+      // Make sure to adjust this pattern to match your stories files.
+      include: ['**/*.stories.?(m)[jt]s?(x)'],
+      setupFiles: ['./.storybook/vitest.setup.ts'],
+    },
+  },
+]);
diff --git a/yarn.lock b/yarn.lock
index d37cc1c..f4717a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2225,6 +2225,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/experimental-addon-test@npm:^8.3.0-beta.3":
+  version: 8.3.0-beta.3
+  resolution: "@storybook/experimental-addon-test@npm:8.3.0-beta.3"
+  dependencies:
+    "@storybook/csf": "npm:^0.1.11"
+  peerDependencies:
+    "@vitest/browser": ^2.0.0
+    storybook: ^8.3.0-beta.3
+    vitest: ^2.0.0
+  checksum: 10c0/a8e2a670c7b5d16be3c274a7ba56697fbd825ea9052850464d087fbd99457cdc12bbf62ec52c968d9ae83a7ea9770beddd0c909e0477ac691114b1c0d3b97d10
+  languageName: node
+  linkType: hard
+
 "@storybook/global@npm:^5.0.0":
   version: 5.0.0
   resolution: "@storybook/global@npm:5.0.0"
@@ -4773,6 +4786,7 @@ __metadata:
     "@storybook/addon-interactions": "npm:^8.3.0-beta.3"
     "@storybook/addon-themes": "npm:^8.3.0-beta.3"
     "@storybook/blocks": "npm:^8.3.0-beta.3"
+    "@storybook/experimental-addon-test": "npm:^8.3.0-beta.3"
     "@storybook/manager-api": "npm:^8.3.0-beta.3"
     "@storybook/react": "npm:^8.3.0-beta.3"
     "@storybook/react-vite": "npm:^8.3.0-beta.3"