[form] WIP: Add content component test

Author: x0k

mkfile

@@ -41,6 +41,8 @@ f/:
     pnpm run check
   t:
     pnpm run test $@
+  tui:
+    pnpm run test:ui
   popd
 
 docs/:

packages/form/package.json

@@ -29,6 +29,7 @@
   "scripts": {
     "dev": "vite",
     "test": "vitest run --exclude '.svelte-kit/**'",
+    "test:ui": "vitest --ui --exclude '.svelte-kit/**'",
     "build": "svelte-package && publint",
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
@@ -44,10 +45,14 @@
   "devDependencies": {
     "@sveltejs/package": "catalog:",
     "@sveltejs/vite-plugin-svelte": "catalog:",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.6",
     "@tsconfig/svelte": "catalog:",
     "@types/json-schema": "^7.0.15",
     "@types/json-schema-merge-allof": "^0.6.5",
+    "@vitest/ui": "^3.0.4",
     "deep-freeze-es6": "^4.0.0",
+    "jsdom": "^26.0.0",
     "svelte": "catalog:",
     "svelte-check": "catalog:",
     "vite": "catalog:",

packages/form/src/form/content.test.ts

@@ -0,0 +1,51 @@
+import { it } from "vitest";
+import { render, screen } from "@testing-library/svelte";
+
+import type { Schema } from "@/core/index.js";
+import { theme } from "@/basic-theme/index.js";
+import { createValidator } from "@/fake-validator.js";
+import { translation } from "@/translations/en.js";
+
+import { FORM_CONTEXT } from "./context/index.js";
+import { createForm3 } from "./create-form.svelte.js";
+import Content from "./content.svelte";
+
+it("should preserve multi select field state in array", () => {
+  const schema: Schema = {
+    type: "array",
+    title: "Array",
+    items: {
+      anyOf: [
+        {
+          properties: {
+            foo: {
+              type: "string",
+            },
+          },
+        },
+        {
+          properties: {
+            bar: {
+              type: "string",
+            },
+          },
+        },
+      ],
+    },
+  };
+
+  const validator = createValidator();
+
+  const form = createForm3({
+    ...theme,
+    validator,
+    translation,
+    schema,
+    initialValue: [{}, {}],
+  });
+
+  render(Content, {
+    context: new Map([[FORM_CONTEXT, form.context]]),
+    props: { form }
+  })
+});

packages/form/src/form/context/context.ts

@@ -59,7 +59,7 @@ export interface FormContext {
   >;
 }
 
-const FORM_CONTEXT = Symbol("form-context");
+export const FORM_CONTEXT = Symbol("form-context");
 
 export function getFormContext(): FormContext {
   return getContext(FORM_CONTEXT);

packages/form/vite.config.ts

@@ -3,15 +3,16 @@ import { resolve } from "node:path";
 
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { svelteTesting } from "@testing-library/svelte/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  test: {},
-  plugins: [svelte()],
+  test: {
+    environment: "jsdom",
+    setupFiles: ['./vitest-setup.ts']
+  },
+  plugins: [svelte(), svelteTesting()],
   resolve: {
-    conditions: process.env.VITEST
-      ? ["browser"]
-      : ["module", "browser", "development|production"],
     alias: {
       "@": resolve(__dirname, "src"),
     },

packages/form/vitest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'