Fix: #79 & Initialize Tests (#81)

.changeset/yellow-meals-confess.md

@@ -0,0 +1,5 @@
+---
+"formsnap": patch
+---
+
+Fix (#79): Bug with the `options` prop of the `<Form.Root />` component

other/setupTest.ts

@@ -0,0 +1,89 @@
+// setupTest.ts
+/* eslint-disable @typescript-eslint/no-empty-function */
+import matchers from "@testing-library/jest-dom/matchers";
+import { expect, vi } from "vitest";
+import type { Navigation, Page } from "@sveltejs/kit";
+import { readable } from "svelte/store";
+import * as environment from "$app/environment";
+import * as navigation from "$app/navigation";
+import * as stores from "$app/stores";
+import { toHaveNoViolations } from "jest-axe";
+import { configure } from "@testing-library/dom";
+
+// Add custom jest matchers
+expect.extend(matchers);
+
+expect.extend(toHaveNoViolations as never);
+
+configure({
+	asyncUtilTimeout: 1500
+});
+
+// Mock SvelteKit runtime module $app/environment
+vi.mock("$app/environment", (): typeof environment => ({
+	browser: false,
+	dev: true,
+	building: false,
+	version: "any"
+}));
+
+// Mock SvelteKit runtime module $app/navigation
+vi.mock("$app/navigation", (): typeof navigation => ({
+	afterNavigate: () => {},
+	beforeNavigate: () => {},
+	disableScrollHandling: () => {},
+	goto: () => Promise.resolve(),
+	invalidate: () => Promise.resolve(),
+	invalidateAll: () => Promise.resolve(),
+	preloadData: () => Promise.resolve(),
+	preloadCode: () => Promise.resolve(),
+	onNavigate: () => {}
+}));
+
+// Mock SvelteKit runtime module $app/stores
+vi.mock("$app/stores", (): typeof stores => {
+	const getStores: typeof stores.getStores = () => {
+		const navigating = readable<Navigation | null>(null);
+		const page = readable<Page>({
+			url: new URL("http://localhost"),
+			params: {},
+			route: {
+				id: null
+			},
+			status: 200,
+			error: null,
+			data: {},
+			form: undefined
+		});
+		const updated = { subscribe: readable(false).subscribe, check: async () => false };
+
+		return { navigating, page, updated };
+	};
+
+	const page: typeof stores.page = {
+		subscribe(fn) {
+			return getStores().page.subscribe(fn);
+		}
+	};
+	const navigating: typeof stores.navigating = {
+		subscribe(fn) {
+			return getStores().navigating.subscribe(fn);
+		}
+	};
+	const updated: typeof stores.updated = {
+		subscribe(fn) {
+			return getStores().updated.subscribe(fn);
+		},
+		check: async () => false
+	};
+
+	return {
+		getStores,
+		navigating,
+		page,
+		updated
+	};
+});
+
+global.ResizeObserver = require("resize-observer-polyfill");
+Element.prototype.scrollIntoView = () => {};

package.json

@@ -12,13 +12,12 @@
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepare": "pnpm package",
 		"prepublishOnly": "pnpm run package",
-		"test": "pnpm run test:integration && pnpm run test:unit",
+		"test": "vitest",
+		"test:pw": "playwright test",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "prettier --plugin-search-dir . --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest",
 		"release": "changeset publish",
 		"changeset": "changeset"
 	},
@@ -60,6 +59,11 @@
 		"@sveltejs/package": "^2.2.2",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
 		"@tailwindcss/typography": "^0.5.9",
+		"@testing-library/dom": "^9.3.3",
+		"@testing-library/jest-dom": "^6.1.4",
+		"@testing-library/svelte": "^4.0.4",
+		"@testing-library/user-event": "^14.5.1",
+		"@types/testing-library__jest-dom": "^6.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"autoprefixer": "^10.4.14",
@@ -72,6 +76,8 @@
 		"eslint-plugin-svelte": "^2.30.0",
 		"esm-env": "^1.0.0",
 		"hast-util-to-html": "^9.0.0",
+		"jest-axe": "^8.0.0",
+		"jsdom": "^22.1.0",
 		"postcss": "^8.4.24",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.0",
@@ -80,6 +86,7 @@
 		"radix-icons-svelte": "^1.2.1",
 		"rehype-pretty-code": "^0.10.1",
 		"remark-gfm": "^3.0.1",
+		"resize-observer-polyfill": "^1.5.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"svelte-wrap-balancer": "^0.0.4",
@@ -92,7 +99,7 @@
 		"unist-builder": "^4.0.0",
 		"unist-util-visit": "^5.0.0",
 		"vite": "^4.4.2",
-		"vitest": "^0.32.2",
+		"vitest": "^0.33.0",
 		"zod": "^3.22.2"
 	},
 	"svelte": "./dist/index.js",

playwright.config.ts

@@ -2,8 +2,9 @@ import type { PlaywrightTestConfig } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
 	webServer: {
-		command: "npm run build && npm run preview",
-		port: 4173
+		command: "vite build && pnpm preview",
+		port: 5173,
+		reuseExistingServer: true
 	},
 	testDir: "tests",
 	testMatch: /(.+\.)?(test|spec)\.[jt]s/