test: Add Storybook tests to CI

Author: allozaur

.github/workflows/webui.yml

@@ -32,6 +32,19 @@ jobs:
               run: npm run check
               working-directory: tools/server/webui
 
+            - name: Install Playwright browsers
+              run: npx playwright install --with-deps
+              working-directory: tools/server/webui
+
+            - name: Build Storybook
+              run: npm run build-storybook
+              working-directory: tools/server/webui
+
+            - name: Run Storybook tests
+              run: |
+                  npm run test:storybook
+              working-directory: tools/server/webui
+
             - name: Build application
               run: npm run build
               working-directory: tools/server/webui

tools/server/webui/.storybook/vitest.setup.ts

@@ -0,0 +1,11 @@
+import { setProjectAnnotations } from '@storybook/sveltekit';
+import * as previewAnnotations from './preview';
+import { beforeAll } from 'vitest';
+
+const project = setProjectAnnotations([previewAnnotations]);
+
+beforeAll(async () => {
+  if (project.beforeAll) {
+    await project.beforeAll();
+  }
+});

tools/server/webui/package.json

@@ -15,6 +15,7 @@
 		"test:unit": "vitest",
 		"test": "npm run test:unit -- --run && npm run test:e2e",
 		"test:e2e": "playwright test",
+		"test:storybook": "vitest --project=storybook",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build"
 	},

tools/server/webui/vite.config.ts

@@ -5,6 +5,7 @@ import { readFileSync, writeFileSync, existsSync } from 'fs';
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
 import devtoolsJson from 'vite-plugin-devtools-json';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 
 const GUIDE_FOR_FRONTEND = `
 <!--
@@ -78,7 +79,12 @@ function llamaCppBuildPlugin() {
 }
 
 export default defineConfig({
-    plugins: [tailwindcss(), sveltekit(), devtoolsJson(), llamaCppBuildPlugin()],
+    plugins: [
+        tailwindcss(),
+        sveltekit(),
+        devtoolsJson(),
+        llamaCppBuildPlugin(),
+    ],
     test: {
         projects: [
             {
@@ -104,6 +110,25 @@ export default defineConfig({
                     include: ['src/**/*.{test,spec}.{js,ts}'],
                     exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
                 }
+            },
+            {
+                extends: './vite.config.ts',
+                test: {
+                    name: 'storybook',
+                    environment: 'browser',
+                    browser: {
+                        enabled: true,
+                        provider: 'playwright',
+                        instances: [{ browser: 'chromium', headless: true }]
+                    },
+                    include: ['src/**/*.stories.{js,ts,svelte}'],
+                    setupFiles: ['./.storybook/vitest.setup.ts']
+                },
+                plugins: [
+                    storybookTest({
+                        storybookScript: 'pnpm run storybook --no-open',
+                    }),
+                ]
             }
         ]
     },