@runtypelabs/persona 3.16.0 → 3.18.0

package/src/ui.stop-button.test.ts

@@ -0,0 +1,165 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+
+const createMount = () => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  return mount;
+};
+
+const flush = async (times = 4) => {
+  for (let i = 0; i < times; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await Promise.resolve();
+  }
+};
+
+describe("createAgentExperience stop-streaming submit button", () => {
+  const originalFetch = global.fetch;
+  let capturedSignals: AbortSignal[] = [];
+
+  beforeEach(() => {
+    capturedSignals = [];
+    vi.stubGlobal("requestAnimationFrame", (cb: (time: number) => void) => {
+      cb(0);
+      return 1;
+    });
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+    window.scrollTo = vi.fn();
+
+    // Fetch hangs until the caller aborts the signal — models an in-flight
+    // SSE stream so the widget stays in the "streaming" state.
+    global.fetch = vi.fn().mockImplementation((_url: string, options: any) => {
+      const signal = options.signal as AbortSignal;
+      capturedSignals.push(signal);
+      return new Promise((_resolve, reject) => {
+        signal.addEventListener("abort", () => {
+          const err = new Error("aborted");
+          err.name = "AbortError";
+          reject(err);
+        });
+      });
+    }) as any;
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    global.fetch = originalFetch;
+    vi.restoreAllMocks();
+  });
+
+  it("keeps the submit button enabled while streaming and clicking it cancels the stream", async () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+    });
+
+    const submit = mount.querySelector<HTMLButtonElement>(
+      "[data-persona-composer-submit]"
+    );
+    expect(submit).not.toBeNull();
+
+    const textarea = mount.querySelector<HTMLTextAreaElement>(
+      "[data-persona-composer-input]"
+    )!;
+    textarea.value = "Hello";
+    submit!.click();
+
+    await flush();
+
+    // Streaming is active: the button must stay enabled so it can be clicked
+    // again to stop the response.
+    expect(controller.getState().streaming).toBe(true);
+    expect(submit!.disabled).toBe(false);
+    expect(capturedSignals).toHaveLength(1);
+    expect(capturedSignals[0].aborted).toBe(false);
+
+    // Second click — acts as "stop generating".
+    submit!.click();
+
+    await flush();
+
+    expect(controller.getState().streaming).toBe(false);
+    expect(capturedSignals[0].aborted).toBe(true);
+    // No new request should have been fired by the stop click.
+    expect(capturedSignals).toHaveLength(1);
+    // Typed text is preserved so the user can resend after stopping.
+    expect(textarea.value).toBe("");
+    // (The textarea was cleared on the *first* submit, not by the stop click —
+    // that's fine because after cancel the user can keep typing.)
+
+    controller.destroy();
+  });
+
+  it("swaps to the stop icon while streaming and back to the send icon after cancel (icon mode)", async () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      sendButton: { useIcon: true, iconName: "arrow-up" },
+    });
+
+    const submit = mount.querySelector<HTMLButtonElement>(
+      "[data-persona-composer-submit]"
+    )!;
+    const textarea = mount.querySelector<HTMLTextAreaElement>(
+      "[data-persona-composer-input]"
+    )!;
+
+    // Initial state: send icon (aria-label tracks tooltip default).
+    expect(submit.getAttribute("aria-label")).toBe("Send message");
+
+    textarea.value = "Hi";
+    submit.click();
+    await flush();
+
+    expect(controller.getState().streaming).toBe(true);
+    expect(submit.getAttribute("aria-label")).toBe("Stop generating");
+
+    submit.click();
+    await flush();
+
+    expect(controller.getState().streaming).toBe(false);
+    expect(submit.getAttribute("aria-label")).toBe("Send message");
+
+    controller.destroy();
+  });
+
+  it("swaps the text label in text mode", async () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      sendButton: { useIcon: false },
+      copy: { sendButtonLabel: "Send", stopButtonLabel: "Stop" },
+    });
+
+    const submit = mount.querySelector<HTMLButtonElement>(
+      "[data-persona-composer-submit]"
+    )!;
+    const textarea = mount.querySelector<HTMLTextAreaElement>(
+      "[data-persona-composer-input]"
+    )!;
+
+    expect(submit.textContent).toBe("Send");
+
+    textarea.value = "Hi";
+    submit.click();
+    await flush();
+
+    expect(controller.getState().streaming).toBe(true);
+    expect(submit.textContent).toBe("Stop");
+
+    submit.click();
+    await flush();
+
+    expect(controller.getState().streaming).toBe(false);
+    expect(submit.textContent).toBe("Send");
+
+    controller.destroy();
+  });
+});