@pyreon/form 0.11.5 → 0.11.7

package/src/tests/form-additional.test.tsx

@@ -1,6 +1,6 @@
-import { effect } from "@pyreon/reactivity"
-import { mount } from "@pyreon/runtime-dom"
-import type { FormState } from "../index"
+import { effect } from '@pyreon/reactivity'
+import { mount } from '@pyreon/runtime-dom'
+import type { FormState } from '../index'
 import {
   FormProvider,
   useFieldArray,
@@ -8,7 +8,7 @@ import {
   useFormContext,
   useFormState,
   useWatch,
-} from "../index"
+} from '../index'
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -19,7 +19,7 @@ function Capture<T>({ fn }: { fn: () => T }) {
 
 function mountWith<T>(fn: () => T): { result: T; unmount: () => void } {
   let result: T | undefined
-  const el = document.createElement("div")
+  const el = document.createElement('div')
   document.body.appendChild(el)
   const unmount = mount(
     <Capture
@@ -40,87 +40,87 @@ function mountWith<T>(fn: () => T): { result: T; unmount: () => void } {
 
 // ─── useFieldArray — additional operations ───────────────────────────────────
 
-describe("useFieldArray — additional operations", () => {
-  it("append multiple items sequentially", () => {
+describe('useFieldArray — additional operations', () => {
+  it('append multiple items sequentially', () => {
     const { result: arr, unmount } = mountWith(() => useFieldArray<string>([]))
 
-    arr.append("a")
-    arr.append("b")
-    arr.append("c")
-    expect(arr.values()).toEqual(["a", "b", "c"])
+    arr.append('a')
+    arr.append('b')
+    arr.append('c')
+    expect(arr.values()).toEqual(['a', 'b', 'c'])
     expect(arr.length()).toBe(3)
     unmount()
   })
 
-  it("remove first item shifts remaining", () => {
-    const { result: arr, unmount } = mountWith(() => useFieldArray(["x", "y", "z"]))
+  it('remove first item shifts remaining', () => {
+    const { result: arr, unmount } = mountWith(() => useFieldArray(['x', 'y', 'z']))
 
     arr.remove(0)
-    expect(arr.values()).toEqual(["y", "z"])
+    expect(arr.values()).toEqual(['y', 'z'])
     expect(arr.length()).toBe(2)
     unmount()
   })
 
-  it("remove last item", () => {
-    const { result: arr, unmount } = mountWith(() => useFieldArray(["a", "b", "c"]))
+  it('remove last item', () => {
+    const { result: arr, unmount } = mountWith(() => useFieldArray(['a', 'b', 'c']))
 
     arr.remove(2)
-    expect(arr.values()).toEqual(["a", "b"])
+    expect(arr.values()).toEqual(['a', 'b'])
     unmount()
   })
 
-  it("move item forward (lower to higher index)", () => {
-    const { result: arr, unmount } = mountWith(() => useFieldArray(["a", "b", "c", "d"]))
+  it('move item forward (lower to higher index)', () => {
+    const { result: arr, unmount } = mountWith(() => useFieldArray(['a', 'b', 'c', 'd']))
 
     arr.move(1, 3) // move "b" from index 1 to index 3
-    expect(arr.values()).toEqual(["a", "c", "d", "b"])
+    expect(arr.values()).toEqual(['a', 'c', 'd', 'b'])
     unmount()
   })
 
-  it("move item backward (higher to lower index)", () => {
-    const { result: arr, unmount } = mountWith(() => useFieldArray(["a", "b", "c", "d"]))
+  it('move item backward (higher to lower index)', () => {
+    const { result: arr, unmount } = mountWith(() => useFieldArray(['a', 'b', 'c', 'd']))
 
     arr.move(3, 0) // move "d" from index 3 to index 0
-    expect(arr.values()).toEqual(["d", "a", "b", "c"])
+    expect(arr.values()).toEqual(['d', 'a', 'b', 'c'])
     unmount()
   })
 
-  it("swap preserves all other items", () => {
-    const { result: arr, unmount } = mountWith(() => useFieldArray(["a", "b", "c", "d", "e"]))
+  it('swap preserves all other items', () => {
+    const { result: arr, unmount } = mountWith(() => useFieldArray(['a', 'b', 'c', 'd', 'e']))
 
     arr.swap(1, 3) // swap "b" and "d"
-    expect(arr.values()).toEqual(["a", "d", "c", "b", "e"])
+    expect(arr.values()).toEqual(['a', 'd', 'c', 'b', 'e'])
     unmount()
   })
 
-  it("prepend then remove first restores original", () => {
-    const { result: arr, unmount } = mountWith(() => useFieldArray(["x", "y"]))
+  it('prepend then remove first restores original', () => {
+    const { result: arr, unmount } = mountWith(() => useFieldArray(['x', 'y']))
 
-    arr.prepend("new")
-    expect(arr.values()).toEqual(["new", "x", "y"])
+    arr.prepend('new')
+    expect(arr.values()).toEqual(['new', 'x', 'y'])
     arr.remove(0)
-    expect(arr.values()).toEqual(["x", "y"])
+    expect(arr.values()).toEqual(['x', 'y'])
     unmount()
   })
 
-  it("insert at beginning is equivalent to prepend", () => {
-    const { result: arr, unmount } = mountWith(() => useFieldArray(["b", "c"]))
+  it('insert at beginning is equivalent to prepend', () => {
+    const { result: arr, unmount } = mountWith(() => useFieldArray(['b', 'c']))
 
-    arr.insert(0, "a")
-    expect(arr.values()).toEqual(["a", "b", "c"])
+    arr.insert(0, 'a')
+    expect(arr.values()).toEqual(['a', 'b', 'c'])
     unmount()
   })
 
-  it("insert at end is equivalent to append", () => {
-    const { result: arr, unmount } = mountWith(() => useFieldArray(["a", "b"]))
+  it('insert at end is equivalent to append', () => {
+    const { result: arr, unmount } = mountWith(() => useFieldArray(['a', 'b']))
 
-    arr.insert(2, "c")
-    expect(arr.values()).toEqual(["a", "b", "c"])
+    arr.insert(2, 'c')
+    expect(arr.values()).toEqual(['a', 'b', 'c'])
     unmount()
   })
 
-  it("replace with empty array clears all items", () => {
-    const { result: arr, unmount } = mountWith(() => useFieldArray(["a", "b", "c"]))
+  it('replace with empty array clears all items', () => {
+    const { result: arr, unmount } = mountWith(() => useFieldArray(['a', 'b', 'c']))
 
     arr.replace([])
     expect(arr.values()).toEqual([])
@@ -128,11 +128,11 @@ describe("useFieldArray — additional operations", () => {
     unmount()
   })
 
-  it("replace generates new keys for all items", () => {
-    const { result: arr, unmount } = mountWith(() => useFieldArray(["a", "b"]))
+  it('replace generates new keys for all items', () => {
+    const { result: arr, unmount } = mountWith(() => useFieldArray(['a', 'b']))
 
     const keysBefore = arr.items().map((i: any) => i.key)
-    arr.replace(["x", "y"])
+    arr.replace(['x', 'y'])
     const keysAfter = arr.items().map((i: any) => i.key)
 
     // All keys should be different since replace creates new items
@@ -141,7 +141,7 @@ describe("useFieldArray — additional operations", () => {
     unmount()
   })
 
-  it("items signal is reactive — effect fires on append", () => {
+  it('items signal is reactive — effect fires on append', () => {
     const { result: arr, unmount } = mountWith(() => useFieldArray<string>([]))
 
     const lengths: number[] = []
@@ -151,34 +151,34 @@ describe("useFieldArray — additional operations", () => {
 
     expect(lengths).toEqual([0])
 
-    arr.append("a")
+    arr.append('a')
     expect(lengths).toEqual([0, 1])
 
-    arr.append("b")
+    arr.append('b')
     expect(lengths).toEqual([0, 1, 2])
 
     cleanup.dispose()
     unmount()
   })
 
-  it("update preserves key identity", () => {
-    const { result: arr, unmount } = mountWith(() => useFieldArray(["a", "b", "c"]))
+  it('update preserves key identity', () => {
+    const { result: arr, unmount } = mountWith(() => useFieldArray(['a', 'b', 'c']))
 
     const keyBefore = arr.items()[1]!.key
-    arr.update(1, "updated")
+    arr.update(1, 'updated')
     const keyAfter = arr.items()[1]!.key
 
     // Same item, just value changed — key should be identical
     expect(keyAfter).toBe(keyBefore)
-    expect(arr.items()[1]!.value()).toBe("updated")
+    expect(arr.items()[1]!.value()).toBe('updated')
     unmount()
   })
 })
 
 // ─── useWatch — reactivity ───────────────────────────────────────────────────
 
-describe("useWatch — reactivity", () => {
-  it("single field watch is reactive to value changes", () => {
+describe('useWatch — reactivity', () => {
+  it('single field watch is reactive to value changes', () => {
     const { result, unmount } = mountWith(() => {
       const form = useForm({
         initialValues: { count: 0 },
@@ -186,7 +186,7 @@ describe("useWatch — reactivity", () => {
           /* noop */
         },
       })
-      const count = useWatch(form, "count")
+      const count = useWatch(form, 'count')
       return { form, count }
     })
 
@@ -207,10 +207,10 @@ describe("useWatch — reactivity", () => {
     unmount()
   })
 
-  it("watch all fields is reactive to any field change", () => {
+  it('watch all fields is reactive to any field change', () => {
     const { result, unmount } = mountWith(() => {
       const form = useForm({
-        initialValues: { first: "A", second: "B" },
+        initialValues: { first: 'A', second: 'B' },
         onSubmit: () => {
           /* noop */
         },
@@ -219,33 +219,33 @@ describe("useWatch — reactivity", () => {
       return { form, all }
     })
 
-    expect(result.all()).toEqual({ first: "A", second: "B" })
+    expect(result.all()).toEqual({ first: 'A', second: 'B' })
 
-    result.form.fields.first.setValue("X")
-    expect(result.all()).toEqual({ first: "X", second: "B" })
+    result.form.fields.first.setValue('X')
+    expect(result.all()).toEqual({ first: 'X', second: 'B' })
 
-    result.form.fields.second.setValue("Y")
-    expect(result.all()).toEqual({ first: "X", second: "Y" })
+    result.form.fields.second.setValue('Y')
+    expect(result.all()).toEqual({ first: 'X', second: 'Y' })
     unmount()
   })
 
-  it("multiple field watch returns signal array with correct types", () => {
+  it('multiple field watch returns signal array with correct types', () => {
     const { result, unmount } = mountWith(() => {
       const form = useForm({
-        initialValues: { name: "Alice", age: 30 },
+        initialValues: { name: 'Alice', age: 30 },
         onSubmit: () => {
           /* noop */
         },
       })
-      const [name, age] = useWatch(form, ["name", "age"])
+      const [name, age] = useWatch(form, ['name', 'age'])
       return { form, name, age }
     })
 
-    expect(result.name!()).toBe("Alice")
+    expect(result.name!()).toBe('Alice')
     expect(result.age!()).toBe(30)
 
-    result.form.fields.name.setValue("Bob")
-    expect(result.name!()).toBe("Bob")
+    result.form.fields.name.setValue('Bob')
+    expect(result.name!()).toBe('Bob')
     expect(result.age!()).toBe(30) // unchanged
     unmount()
   })
@@ -253,11 +253,11 @@ describe("useWatch — reactivity", () => {
 
 // ─── useFormState — additional scenarios ─────────────────────────────────────
 
-describe("useFormState — additional scenarios", () => {
-  it("tracks dirty fields correctly after multiple changes", () => {
+describe('useFormState — additional scenarios', () => {
+  it('tracks dirty fields correctly after multiple changes', () => {
     const { result, unmount } = mountWith(() => {
       const form = useForm({
-        initialValues: { email: "", name: "", age: 0 },
+        initialValues: { email: '', name: '', age: 0 },
         onSubmit: () => {
           /* noop */
         },
@@ -266,31 +266,31 @@ describe("useFormState — additional scenarios", () => {
       return { form, state }
     })
 
-    result.form.fields.email.setValue("test@test.com")
-    result.form.fields.name.setValue("Alice")
+    result.form.fields.email.setValue('test@test.com')
+    result.form.fields.name.setValue('Alice')
 
     const s = result.state()
     expect(s.dirtyFields).toEqual({ email: true, name: true })
     expect(s.isDirty).toBe(true)
 
     // Revert email
-    result.form.fields.email.setValue("")
+    result.form.fields.email.setValue('')
     const s2 = result.state()
     expect(s2.dirtyFields).toEqual({ name: true })
     expect(s2.isDirty).toBe(true)
 
     // Revert name too
-    result.form.fields.name.setValue("")
+    result.form.fields.name.setValue('')
     const s3 = result.state()
     expect(s3.dirtyFields).toEqual({})
     expect(s3.isDirty).toBe(false)
     unmount()
   })
 
-  it("tracks touched fields after blur events", () => {
+  it('tracks touched fields after blur events', () => {
     const { result, unmount } = mountWith(() => {
       const form = useForm({
-        initialValues: { email: "", password: "" },
+        initialValues: { email: '', password: '' },
         onSubmit: () => {
           /* noop */
         },
@@ -309,12 +309,12 @@ describe("useFormState — additional scenarios", () => {
     unmount()
   })
 
-  it("submitCount and submitError are tracked", async () => {
+  it('submitCount and submitError are tracked', async () => {
     const { result, unmount } = mountWith(() => {
       const form = useForm({
-        initialValues: { name: "valid" },
+        initialValues: { name: 'valid' },
         onSubmit: async () => {
-          throw new Error("Submit failed")
+          throw new Error('Submit failed')
         },
       })
       const state = useFormState(form)
@@ -333,14 +333,14 @@ describe("useFormState — additional scenarios", () => {
     unmount()
   })
 
-  it("isValidating is tracked during async validation", async () => {
+  it('isValidating is tracked during async validation', async () => {
     const { result, unmount } = mountWith(() => {
       const form = useForm({
-        initialValues: { name: "" },
+        initialValues: { name: '' },
         validators: {
           name: async (v) => {
             await new Promise((r) => setTimeout(r, 20))
-            return !v ? "Required" : undefined
+            return !v ? 'Required' : undefined
           },
         },
         onSubmit: () => {
@@ -364,17 +364,17 @@ describe("useFormState — additional scenarios", () => {
 
 // ─── Validation integration — schema-based ───────────────────────────────────
 
-describe("validation integration — schema-based", () => {
-  it("schema errors are set only on fields without field-level errors", async () => {
+describe('validation integration — schema-based', () => {
+  it('schema errors are set only on fields without field-level errors', async () => {
     const { result: form, unmount } = mountWith(() =>
       useForm({
-        initialValues: { email: "", password: "" },
+        initialValues: { email: '', password: '' },
         validators: {
-          email: (v) => (!v ? "Email required" : undefined),
+          email: (v) => (!v ? 'Email required' : undefined),
         },
         schema: (_values) => ({
-          email: "Schema email error", // Should be overridden by field-level
-          password: "Schema password error",
+          email: 'Schema email error', // Should be overridden by field-level
+          password: 'Schema password error',
         }),
         onSubmit: () => {
           /* noop */
@@ -385,19 +385,19 @@ describe("validation integration — schema-based", () => {
     await form.validate()
 
     // email has a field-level error ("Email required") — schema error ignored
-    expect(form.fields.email.error()).toBe("Email required")
+    expect(form.fields.email.error()).toBe('Email required')
     // password has no field-level validator — schema error applied
-    expect(form.fields.password.error()).toBe("Schema password error")
+    expect(form.fields.password.error()).toBe('Schema password error')
     unmount()
   })
 
-  it("async schema validation works", async () => {
+  it('async schema validation works', async () => {
     const { result: form, unmount } = mountWith(() =>
       useForm({
-        initialValues: { code: "" },
+        initialValues: { code: '' },
         schema: async (values) => {
           await new Promise((r) => setTimeout(r, 5))
-          if (!values.code) return { code: "Code is required" }
+          if (!values.code) return { code: 'Code is required' }
           return {}
         },
         onSubmit: () => {
@@ -408,21 +408,21 @@ describe("validation integration — schema-based", () => {
 
     const valid = await form.validate()
     expect(valid).toBe(false)
-    expect(form.fields.code.error()).toBe("Code is required")
+    expect(form.fields.code.error()).toBe('Code is required')
     unmount()
   })
 })
 
 // ─── form.reset() clears all field state ─────────────────────────────────────
 
-describe("form.reset() comprehensive", () => {
-  it("clears all field state including errors, touched, dirty, submitCount, submitError", async () => {
+describe('form.reset() comprehensive', () => {
+  it('clears all field state including errors, touched, dirty, submitCount, submitError', async () => {
     const { result: form, unmount } = mountWith(() =>
       useForm({
-        initialValues: { email: "", password: "" },
+        initialValues: { email: '', password: '' },
         validators: {
-          email: (v) => (!v ? "Required" : undefined),
-          password: (v) => (!v ? "Required" : undefined),
+          email: (v) => (!v ? 'Required' : undefined),
+          password: (v) => (!v ? 'Required' : undefined),
         },
         onSubmit: () => {
           /* noop */
@@ -431,8 +431,8 @@ describe("form.reset() comprehensive", () => {
     )
 
     // Dirty up the form
-    form.fields.email.setValue("changed")
-    form.fields.password.setValue("changed")
+    form.fields.email.setValue('changed')
+    form.fields.password.setValue('changed')
     form.fields.email.setTouched()
     form.fields.password.setTouched()
     await form.handleSubmit() // triggers validation
@@ -448,8 +448,8 @@ describe("form.reset() comprehensive", () => {
     form.reset()
 
     // All state should be cleared
-    expect(form.fields.email.value()).toBe("")
-    expect(form.fields.password.value()).toBe("")
+    expect(form.fields.email.value()).toBe('')
+    expect(form.fields.password.value()).toBe('')
     expect(form.fields.email.error()).toBeUndefined()
     expect(form.fields.password.error()).toBeUndefined()
     expect(form.fields.email.touched()).toBe(false)
@@ -466,19 +466,19 @@ describe("form.reset() comprehensive", () => {
 
 // ─── Debounced validation — additional scenarios ─────────────────────────────
 
-describe("debounced validation — additional", () => {
-  it("debounced validation on blur only fires after delay", async () => {
+describe('debounced validation — additional', () => {
+  it('debounced validation on blur only fires after delay', async () => {
     const calls: string[] = []
     const { result: form, unmount } = mountWith(() =>
       useForm({
-        initialValues: { query: "" },
+        initialValues: { query: '' },
         validators: {
           query: (v) => {
             calls.push(v as string)
             return undefined
           },
         },
-        validateOn: "blur",
+        validateOn: 'blur',
         debounceMs: 40,
         onSubmit: () => {
           /* noop */
@@ -486,9 +486,9 @@ describe("debounced validation — additional", () => {
       }),
     )
 
-    form.fields.query.setValue("a")
+    form.fields.query.setValue('a')
     form.fields.query.setTouched()
-    form.fields.query.setValue("ab")
+    form.fields.query.setValue('ab')
     form.fields.query.setTouched()
 
     // Nothing fired yet
@@ -501,18 +501,18 @@ describe("debounced validation — additional", () => {
     unmount()
   })
 
-  it("field-level reset clears debounce timer for that field", async () => {
+  it('field-level reset clears debounce timer for that field', async () => {
     let callCount = 0
     const { result: form, unmount } = mountWith(() =>
       useForm({
-        initialValues: { name: "" },
+        initialValues: { name: '' },
         validators: {
           name: () => {
             callCount++
             return undefined
           },
         },
-        validateOn: "blur",
+        validateOn: 'blur',
         debounceMs: 50,
         onSubmit: () => {
           /* noop */
@@ -533,10 +533,10 @@ describe("debounced validation — additional", () => {
 
 // ─── FormProvider with direct VNode children ─────────────────────────────────
 
-describe("FormProvider — VNode children branch", () => {
-  it("renders when children is a direct VNode (not a function)", () => {
+describe('FormProvider — VNode children branch', () => {
+  it('renders when children is a direct VNode (not a function)', () => {
     let contextForm: FormState<{ name: string }> | undefined
-    const el = document.createElement("div")
+    const el = document.createElement('div')
     document.body.appendChild(el)
 
     function Child() {
@@ -546,7 +546,7 @@ describe("FormProvider — VNode children branch", () => {
 
     function TestComponent() {
       const form = useForm({
-        initialValues: { name: "Direct" },
+        initialValues: { name: 'Direct' },
         onSubmit: () => {
           /* noop */
         },
@@ -560,7 +560,7 @@ describe("FormProvider — VNode children branch", () => {
 
     const unmount = mount(<TestComponent />, el)
     expect(contextForm).toBeDefined()
-    expect(contextForm!.fields.name.value()).toBe("Direct")
+    expect(contextForm!.fields.name.value()).toBe('Direct')
     unmount()
     el.remove()
   })