diff --git a/tests/src/form.tsx b/tests/src/form.tsx index 96336c6..3bc6d58 100644 --- a/tests/src/form.tsx +++ b/tests/src/form.tsx @@ -1,7 +1,13 @@ /** biome-ignore-all lint/a11y/useAriaPropsSupportedByRole: pre aria-label */ import type { JSXElement } from "solid-js"; -import { type CreateFormReturn, createForm, type FormValues, type SubmitHandler } from "./import"; +import { + type CreateFormReturn, + createForm, + type FormValues, + type SubmitErrorHandler, + type SubmitHandler +} from "./import"; type FormProps = { defaultValues: F; @@ -10,6 +16,7 @@ type FormProps = { render: (form: CreateFormReturn) => JSXElement; submitButton?: (form: CreateFormReturn) => JSXElement; onSubmit: SubmitHandler; + onError?: SubmitErrorHandler; onReset?(form: CreateFormReturn): void; }; @@ -27,7 +34,7 @@ export const Form = (props: FormProps) => {
{props.render(form)} diff --git a/tests/src/getValues/getValues.test.tsx b/tests/src/getValues/getValues.test.tsx new file mode 100644 index 0000000..70e6fd6 --- /dev/null +++ b/tests/src/getValues/getValues.test.tsx @@ -0,0 +1,90 @@ +import { render } from "vitest-browser-solid"; +import { Form } from "../form"; +import { Input } from "../input"; + +const onSubmit = vi.fn(() => {}); +const onGetValue = vi.fn(); +const onGetAllValues = vi.fn(); + +beforeEach(() => { + vi.resetAllMocks(); +}); + +describe("getValues", () => { + it("should get single field value by name", async () => { + const page = render(() => ( + ( + <> + + + + + )} + onSubmit={onSubmit} + /> + )); + + const emailInput = page.getByRole("textbox", { name: "email" }); + const getButton = page.getByRole("button", { name: "Get email value" }); + + await getButton.click(); + expect(onGetValue).toHaveBeenCalledWith(""); + + await emailInput.fill("user@example.com"); + await getButton.click(); + expect(onGetValue).toHaveBeenCalledWith("user@example.com"); + + await emailInput.fill("123"); + await getButton.click(); + expect(onGetValue).toHaveBeenCalledWith("123"); + }); + + it("should get all fields values", async () => { + const page = render(() => ( + ( + <> + + + + + )} + onSubmit={onSubmit} + /> + )); + + const emailInput = page.getByRole("textbox", { name: "email" }); + const passwordInput = page.getByRole("textbox", { name: "password" }); + const getButton = page.getByRole("button", { name: "Get all values" }); + + await getButton.click(); + expect(onGetAllValues).toHaveBeenCalledWith({ email: "", password: "" }); + + await emailInput.fill("user@example.com"); + await getButton.click(); + expect(onGetAllValues).toHaveBeenCalledWith({ + email: "user@example.com", + password: "" + }); + + await passwordInput.fill("secret"); + await getButton.click(); + expect(onGetAllValues).toHaveBeenCalledWith({ + email: "user@example.com", + password: "secret" + }); + }); +}); diff --git a/tests/src/setValue/setValue.test.tsx b/tests/src/setValue/setValue.test.tsx new file mode 100644 index 0000000..6c50eb5 --- /dev/null +++ b/tests/src/setValue/setValue.test.tsx @@ -0,0 +1,94 @@ +import { render } from "vitest-browser-solid"; +import { Form } from "../form"; +import { Input } from "../input"; + +const onSubmit = vi.fn(() => {}); +const errorMessage = "This field is required"; +const validValue = "valid@example.com"; + +beforeEach(() => { + vi.resetAllMocks(); +}); + +describe("setValue", () => { + it("should setValue", async () => { + const page = render(() => ( + ( + <> + + + + + + )} + onSubmit={onSubmit} + /> + )); + + const input = page.getByRole("textbox", { name: "email" }); + const setInvalidButton = page.getByRole("button", { name: "Set invalid" }); + const setValidButton = page.getByRole("button", { name: "Set valid" }); + + expect(input).toHaveValue(""); + expect(input).toHaveAttribute("aria-invalid", "false"); + + await setInvalidButton.click(); + expect(input).toHaveAttribute("aria-invalid", "false"); + expect(input).not.toHaveAccessibleErrorMessage(); + + await setValidButton.click(); + expect(input).toHaveValue(validValue); + expect(input).toHaveAttribute("aria-invalid", "false"); + expect(input).not.toHaveAccessibleErrorMessage(); + }); + + it("should setValue and validate", async () => { + const page = render(() => ( + ( + <> + + + + + + )} + onSubmit={onSubmit} + /> + )); + + const input = page.getByRole("textbox", { name: "email" }); + const setInvalidButton = page.getByRole("button", { name: "Set invalid" }); + const setValidButton = page.getByRole("button", { name: "Set valid" }); + + expect(input).toHaveValue(""); + expect(input).toHaveAttribute("aria-invalid", "false"); + + await setInvalidButton.click(); + expect(input).toHaveAttribute("aria-invalid", "true"); + expect(input).toHaveAccessibleErrorMessage(errorMessage); + + await setValidButton.click(); + expect(input).toHaveValue(validValue); + expect(input).toHaveAttribute("aria-invalid", "false"); + expect(input).not.toHaveAccessibleErrorMessage(); + }); +}); diff --git a/tests/src/submit/submit.test.tsx b/tests/src/submit/submit.test.tsx index d17377b..467dae5 100644 --- a/tests/src/submit/submit.test.tsx +++ b/tests/src/submit/submit.test.tsx @@ -4,6 +4,7 @@ import { Form } from "../form"; import { Input } from "../input"; const onSubmit = vi.fn(() => {}); +const onError = vi.fn(() => {}); beforeEach(() => { vi.resetAllMocks(); @@ -63,4 +64,30 @@ describe("submit", () => { expect(onSubmit).toHaveBeenCalled(); expect(submitCount).toHaveTextContent("2"); }); + + it("should call onError", async () => { + const page = render(() => ( + ( + + )} + onSubmit={onSubmit} + onError={onError} + /> + )); + + const submitButton = page.getByRole("button", { name: "Submit" }); + await submitButton.click(); + + expect(onError).toHaveBeenCalledTimes(1); + expect(onError).toHaveBeenCalledWith( + expect.objectContaining({ + email: expect.objectContaining({ message: "Email is required" }) + }) + ); + expect(onSubmit).not.toHaveBeenCalled(); + }); });