diff --git a/tests/Checkbox/Checkbox.test.ts b/tests/Checkbox/Checkbox.test.ts index f4779541..0ac3fb01 100644 --- a/tests/Checkbox/Checkbox.test.ts +++ b/tests/Checkbox/Checkbox.test.ts @@ -4,6 +4,7 @@ import CheckboxGroup from "./Checkbox.group.test.svelte"; import CheckboxSkeleton from "./Checkbox.skeleton.test.svelte"; import CheckboxSlot from "./Checkbox.slot.test.svelte"; import Checkbox from "./Checkbox.test.svelte"; +import MultipleCheckboxes from "./MultipleCheckboxes.test.svelte"; describe("Checkbox", () => { beforeEach(() => { @@ -146,4 +147,106 @@ describe("Checkbox", () => { expect(customLabel).toBeInTheDocument(); expect(customLabel).toHaveTextContent("Custom label content"); }); + + it("renders multiple checkboxes with default values", () => { + render(MultipleCheckboxes); + + expect(screen.getByTestId("checkbox-0")).toBeInTheDocument(); + expect(screen.getByTestId("checkbox-1")).toBeInTheDocument(); + expect(screen.getByTestId("checkbox-2")).toBeInTheDocument(); + + const appleCheckbox = screen + .getByTestId("checkbox-0") + .querySelector("input[type='checkbox']"); + const bananaCheckbox = screen + .getByTestId("checkbox-1") + .querySelector("input[type='checkbox']"); + const coconutCheckbox = screen + .getByTestId("checkbox-2") + .querySelector("input[type='checkbox']"); + + assert(appleCheckbox); + assert(bananaCheckbox); + assert(coconutCheckbox); + + expect(appleCheckbox).toBeChecked(); + expect(bananaCheckbox).toBeChecked(); + expect(coconutCheckbox).not.toBeChecked(); + + expect(screen.getByTestId("selected-values")).toHaveTextContent( + '["Apple","Banana"]', + ); + }); + + it("handles checkbox selection changes", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(MultipleCheckboxes); + + const coconutCheckbox = screen + .getByTestId("checkbox-2") + .querySelector("input[type='checkbox']"); + assert(coconutCheckbox); + + await user.click(coconutCheckbox); + + expect(coconutCheckbox).toBeChecked(); + expect(consoleLog).toHaveBeenCalledWith("group changed:", [ + "Apple", + "Banana", + "Coconut", + ]); + expect(screen.getByTestId("selected-values")).toHaveTextContent( + '["Apple","Banana","Coconut"]', + ); + }); + + it("handles button click to set specific value", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(MultipleCheckboxes); + + await user.click(screen.getByText(/Set to/)); + + expect(consoleLog).toHaveBeenCalledWith("set to banana"); + expect(consoleLog).toHaveBeenCalledWith("group changed:", ["Banana"]); + + const appleCheckbox = screen + .getByTestId("checkbox-0") + .querySelector("input[type='checkbox']"); + const bananaCheckbox = screen + .getByTestId("checkbox-1") + .querySelector("input[type='checkbox']"); + const coconutCheckbox = screen + .getByTestId("checkbox-2") + .querySelector("input[type='checkbox']"); + + assert(appleCheckbox); + assert(bananaCheckbox); + assert(coconutCheckbox); + + expect(appleCheckbox).not.toBeChecked(); + expect(bananaCheckbox).toBeChecked(); + expect(coconutCheckbox).not.toBeChecked(); + + expect(screen.getByTestId("selected-values")).toHaveTextContent( + '["Banana"]', + ); + }); + + it("handles deselection of checkboxes", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(MultipleCheckboxes); + + const bananaCheckbox = screen + .getByTestId("checkbox-1") + .querySelector("input[type='checkbox']"); + assert(bananaCheckbox); + + await user.click(bananaCheckbox); + + expect(bananaCheckbox).not.toBeChecked(); + expect(consoleLog).toHaveBeenCalledWith("group changed:", ["Apple"]); + expect(screen.getByTestId("selected-values")).toHaveTextContent( + '["Apple"]', + ); + }); }); diff --git a/tests/Checkbox/MultipleCheckboxes.test.svelte b/tests/Checkbox/MultipleCheckboxes.test.svelte new file mode 100644 index 00000000..d5590def --- /dev/null +++ b/tests/Checkbox/MultipleCheckboxes.test.svelte @@ -0,0 +1,28 @@ + + +{#each values as value, index} + +{/each} + + + +{JSON.stringify(group)}