diff --git a/tests/Checkbox/Checkbox.test.ts b/tests/Checkbox/Checkbox.test.ts
index 0ac3fb01..b56ff843 100644
--- a/tests/Checkbox/Checkbox.test.ts
+++ b/tests/Checkbox/Checkbox.test.ts
@@ -5,6 +5,7 @@ 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";
+import MultipleCheckboxesObject from "./MultipleCheckboxesObject.test.svelte";
describe("Checkbox", () => {
beforeEach(() => {
@@ -249,4 +250,144 @@ describe("Checkbox", () => {
'["Apple"]',
);
});
+
+ it("renders multiple checkboxes bound to object properties", () => {
+ render(MultipleCheckboxesObject);
+
+ expect(screen.getByTestId("checkbox-a")).toBeInTheDocument();
+ expect(screen.getByTestId("checkbox-b")).toBeInTheDocument();
+
+ const checkboxA = screen
+ .getByTestId("checkbox-a")
+ .querySelector("input[type='checkbox']");
+ const checkboxB = screen
+ .getByTestId("checkbox-b")
+ .querySelector("input[type='checkbox']");
+
+ assert(checkboxA);
+ assert(checkboxB);
+
+ expect(checkboxA).not.toBeChecked();
+ expect(checkboxB).not.toBeChecked();
+
+ expect(screen.getByTestId("object-values")).toHaveTextContent(
+ '{"a":false,"b":false}',
+ );
+ });
+
+ it("handles checkbox selection changes with object binding", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(MultipleCheckboxesObject);
+
+ const checkboxA = screen
+ .getByTestId("checkbox-a")
+ .querySelector("input[type='checkbox']");
+ assert(checkboxA);
+
+ await user.click(checkboxA);
+
+ expect(checkboxA).toBeChecked();
+ expect(consoleLog).toHaveBeenCalledWith("object changed:", {
+ a: true,
+ b: false,
+ });
+ expect(screen.getByTestId("object-values")).toHaveTextContent(
+ '{"a":true,"b":false}',
+ );
+ });
+
+ it("handles multiple checkbox selections with object binding", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(MultipleCheckboxesObject);
+
+ const checkboxA = screen
+ .getByTestId("checkbox-a")
+ .querySelector("input[type='checkbox']");
+ const checkboxB = screen
+ .getByTestId("checkbox-b")
+ .querySelector("input[type='checkbox']");
+ assert(checkboxA);
+ assert(checkboxB);
+
+ await user.click(checkboxA);
+ expect(checkboxA).toBeChecked();
+ expect(consoleLog).toHaveBeenCalledWith("object changed:", {
+ a: true,
+ b: false,
+ });
+
+ await user.click(checkboxB);
+ expect(checkboxB).toBeChecked();
+ expect(consoleLog).toHaveBeenCalledWith("object changed:", {
+ a: true,
+ b: true,
+ });
+
+ expect(screen.getByTestId("object-values")).toHaveTextContent(
+ '{"a":true,"b":true}',
+ );
+ });
+
+ it("handles checkbox deselection with object binding", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(MultipleCheckboxesObject, {
+ props: {
+ obj: { a: true, b: true },
+ },
+ });
+
+ const checkboxA = screen
+ .getByTestId("checkbox-a")
+ .querySelector("input[type='checkbox']");
+ const checkboxB = screen
+ .getByTestId("checkbox-b")
+ .querySelector("input[type='checkbox']");
+ assert(checkboxA);
+ assert(checkboxB);
+
+ expect(checkboxA).toBeChecked();
+ expect(checkboxB).toBeChecked();
+
+ await user.click(checkboxA);
+ expect(checkboxA).not.toBeChecked();
+ expect(consoleLog).toHaveBeenCalledWith("object changed:", {
+ a: false,
+ b: true,
+ });
+
+ await user.click(checkboxB);
+ expect(checkboxB).not.toBeChecked();
+ expect(consoleLog).toHaveBeenCalledWith("object changed:", {
+ a: false,
+ b: false,
+ });
+
+ expect(screen.getByTestId("object-values")).toHaveTextContent(
+ '{"a":false,"b":false}',
+ );
+ });
+
+ it("accepts custom initial object state", () => {
+ render(MultipleCheckboxesObject, {
+ props: {
+ obj: { a: true, b: false },
+ },
+ });
+
+ const checkboxA = screen
+ .getByTestId("checkbox-a")
+ .querySelector("input[type='checkbox']");
+ const checkboxB = screen
+ .getByTestId("checkbox-b")
+ .querySelector("input[type='checkbox']");
+ assert(checkboxA);
+ assert(checkboxB);
+
+ expect(checkboxA).toBeChecked();
+ expect(checkboxB).not.toBeChecked();
+
+ expect(screen.getByTestId("object-values")).toHaveTextContent(
+ '{"a":true,"b":false}',
+ );
+ });
});
diff --git a/tests/Checkbox/MultipleCheckboxesObject.test.svelte b/tests/Checkbox/MultipleCheckboxesObject.test.svelte
new file mode 100644
index 00000000..94129ee6
--- /dev/null
+++ b/tests/Checkbox/MultipleCheckboxesObject.test.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
+{JSON.stringify(obj)}