Add Github action for running Storybook tests (#2160)

* Add storybook test-runner

* Update storybook dependencies

* Make test-runner work with Svelte CSF

* Set up CI to run storybook tests

* Fix play functions

* Fix test:coverage

.github/workflows/storybook-tests.yml

@@ -0,0 +1,17 @@
+name: Storybook Tests
+on: deployment_status
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+      - uses: actions/checkout@v4
+      - name: Checkout and Setup Node
+        uses: ./.github/actions/checkout-and-setup
+      - name: Install Playwright
+        run: pnpm exec playwright install --with-deps
+      - name: Run Storybook tests
+        run: pnpm stories:test
+        env:
+          TARGET_URL: '${{ github.event.deployment_status.target_url }}'

package.json

@@ -67,6 +67,7 @@
     "package:major": "pnpm version major && svelte-package",
     "stories:dev": "storybook dev -p 6006",
     "stories:build": "storybook build",
+    "stories:test": "test-storybook --index-json",
     "stylelint": "stylelint \"src/**/*.{css,postcss,svelte}\"",
     "stylelint:fix": "stylelint --fix \"src/**/*.{css,postcss,svelte}\"",
     "generate:locales": "esno scripts/generate-locales.ts",
@@ -86,7 +87,7 @@
     "@fontsource-variable/inter": "^5.0.8",
     "@fontsource/noto-sans-mono": "^5.0.9",
     "@lezer/highlight": "^1.1.3",
-    "@storybook/addon-actions": "^8.0.9",
+    "@storybook/addon-actions": "^8.1.9",
     "@sveltejs/package": "^2.2.6",
     "@sveltejs/svelte-virtual-list": "^3.0.1",
     "class-variance-authority": "^0.7.0",
@@ -113,19 +114,19 @@
     "@babel/core": "^7.20.12",
     "@babel/preset-typescript": "^7.18.6",
     "@grpc/grpc-js": "^1.7.3",
-    "@playwright/test": "^1.37.1",
-    "@storybook/addon-a11y": "^8.0.9",
-    "@storybook/addon-essentials": "^8.0.9",
-    "@storybook/addon-interactions": "^8.0.9",
-    "@storybook/addon-links": "^8.0.9",
-    "@storybook/addon-svelte-csf": "^4.1.2",
-    "@storybook/addon-themes": "^8.0.9",
-    "@storybook/blocks": "^8.0.9",
+    "@playwright/test": "^1.44.1",
+    "@storybook/addon-a11y": "^8.1.9",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/addon-interactions": "^8.1.9",
+    "@storybook/addon-links": "^8.1.9",
+    "@storybook/addon-svelte-csf": "^4.1.3",
+    "@storybook/addon-themes": "^8.1.9",
+    "@storybook/blocks": "^8.1.9",
     "@storybook/icons": "^1.2.9",
-    "@storybook/svelte": "^8.0.9",
-    "@storybook/sveltekit": "^8.0.9",
-    "@storybook/test": "^8.0.9",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/svelte": "^8.1.9",
+    "@storybook/sveltekit": "^8.1.9",
+    "@storybook/test": "^8.1.9",
+    "@storybook/test-runner": "^0.18.2",
     "@sveltejs/adapter-static": "^3.0.0",
     "@sveltejs/adapter-vercel": "^4.0.0",
     "@sveltejs/kit": "^2.5.0",
@@ -150,7 +151,8 @@
     "@types/yargs": "^17.0.24",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
-    "@vitest/ui": "^0.32.2",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
     "autoprefixer": "^10.4.13",
     "c8": "^7.12.0",
     "chalk": "^4.1.2",
@@ -163,7 +165,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-playwright": "^0.15.3",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-svelte": "^2.33.0",
     "eslint-plugin-vitest": "^0.2.8",
     "esno": "^0.16.3",
@@ -197,7 +199,7 @@
     "remark-rehype": "^10.1.0",
     "remark-toc": "^8.0.1",
     "rimraf": "^4.3.1",
-    "storybook": "^8.0.9",
+    "storybook": "^8.1.9",
     "stylelint": "^15.10.3",
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-standard": "^34.0.0",
@@ -218,8 +220,8 @@
     "unist-util-visit": "^5.0.0",
     "vite": "^5.0.12",
     "vite-node": "^0.23.4",
-    "vitest": "^1.0.0",
-    "vitest-localstorage-mock": "^0.0.1",
+    "vitest": "^1.6.0",
+    "vitest-localstorage-mock": "^0.1.2",
     "wait-port": "^1.0.4",
     "webpack": "^5.76.0",
     "yargs": "^17.7.2",