@zeno-lib/forms 0.4.0 → 0.6.0

package/src/use-app-fields.test-d.ts

@@ -1,6 +1,8 @@
-import { test } from "vitest"
+import type { ReactNode } from "react"
+import { expectTypeOf, test } from "vitest"
 import { z } from "zod"
 import { useForm } from "./create-form"
+import { createZenoForm } from "./create-zeno-form"
 
 const schema = z.object({
   accept: z.boolean(),
@@ -93,3 +95,51 @@ test("listeners prop is accepted on every field wrapper", () => {
     name: "email",
   })
 })
+
+test("ControlField types its control with the value at `name`", () => {
+  const form = useForm({
+    onSubmit: () => undefined,
+    schema: z.object({
+      phone: z.string().nullable(),
+      rating: z.number(),
+    }),
+  })
+  form.ControlField({
+    name: "phone",
+    render: (control) => {
+      expectTypeOf(control.value).toEqualTypeOf<string | null>()
+      return null
+    },
+  })
+  form.ControlField({
+    name: "rating",
+    render: (control) => {
+      control.onChange(3)
+      // @ts-expect-error — the field holds a number
+      control.onChange("3")
+      return null
+    },
+  })
+  // @ts-expect-error — not a valid path
+  form.ControlField({ name: "nonexistent", render: () => null })
+})
+
+test("a field whose `render` takes another argument keeps its own type", () => {
+  const { useForm: useListForm } = createZenoForm({
+    fieldComponents: {
+      ListField: (_: { render: (row: { id: string }) => ReactNode }) => null,
+    },
+    formComponents: {},
+  })
+  const form = useListForm({
+    onSubmit: () => undefined,
+    schema: z.object({ rows: z.array(z.string()) }),
+  })
+  form.ListField({
+    name: "rows",
+    render: (row) => {
+      expectTypeOf(row).toEqualTypeOf<{ id: string }>()
+      return null
+    },
+  })
+})

package/src/use-form.focus-invalid.test.tsx

@@ -9,6 +9,7 @@ import type { ReactNode } from "react"
 import { afterEach, describe, expect, test, vi } from "vitest"
 import { z } from "zod"
 import { Form, FormProvider, RadioGroupFieldItem, useForm } from "./create-form"
+import { submitAction } from "./lib/submit-action"
 
 afterEach(() => {
   cleanup()
@@ -103,6 +104,39 @@ describe("<Form> — focus the first invalid field on a failed submit", () => {
     )
   })
 
+  test("focuses a field error returned through submitAction", async () => {
+    const user = userEvent.setup()
+    function Harness() {
+      const form = useForm({
+        defaultValues: { email: "ada@example.com", name: "Ada" },
+        onSubmit: (submit) =>
+          submitAction(submit, () =>
+            Promise.resolve({
+              error: { fieldErrors: { name: ["Taken"] }, formErrors: [] },
+              ok: false as const,
+            })
+          ),
+        schema,
+      })
+      const { EmailField, InputField, SubmitButton } = form
+      return (
+        <FormProvider form={form}>
+          <Form aria-label="Profile">
+            <EmailField name="email" />
+            <InputField label="Name" name="name" />
+            <SubmitButton>Save</SubmitButton>
+          </Form>
+        </FormProvider>
+      )
+    }
+    render(<Harness />)
+    await user.click(screen.getByRole("button", { name: "Save" }))
+    expect(await screen.findByText("Taken")).toBeTruthy()
+    await waitFor(() =>
+      expect(document.activeElement).toBe(control("Profile", "name"))
+    )
+  })
+
   test("a radio group or slider root hands focus to its tabbable child", async () => {
     const user = userEvent.setup()
     function Harness({ sliderFirst }: { sliderFirst: boolean }) {