Storybook: Vitest, A11y und Chromatic Addons hinzugefügt

- @storybook/addon-vitest (inkl. Playwright Chromium + Coverage-V8)
- @storybook/addon-a11y für Barrierefreiheitsprüfungen
- @chromatic-com/storybook für visuelle Regressionstests
- vitest.config.ts erstellt (Storybook-Testprojekt mit Playwright-Browser)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

gfi-ihk-2024/.storybook/main.js

@@ -1,6 +1,12 @@
 export default {
   stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    '@storybook/addon-vitest',
+    '@storybook/addon-a11y',
+    '@chromatic-com/storybook'
+  ],
   staticDirs: ['../public'],
   framework: {
     name: '@storybook/html-vite',

gfi-ihk-2024/package.json

@@ -12,23 +12,30 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.2.1",
+    "@storybook/addon-a11y": "^10.4.1",
     "@storybook/addon-docs": "10.4.1",
     "@storybook/addon-links": "10.4.1",
+    "@storybook/addon-vitest": "^10.4.1",
     "@storybook/html-vite": "10.4.1",
+    "@vitest/browser-playwright": "^4.1.7",
+    "@vitest/coverage-v8": "^4.1.7",
+    "playwright": "^1.60.0",
     "sass": "^1.100.0",
     "storybook": "10.4.1",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "vitest": "^4.1.7"
   },
   "dependencies": {
     "detect-browser": "^5.3.0",
     "focus-visible": "^5.2.0",
     "hammerjs": "^2.0.8",
+    "infinite-scroll": "^3.0.6",
     "is-mobile": "^3.1.1",
     "jquery": "^3.6.1",
-    "jquery.easing": "^1.4.1",
-    "js-cookie": "^3.0.1",
     "jquery-highlight": "^3.5.0",
-    "infinite-scroll": "^3.0.6"
+    "jquery.easing": "^1.4.1",
+    "js-cookie": "^3.0.1"
   },
   "type": "module",
   "private": true,

gfi-ihk-2024/vitest.config.ts

@@ -0,0 +1,34 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import { playwright } from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          storybookTest({ configDir: path.join(dirname, '.storybook') }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+          },
+        },
+      },
+    ],
+  },
+});