@runtypelabs/persona 4.1.0 → 4.2.0

package/src/components/approval-actions.test.ts

@@ -0,0 +1,309 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createBuiltInApprovalPlugin } from "./approval-actions";
+import { approvalDetailsExpansionState } from "./approval-bubble";
+import type {
+  AgentWidgetApproval,
+  AgentWidgetConfig,
+  AgentWidgetMessage,
+} from "../types";
+import type { AgentWidgetPlugin } from "../plugins/types";
+
+const makeMessage = (
+  approval: Partial<AgentWidgetApproval> = {},
+  id = "msg-1"
+): AgentWidgetMessage => ({
+  id,
+  role: "assistant",
+  content: "",
+  createdAt: new Date().toISOString(),
+  variant: "approval",
+  streaming: false,
+  approval: {
+    id: "appr-1",
+    status: "pending",
+    agentId: "agent-1",
+    executionId: "exec-1",
+    toolName: "search_docs",
+    description: "Search the docs",
+    ...approval,
+  },
+});
+
+// Each widget owns its own plugin instance + teardown (state is per-instance).
+// Track teardowns so afterEach can release any leftover document listeners.
+let teardowns: Array<() => void> = [];
+
+const makePlugin = (): { plugin: AgentWidgetPlugin; teardown: () => void } => {
+  const handle = createBuiltInApprovalPlugin();
+  teardowns.push(handle.teardown);
+  return handle;
+};
+
+const renderWith = (
+  plugin: AgentWidgetPlugin,
+  config: AgentWidgetConfig = {},
+  message: AgentWidgetMessage = makeMessage()
+) => {
+  const approve = vi.fn();
+  const deny = vi.fn();
+  const el = plugin.renderApproval!({
+    message,
+    defaultRenderer: () => document.createElement("div"),
+    config,
+    approve,
+    deny,
+  });
+  if (el) document.body.appendChild(el);
+  return { el, approve, deny };
+};
+
+// Convenience for single-render tests: fresh widget instance each call.
+const render = (
+  config: AgentWidgetConfig = {},
+  message: AgentWidgetMessage = makeMessage()
+) => renderWith(makePlugin().plugin, config, message);
+
+const click = (el: Element | null | undefined): void => {
+  el?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+};
+
+afterEach(() => {
+  teardowns.forEach((t) => t());
+  teardowns = [];
+  approvalDetailsExpansionState.clear();
+  document.body.innerHTML = "";
+});
+
+describe("built-in approval — flag off (default)", () => {
+  it("renders a single Allow + Deny, no split control", () => {
+    const { el } = render();
+    expect(el?.querySelector('[data-action="allow"]')?.textContent).toContain("Allow");
+    expect(el?.querySelector('[data-action="deny"]')).not.toBeNull();
+    expect(el?.querySelector('[data-action="always"]')).toBeNull();
+    expect(el?.querySelector('[data-action="toggle-menu"]')).toBeNull();
+    expect(el?.textContent).not.toContain("Always allow");
+  });
+
+  it("Allow resolves approved without remember; Deny denies", () => {
+    const { el, approve, deny } = render();
+    click(el?.querySelector('[data-action="allow"]'));
+    expect(approve).toHaveBeenCalledTimes(1);
+    expect(approve.mock.calls[0]).toEqual([]); // no { remember } argument
+    click(el?.querySelector('[data-action="deny"]'));
+    expect(deny).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the title from the tool name and an optional source", () => {
+    const { el } = render({}, makeMessage({ toolName: "search_docs", toolType: "Runtype" }));
+    const title = el?.querySelector(".persona-approval-title");
+    expect(title?.textContent).toContain("Search docs");
+    expect(title?.textContent).toContain("from");
+    expect(title?.textContent).toContain("Runtype");
+  });
+
+  it("honors config.approval.approveLabel / denyLabel", () => {
+    const { el } = render({ approval: { approveLabel: "Permit", denyLabel: "Refuse" } });
+    expect(el?.querySelector('[data-action="allow"]')?.textContent).toContain("Permit");
+    expect(el?.querySelector('[data-action="deny"]')?.textContent).toContain("Refuse");
+  });
+});
+
+describe("built-in approval — flag on (enableAlwaysAllow)", () => {
+  const cfg: AgentWidgetConfig = { approval: { enableAlwaysAllow: true } };
+
+  it("renders the split Always allow + caret + Deny", () => {
+    const { el } = render(cfg);
+    expect(el?.querySelector('[data-action="always"]')?.textContent).toContain("Always allow");
+    expect(el?.querySelector('[data-action="toggle-menu"]')).not.toBeNull();
+    expect(el?.querySelector('[data-action="deny"]')).not.toBeNull();
+    expect(el?.querySelector('[data-action="allow"]')).toBeNull();
+  });
+
+  it("Always allow resolves with { remember: true }", () => {
+    const { el, approve } = render(cfg);
+    click(el?.querySelector('[data-action="always"]'));
+    expect(approve).toHaveBeenCalledWith({ remember: true });
+  });
+
+  it("Enter triggers Always allow", () => {
+    const { approve } = render(cfg);
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    expect(approve).toHaveBeenCalledWith({ remember: true });
+  });
+
+  it("Escape denies", () => {
+    const { deny } = render(cfg);
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    expect(deny).toHaveBeenCalledTimes(1);
+  });
+
+  it("Cmd/Ctrl+Enter triggers Allow once (no remember)", () => {
+    const { approve } = render(cfg);
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", metaKey: true, bubbles: true }));
+    expect(approve).toHaveBeenCalledTimes(1);
+    expect(approve.mock.calls[0]).toEqual([]);
+  });
+
+  it("ignores keyboard shortcuts while typing in an editable field", () => {
+    const { approve } = render(cfg);
+    const input = document.createElement("input");
+    document.body.appendChild(input);
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    expect(approve).not.toHaveBeenCalled();
+  });
+
+  it("teardown releases the document keydown listener", () => {
+    const { plugin, teardown } = makePlugin();
+    const { approve } = renderWith(plugin, cfg);
+    teardown();
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    expect(approve).not.toHaveBeenCalled();
+  });
+
+  it("within one widget, only the latest pending approval owns the keyboard shortcuts", () => {
+    const { plugin } = makePlugin();
+    const first = renderWith(plugin, cfg, makeMessage({}, "msg-A"));
+    const second = renderWith(plugin, cfg, makeMessage({}, "msg-B"));
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    expect(first.approve).not.toHaveBeenCalled();
+    expect(second.approve).toHaveBeenCalledWith({ remember: true });
+  });
+
+  it("promotes an older pending approval to keyboard owner when the latest resolves", () => {
+    const { plugin } = makePlugin();
+    const first = renderWith(plugin, cfg, makeMessage({}, "msg-A"));
+    const second = renderWith(plugin, cfg, makeMessage({}, "msg-B"));
+    // Resolve the current owner (B); A should inherit the shortcuts.
+    click(second.el?.querySelector('[data-action="deny"]'));
+    expect(second.deny).toHaveBeenCalledTimes(1);
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    expect(first.approve).toHaveBeenCalledWith({ remember: true });
+  });
+
+  it("re-rendering an older approval does not steal shortcuts from the newest", () => {
+    const { plugin } = makePlugin();
+    const first = renderWith(plugin, cfg, makeMessage({}, "msg-A"));
+    const second = renderWith(plugin, cfg, makeMessage({}, "msg-B"));
+    // Older card (A) re-renders, e.g. via idiomorph — it must NOT claim the
+    // shortcuts back from the newer card B at the bottom of the thread.
+    const reA = renderWith(plugin, cfg, makeMessage({}, "msg-A"));
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    expect(first.approve).not.toHaveBeenCalled();
+    expect(reA.approve).not.toHaveBeenCalled();
+    expect(second.approve).toHaveBeenCalledWith({ remember: true });
+  });
+
+  it("tearing down one widget leaves another widget's approval shortcuts intact", () => {
+    const widgetA = makePlugin();
+    const widgetB = makePlugin();
+    const a = renderWith(widgetA.plugin, cfg, makeMessage({}, "msg-A"));
+    const b = renderWith(widgetB.plugin, cfg, makeMessage({}, "msg-B"));
+    widgetA.teardown(); // destroy only widget A
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    expect(a.approve).not.toHaveBeenCalled();
+    expect(b.approve).toHaveBeenCalledWith({ remember: true });
+  });
+});
+
+describe("built-in approval — parameters disclosure", () => {
+  const withParams = () => makeMessage({ parameters: { query: "x", n: 5 } });
+
+  it("collapses parameters by default and expands on header click", () => {
+    const { el } = render({}, withParams());
+    const pre = el?.querySelector<HTMLElement>('[data-role="params"]');
+    expect(pre).not.toBeNull();
+    expect(pre?.hidden).toBe(true);
+    click(el?.querySelector(".persona-approval-head"));
+    expect(pre?.hidden).toBe(false);
+    expect(approvalDetailsExpansionState.get("msg-1")).toBe(true);
+  });
+
+  it("detailsDisplay:'expanded' shows params up front", () => {
+    const { el } = render({ approval: { detailsDisplay: "expanded" } }, withParams());
+    expect(el?.querySelector<HTMLElement>('[data-role="params"]')?.hidden).toBe(false);
+  });
+
+  it("detailsDisplay:'hidden' omits the disclosure and header toggle", () => {
+    const { el } = render({ approval: { detailsDisplay: "hidden" } }, withParams());
+    expect(el?.querySelector('[data-role="params"]')).toBeNull();
+    expect(el?.querySelector('[data-action="toggle-params"]')).toBeNull();
+  });
+
+  it("honors config show/hideDetailsLabel as the toggle's accessible label", () => {
+    const { el } = render(
+      { approval: { showDetailsLabel: "Reveal call", hideDetailsLabel: "Hide call" } },
+      withParams()
+    );
+    const head = el?.querySelector<HTMLElement>('[data-action="toggle-params"]');
+    expect(head?.getAttribute("aria-label")).toBe("Reveal call");
+    click(head);
+    expect(head?.getAttribute("aria-label")).toBe("Hide call");
+  });
+
+  it("defaults the toggle's accessible label to Show/Hide details", () => {
+    const { el } = render({}, withParams());
+    const head = el?.querySelector<HTMLElement>('[data-action="toggle-params"]');
+    expect(head?.getAttribute("aria-label")).toBe("Show details");
+    click(head);
+    expect(head?.getAttribute("aria-label")).toBe("Hide details");
+  });
+});
+
+describe("built-in approval — agent description in disclosure", () => {
+  it("surfaces approval.description in the collapsible details even without parameters", () => {
+    const { el } = render(
+      {},
+      makeMessage({ description: "Reads your calendar", parameters: undefined })
+    );
+    const details = el?.querySelector<HTMLElement>('[data-role="params"]');
+    expect(details).not.toBeNull();
+    expect(el?.querySelector('[data-action="toggle-params"]')).not.toBeNull();
+    expect(details?.querySelector(".persona-approval-desc")?.textContent).toContain(
+      "Reads your calendar"
+    );
+  });
+
+  it("shows the description alongside the parameters block", () => {
+    const { el } = render(
+      {},
+      makeMessage({ description: "Reads your calendar", parameters: { when: "today" } })
+    );
+    const details = el?.querySelector<HTMLElement>('[data-role="params"]');
+    expect(details?.querySelector(".persona-approval-desc")?.textContent).toContain(
+      "Reads your calendar"
+    );
+    expect(details?.querySelector(".persona-approval-params")?.textContent).toContain("today");
+  });
+
+  it("detailsDisplay:'hidden' omits the description disclosure too", () => {
+    const { el } = render(
+      { approval: { detailsDisplay: "hidden" } },
+      makeMessage({ description: "Reads your calendar", parameters: undefined })
+    );
+    expect(el?.querySelector('[data-role="params"]')).toBeNull();
+    expect(el?.querySelector('[data-action="toggle-params"]')).toBeNull();
+  });
+});
+
+describe("built-in approval — resolved states", () => {
+  it("approved renders nothing visible (the tool call takes over)", () => {
+    const { el } = render({}, makeMessage({ status: "approved" }));
+    expect(el?.style.display).toBe("none");
+    expect(el?.querySelector("[data-action]")).toBeNull();
+  });
+
+  it("denied renders a subtle one-line trace, no action buttons", () => {
+    const { el } = render({}, makeMessage({ status: "denied" }));
+    expect(el?.classList.contains("persona-approval-resolved")).toBe(true);
+    expect(el?.textContent).toContain("Search docs");
+    expect(el?.textContent).toContain("denied");
+    expect(el?.querySelector("[data-action]")).toBeNull();
+  });
+
+  it("timeout renders a timed-out trace", () => {
+    const { el } = render({}, makeMessage({ status: "timeout" }));
+    expect(el?.textContent).toContain("timed out");
+  });
+});