chore: add test utils from melt4 + vitest-axe

Author: sm17p

packages/melt/package.json

@@ -57,7 +57,6 @@
 		"@sveltejs/kit": "^2.15.2",
 		"@sveltejs/package": "^2.3.9",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"jsdom": "^24.1.0",
 		"publint": "^0.1.9",
 		"svelte": "5.34.8",
 		"svelte-check": "^4.1.3",
@@ -70,8 +69,8 @@
 		"@floating-ui/dom": "^1.6.13",
 		"dequal": "^2.0.3",
 		"focus-trap": "^7.6.5",
-		"jest-axe": "^9.0.0",
-		"runed": "^0.23.3"
+		"runed": "^0.23.3",
+		"vitest-axe": "1.0.0-pre.3"
 	},
 	"publishConfig": {
 		"access": "public"

packages/melt/src/lib/utils/test.svelte.ts

@@ -1,5 +1,6 @@
 import { flushSync } from "svelte";
 import { test, vi } from "vitest";
+import { kbd } from "./keyboard";
 
 export function testWithEffect(
 	name: string,
@@ -32,3 +33,22 @@ export function focus(node: HTMLElement | null | undefined) {
 		flushSync(() => node.focus());
 	}
 }
+
+type KbdKeys = keyof typeof kbd;
+/**
+ * A wrapper around the internal kbd object to make it easier to use
+ * in tests which require the key names to be wrapped in curly braces.
+ */
+export const testKbd: Record<KbdKeys, string> = Object.entries(kbd).reduce((acc, [key, value]) => {
+	acc[key as KbdKeys] = `{${value}}`;
+	return acc;
+}, {} as Record<KbdKeys, string>);
+
+export function exists(get: (id: string) => HTMLElement, testId: string) {
+	try {
+		get(testId);
+		return true;
+	} catch {
+		return false;
+	}
+}

packages/melt/svelte.config.js

@@ -5,7 +5,9 @@ const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
-
+	compilerOptions: {
+		runes: true,
+	},
 	kit: {},
 };
 

packages/melt/vitest-setup-client.ts

@@ -1,2 +1,3 @@
 /// <reference types="@vitest/browser/matchers" />
 /// <reference types="@vitest/browser/providers/playwright" />
+/// <reference types="vitest-axe/extend-expect" />