feat: add configuration for Storybook with Vitest addon (#21)

Author: brandonroberts

.github/workflows/ci.yml

@@ -19,3 +19,18 @@ jobs:
         run: npm install
       - name: Build
         run: npm run build-storybook
+
+  test-windows:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 22
+      - run: corepack enable
+      - name: Install
+        run: npm install
+      - name: Playwright Install
+        run: npx playwright install
+      - name: Test Storybook
+        run: npm run test-storybook

.storybook/main.ts

@@ -2,7 +2,11 @@ import { StorybookConfig } from '@analogjs/storybook-angular';
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-docs"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-docs",
+    "@storybook/addon-vitest"
+  ],
   framework: {
     name: "@analogjs/storybook-angular",
     options: {},

.storybook/preview.ts

@@ -1,16 +1,11 @@
 import 'zone.js';
-import { applicationConfig, type Preview } from '@analogjs/storybook-angular';
+import { type Preview } from '@analogjs/storybook-angular';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import docJson from '../documentation.json';
 setCompodocJson(docJson);
 
 const preview: Preview = {
-  decorators: [
-    applicationConfig({
-      providers: [provideNoopAnimations()]
-    })
-  ],
+  decorators: [],
 
   parameters: {
     controls: {

.storybook/tsconfig.json

@@ -6,6 +6,6 @@
     "resolveJsonModule": true
   },
   "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
-  "include": ["../src/**/*", "./preview.ts"],
+  "include": ["../src/**/*", "./preview.ts", "./vitest.setup.ts"],
   "files": ["./typings.d.ts"]
 }

.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@analogjs/storybook-angular/testing';
+
+import * as projectAnnotations from './preview';
+
+const annotations = setProjectAnnotations([projectAnnotations]);
+
+// Run Storybook's beforeAll hook
+beforeAll(annotations.beforeAll);

angular.json

@@ -116,6 +116,9 @@
             ],
             "outputDir": "storybook-static"
           }
+        },
+        "test-storybook": {
+          "builder": "@analogjs/vitest-angular:test"
         }
       }
     }