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

package/src/vocabulary/interactive.dispatch.test.tsx

@@ -45,53 +45,65 @@ describe("interactiveVocabulary $action dispatch", () => {
   it("Button render attaches an onClick that fires $dispatch with the $action payload", () => {
     const handler = vi.fn();
     const registry = createActionRegistry({ purchase: handler });
-    const out = interactiveVocabulary.Button.render({
-      label: "Buy",
-      $status: "done",
-      $action: { type: "purchase", itemId: "sku-1" },
-      $dispatch: registry.dispatch,
-    } as ButtonRenderProps) as ReactNode;
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Button.render({
+        label: "Buy",
+        $status: "done",
+        $action: { type: "purchase", itemId: "sku-1" },
+        $dispatch: registry.dispatch,
+      } as ButtonRenderProps),
+    );
     expect(isValidElement(out)).toBe(true);
-    const onClick = (out as { props: { onClick: () => void } }).props.onClick;
+    const onClick = (out as { props: { onClick: (e: object) => void } }).props
+      .onClick;
     expect(typeof onClick).toBe("function");
-    onClick();
+    onClick({ currentTarget: {} });
     expect(handler).toHaveBeenCalledWith({
       payload: { type: "purchase", itemId: "sku-1" },
     });
   });
 
   it("Button onClick is a no-op when no $dispatch is wired (read-only render)", () => {
-    const out = interactiveVocabulary.Button.render({
-      label: "Buy",
-      $status: "done",
-      $action: { type: "purchase", itemId: "sku-1" },
-    } as ButtonRenderProps) as ReactNode;
-    const onClick = (out as { props: { onClick: () => void } }).props.onClick;
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Button.render({
+        label: "Buy",
+        $status: "done",
+        $action: { type: "purchase", itemId: "sku-1" },
+      } as ButtonRenderProps),
+    );
+    const onClick = (out as { props: { onClick: (e: object) => void } }).props
+      .onClick;
     expect(typeof onClick).toBe("function");
-    expect(() => onClick()).not.toThrow();
+    expect(() => onClick({ currentTarget: {} })).not.toThrow();
   });
 
   it("Button onClick is a no-op when $action is absent", () => {
     const handler = vi.fn();
     const registry = createActionRegistry({ purchase: handler });
-    const out = interactiveVocabulary.Button.render({
-      label: "Go",
-      $status: "done",
-      $dispatch: registry.dispatch,
-    } as ButtonRenderProps) as ReactNode;
-    (out as { props: { onClick: () => void } }).props.onClick();
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Button.render({
+        label: "Go",
+        $status: "done",
+        $dispatch: registry.dispatch,
+      } as ButtonRenderProps),
+    );
+    (out as { props: { onClick: (e: object) => void } }).props.onClick({
+      currentTarget: {},
+    });
     expect(handler).not.toHaveBeenCalled();
   });
 
   it("Select onChange merges the selected value into $input and preserves a model-supplied $action.value", () => {
     const handler = vi.fn();
     const registry = createActionRegistry({ pick: handler });
-    const out = interactiveVocabulary.Select.render({
-      options: [{ label: "A", value: "a" }],
-      $status: "done",
-      $action: { type: "pick", value: "model-supplied" },
-      $dispatch: registry.dispatch,
-    }) as ReactNode;
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Select.render({
+        options: [{ label: "A", value: "a" }],
+        $status: "done",
+        $action: { type: "pick", value: "model-supplied" },
+        $dispatch: registry.dispatch,
+      }),
+    ) as ReactNode;
     const onChange = (
       out as {
         props: { onChange: (e: { currentTarget: { value: string } }) => void };
@@ -110,11 +122,13 @@ describe("interactiveVocabulary $action dispatch", () => {
   it("Input onKeyDown (Enter) merges the entered value into $input", () => {
     const handler = vi.fn();
     const registry = createActionRegistry({ submit: handler });
-    const out = interactiveVocabulary.Input.render({
-      $status: "done",
-      $action: { type: "submit" },
-      $dispatch: registry.dispatch,
-    }) as ReactNode;
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Input.render({
+        $status: "done",
+        $action: { type: "submit" },
+        $dispatch: registry.dispatch,
+      }),
+    ) as ReactNode;
     const onKeyDown = (
       out as {
         props: {
@@ -136,15 +150,75 @@ describe("interactiveVocabulary $action dispatch", () => {
     });
   });
 
+  it.each(["text", "password", "number"] as const)(
+    "Input renders its %s inputType",
+    (inputType) => {
+      expect(
+        interactiveVocabulary.Input.properties.parse({ inputType }),
+      ).toEqual({ inputType });
+      const out = renderWithHooks(() =>
+        interactiveVocabulary.Input.render({
+          inputType,
+          defaultValue: "12.5",
+          $status: "done",
+        }),
+      );
+
+      expect(out.type).toBe("input");
+      expect(out.props).toMatchObject({
+        type: inputType,
+        defaultValue: "12.5",
+        step: inputType === "number" ? "any" : undefined,
+      });
+    },
+  );
+
+  it.each(["12.5", ""])(
+    "Input with inputType number submits %j as a string",
+    (value) => {
+      const handler = vi.fn();
+      const registry = createActionRegistry({ submit: handler });
+      const out = renderWithHooks(() =>
+        interactiveVocabulary.Input.render({
+          inputType: "number",
+          $status: "done",
+          $action: { type: "submit" },
+          $dispatch: registry.dispatch,
+        }),
+      ) as ReactElement<{
+        type: string;
+        step: string;
+        onKeyDown: (event: {
+          key: string;
+          nativeEvent: { isComposing: boolean };
+          currentTarget: { value: string };
+        }) => void;
+      }>;
+
+      expect(out.props.type).toBe("number");
+      expect(out.props.step).toBe("any");
+      out.props.onKeyDown({
+        key: "Enter",
+        nativeEvent: { isComposing: false },
+        currentTarget: { value },
+      });
+      expect(handler).toHaveBeenCalledWith({
+        payload: { type: "submit", $input: value },
+      });
+    },
+  );
+
   it("Input onKeyDown (Enter) defers to an ancestor form instead of firing its own $action", () => {
     const handler = vi.fn();
     const registry = createActionRegistry({ submit: handler });
-    const out = interactiveVocabulary.Input.render({
-      name: "email",
-      $status: "done",
-      $action: { type: "submit" },
-      $dispatch: registry.dispatch,
-    }) as ReactNode;
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Input.render({
+        name: "email",
+        $status: "done",
+        $action: { type: "submit" },
+        $dispatch: registry.dispatch,
+      }),
+    ) as ReactNode;
     const onKeyDown = (
       out as {
         props: {
@@ -179,13 +253,15 @@ describe("interactiveVocabulary $action dispatch", () => {
   it("Input multiline (textarea) Ctrl+Enter inside a form calls HTMLFormElement.prototype.requestSubmit instead of firing its own $action", () => {
     const handler = vi.fn();
     const registry = createActionRegistry({ submit: handler });
-    const out = interactiveVocabulary.Input.render({
-      multiline: true,
-      name: "notes",
-      $status: "done",
-      $action: { type: "submit" },
-      $dispatch: registry.dispatch,
-    }) as ReactNode;
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Input.render({
+        multiline: true,
+        name: "notes",
+        $status: "done",
+        $action: { type: "submit" },
+        $dispatch: registry.dispatch,
+      }),
+    ) as ReactNode;
     const onKeyDown = (
       out as { props: { onKeyDown: (e: TextareaKeyDownEvent) => void } }
     ).props.onKeyDown;
@@ -225,12 +301,14 @@ describe("interactiveVocabulary $action dispatch", () => {
   it("Input multiline (textarea) Ctrl+Enter without a form still fires its own $action", () => {
     const handler = vi.fn();
     const registry = createActionRegistry({ submit: handler });
-    const out = interactiveVocabulary.Input.render({
-      multiline: true,
-      $status: "done",
-      $action: { type: "submit" },
-      $dispatch: registry.dispatch,
-    }) as ReactNode;
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Input.render({
+        multiline: true,
+        $status: "done",
+        $action: { type: "submit" },
+        $dispatch: registry.dispatch,
+      }),
+    ) as ReactNode;
     const onKeyDown = (
       out as { props: { onKeyDown: (e: TextareaKeyDownEvent) => void } }
     ).props.onKeyDown;
@@ -252,13 +330,15 @@ describe("interactiveVocabulary $action dispatch", () => {
   it("Button with submit set renders no onClick handler, so it never fires $action on click", () => {
     const handler = vi.fn();
     const registry = createActionRegistry({ purchase: handler });
-    const out = interactiveVocabulary.Button.render({
-      label: "Buy",
-      submit: true,
-      $status: "done",
-      $action: { type: "purchase" },
-      $dispatch: registry.dispatch,
-    } as ButtonRenderProps & { submit: boolean }) as ReactNode;
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Button.render({
+        label: "Buy",
+        submit: true,
+        $status: "done",
+        $action: { type: "purchase" },
+        $dispatch: registry.dispatch,
+      } as ButtonRenderProps & { submit: boolean }),
+    );
     expect(
       (out as { props: { onClick?: unknown } }).props.onClick,
     ).toBeUndefined();
@@ -268,26 +348,31 @@ describe("interactiveVocabulary $action dispatch", () => {
   it("Button without submit keeps firing $action on click", () => {
     const handler = vi.fn();
     const registry = createActionRegistry({ purchase: handler });
-    const out = interactiveVocabulary.Button.render({
-      label: "Buy",
-      $status: "done",
-      $action: { type: "purchase" },
-      $dispatch: registry.dispatch,
-    } as ButtonRenderProps) as ReactNode;
-    const onClick = (out as { props: { onClick: () => void } }).props.onClick;
-    onClick();
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Button.render({
+        label: "Buy",
+        $status: "done",
+        $action: { type: "purchase" },
+        $dispatch: registry.dispatch,
+      } as ButtonRenderProps),
+    );
+    const onClick = (out as { props: { onClick: (e: object) => void } }).props
+      .onClick;
+    onClick({ currentTarget: {} });
     expect(handler).toHaveBeenCalledWith({ payload: { type: "purchase" } });
   });
 
   it("Checkbox onChange fires $dispatch with the checked boolean as $input", () => {
     const handler = vi.fn();
     const registry = createActionRegistry({ toggle: handler });
-    const out = interactiveVocabulary.Checkbox.render({
-      label: "Accept",
-      $status: "done",
-      $action: { type: "toggle" },
-      $dispatch: registry.dispatch,
-    }) as ReactElement;
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Checkbox.render({
+        label: "Accept",
+        $status: "done",
+        $action: { type: "toggle" },
+        $dispatch: registry.dispatch,
+      }),
+    );
     const input = (out.props as { children: ReactElement[] }).children[0];
     const onChange = (
       input as {
@@ -303,11 +388,13 @@ describe("interactiveVocabulary $action dispatch", () => {
   });
 
   it("Checkbox onChange is a no-op when no $dispatch is wired", () => {
-    const out = interactiveVocabulary.Checkbox.render({
-      label: "Accept",
-      $status: "done",
-      $action: { type: "toggle" },
-    }) as ReactElement;
+    const out = renderWithHooks(() =>
+      interactiveVocabulary.Checkbox.render({
+        label: "Accept",
+        $status: "done",
+        $action: { type: "toggle" },
+      }),
+    );
     const input = (out.props as { children: ReactElement[] }).children[0];
     const onChange = (
       input as {
@@ -336,8 +423,9 @@ describe("interactiveVocabulary $action dispatch", () => {
     const options = getRadioOptions(out);
     const secondRadio = (options[1]!.props as { children: ReactElement[] })
       .children[0] as ReactElement;
-    const onChange = (secondRadio.props as { onChange: () => void }).onChange;
-    onChange();
+    const onChange = (secondRadio.props as { onChange: (e: object) => void })
+      .onChange;
+    onChange({ currentTarget: {} });
     expect(handler).toHaveBeenCalledWith({
       payload: { type: "pick", $input: "lg" },
     });