test(toggle): add unit tests

tests/Toggle.test.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { Toggle, ToggleSkeleton } from "carbon-components-svelte";
-</script>
-
-<Toggle labelText="Push notifications" hideLabel />
-
-<Toggle
-  labelText="Push notifications"
-  toggled
-  on:toggle={(e) => {
-    console.log(e.detail.toggled);
-  }}
-/>
-
-<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
-
-<Toggle labelText="Push notifications" disabled />
-
-<ToggleSkeleton />

tests/Toggle/Toggle.test.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Toggle } from "carbon-components-svelte";
+
+  let toggled = false;
+</script>
+
+<Toggle
+  bind:toggled
+  labelText="Default toggle"
+  on:toggle={(e) => {
+    console.log("toggled:", e.detail.toggled);
+  }}
+/>
+
+<Toggle labelText="Custom labels" labelA="Inactive" labelB="Active" />
+
+<Toggle size="sm" labelText="Small toggle" />
+
+<Toggle disabled labelText="Disabled toggle" />
+
+<Toggle
+  hideLabel
+  labelText="Hidden label toggle"
+  aria-label="Hidden label toggle"
+/>

tests/Toggle/Toggle.test.ts

@@ -0,0 +1,81 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import Toggle from "./Toggle.test.svelte";
+
+describe("Toggle", () => {
+  const getToggle = (label: string) =>
+    screen.getByRole("switch", { name: new RegExp(label, "i") });
+
+  it("renders and functions correctly", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(Toggle);
+
+    const toggle = getToggle("Default toggle");
+    expect(toggle).not.toBeChecked();
+
+    await user.click(toggle);
+    expect(toggle).toBeChecked();
+    expect(consoleLog).toHaveBeenCalledWith("toggled:", true);
+
+    await user.click(toggle);
+    expect(toggle).not.toBeChecked();
+    expect(consoleLog).toHaveBeenCalledWith("toggled:", false);
+  });
+
+  it("supports custom labels", () => {
+    render(Toggle);
+
+    const toggle = getToggle("Custom labels");
+    const label = toggle.closest(".bx--form-item");
+    expect(label).not.toBeNull();
+
+    if (label) {
+      expect(label).toContainElement(screen.getByText("Inactive"));
+      expect(label).toContainElement(screen.getByText("Active"));
+    }
+  });
+
+  it("supports small size variant", () => {
+    render(Toggle);
+
+    const toggle = getToggle("Small toggle");
+    expect(toggle).toHaveClass("bx--toggle-input--small");
+  });
+
+  it("supports disabled state", () => {
+    render(Toggle);
+
+    const toggle = getToggle("Disabled toggle");
+    expect(toggle).toBeDisabled();
+  });
+
+  it("supports hidden label", () => {
+    render(Toggle);
+
+    const toggle = getToggle("Hidden label toggle");
+    const label = toggle.closest(".bx--form-item");
+    expect(label).not.toBeNull();
+
+    if (label) {
+      const hiddenText = label.querySelector(".bx--visually-hidden");
+      expect(hiddenText).toHaveClass("bx--visually-hidden");
+      expect(toggle).toHaveAccessibleName("Hidden label toggle");
+    }
+  });
+
+  it("handles keyboard interactions", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(Toggle);
+
+    const toggle = getToggle("Default toggle");
+    toggle.focus();
+
+    await user.keyboard(" ");
+    expect(toggle).toBeChecked();
+    expect(consoleLog).toHaveBeenCalledWith("toggled:", true);
+
+    await user.keyboard(" ");
+    expect(toggle).not.toBeChecked();
+    expect(consoleLog).toHaveBeenCalledWith("toggled:", false);
+  });
+});