chore: update dependencies

Turns out most Storybook Addons expect React and won't be installable in
a Svelte(Kit) project. But I could figure out how to use the play
functions. So I have an example for it.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

.gitignore

@@ -19,3 +19,4 @@ vite.config.ts.timestamp-*
 # See https://tauri.app/v1/guides/development/development-cycle#2-start-tauri-development-window
 src-tauri/target
 account.json
+.nyc_output

.nycrc.json

@@ -0,0 +1,6 @@
+{
+	"all": true,
+	"check-coverage": true,
+	"extends": "@istanbuljs/nyc-config-typescript",
+	"reporters": ["text", "json", "lcov"]
+}

.storybook/main.ts

@@ -19,10 +19,12 @@ const config: StorybookConfig = {
 	stories: ['../stories/**/*.mdx', '../stories/**/*.stories.ts'],
 	addons: [
 		'@storybook/addon-a11y',
+		'@storybook/addon-coverage',
 		'@storybook/addon-essentials',
 		'@storybook/addon-links',
 		'@storybook/addon-interactions',
-		'@storybook/addon-toolbar'
+		'@storybook/addon-toolbar',
+		'@storybook/test'
 	],
 	core: {
 		disableTelemetry: true

package.json

@@ -14,7 +14,7 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"tauri": "tauri",
 		"test:unit": "vitest",
-		"test:unit:coverage": "vitest --coverage",
+		"test:unit:coverage": "vitest run --coverage",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
 		"storybook": "STORYBOOK_DISABLE_TELEMETRY=1 storybook dev -p 6006",
@@ -23,56 +23,58 @@
 		"predeploy-storybook": "npm run build-storybook"
 	},
 	"devDependencies": {
-		"@playwright/test": "1.45.1",
+		"@istanbuljs/nyc-config-typescript": "1.0.2",
-		"@skeletonlabs/skeleton": "2.10.1",
+		"@playwright/test": "1.45.3",
+		"@skeletonlabs/skeleton": "2.10.2",
 		"@skeletonlabs/tw-plugin": "0.4.0",
-		"@storybook/addon-a11y": "8.1.11",
+		"@storybook/addon-a11y": "8.2.6",
-		"@storybook/addon-essentials": "8.1.11",
+		"@storybook/addon-coverage": "1.0.4",
-		"@storybook/addon-interactions": "8.1.11",
+		"@storybook/addon-essentials": "8.2.6",
-		"@storybook/addon-links": "8.1.11",
+		"@storybook/addon-interactions": "8.2.6",
-		"@storybook/blocks": "8.1.11",
+		"@storybook/addon-links": "8.2.6",
-		"@storybook/builder-vite": "8.1.11",
+		"@storybook/blocks": "8.2.6",
-		"@storybook/svelte": "8.1.11",
+		"@storybook/builder-vite": "8.2.6",
-		"@storybook/sveltekit": "8.1.11",
+		"@storybook/svelte": "8.2.6",
-		"@storybook/test": "8.1.11",
+		"@storybook/sveltekit": "8.2.6",
+		"@storybook/test": "8.2.6",
 		"@sveltejs/adapter-node": "5.2.0",
 		"@sveltejs/kit": "2.5.18",
 		"@sveltejs/vite-plugin-svelte": "3.1.1",
 		"@tailwindcss/forms": "0.5.7",
 		"@tailwindcss/typography": "0.5.13",
 		"@tauri-apps/cli": "1.6.0",
-		"@testing-library/jest-dom": "6.4.6",
+		"@testing-library/jest-dom": "6.4.8",
-		"@testing-library/svelte": "5.2.0",
+		"@testing-library/svelte": "5.2.1",
-		"@types/node": "20.14.9",
+		"@types/node": "22.0.0",
-		"@typescript-eslint/eslint-plugin": "7.15.0",
+		"@typescript-eslint/eslint-plugin": "7.18.0",
-		"@typescript-eslint/parser": "7.15.0",
+		"@typescript-eslint/parser": "7.18.0",
-		"@vitest/coverage-v8": "1.6.0",
+		"@vitest/coverage-istanbul": "2.0.4",
 		"autoprefixer": "10.4.19",
 		"eslint": "8.56.0",
 		"eslint-config-prettier": "9.1.0",
 		"eslint-plugin-storybook": "0.8.0",
-		"eslint-plugin-svelte": "2.41.0",
+		"eslint-plugin-svelte": "2.43.0",
 		"gh-pages": "6.1.1",
-		"jsdom": "24.1.0",
+		"jsdom": "24.1.1",
-		"postcss": "8.4.39",
+		"postcss": "8.4.40",
-		"prettier": "3.3.2",
+		"prettier": "3.3.3",
-		"prettier-plugin-svelte": "3.2.5",
+		"prettier-plugin-svelte": "3.2.6",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"storybook": "8.1.11",
+		"storybook": "8.2.6",
 		"svelte": "4.2.18",
 		"svelte-check": "3.8.4",
 		"svelte-i18n": "4.0.0",
-		"svelte-octicons": "18.8.0",
+		"svelte-octicons": "18.9.0",
-		"tailwindcss": "3.4.4",
+		"tailwindcss": "3.4.7",
 		"tslib": "2.6.3",
-		"typescript": "5.5.3",
+		"typescript": "5.5.4",
-		"vite": "5.3.3",
+		"vite": "5.3.5",
-		"vitest": "1.6.0"
+		"vitest": "2.0.4"
 	},
 	"type": "module",
 	"dependencies": {
-		"@floating-ui/dom": "1.6.7",
+		"@floating-ui/dom": "1.6.8",
 		"axios": "1.7.2",
 		"cheerio": "1.0.0-rc.12"
 	}

stories/pages/Profile.stories.ts

@@ -11,6 +11,7 @@
  */
 
 import type { Meta, StoryObj } from '@storybook/svelte';
+import { within, userEvent, expect, fn } from '@storybook/test';
 
 import Profile from '$lib/components/pages/Profile.svelte';
 
@@ -43,5 +44,10 @@ export const Plain: Story = {
 				username: 'jane_doe'
 			}
 		}
+	},
+	play: async ({ args, canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole('button', { name: 'Menu' }));
+		expect(true).toBe(true);
 	}
 };

vitest.config.ts

@@ -26,7 +26,8 @@ export default defineConfig({
 	plugins: [svelte({ hot: !process.env.VITEST }), svelteTesting()],
 	test: {
 		coverage: {
-			include: ['src']
+			include: ['src'],
+			provider: 'istanbul'
 		},
 		include: ['tests/**/*.test.ts'],
 		environment: 'jsdom',