@assistant-ui/react-generative-ui 0.0.23 → 0.1.0

package/src/vocabulary/interactive.test.tsx

@@ -1,377 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { renderToStaticMarkup } from "react-dom/server";
-import {
-  CHECKBOX_GROUP_ATTR,
-  FIELD_NAME_ATTR,
-  GENERATED_NAME_ATTR,
-} from "../constants";
-import { renderGenerativeUI } from "../renderGenerativeUI";
-import { interactiveVocabulary } from "./interactive";
-import { defaultGenerativeUILibrary } from "./index";
-
-const render = (node: unknown) =>
-  renderToStaticMarkup(<>{renderGenerativeUI(node, interactiveVocabulary)}</>);
-
-describe("interactiveVocabulary", () => {
-  it("Button renders a button with style/block hooks and the label", () => {
-    expect(
-      render({
-        $type: "Button",
-        label: "Go",
-        buttonStyle: "primary",
-        block: true,
-      }),
-    ).toBe(
-      '<button type="button" data-aui="button" data-aui-style="primary" data-aui-block="true">Go</button>',
-    );
-  });
-
-  it("Button omits data-aui-block when block is false or omitted", () => {
-    expect(render({ $type: "Button", label: "Go", block: false })).toBe(
-      '<button type="button" data-aui="button">Go</button>',
-    );
-  });
-
-  it('Button renders type="button" by default and type="submit" with the submit prop', () => {
-    expect(render({ $type: "Button", label: "Go" })).toContain('type="button"');
-    const html = render({ $type: "Button", label: "Go", submit: true });
-    expect(html).toContain('type="submit"');
-    expect(html).toContain("data-aui-submit");
-  });
-
-  it("Button omits data-aui-submit when submit is false or omitted", () => {
-    expect(
-      render({ $type: "Button", label: "Go", submit: false }),
-    ).not.toContain("data-aui-submit");
-  });
-
-  it("Select renders an aria-label when label is provided", () => {
-    const html = render({
-      $type: "Select",
-      label: "Choose",
-      options: [{ label: "A", value: "a" }],
-    });
-    expect(html).toContain('aria-label="Choose"');
-  });
-
-  it("Select renders every option when values are duplicated", () => {
-    const html = render({
-      $type: "Select",
-      options: [
-        { label: "A", value: "x" },
-        { label: "B", value: "x" },
-      ],
-    });
-    expect(html).toContain('<option value="x">A</option>');
-    expect(html).toContain('<option value="x">B</option>');
-  });
-
-  it("Select renders a name attribute when provided", () => {
-    const html = render({
-      $type: "Select",
-      name: "role",
-      options: [{ label: "A", value: "a" }],
-    });
-    expect(html).toContain('name="role"');
-  });
-
-  it("Button stashes $action on a data-aui-action attribute", () => {
-    const html = render({
-      $type: "Button",
-      label: "Buy",
-      $action: { type: "purchase", itemId: "sku-1" },
-    });
-    expect(html).toContain('data-aui-action="');
-    expect(html).toContain("&quot;type&quot;:&quot;purchase&quot;");
-    expect(html).toContain("&quot;itemId&quot;:&quot;sku-1&quot;");
-  });
-
-  it("Button without $action omits the data-aui-action attribute", () => {
-    expect(render({ $type: "Button", label: "Go" })).toBe(
-      '<button type="button" data-aui="button">Go</button>',
-    );
-  });
-
-  it("Select renders options with values and a placeholder", () => {
-    const html = render({
-      $type: "Select",
-      placeholder: "Pick one",
-      options: [
-        { label: "A", value: "a" },
-        { label: "B", value: "b" },
-      ],
-    });
-    expect(html).toContain('data-aui="select"');
-    expect(html).toContain(
-      'value="" disabled="" selected="">Pick one</option>',
-    );
-    expect(html).toContain('<option value="a">A</option>');
-    expect(html).toContain('<option value="b">B</option>');
-  });
-
-  it("Select ignores malformed options instead of throwing", () => {
-    expect(render({ $type: "Select" })).toBe(
-      '<select data-aui="select"></select>',
-    );
-    expect(render({ $type: "Select", options: "not-an-array" })).toBe(
-      '<select data-aui="select"></select>',
-    );
-    expect(
-      render({
-        $type: "Select",
-        options: [
-          null,
-          { label: "Missing value" },
-          { value: "Missing label" },
-          { label: "A", value: "a" },
-        ],
-      }),
-    ).toBe('<select data-aui="select"><option value="a">A</option></select>');
-  });
-
-  it("Input renders a single-line input by default", () => {
-    expect(render({ $type: "Input", placeholder: "type here" })).toBe(
-      '<input data-aui="input" placeholder="type here"/>',
-    );
-  });
-
-  it("Input renders a name attribute when provided", () => {
-    expect(render({ $type: "Input", name: "email" })).toContain('name="email"');
-  });
-
-  it("Input multiline renders a textarea with the multiline hook", () => {
-    const html = render({ $type: "Input", multiline: true });
-    expect(html).toContain("data-aui-multiline");
-    expect(html).toContain("<textarea");
-  });
-
-  it("DatePicker renders a date input with min/max", () => {
-    const html = render({
-      $type: "DatePicker",
-      value: "2026-01-01",
-      min: "2025-01-01",
-      max: "2027-01-01",
-    });
-    expect(html).toContain('type="date"');
-    expect(html).toContain('value="2026-01-01"');
-    expect(html).toContain('min="2025-01-01"');
-    expect(html).toContain('max="2027-01-01"');
-  });
-
-  it("DatePicker renders a name attribute when provided", () => {
-    expect(render({ $type: "DatePicker", name: "dob" })).toContain(
-      'name="dob"',
-    );
-  });
-
-  it("Checkbox renders a label wrapping the input and a checkbox-label span", () => {
-    const html = render({ $type: "Checkbox", label: "Accept terms" });
-    expect(html).toContain('data-aui="checkbox"');
-    expect(html).toContain('type="checkbox"');
-    expect(html).toContain('data-aui="checkbox-label"');
-    expect(html).toContain("Accept terms");
-  });
-
-  it("Checkbox renders name and defaultChecked when provided", () => {
-    const html = render({
-      $type: "Checkbox",
-      label: "Accept",
-      name: "agree",
-      defaultChecked: true,
-    });
-    expect(html).toContain('name="agree"');
-    expect(html).toContain('checked=""');
-  });
-
-  it.each([
-    [
-      { $type: "Button", label: { unexpected: true } },
-      '<button type="button" data-aui="button"></button>',
-    ],
-    [
-      {
-        $type: "Select",
-        placeholder: { unexpected: true },
-        options: [],
-      },
-      '<select data-aui="select"></select>',
-    ],
-    [
-      { $type: "Checkbox", label: { unexpected: true } },
-      '<label data-aui="checkbox"><input type="checkbox"/><span data-aui="checkbox-label"></span></label>',
-    ],
-  ])("ignores malformed control text properties", (node, expected) => {
-    expect(render(node)).toBe(expected);
-  });
-
-  it("RadioGroup renders a fieldset with one radio per option", () => {
-    const html = render({
-      $type: "RadioGroup",
-      options: [
-        { label: "Small", value: "sm" },
-        { label: "Large", value: "lg" },
-      ],
-    });
-    expect(html).toContain('data-aui="radiogroup"');
-    expect((html.match(/type="radio"/g) ?? []).length).toBe(2);
-    expect(html).toContain('data-aui="radiogroup-option"');
-    expect(html).toContain("Small");
-    expect(html).toContain("Large");
-  });
-
-  it("RadioGroup renders model-provided children after the options inside the fieldset", () => {
-    const html = renderToStaticMarkup(
-      <>
-        {renderGenerativeUI(
-          {
-            $type: "RadioGroup",
-            options: [{ label: "Small", value: "sm" }],
-            children: { $type: "Text", value: "Additional context" },
-          },
-          defaultGenerativeUILibrary,
-        )}
-      </>,
-    );
-    expect(html).toMatch(
-      /^<fieldset data-aui="radiogroup">.*data-aui="radiogroup-option".*Small<\/label>.*Additional context.*<\/fieldset>$/,
-    );
-  });
-
-  it("RadioGroup renders an aria-label from the label prop", () => {
-    const html = render({
-      $type: "RadioGroup",
-      label: "Size",
-      options: [{ label: "Small", value: "sm" }],
-    });
-    expect(html).toContain('aria-label="Size"');
-  });
-
-  it("RadioGroup uses a shared native name and preserves the logical field name", () => {
-    const html = render({
-      $type: "RadioGroup",
-      name: "size",
-      options: [
-        { label: "Small", value: "sm" },
-        { label: "Large", value: "lg" },
-      ],
-    });
-    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);
-  });
-
-  it("RadioGroup falls back to a generated shared name when name is omitted", () => {
-    const html = render({
-      $type: "RadioGroup",
-      options: [
-        { label: "Small", value: "sm" },
-        { label: "Large", value: "lg" },
-      ],
-    });
-    const names = [...html.matchAll(/ name="([^"]*)"/g)].map((m) => m[1]);
-    expect(names.length).toBe(2);
-    expect(names[0]).toBe(names[1]);
-    expect(names[0]).toBeTruthy();
-    expect(html.split(`${GENERATED_NAME_ATTR}=""`).length - 1).toBe(2);
-  });
-
-  it("RadioGroup marks a generated shared name when name is null", () => {
-    const html = render({
-      $type: "RadioGroup",
-      name: null,
-      options: [{ label: "Small", value: "sm" }],
-    });
-
-    expect(html).toContain(`${GENERATED_NAME_ATTR}=""`);
-  });
-
-  it("RadioGroup marks the option matching defaultValue as checked", () => {
-    const html = render({
-      $type: "RadioGroup",
-      defaultValue: "lg",
-      options: [
-        { label: "Small", value: "sm" },
-        { label: "Large", value: "lg" },
-      ],
-    });
-    expect(html.match(/checked=""/g)?.length).toBe(1);
-  });
-
-  it("RadioGroup renders nothing for malformed entries without throwing", () => {
-    expect(() =>
-      render({
-        $type: "RadioGroup",
-        options: [
-          { label: "Small", value: "sm" },
-          null,
-          { value: "no-label" },
-          { label: "no-value" },
-          "not-an-object",
-        ],
-      }),
-    ).not.toThrow();
-    const html = render({
-      $type: "RadioGroup",
-      options: [{ label: "Small", value: "sm" }, null],
-    });
-    expect((html.match(/type="radio"/g) ?? []).length).toBe(1);
-  });
-
-  it("RadioGroup with missing options renders an empty fieldset without throwing", () => {
-    expect(() => render({ $type: "RadioGroup" })).not.toThrow();
-    expect(render({ $type: "RadioGroup" })).toBe(
-      '<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>',
-    );
-  });
-});