@zeno-lib/forms 0.5.0 → 0.7.0

package/src/with-form.test-d.ts

@@ -0,0 +1,76 @@
+import { expectTypeOf, test } from "vitest"
+import { z } from "zod"
+import {
+  useAppFields,
+  useAppForm,
+  useForm,
+  withFieldGroup,
+  withForm,
+} from "./create-form"
+
+const schema = z.object({
+  address: z.object({ city: z.string(), street: z.string() }),
+  email: z.string(),
+})
+type Values = z.infer<typeof schema>
+const VALUES: Values = { address: { city: "", street: "" }, email: "" }
+
+// Typed by `defaultValues`, as in TanStack; `render` gets the kit's fields
+// through `useAppFields`.
+const EmailSection = withForm({
+  defaultValues: VALUES,
+  props: { title: "" },
+  render({ form, title }) {
+    expectTypeOf(title).toEqualTypeOf<string>()
+    expectTypeOf(form.state.values).toEqualTypeOf<Values>()
+    // biome-ignore lint/correctness/useHookAtTopLevel: `withForm` runs `render` inside a component; a .ts file can't return JSX to show it.
+    const { InputField } = useAppFields(form)
+    InputField({ name: "address.city" })
+    // @ts-expect-error — not a path of the form
+    InputField({ name: "phone" })
+    return null
+  },
+})
+
+const AddressGroup = withFieldGroup({
+  defaultValues: VALUES.address,
+  render: () => null,
+})
+
+test("withForm takes the form useForm returns, with a schema", () => {
+  const form = useForm({ onSubmit: () => undefined, schema })
+  EmailSection({ form, title: "Email" })
+  AddressGroup({ fields: "address", form })
+})
+
+test("withForm takes the form useForm returns, with a validation mode", () => {
+  const form = useForm({
+    onSubmit: () => undefined,
+    schema,
+    validators: "change",
+  })
+  EmailSection({ form, title: "Email" })
+})
+
+test("withForm takes the form useForm returns, without a schema", () => {
+  const form = useForm<Values>({
+    defaultValues: VALUES,
+    onSubmit: () => undefined,
+  })
+  EmailSection({ form, title: "Email" })
+  AddressGroup({ fields: "address", form })
+})
+
+test("withForm still takes the form useAppForm returns", () => {
+  const form = useAppForm({ defaultValues: VALUES, onSubmit: () => undefined })
+  EmailSection({ form, title: "Email" })
+})
+
+test("withForm rejects a form with other values", () => {
+  const form = useForm({
+    onSubmit: () => undefined,
+    schema: z.object({ name: z.string() }),
+  })
+  // @ts-expect-error — the section needs `email` and `address`
+  EmailSection({ form, title: "Email" })
+})

package/src/with-form.test.tsx

@@ -0,0 +1,60 @@
+import { cleanup, render, screen } from "@zeno-lib/test/testing-library"
+import userEvent from "@zeno-lib/test/user-event"
+import { afterEach, expect, test, vi } from "vitest"
+import { z } from "zod"
+import {
+  Form,
+  FormProvider,
+  useAppFields,
+  useForm,
+  withForm,
+} from "./create-form"
+
+const CITY = /City/
+
+afterEach(() => {
+  cleanup()
+})
+
+const schema = z.object({
+  address: z.object({ city: z.string().min(1, "Enter a city") }),
+  name: z.string(),
+})
+type Profile = z.infer<typeof schema>
+
+const AddressSection = withForm({
+  defaultValues: {} as Profile,
+  render: ({ form }) => {
+    const { InputField } = useAppFields(form)
+    return <InputField label="City" name="address.city" />
+  },
+})
+
+test("a withForm section edits and validates the parent's form", async () => {
+  const user = userEvent.setup()
+  const onSubmit = vi.fn()
+  function Profile() {
+    const form = useForm({ onSubmit: ({ value }) => onSubmit(value), schema })
+    const { SubmitButton } = form
+    return (
+      <FormProvider form={form}>
+        <Form>
+          <AddressSection form={form} />
+          <SubmitButton>Save</SubmitButton>
+        </Form>
+      </FormProvider>
+    )
+  }
+  render(<Profile />)
+
+  await user.click(screen.getByRole("button", { name: "Save" }))
+  expect(await screen.findByText("Enter a city")).toBeTruthy()
+  expect(document.activeElement).toBe(screen.getByLabelText(CITY))
+
+  await user.type(screen.getByLabelText(CITY), "Basel")
+  await user.click(screen.getByRole("button", { name: "Save" }))
+  expect(onSubmit).toHaveBeenCalledWith({
+    address: { city: "Basel" },
+    name: "",
+  })
+})