test(form): add unit tests

tests/Form.test.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-  import {
-    Form,
-    FormGroup,
-    Checkbox,
-    RadioButtonGroup,
-    RadioButton,
-    Select,
-    SelectItem,
-    Button,
-  } from "carbon-components-svelte";
-
-  let ref: HTMLFormElement;
-</script>
-
-<Form on:submit bind:ref>
-  <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>
-  <FormGroup legendText="Radio buttons">
-    <RadioButtonGroup selected="default-selected">
-      <RadioButton
-        id="radio-1"
-        value="standard"
-        labelText="Standard Radio Button"
-      />
-      <RadioButton
-        id="radio-2"
-        value="default-selected"
-        labelText="Default Selected Radio Button"
-      />
-      <RadioButton
-        id="radio-4"
-        value="disabled"
-        labelText="Disabled Radio Button"
-        disabled
-      />
-    </RadioButtonGroup>
-  </FormGroup>
-  <FormGroup>
-    <Select id="select-1" labelText="Select menu">
-      <SelectItem
-        disabled
-        hidden
-        value="placeholder-item"
-        text="Choose an option"
-      />
-      <SelectItem value="option-1" text="Option 1" />
-      <SelectItem value="option-2" text="Option 2" />
-      <SelectItem value="option-3" text="Option 3" />
-    </Select>
-  </FormGroup>
-  <Button type="submit">Submit</Button>
-</Form>

tests/Form/Form.test.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Form, FormGroup, Checkbox, Button } from "carbon-components-svelte";
+
+  export let preventDefault = false;
+</script>
+
+<Form
+  data-testid="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>
+</Form>

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