diff --git a/tests/Checkbox.test.svelte b/tests/Checkbox.test.svelte
deleted file mode 100644
index d233bdca..00000000
--- a/tests/Checkbox.test.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/tests/Checkbox/Checkbox.group.test.svelte b/tests/Checkbox/Checkbox.group.test.svelte
new file mode 100644
index 00000000..454c07f0
--- /dev/null
+++ b/tests/Checkbox/Checkbox.group.test.svelte
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
diff --git a/tests/Checkbox/Checkbox.skeleton.test.svelte b/tests/Checkbox/Checkbox.skeleton.test.svelte
new file mode 100644
index 00000000..7d8e5615
--- /dev/null
+++ b/tests/Checkbox/Checkbox.skeleton.test.svelte
@@ -0,0 +1,5 @@
+
+
+
diff --git a/tests/Checkbox/Checkbox.slot.test.svelte b/tests/Checkbox/Checkbox.slot.test.svelte
new file mode 100644
index 00000000..518a4315
--- /dev/null
+++ b/tests/Checkbox/Checkbox.slot.test.svelte
@@ -0,0 +1,7 @@
+
+
+
+ Custom label content
+
diff --git a/tests/Checkbox/Checkbox.test.svelte b/tests/Checkbox/Checkbox.test.svelte
new file mode 100644
index 00000000..40bdbed9
--- /dev/null
+++ b/tests/Checkbox/Checkbox.test.svelte
@@ -0,0 +1,20 @@
+
+
+ console.log("check")}
+ on:click={() => console.log("click")}
+/>
diff --git a/tests/Checkbox/Checkbox.test.ts b/tests/Checkbox/Checkbox.test.ts
new file mode 100644
index 00000000..25b6bee8
--- /dev/null
+++ b/tests/Checkbox/Checkbox.test.ts
@@ -0,0 +1,137 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import Checkbox from "./Checkbox.test.svelte";
+import CheckboxSkeleton from "./Checkbox.skeleton.test.svelte";
+import CheckboxGroup from "./Checkbox.group.test.svelte";
+import CheckboxSlot from "./Checkbox.slot.test.svelte";
+
+describe("Checkbox", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders with default props", () => {
+ render(Checkbox);
+
+ const checkbox = screen.getByTestId("checkbox");
+ expect(checkbox).toBeInTheDocument();
+
+ const input = checkbox.querySelector("input[type='checkbox']");
+ expect(input).not.toBeChecked();
+ expect(input).not.toBeDisabled();
+ expect(input).not.toHaveAttribute("indeterminate");
+
+ const label = checkbox.querySelector("label");
+ expect(label).toHaveTextContent("Checkbox label");
+ const hiddenElement = label?.querySelector(".bx--visually-hidden");
+ expect(hiddenElement).not.toBeInTheDocument();
+ });
+
+ it("renders checked state", () => {
+ render(Checkbox, { checked: true });
+
+ const input = screen
+ .getByTestId("checkbox")
+ .querySelector("input[type='checkbox']");
+ expect(input).toBeChecked();
+ });
+
+ it("emits events", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(Checkbox);
+
+ const input = screen
+ .getByTestId("checkbox")
+ .querySelector("input[type='checkbox']") as HTMLInputElement;
+ await user.click(input);
+ expect(consoleLog).toHaveBeenCalledWith("check");
+ expect(consoleLog).toHaveBeenCalledWith("click");
+ expect(consoleLog).toHaveBeenCalledTimes(2);
+ });
+
+ it("renders indeterminate state", () => {
+ render(Checkbox, { indeterminate: true });
+
+ const input = screen
+ .getByTestId("checkbox")
+ .querySelector("input[type='checkbox']") as HTMLInputElement;
+ expect(input.indeterminate).toBe(true);
+ });
+
+ it("renders disabled state", () => {
+ render(Checkbox, { disabled: true });
+
+ const input = screen
+ .getByTestId("checkbox")
+ .querySelector("input[type='checkbox']");
+ expect(input).toBeDisabled();
+ });
+
+ it("renders with hidden label", () => {
+ render(Checkbox, { hideLabel: true });
+
+ const label = screen.getByTestId("checkbox").querySelector("label");
+ const hiddenElement = label?.querySelector(".bx--visually-hidden");
+ expect(hiddenElement).toBeInTheDocument();
+ });
+
+ it("renders with custom label text", () => {
+ render(Checkbox, { labelText: "Custom label" });
+
+ const label = screen.getByTestId("checkbox").querySelector("label");
+ expect(label).toHaveTextContent("Custom label");
+ });
+
+ it("renders skeleton state", () => {
+ render(CheckboxSkeleton);
+
+ const skeleton = screen.getByTestId("checkbox-skeleton");
+ expect(skeleton).toBeInTheDocument();
+ expect(
+ skeleton.querySelector(".bx--checkbox-label-text.bx--skeleton"),
+ ).toBeInTheDocument();
+ expect(
+ skeleton.querySelector("input[type='checkbox']"),
+ ).not.toBeInTheDocument();
+ });
+
+ it("works with checkbox groups", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(CheckboxGroup);
+
+ const checkbox1 = screen
+ .getByTestId("checkbox-1")
+ .querySelector("input[type='checkbox']") as HTMLInputElement;
+ const checkbox2 = screen
+ .getByTestId("checkbox-2")
+ .querySelector("input[type='checkbox']") as HTMLInputElement;
+ const checkbox3 = screen
+ .getByTestId("checkbox-3")
+ .querySelector("input[type='checkbox']") as HTMLInputElement;
+
+ expect(checkbox1).not.toBeChecked();
+ expect(checkbox2).toBeChecked();
+ expect(checkbox3).not.toBeChecked();
+ expect(consoleLog).toHaveBeenCalledWith(["option-2"]);
+
+ await user.click(checkbox1);
+ expect(checkbox1).toBeChecked();
+ expect(consoleLog).toHaveBeenCalledWith(["option-2", "option-1"]);
+
+ await user.click(checkbox2);
+ expect(checkbox2).not.toBeChecked();
+ expect(consoleLog).toHaveBeenCalledWith(["option-2"]);
+
+ await user.click(checkbox3);
+ expect(checkbox3).toBeChecked();
+ expect(consoleLog).toHaveBeenCalledWith(["option-1", "option-3"]);
+ });
+
+ it("supports custom label slot", () => {
+ render(CheckboxSlot);
+
+ const customLabel = screen.getByTestId("custom-label");
+ expect(customLabel).toBeInTheDocument();
+ expect(customLabel).toHaveTextContent("Custom label content");
+ });
+});