[form] Add content component test

Author: x0k

packages/form/package.json

@@ -47,6 +47,7 @@
     "@sveltejs/vite-plugin-svelte": "catalog:",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.6",
+    "@testing-library/user-event": "^14.6.1",
     "@tsconfig/svelte": "catalog:",
     "@types/json-schema": "^7.0.15",
     "@types/json-schema-merge-allof": "^0.6.5",

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

@@ -1,5 +1,6 @@
-import { it } from "vitest";
-import { render, screen } from "@testing-library/svelte";
+import { expect, it } from "vitest";
+import { render, screen, getByText } from "@testing-library/svelte";
+import { userEvent } from '@testing-library/user-event';
 
 import type { Schema } from "@/core/index.js";
 import { theme } from "@/basic-theme/index.js";
@@ -9,21 +10,25 @@ 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";
+import { computePseudoId, DEFAULT_ID_PREFIX, DEFAULT_ID_SEPARATOR, DEFAULT_PSEUDO_ID_SEPARATOR, pathToId } from './id-schema.js';
 
-it("should preserve multi select field state in array", () => {
+it("should preserve state of multi select field in array", async () => {
+  const user = userEvent.setup()
   const schema: Schema = {
     type: "array",
     title: "Array",
     items: {
       anyOf: [
         {
+          title: "Foo option",
           properties: {
             foo: {
               type: "string",
             },
           },
         },
         {
+          title: "Bar option",
           properties: {
             bar: {
               type: "string",
@@ -48,4 +53,25 @@ it("should preserve multi select field state in array", () => {
     context: new Map([[FORM_CONTEXT, form.context]]),
     props: { form }
   })
+
+  const id = pathToId(DEFAULT_ID_PREFIX, DEFAULT_ID_SEPARATOR, [1])
+  const pseudoId = computePseudoId(DEFAULT_PSEUDO_ID_SEPARATOR, id, 'anyof')
+  const el = document.getElementById(pseudoId)
+  if (el === null) {
+    throw new Error(`cannot find ${pseudoId} select`)
+  }
+  await user.selectOptions(el, 'Bar option')
+
+  const input = screen.getByLabelText('bar')
+  await user.type(input, 'bar state')
+
+  const firstItem = document.querySelector('[data-layout="array-item"]')
+  if (!(firstItem instanceof HTMLElement)) {
+    throw new Error('cannot find first item')
+  }
+  const delBtn = getByText(firstItem, 'Del')
+  user.click(delBtn)
+
+  const input2 = screen.getByLabelText('bar')
+  expect(input2).toHaveValue('bar state')
 });

packages/form/tsconfig.json

@@ -23,6 +23,7 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.js",
-    "src/**/*.svelte"
+    "src/**/*.svelte",
+    "./vitest-setup.ts"
   ],
 }