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