test(checkbox): test multiple checkbox reactivity

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

tests/Checkbox/MultipleCheckboxes.test.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { Checkbox, Button } from "carbon-components-svelte";
+
+  export let values = ["Apple", "Banana", "Coconut"];
+  export let group = values.slice(0, 2);
+
+  $: console.log("group changed:", group);
+</script>
+
+{#each values as value, index}
+  <Checkbox
+    bind:group
+    labelText={value}
+    {value}
+    data-testid={`checkbox-${index}`}
+  />
+{/each}
+
+<Button
+  on:click={() => {
+    group = ["Banana"];
+    console.log("set to banana");
+  }}
+>
+  Set to ["Banana"]
+</Button>
+
+<span data-testid="selected-values">{JSON.stringify(group)}</span>