From 481f121f772c22eb685ddd42213ee160a78b992b Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 15 Mar 2025 18:01:12 -0700
Subject: [PATCH] test(toggle): add unit tests

---
 tests/Toggle.test.svelte        | 19 --------
 tests/Toggle/Toggle.test.svelte | 25 ++++++++++
 tests/Toggle/Toggle.test.ts     | 81 +++++++++++++++++++++++++++++++++
 3 files changed, 106 insertions(+), 19 deletions(-)
 delete mode 100644 tests/Toggle.test.svelte
 create mode 100644 tests/Toggle/Toggle.test.svelte
 create mode 100644 tests/Toggle/Toggle.test.ts

diff --git a/tests/Toggle.test.svelte b/tests/Toggle.test.svelte
deleted file mode 100644
index 77da9c44..00000000
--- a/tests/Toggle.test.svelte
+++ /dev/null
@@ -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 />
diff --git a/tests/Toggle/Toggle.test.svelte b/tests/Toggle/Toggle.test.svelte
new file mode 100644
index 00000000..5e3b4b1b
--- /dev/null
+++ b/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"
+/>
diff --git a/tests/Toggle/Toggle.test.ts b/tests/Toggle/Toggle.test.ts
new file mode 100644
index 00000000..ec739ccc
--- /dev/null
+++ b/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);
+  });
+});