diff --git a/tests/Form.test.svelte b/tests/Form.test.svelte deleted file mode 100644 index 5cd91fdd..00000000 --- a/tests/Form.test.svelte +++ /dev/null @@ -1,56 +0,0 @@ - - -
- - - - - - - - - - - - - - - - -
diff --git a/tests/Form/Form.test.svelte b/tests/Form/Form.test.svelte new file mode 100644 index 00000000..d069de77 --- /dev/null +++ b/tests/Form/Form.test.svelte @@ -0,0 +1,22 @@ + + +
{ + if (preventDefault) { + e.preventDefault(); + } + console.log("submit", e); + }} +> + + + + + + +
diff --git a/tests/Form/Form.test.ts b/tests/Form/Form.test.ts new file mode 100644 index 00000000..72676a6d --- /dev/null +++ b/tests/Form/Form.test.ts @@ -0,0 +1,58 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import FormTest from "./Form.test.svelte"; + +describe("Form", () => { + it("renders with default props", () => { + render(FormTest); + const form = screen.getByTestId("form"); + expect(form).toBeInTheDocument(); + expect(form).toHaveClass("bx--form"); + }); + + it("renders form elements correctly", () => { + render(FormTest); + + // Check form group + const formGroup = screen.getByRole("group"); + expect(formGroup).toBeInTheDocument(); + expect(formGroup).toHaveTextContent("Checkboxes"); + + // Check checkboxes + const checkboxes = screen.getAllByRole("checkbox"); + expect(checkboxes).toHaveLength(3); + expect(checkboxes[0]).toBeChecked(); + expect(checkboxes[1]).not.toBeChecked(); + expect(checkboxes[2]).toBeDisabled(); + + // Check submit button + const submitButton = screen.getByRole("button", { name: "Submit" }); + expect(submitButton).toBeInTheDocument(); + expect(submitButton).toHaveAttribute("type", "submit"); + }); + + describe("form submission", () => { + it("handles form submission", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(FormTest); + + const submitButton = screen.getByRole("button", { name: "Submit" }); + await user.click(submitButton); + + expect(consoleLog).toHaveBeenCalledWith("submit", expect.any(Event)); + }); + + it("prevents default submission when preventDefault is true", async () => { + const consoleLog = vi.spyOn(console, "log"); + const preventDefaultSpy = vi.fn(); + + render(FormTest, { preventDefault: true }); + + const submitButton = screen.getByRole("button", { name: "Submit" }); + await user.click(submitButton); + + expect(preventDefaultSpy).not.toHaveBeenCalled(); + expect(consoleLog).toHaveBeenCalled(); + }); + }); +});