test(checkbox): add unit tests

Author: metonym

tests/Checkbox.test.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { Checkbox } from "carbon-components-svelte";
+
+  export let group = ["option-2"];
+
+  $: console.log(group);
+</script>
+
+<Checkbox
+  bind:group
+  value="option-1"
+  labelText="Option 1"
+  data-testid="checkbox-1"
+/>
+
+<Checkbox
+  bind:group
+  value="option-2"
+  labelText="Option 2"
+  data-testid="checkbox-2"
+/>
+
+<Checkbox
+  bind:group
+  value="option-3"
+  labelText="Option 3"
+  data-testid="checkbox-3"
+/>

tests/Checkbox/Checkbox.group.test.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Checkbox } from "carbon-components-svelte";
+</script>
+
+<Checkbox skeleton data-testid="checkbox-skeleton" />

tests/Checkbox/Checkbox.skeleton.test.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Checkbox } from "carbon-components-svelte";
+</script>
+
+<Checkbox data-testid="checkbox-slot">
+  <span slot="labelText" data-testid="custom-label">Custom label content</span>
+</Checkbox>

tests/Checkbox/Checkbox.slot.test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Checkbox } from "carbon-components-svelte";
+
+  export let checked = false;
+  export let indeterminate = false;
+  export let disabled = false;
+  export let hideLabel = false;
+  export let labelText = "Checkbox label";
+</script>
+
+<Checkbox
+  bind:checked
+  bind:indeterminate
+  {disabled}
+  {hideLabel}
+  {labelText}
+  data-testid="checkbox"
+  on:check={() => console.log("check")}
+  on:click={() => console.log("click")}
+/>

tests/Checkbox/Checkbox.test.svelte

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