@assistant-ui/react-generative-ui 0.0.21 → 0.0.22

package/src/vocabulary/interactive.test.tsx

@@ -1,6 +1,10 @@
 import { describe, it, expect } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
-import { GENERATED_NAME_ATTR } from "../constants";
+import {
+  CHECKBOX_GROUP_ATTR,
+  FIELD_NAME_ATTR,
+  GENERATED_NAME_ATTR,
+} from "../constants";
 import { renderGenerativeUI } from "../renderGenerativeUI";
 import { interactiveVocabulary } from "./interactive";
 import { defaultGenerativeUILibrary } from "./index";
@@ -50,7 +54,7 @@ describe("interactiveVocabulary", () => {
     expect(html).toContain('aria-label="Choose"');
   });
 
-  it("Select keys options by index so duplicate values do not collide", () => {
+  it("Select renders every option when values are duplicated", () => {
     const html = render({
       $type: "Select",
       options: [
@@ -242,7 +246,7 @@ describe("interactiveVocabulary", () => {
     expect(html).toContain('aria-label="Size"');
   });
 
-  it("RadioGroup radios share the given name", () => {
+  it("RadioGroup uses a shared native name and preserves the logical field name", () => {
     const html = render({
       $type: "RadioGroup",
       name: "size",
@@ -251,7 +255,11 @@ describe("interactiveVocabulary", () => {
         { label: "Large", value: "lg" },
       ],
     });
-    expect((html.match(/name="size"/g) ?? []).length).toBe(2);
+    const names = [...html.matchAll(/ name="([^"]*)"/g)].map((m) => m[1]);
+    expect(names).toHaveLength(2);
+    expect(names[0]).toBe(names[1]);
+    expect(names[0]).not.toBe("size");
+    expect(html.split(`${FIELD_NAME_ATTR}="size"`).length - 1).toBe(2);
     expect(html).not.toContain(GENERATED_NAME_ATTR);
   });
 
@@ -318,4 +326,52 @@ describe("interactiveVocabulary", () => {
       '<fieldset data-aui="radiogroup"></fieldset>',
     );
   });
+
+  it("CheckboxGroup renders one named checkbox per option and checks each defaultValue", () => {
+    const html = render({
+      $type: "CheckboxGroup",
+      name: "toppings",
+      label: "Toppings",
+      defaultValue: ["olives"],
+      options: [
+        { label: "Basil", value: "basil" },
+        null,
+        { label: "Olives", value: "olives" },
+      ],
+    });
+    const inputs = html.match(/<input[^>]*>/g) ?? [];
+    expect(html).toMatch(
+      /^<fieldset data-aui="checkboxgroup" aria-label="Toppings">.*Basil<\/label>.*Olives<\/label><\/fieldset>$/,
+    );
+    expect(inputs).toHaveLength(2);
+    for (const input of inputs) {
+      expect(input).toContain('type="checkbox"');
+      expect(input).toContain('name="toppings"');
+      expect(input).toContain(`${CHECKBOX_GROUP_ATTR}=""`);
+    }
+    expect(inputs.filter((input) => input.includes('checked=""'))).toEqual([
+      expect.stringContaining('value="olives"'),
+    ]);
+  });
+
+  it("CheckboxGroup falls back to a generated shared name when name is omitted", () => {
+    const html = render({
+      $type: "CheckboxGroup",
+      options: [
+        { label: "Basil", value: "basil" },
+        { label: "Olives", value: "olives" },
+      ],
+    });
+    const names = [...html.matchAll(/ name="([^"]*)"/g)].map((m) => m[1]);
+    expect(names.length).toBe(2);
+    expect(names[0]).toBeTruthy();
+    expect(names[0]).toBe(names[1]);
+    expect(html.split(`${GENERATED_NAME_ATTR}=""`).length - 1).toBe(2);
+  });
+
+  it("CheckboxGroup with missing options renders an empty fieldset without throwing", () => {
+    expect(render({ $type: "CheckboxGroup" })).toBe(
+      '<fieldset data-aui="checkboxgroup"></fieldset>',
+    );
+  });
 });