diff --git a/tests/FluidForm.test.svelte b/tests/FluidForm.test.svelte deleted file mode 100644 index 46f93e00..00000000 --- a/tests/FluidForm.test.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - diff --git a/tests/FluidForm/FluidForm.test.svelte b/tests/FluidForm/FluidForm.test.svelte new file mode 100644 index 00000000..fd0eef80 --- /dev/null +++ b/tests/FluidForm/FluidForm.test.svelte @@ -0,0 +1,27 @@ + + + { + if (preventDefault) { + e.preventDefault(); + } + console.log("submit", e); + }} +> + + + + + + + diff --git a/tests/FluidForm/FluidForm.test.ts b/tests/FluidForm/FluidForm.test.ts new file mode 100644 index 00000000..7b0cd640 --- /dev/null +++ b/tests/FluidForm/FluidForm.test.ts @@ -0,0 +1,58 @@ +import { render, screen } from "@testing-library/svelte"; +import { user } from "../setup-tests"; +import FluidFormTest from "./FluidForm.test.svelte"; + +describe("FluidForm", () => { + it("renders with default props", () => { + render(FluidFormTest); + const form = screen.getByTestId("fluid-form"); + expect(form).toBeInTheDocument(); + expect(form).toHaveClass("bx--form--fluid"); + }); + + it("renders form elements correctly", () => { + render(FluidFormTest); + + // 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(FluidFormTest); + + 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(FluidFormTest, { preventDefault: true }); + + const submitButton = screen.getByRole("button", { name: "Submit" }); + await user.click(submitButton); + + expect(preventDefaultSpy).not.toHaveBeenCalled(); + expect(consoleLog).toHaveBeenCalled(); + }); + }); +});