test(fluid-form): add unit tests

tests/FluidForm.test.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import {
-    FluidForm,
-    TextInput,
-    PasswordInput,
-  } from "carbon-components-svelte";
-</script>
-
-<FluidForm action="" method="get">
-  <TextInput labelText="User name" placeholder="Enter user name..." required />
-  <PasswordInput
-    required
-    type="password"
-    labelText="Password"
-    placeholder="Enter password..."
-  />
-</FluidForm>

tests/FluidForm/FluidForm.test.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import {
+    FluidForm,
+    FormGroup,
+    Checkbox,
+    Button,
+  } from "carbon-components-svelte";
+
+  export let preventDefault = false;
+</script>
+
+<FluidForm
+  data-testid="fluid-form"
+  on:submit={(e) => {
+    if (preventDefault) {
+      e.preventDefault();
+    }
+    console.log("submit", e);
+  }}
+>
+  <FormGroup legendText="Checkboxes">
+    <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
+    <Checkbox id="checkbox-1" labelText="Checkbox Label" />
+    <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
+  </FormGroup>
+  <Button type="submit">Submit</Button>
+</FluidForm>

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();
+    });
+  });
+});