@zeno-lib/forms 0.6.0 → 0.7.1

package/src/form-dialog.test.tsx

@@ -11,10 +11,14 @@ import { type ReactNode, useState } from "react"
 import { afterEach, describe, expect, onTestFinished, test, vi } from "vitest"
 import { z } from "zod"
 import { useForm } from "./create-form"
-import { FormDialog } from "./form-dialog"
+import {
+  type DiscardPromptText,
+  FormDialog,
+  FormDialogProvider,
+} from "./form-dialog"
 import type { ActionResult } from "./lib/action-result"
 import { submitAction } from "./lib/submit-action"
-import { useFormDialog } from "./lib/use-form-dialog"
+import { type FormDialogController, useFormDialog } from "./lib/use-form-dialog"
 
 const NAME = /Name/
 const EMAIL = /Email/
@@ -50,22 +54,36 @@ function Harness({
   children,
   onSubmit = vi.fn(),
   closeOnSubmit,
+  controller,
   disabled,
+  discardPrompt,
+  formDisabled,
   saveFromPrompt,
   submitErrorMessage,
+  submitLabel,
 }: {
   /** Submit through `submitAction` with this server action instead. */
   action?: (values: Values) => Promise<ActionResult<unknown>>
   children?: ReactNode
   onSubmit?: (values: Values) => unknown
   closeOnSubmit?: boolean
+  /** Gets the dialog's controller, to close it from outside. */
+  controller?: { current?: FormDialogController<Values> }
   disabled?: boolean
+  discardPrompt?: DiscardPromptText
+  /** Disable the form through `useForm({ disabled })`. */
+  formDisabled?: boolean
   saveFromPrompt?: boolean
   submitErrorMessage?: (error: unknown) => ReactNode
+  submitLabel?: ReactNode
 }) {
   const dialog = useFormDialog({ defaultValues: BLANK })
+  if (controller) {
+    controller.current = dialog
+  }
   const form = useForm({
     defaultValues: dialog.defaultValues,
+    disabled: formDisabled,
     onSubmit: (submit) =>
       action ? submitAction(submit, action) : onSubmit(submit.value),
     schema,
@@ -86,9 +104,11 @@ function Harness({
         closeOnSubmit={closeOnSubmit}
         dialog={dialog}
         disabled={disabled}
+        discardPrompt={discardPrompt}
         form={form}
         saveFromPrompt={saveFromPrompt}
         submitErrorMessage={submitErrorMessage}
+        submitLabel={submitLabel}
         title="Person"
       >
         <InputField label="Name" name="name" />
@@ -109,6 +129,13 @@ function dropFocus() {
   sink.remove()
 }
 
+// Whether leaving the page now would make the browser ask first.
+function warnsOnUnload(): boolean {
+  const event = new Event("beforeunload", { cancelable: true })
+  window.dispatchEvent(event)
+  return event.defaultPrevented
+}
+
 // The alerts added where assistive tech could see them. One added under an
 // `aria-hidden` ancestor (the dialog, while the leave prompt is open) is never
 // announced, not even once that ancestor is shown again.
@@ -267,6 +294,110 @@ describe("FormDialog", () => {
     expect(screen.getByRole("dialog")).toBeTruthy()
   })
 
+  for (const closeOnSubmit of [true, false]) {
+    test(`a leave asked for while a Save runs goes through once it saves (closeOnSubmit: ${closeOnSubmit})`, async () => {
+      const user = userEvent.setup()
+      let finishSave: () => void = () => undefined
+      const onSubmit = vi.fn(
+        () =>
+          new Promise<void>((resolve) => {
+            finishSave = resolve
+          })
+      )
+      render(<Harness closeOnSubmit={closeOnSubmit} onSubmit={onSubmit} />)
+      const name = await openEdit(user)
+      await user.type(name, "!")
+      await user.click(screen.getByRole("button", { name: "Save" }))
+      await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+      await user.keyboard("{Escape}")
+      await screen.findByRole("alertdialog")
+
+      finishSave()
+      await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull())
+      expect(screen.queryByRole("alertdialog")).toBeNull()
+    })
+  }
+
+  test("an edit made while a Save runs keeps the leave prompt asking once it saves", async () => {
+    const user = userEvent.setup()
+    let finishSave: () => void = () => undefined
+    const onSubmit = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          finishSave = resolve
+        })
+    )
+    render(<Harness onSubmit={onSubmit} />)
+    const name = await openEdit(user)
+    await user.type(name, "!")
+    await user.click(screen.getByRole("button", { name: "Save" }))
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    await user.type(name, "?")
+    await user.keyboard("{Escape}")
+    const prompt = await screen.findByRole("alertdialog")
+
+    finishSave()
+    await waitFor(() =>
+      expect(screen.queryByRole("status", { hidden: true })).toBeNull()
+    )
+    expect(screen.getByRole("alertdialog")).toBe(prompt)
+    await user.click(
+      within(prompt).getByRole("button", { name: "Keep editing" })
+    )
+    await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull())
+    expect(name.value).toBe("Ada!?")
+  })
+
+  test("a Save that fails while the leave prompt asks focuses the invalid field once it closes", async () => {
+    const user = userEvent.setup()
+    let finishSave: (result: ActionResult<never>) => void = () => undefined
+    const action = vi.fn(
+      () =>
+        new Promise<ActionResult<never>>((resolve) => {
+          finishSave = resolve
+        })
+    )
+    render(<Harness action={action} />)
+    const name = await openEdit(user)
+    await user.type(name, "!")
+    await user.click(screen.getByRole("button", { name: "Save" }))
+    await waitFor(() => expect(action).toHaveBeenCalled())
+    await user.keyboard("{Escape}")
+    const prompt = await screen.findByRole("alertdialog")
+    await waitFor(() =>
+      expect(prompt.contains(document.activeElement)).toBe(true)
+    )
+
+    finishSave({
+      error: { fieldErrors: { email: ["Already taken"] }, formErrors: [] },
+      ok: false,
+    })
+    const email = screen.getByLabelText(EMAIL)
+    await waitFor(() => expect(email.getAttribute("aria-invalid")).toBe("true"))
+    expect(prompt.contains(document.activeElement)).toBe(true)
+    await user.click(
+      within(prompt).getByRole("button", { name: "Keep editing" })
+    )
+    await waitFor(() => expect(document.activeElement).toBe(email))
+  })
+
+  test("closing the dialog from outside closes its leave prompt for good", async () => {
+    const user = userEvent.setup()
+    const controller: { current?: FormDialogController<Values> } = {}
+    render(<Harness controller={controller} />)
+    const name = await openEdit(user)
+    await user.type(name, "!")
+    await user.keyboard("{Escape}")
+    await screen.findByRole("alertdialog")
+
+    act(() => controller.current?.close())
+    await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull())
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull())
+    await user.click(screen.getByRole("button", { name: "Edit" }))
+    await screen.findByRole("dialog")
+    expect(screen.queryByRole("alertdialog")).toBeNull()
+  })
+
   test("a field error from the server focuses that field", async () => {
     const user = userEvent.setup()
     const action = vi.fn(() =>
@@ -573,17 +704,46 @@ describe("FormDialog", () => {
     expect(screen.getByRole("dialog")).toBeTruthy()
   })
 
-  test("disabled also turns off Save in the leave prompt", async () => {
+  for (const via of ["disabled", "useForm({ disabled })"]) {
+    test(`with ${via}, a changed dialog still asks and warns, without offering Save`, async () => {
+      const user = userEvent.setup()
+      const { rerender } = render(<Harness saveFromPrompt />)
+      const name = await openEdit(user)
+      await user.type(name, "!")
+
+      rerender(
+        <Harness
+          disabled={via === "disabled"}
+          formDisabled={via !== "disabled"}
+          saveFromPrompt
+        />
+      )
+      expect(warnsOnUnload()).toBe(true)
+      await user.click(screen.getByRole("button", { name: "Cancel" }))
+      const prompt = await screen.findByRole("alertdialog")
+      expect(within(prompt).getByText("Discard changes?")).toBeTruthy()
+      expect(within(prompt).queryByRole("button", { name: "Save" })).toBeNull()
+      await user.click(within(prompt).getByRole("button", { name: "Discard" }))
+      await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull())
+      await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull())
+    })
+  }
+
+  test("disabled while the leave prompt asks keeps it, with its Save off", async () => {
     const user = userEvent.setup()
     const onSubmit = vi.fn()
     const { rerender } = render(<Harness onSubmit={onSubmit} saveFromPrompt />)
     const name = await openEdit(user)
     await user.type(name, "!")
-    rerender(<Harness disabled onSubmit={onSubmit} saveFromPrompt />)
     await user.click(screen.getByRole("button", { name: "Cancel" }))
     const prompt = await screen.findByRole("alertdialog")
+
+    rerender(<Harness disabled onSubmit={onSubmit} saveFromPrompt />)
     await user.click(within(prompt).getByRole("button", { name: "Save" }))
     expect(onSubmit).not.toHaveBeenCalled()
+    expect(screen.getByRole("alertdialog")).toBe(prompt)
+    await user.click(within(prompt).getByRole("button", { name: "Discard" }))
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull())
   })
 
   test("Save in the leave prompt doesn't submit again while a submit runs", async () => {
@@ -650,3 +810,94 @@ describe("FormDialog", () => {
     expect(outer).not.toHaveBeenCalled()
   })
 })
+
+describe("FormDialogProvider", () => {
+  test("sets the defaults of the dialogs below it; a dialog's own prop wins", async () => {
+    const user = userEvent.setup()
+    render(
+      <FormDialogProvider
+        cancelLabel="Abbrechen"
+        discardPrompt={{
+          confirmLabel: "Verwerfen",
+          saveLabel: "Sichern",
+          saveTitle: "Speichern?",
+          title: "Verwerfen?",
+        }}
+      >
+        <FormDialogProvider saveFromPrompt submitLabel="Speichern">
+          <Harness discardPrompt={{ title: "Leave this person?" }} />
+        </FormDialogProvider>
+      </FormDialogProvider>
+    )
+    const name = await openEdit(user)
+    const dialog = screen.getByRole("dialog")
+    within(dialog).getByRole("button", { name: "Speichern" })
+    await user.type(name, "!")
+    await user.click(within(dialog).getByRole("button", { name: "Abbrechen" }))
+
+    // The prompt's copy merges key by key, and the nearest level wins: the
+    // dialog's title over the outer provider's `saveTitle`, its Discard
+    // label, and Save labelled by the inner provider's `submitLabel` over the
+    // outer one's `saveLabel`.
+    const prompt = await screen.findByRole("alertdialog")
+    within(prompt).getByText("Leave this person?")
+    within(prompt).getByRole("button", { name: "Verwerfen" })
+    within(prompt).getByRole("button", { name: "Speichern" })
+  })
+
+  test.each([
+    [true, "Unsaved changes", "Save them before you leave?"],
+    [false, "Discard changes?", "They will be lost."],
+  ])(
+    "a provider words the prompt for each mode (saveFromPrompt: %s)",
+    async (saveFromPrompt, title, description) => {
+      const user = userEvent.setup()
+      render(
+        <FormDialogProvider
+          discardPrompt={{
+            description: "They will be lost.",
+            saveDescription: "Save them before you leave?",
+            saveTitle: "Unsaved changes",
+            title: "Discard changes?",
+          }}
+        >
+          <Harness saveFromPrompt={saveFromPrompt} />
+        </FormDialogProvider>
+      )
+      const name = await openEdit(user)
+      await user.type(name, "!")
+      await user.keyboard("{Escape}")
+      const prompt = await screen.findByRole("alertdialog")
+      within(prompt).getByText(title)
+      within(prompt).getByText(description)
+    }
+  )
+
+  test("a dialog's submitLabel labels the prompt's Save over a provider's saveLabel", async () => {
+    const user = userEvent.setup()
+    render(
+      <FormDialogProvider discardPrompt={{ saveLabel: "Speichern" }}>
+        <Harness saveFromPrompt submitLabel="Create invoice" />
+      </FormDialogProvider>
+    )
+    const name = await openEdit(user)
+    await user.type(name, "!")
+    await user.keyboard("{Escape}")
+    const prompt = await screen.findByRole("alertdialog")
+    within(prompt).getByRole("button", { name: "Create invoice" })
+  })
+
+  test("a dialog's own false wins over the provider's true", async () => {
+    const user = userEvent.setup()
+    render(
+      <FormDialogProvider saveFromPrompt>
+        <Harness saveFromPrompt={false} />
+      </FormDialogProvider>
+    )
+    const name = await openEdit(user)
+    await user.type(name, "!")
+    await user.keyboard("{Escape}")
+    const prompt = await screen.findByRole("alertdialog")
+    expect(within(prompt).queryByRole("button", { name: "Save" })).toBeNull()
+  })
+})