@gusnips/react 0.9.25 → 0.9.26

package/src/commands-hook.test.ts

@@ -0,0 +1,444 @@
+// @vitest-environment happy-dom
+import { act, createElement, useLayoutEffect, type ChangeEvent } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useSlashCommands, type SlashCommand } from "./commands.ts";
+
+interface Action extends SlashCommand {
+  action: string;
+}
+
+const commands: readonly Action[] = [
+  {
+    name: "help",
+    description: "See commands",
+    aliases: ["commands"],
+    tags: ["keyboard"],
+    action: "help",
+  },
+  {
+    name: "new",
+    description: "Start a chat",
+    aliases: ["fresh"],
+    tags: ["conversation"],
+    action: "new",
+  },
+  {
+    name: "stop",
+    description: "Stop the reply",
+    aliases: ["cancel"],
+    tags: ["reply"],
+    action: "stop",
+  },
+  {
+    name: "model",
+    description: "Choose a model",
+    aliases: ["llm"],
+    tags: ["engine"],
+    takesArg: true,
+    action: "model",
+  },
+];
+
+const roots = new Set<Root>();
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+
+afterEach(() => {
+  for (const root of roots) act(() => root.unmount());
+  roots.clear();
+  document.body.replaceChildren();
+});
+
+function composer(initialText = "/", initialCommands = commands) {
+  const element = document.createElement("div");
+  document.body.append(element);
+  const root = createRoot(element);
+  roots.add(root);
+  let text = initialText;
+  let registry = initialCommands;
+  let current: ReturnType<typeof useSlashCommands<Action>> | undefined;
+  const execute = vi.fn();
+  const error = vi.fn();
+  const send = vi.fn();
+  const changed = vi.fn((next: string) => {
+    text = next;
+    render();
+  });
+
+  function Harness() {
+    const slash = useSlashCommands({
+      text,
+      commands: registry,
+      onChange: changed,
+      onExecute: execute,
+      onError: error,
+    });
+    useLayoutEffect(() => {
+      current = slash;
+    }, [slash]);
+    return createElement(
+      "div",
+      null,
+      createElement("textarea", {
+        value: text,
+        onChange: (event: ChangeEvent<HTMLTextAreaElement>) => changed(event.currentTarget.value),
+        "aria-label": "Message",
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": slash.open,
+        "aria-controls": slash.open ? slash.listId : undefined,
+        "aria-activedescendant": slash.activeId,
+        onKeyDown: (event) => {
+          if (slash.handleKeyDown(event)) return;
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            send(text);
+          }
+        },
+      }),
+      createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (!slash.submit()) send(text);
+          },
+        },
+        "Send",
+      ),
+      slash.open
+        ? createElement(
+            "div",
+            { id: slash.listId, role: "listbox", "aria-label": "Commands" },
+            ...slash.items.map((command, index) =>
+              createElement(
+                "button",
+                {
+                  key: command.name,
+                  type: "button",
+                  tabIndex: -1,
+                  id: slash.itemId(command),
+                  role: "option",
+                  "aria-selected": slash.index === index,
+                  onMouseEnter: () => slash.highlight(index),
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: (event) => slash.pick(command, event.altKey),
+                },
+                `/${command.name}`,
+              ),
+            ),
+          )
+        : null,
+    );
+  }
+
+  function render() {
+    root.render(createElement(Harness));
+  }
+  act(render);
+  const input = element.querySelector("textarea");
+  const sendButton = element.querySelector("button");
+  if (!input || !sendButton) throw new Error("Composer did not render");
+  input.focus();
+
+  return {
+    execute,
+    error,
+    send,
+    changed,
+    input,
+    get text() {
+      return text;
+    },
+    get menu() {
+      if (!current) throw new Error("Hook did not render");
+      return current;
+    },
+    change(next: string) {
+      act(() => {
+        text = next;
+        render();
+      });
+    },
+    register(next: readonly Action[]) {
+      act(() => {
+        registry = next;
+        render();
+      });
+    },
+    press(key: string, options: KeyboardEventInit = {}) {
+      const event = new KeyboardEvent("keydown", {
+        key,
+        bubbles: true,
+        cancelable: true,
+        ...options,
+      });
+      act(() => input.dispatchEvent(event));
+      return event;
+    },
+    clickSend() {
+      act(() => sendButton.click());
+    },
+    clickOption(name: string, options: MouseEventInit = {}) {
+      const option = Array.from(element.querySelectorAll("button[role=option]")).find(
+        (button) => button.textContent === `/${name}`,
+      );
+      if (!option) throw new Error(`Command not rendered: ${name}`);
+      const down = new MouseEvent("mousedown", { bubbles: true, cancelable: true });
+      act(() => {
+        option.dispatchEvent(down);
+        option.dispatchEvent(new MouseEvent("click", { bubbles: true, ...options }));
+      });
+      return down;
+    },
+  };
+}
+
+describe("useSlashCommands", () => {
+  it("wraps arrow selection and links the active row to the input", () => {
+    const chat = composer();
+    expect(chat.menu.index).toBe(0);
+    expect(chat.input.getAttribute("aria-activedescendant")).toBe(chat.menu.itemId(commands[0]!));
+    expect(chat.press("ArrowUp").defaultPrevented).toBe(true);
+    expect(chat.menu.index).toBe(3);
+    chat.press("ArrowDown");
+    expect(chat.menu.index).toBe(0);
+    expect(chat.input.getAttribute("aria-controls")).toBe(chat.menu.listId);
+  });
+
+  it("executes a selected local action once without sending or clearing the draft", () => {
+    const chat = composer();
+    chat.press("ArrowDown");
+    chat.press("Enter");
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[1], undefined, false);
+    expect(chat.send).not.toHaveBeenCalled();
+    expect(chat.changed).not.toHaveBeenCalled();
+    expect(chat.text).toBe("/");
+  });
+
+  it("Tab completes a name without running its action", () => {
+    const chat = composer("/he");
+    expect(chat.press("Tab").defaultPrevented).toBe(true);
+    expect(chat.text).toBe("/help");
+    expect(chat.execute).not.toHaveBeenCalled();
+  });
+
+  it("retains arguments when keyboard selection completes a partial name", () => {
+    const chat = composer("/mo large  model");
+    chat.press("Enter");
+    expect(chat.text).toBe("/model large  model");
+    expect(chat.execute).not.toHaveBeenCalled();
+    chat.press("Enter", { altKey: true });
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[3], "large  model", true);
+  });
+
+  it("completes an argument-taking alias before keyboard or button submission", () => {
+    const keyboard = composer("/llm");
+    keyboard.press("Enter");
+    expect(keyboard.text).toBe("/model ");
+    expect(keyboard.execute).not.toHaveBeenCalled();
+    const button = composer("/llm");
+    button.clickSend();
+    expect(button.text).toBe("/model ");
+    expect(button.execute).not.toHaveBeenCalled();
+  });
+
+  it("button submission uses an exact alias without entering the message path", () => {
+    const chat = composer("/cancel");
+    chat.clickSend();
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[2], undefined, false);
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("Escape stays closed until the query changes", () => {
+    const chat = composer("/he");
+    expect(chat.press("Escape").defaultPrevented).toBe(true);
+    expect(chat.menu.open).toBe(false);
+    chat.register([commands[1]!]);
+    expect(chat.menu.open).toBe(false);
+    expect(chat.menu.activeId).toBeUndefined();
+    chat.register(commands);
+    chat.change("/hel");
+    expect(chat.menu.open).toBe(true);
+    expect(chat.menu.index).toBe(0);
+    chat.change("/he");
+    expect(chat.menu.open).toBe(true);
+  });
+
+  it("reopens the full list even when Escape dismissed the same bare slash", () => {
+    const chat = composer();
+    chat.press("ArrowDown");
+    chat.press("Escape");
+    expect(chat.menu.open).toBe(false);
+    act(() => chat.menu.showAll());
+    expect(chat.menu.open).toBe(true);
+    expect(chat.menu.index).toBe(0);
+    expect(chat.menu.items).toEqual(commands);
+    expect(chat.text).toBe("/");
+    expect(chat.execute).not.toHaveBeenCalled();
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("returns an unknown draft to the full list for retry", () => {
+    const chat = composer("/missing arg");
+    chat.clickSend();
+    act(() => chat.menu.showAll());
+    expect(chat.text).toBe("/");
+    expect(chat.menu.open).toBe(true);
+    expect(chat.menu.items).toEqual(commands);
+    expect(chat.execute).not.toHaveBeenCalled();
+  });
+
+  it("protects IME when given a native keyboard event directly", () => {
+    const chat = composer("/help");
+    const event = new KeyboardEvent("keydown", {
+      key: "Enter",
+      isComposing: true,
+      cancelable: true,
+    });
+    act(() => expect(chat.menu.handleKeyDown(event)).toBe(true));
+    expect(event.defaultPrevented).toBe(false);
+    expect(chat.execute).not.toHaveBeenCalled();
+  });
+
+  it("leaves Shift+Enter and modified arrow/Tab keys to the text field", () => {
+    const chat = composer();
+    for (const [key, options] of [
+      ["Enter", { shiftKey: true }],
+      ["ArrowDown", { shiftKey: true }],
+      ["ArrowUp", { metaKey: true }],
+      ["Tab", { shiftKey: true }],
+    ] satisfies Array<[string, KeyboardEventInit]>) {
+      expect(chat.press(key, options).defaultPrevented).toBe(false);
+    }
+    expect(chat.execute).not.toHaveBeenCalled();
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("lets IME accept text without executing a command or sending a message", () => {
+    const chat = composer("/help");
+    expect(chat.press("Enter", { isComposing: true }).defaultPrevented).toBe(false);
+    expect(chat.execute).not.toHaveBeenCalled();
+    expect(chat.send).not.toHaveBeenCalled();
+    chat.change("plain text");
+    chat.press("Enter", { isComposing: true });
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("also protects the final IME key reported only as keyCode 229", () => {
+    const chat = composer("/help");
+    const event = new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true });
+    Object.defineProperty(event, "keyCode", { value: 229 });
+    act(() => chat.input.dispatchEvent(event));
+    expect(event.defaultPrevented).toBe(false);
+    expect(chat.execute).not.toHaveBeenCalled();
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("exposes empty results and reports unknown commands without sending them", () => {
+    const chat = composer("/missing");
+    expect(chat.menu.open).toBe(true);
+    expect(chat.menu.items).toEqual([]);
+    expect(chat.menu.activeId).toBeUndefined();
+    chat.press("Enter");
+    expect(chat.error).toHaveBeenCalledExactlyOnceWith({ kind: "unknown", name: "missing" });
+    expect(chat.send).not.toHaveBeenCalled();
+    expect(chat.text).toBe("/missing");
+  });
+
+  it("tags find a row but cannot execute through direct submission", () => {
+    const chat = composer("/conversation");
+    expect(chat.menu.items.map((command) => command.name)).toEqual(["new"]);
+    chat.clickSend();
+    expect(chat.error).toHaveBeenCalledWith({ kind: "unknown", name: "conversation" });
+    expect(chat.execute).not.toHaveBeenCalled();
+    chat.press("Tab");
+    expect(chat.text).toBe("/new");
+    chat.clickSend();
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[1], undefined, false);
+  });
+
+  it("does not auto-dispatch an ambiguous alias on Enter or button submission", () => {
+    const registry = commands.slice(0, 2).map((command) => ({ ...command, aliases: ["shared"] }));
+    const chat = composer("/shared", registry);
+    chat.press("Enter");
+    chat.clickSend();
+    expect(chat.error).toHaveBeenCalledTimes(2);
+    expect(chat.error).toHaveBeenLastCalledWith({
+      kind: "ambiguous",
+      name: "shared",
+      commands: registry,
+    });
+    expect(chat.execute).not.toHaveBeenCalled();
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("lets an explicit arrow selection choose between ambiguous aliases", () => {
+    const registry = commands.slice(0, 2).map((command) => ({ ...command, aliases: ["shared"] }));
+    const chat = composer("/shared", registry);
+    chat.press("ArrowDown");
+    chat.press("Enter");
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(registry[1], undefined, false);
+    expect(chat.error).not.toHaveBeenCalled();
+  });
+
+  it("keeps focus on the text field when a row is clicked", () => {
+    const chat = composer();
+    expect(chat.clickOption("stop", { altKey: true }).defaultPrevented).toBe(true);
+    expect(document.activeElement).toBe(chat.input);
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[2], undefined, true);
+    expect(chat.send).not.toHaveBeenCalled();
+  });
+
+  it("refreshes matching and resets selection when capabilities change under a fixed draft", () => {
+    const chat = composer();
+    chat.press("ArrowDown");
+    expect(chat.menu.active?.name).toBe("new");
+    chat.register([commands[2]!]);
+    expect(chat.text).toBe("/");
+    expect(chat.menu.index).toBe(0);
+    expect(chat.menu.active?.name).toBe("stop");
+    chat.press("Enter");
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[2], undefined, false);
+  });
+
+  it("uses current translated search words even when the draft has not changed", () => {
+    const chat = composer("/comecar");
+    expect(chat.menu.items).toEqual([]);
+    const translated = commands.map((command) =>
+      command.name === "new"
+        ? { ...command, description: "Comece uma conversa", tags: ["começar", "conversa"] }
+        : command,
+    );
+    chat.register(translated);
+    expect(chat.menu.items.map((command) => command.name)).toEqual(["new"]);
+    expect(chat.text).toBe("/comecar");
+  });
+
+  it("re-resolves a retained row against current capabilities", () => {
+    const chat = composer();
+    const oldRow = chat.menu.items[2]!;
+    chat.register(commands.slice(0, 2));
+    act(() => chat.menu.pick(oldRow));
+    expect(chat.error).toHaveBeenCalledWith({ kind: "unknown", name: "stop" });
+    expect(chat.execute).not.toHaveBeenCalled();
+  });
+
+  it("direct submission does not depend on menu state and forwards Alt", () => {
+    const chat = composer("/cancel");
+    chat.press("Escape");
+    act(() => expect(chat.menu.submit(true)).toBe(true));
+    expect(chat.execute).toHaveBeenCalledExactlyOnceWith(commands[2], undefined, true);
+  });
+
+  it("leaves ordinary and multiline messages to the existing sender", () => {
+    const chat = composer("hi");
+    expect(chat.menu.open).toBe(false);
+    chat.clickSend();
+    expect(chat.send).toHaveBeenLastCalledWith("hi");
+    chat.change("/help\nquoted text");
+    chat.clickSend();
+    expect(chat.send).toHaveBeenLastCalledWith("/help\nquoted text");
+    expect(chat.execute).not.toHaveBeenCalled();
+  });
+});

package/src/commands.test.ts

@@ -0,0 +1,245 @@
+// @vitest-environment node
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { describe, expect, expectTypeOf, it, vi } from "vitest";
+import {
+  completeCommand,
+  matchCommands,
+  parseCommand,
+  resolveCommand,
+  useSlashCommands,
+} from "./commands.ts";
+
+const help = {
+  name: "help",
+  description: "Show available commands",
+  aliases: ["assist", "GUIDE"],
+  tags: ["manual"],
+};
+const schedule = {
+  name: "schedule",
+  description: "Run a task later",
+  aliases: ["later", "book"],
+  tags: ["timer"],
+  takesArg: true,
+};
+const commands = [help, schedule];
+
+describe("parseCommand", () => {
+  it.each([
+    { text: "/", expected: { name: "" } },
+    { text: "/ ", expected: { name: "", arg: "" } },
+    { text: "/HELP", expected: { name: "help" } },
+    { text: "/help ", expected: { name: "help", arg: "" } },
+    { text: " \t/HeLp", expected: { name: "help" } },
+    {
+      text: "/SCHEDULE   Keep  these spaces\tand case  ",
+      expected: { name: "schedule", arg: "Keep  these spaces\tand case  " },
+    },
+  ])("parses a single line: $text", ({ text, expected }) => {
+    expect(parseCommand(text)).toEqual(expected);
+  });
+
+  it.each(["/tmp/file", "/help/topic", "//help"])(
+    "keeps a slash path as an unknown command token: %s",
+    (text) => {
+      const name = text.slice(1);
+      expect(parseCommand(text)).toEqual({ name });
+      expect(resolveCommand(commands, name)).toEqual({ kind: "unknown", name });
+    },
+  );
+
+  it.each(["", " \t", "help", "Please /help", "https://example.test/help", "Hello /help there"])(
+    "ignores non-command prose: %s",
+    (text) => {
+      expect(parseCommand(text)).toBeNull();
+    },
+  );
+
+  it.each(["\n", "\r", "\r\n", "\u{2028}", "\u{2029}"])(
+    "rejects a line terminator anywhere: %j",
+    (separator) => {
+      for (const text of [`${separator}/help`, `/help${separator}`, `/help ${separator}topic`]) {
+        expect(parseCommand(text)).toBeNull();
+      }
+    },
+  );
+});
+
+describe("resolveCommand", () => {
+  it("prefers an exact canonical name over an earlier alias", () => {
+    const alias = { ...schedule, aliases: ["help"] };
+    expect(resolveCommand([alias, help], "HELP")).toEqual({ kind: "matched", command: help });
+  });
+
+  it.each([
+    { token: "guide", command: help },
+    { token: "LATER", command: schedule },
+  ])("matches an alias without case sensitivity: $token", ({ token, command }) => {
+    expect(resolveCommand(commands, token)).toEqual({ kind: "matched", command });
+  });
+
+  it("reports aliases shared by different commands in registry order", () => {
+    const first = { ...schedule, aliases: ["shared", "SHARED"] };
+    const second = { ...help, aliases: ["shared"] };
+    expect(resolveCommand([first, second], "SHARED")).toEqual({
+      kind: "ambiguous",
+      name: "SHARED",
+      commands: [first, second],
+    });
+    expect(resolveCommand([first], "shared")).toEqual({ kind: "matched", command: first });
+  });
+
+  it("reports duplicate canonical names even when an alias also matches", () => {
+    const duplicate = { ...schedule, name: "HELP" };
+    const alias = { ...schedule, aliases: ["help"] };
+    expect(resolveCommand([help, alias, duplicate], "help")).toEqual({
+      kind: "ambiguous",
+      name: "help",
+      commands: [help, duplicate],
+    });
+  });
+
+  it.each(["manual", "timer", "Show available commands", "hel", "lat", "missing"])(
+    "does not execute a tag, description, prefix or unknown token: %s",
+    (name) => {
+      expect(resolveCommand(commands, name)).toEqual({ kind: "unknown", name });
+    },
+  );
+
+  it("never executes an empty token, even if the registry contains one", () => {
+    expect(resolveCommand([{ ...help, name: "", aliases: [""] }], "")).toEqual({
+      kind: "unknown",
+      name: "",
+    });
+  });
+});
+
+describe("matchCommands", () => {
+  it("ranks names, aliases, prefixes, tags and descriptions with stable ties", () => {
+    const registry = [
+      { name: "description", description: "Find a task", aliases: [], tags: [] },
+      { name: "tag", description: "", aliases: [], tags: ["finder"] },
+      { name: "shortcut", description: "", aliases: ["finder"], tags: [] },
+      { name: "finding", description: "", aliases: [], tags: [] },
+      { name: "alias", description: "", aliases: ["find"], tags: [] },
+      { name: "find", description: "", aliases: [], tags: [] },
+      { name: "second-tag", description: "", aliases: [], tags: ["find"] },
+      { name: "second-description", description: "Find another task", aliases: [], tags: [] },
+      { name: "unrelated", description: "", aliases: [], tags: [] },
+    ];
+    expect(matchCommands(registry, "find").map((command) => command.name)).toEqual([
+      "find",
+      "alias",
+      "finding",
+      "shortcut",
+      "tag",
+      "second-tag",
+      "description",
+      "second-description",
+    ]);
+  });
+
+  const translated = [
+    {
+      name: "ação",
+      description: "A próxima revisão",
+      aliases: ["café"],
+      tags: ["rápido"],
+    },
+    {
+      name: "mañana",
+      description: "Resumen de la reunión",
+      aliases: ["después"],
+      tags: ["configuración"],
+    },
+  ];
+  it.each([
+    { query: " ACAO ", name: "ação" },
+    { query: "ac\u{0327}a\u{0303}o", name: "ação" },
+    { query: "CAFE", name: "ação" },
+    { query: "RAPIDO", name: "ação" },
+    { query: "PROXIMA REVISAO", name: "ação" },
+    { query: "MANANA", name: "mañana" },
+    { query: "DESPUES", name: "mañana" },
+    { query: "CONFIGURACION", name: "mañana" },
+    { query: "REUNION", name: "mañana" },
+  ])("matches case and accents across search fields: $query", ({ query, name }) => {
+    expect(matchCommands(translated, query).map((command) => command.name)).toEqual([name]);
+  });
+
+  it("returns only the first descriptor for each canonical name", () => {
+    const duplicate = { ...help, name: "HELP" };
+    const registry = [help, schedule, duplicate];
+    expect(matchCommands(registry, "help")).toEqual([help]);
+    expect(matchCommands(registry, "")).toEqual(commands);
+  });
+
+  it("does not turn repeated or shared aliases into duplicate rows", () => {
+    const first = { ...help, aliases: ["shared", "shared", "SHARED"] };
+    const second = { ...schedule, aliases: ["shared"] };
+    expect(matchCommands([first, second], "shared")).toEqual([first, second]);
+  });
+
+  it("returns original descriptors and preserves their extra fields in the type", () => {
+    const custom = { ...help, execute: () => "done" };
+    const [matched] = matchCommands([custom], "assist");
+    expectTypeOf(matched).toEqualTypeOf<typeof custom | undefined>();
+    expect(matched).toBe(custom);
+    expect(matched?.execute()).toBe("done");
+  });
+
+  it.each(["", " \t "])("keeps registry order for an empty query: %j", (query) => {
+    expect(matchCommands([schedule, help], query)).toEqual([schedule, help]);
+  });
+
+  it("returns no rows for an unrelated query", () => {
+    expect(matchCommands(commands, "missing")).toEqual([]);
+  });
+});
+
+describe("completeCommand", () => {
+  it.each([
+    ["/later", "/schedule "],
+    ["/sche", "/schedule "],
+    ["/SCHEDULE", "/schedule "],
+    ["/", "/schedule "],
+    ["/later ", "/schedule "],
+    [" \t/later Keep  these spaces\tand case  ", "/schedule Keep  these spaces\tand case  "],
+  ])("canonicalizes an argument-taking command: %s", (text, expected) => {
+    expect(completeCommand(schedule, text)).toBe(expected);
+  });
+
+  it.each([
+    ["/assi", "/help"],
+    ["/GUIDE", "/help"],
+    ["/", "/help"],
+    ["/assist topic  with spaces  ", "/help topic  with spaces  "],
+  ])("canonicalizes a plain command without dropping its arguments: %s", (text, expected) => {
+    expect(completeCommand(help, text)).toBe(expected);
+  });
+});
+
+describe("useSlashCommands on the server", () => {
+  it("imports and renders in Node without browser globals or running callbacks", () => {
+    expect(typeof window).toBe("undefined");
+    expect(typeof document).toBe("undefined");
+    const onChange = vi.fn();
+    const onExecute = vi.fn();
+    const onError = vi.fn();
+
+    function Menu() {
+      const menu = useSlashCommands({ text: "/he", commands, onChange, onExecute, onError });
+      return createElement(
+        "output",
+        { id: menu.listId },
+        `${menu.open}/${menu.active?.name}/${menu.items.length}`,
+      );
+    }
+
+    expect(renderToString(createElement(Menu))).toContain("true/help/1");
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onExecute).not.toHaveBeenCalled();
+    expect(onError).not.toHaveBeenCalled();
+  });
+});