@drip-apex/sdk 0.1.0

package/src/editor/command-runtime.test.ts

@@ -0,0 +1,225 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { EditorApi } from "./api";
+import { EditorCommandExecutor, EditorCommandPoller } from "./command-runtime";
+import type { EditorController } from "./controller";
+import type { ClaimedEditorCommand } from "./types";
+
+function command(
+  name: ClaimedEditorCommand["command"],
+  args: Record<string, unknown> = {},
+): ClaimedEditorCommand {
+  return { commandId: `command-${name}`, command: name, args, expiresAt: null };
+}
+
+function controller(origin = "https://shop.example") {
+  return {
+    session: { targetOrigin: origin },
+    applyCommandArtifacts: vi.fn(() => ({
+      ok: true,
+      mutationAudit: [],
+      generatedSelectors: [],
+      generatedVisibility: [],
+      visibleGeneratedCount: 0,
+      hiddenEffectVerifiedCount: 0,
+      networkRequired: false,
+      customJsDeferred: false,
+    })),
+  } as unknown as EditorController;
+}
+
+describe("EditorCommandExecutor", () => {
+  beforeEach(() => {
+    document.title = "Live store";
+    document.body.innerHTML = `
+      <h1 id="title">Original</h1>
+      <button data-testid="buy">Buy now</button>
+      <input name="email" value="customer@example.com">
+      <a id="account" href="/account?token=secret#orders">Account</a>
+    `;
+    history.replaceState(null, "", "/products/one?customer=42#private");
+  });
+
+  afterEach(() => vi.restoreAllMocks());
+
+  it("matches snapshot, interaction, and selection bridge payloads", async () => {
+    const click = vi.fn();
+    document.querySelector("button")!.addEventListener("click", click);
+    const executor = new EditorCommandExecutor(controller());
+
+    const snapshot = await executor.execute(command("snapshot"));
+    const clickResult = await executor.execute(command("click", { selector: "[data-testid='buy']" }));
+    const typeResult = await executor.execute(command("type", { selector: "input[name='email']", value: "new@example.com" }));
+    const selected = await executor.execute(command("select_element", { text: "Buy now" }));
+
+    expect(snapshot.result).toMatchObject({
+      ok: true,
+      snapshot: expect.objectContaining({ title: "Live store", headings: expect.any(Array), interactive: expect.any(Array) }),
+    });
+    expect(click).toHaveBeenCalledOnce();
+    expect(clickResult.result).toMatchObject({ ok: true, element: expect.objectContaining({ tag: "button" }) });
+    expect(typeResult.result).toMatchObject({ ok: true, valueLength: 15 });
+    expect(JSON.stringify(typeResult.result)).not.toContain("new@example.com");
+    expect((document.querySelector("input") as HTMLInputElement).value).toBe("new@example.com");
+    expect(selected.result).toMatchObject({
+      ok: true,
+      element: expect.objectContaining({ selector: expect.stringContaining("[data-testid=\"buy\"]") }),
+    });
+  });
+
+  it("relays structural snapshots without body text, input values, or URL secrets", async () => {
+    document.title = "Order for customer@example.com";
+    document.body.insertAdjacentHTML("beforeend", "<p>Private customer notes should not be copied wholesale.</p>");
+    const executor = new EditorCommandExecutor(controller());
+
+    const current = await executor.execute(command("current_url"));
+    const snapshot = await executor.execute(command("snapshot"));
+    const account = await executor.execute(command("select_element", { selector: "#account" }));
+    const serialized = JSON.stringify(snapshot.result);
+
+    expect(current.result).toMatchObject({
+      url: "http://localhost:3000/products/one",
+      originalUrl: "http://localhost:3000/products/one",
+    });
+    expect(snapshot.result).toMatchObject({
+      snapshot: expect.objectContaining({
+        title: "Order for [redacted]",
+        url: "http://localhost:3000/products/one",
+        bodyTextLength: expect.any(Number),
+      }),
+    });
+    expect(serialized).not.toContain("bodyText\":");
+    expect(serialized).not.toContain("customer@example.com");
+    expect(serialized).not.toContain("Private customer notes");
+    expect(account.result).toMatchObject({
+      element: expect.objectContaining({ href: "http://localhost:3000/account" }),
+    });
+  });
+
+  it("redacts console arguments and network resource metadata", async () => {
+    vi.spyOn(console, "log").mockImplementation(() => {});
+    const executor = new EditorCommandExecutor(controller());
+    executor.start();
+    console.log("customer@example.com +49 123 456 789 token=super-secret", {
+      authorization: "Bearer private-token",
+      endpoint: "https://api.example/orders?customer=42#receipt",
+      nested: { password: "hunter2" },
+    });
+    (executor as unknown as { networkLogs: Array<Record<string, unknown>> }).networkLogs.push({
+      url: "https://shop.example/cart.js?session=secret#response",
+      type: "resource",
+      token: "private-token",
+      duration: 12,
+    });
+
+    const consoleResult = await executor.execute(command("console_logs"));
+    const networkResult = await executor.execute(command("network_logs"));
+    const consoleJson = JSON.stringify(consoleResult.result);
+    const networkJson = JSON.stringify(networkResult.result);
+
+    expect(consoleJson).toContain("[redacted]");
+    expect(consoleJson).toContain("https://api.example/orders");
+    expect(consoleJson).not.toContain("customer@example.com");
+    expect(consoleJson).not.toContain("123 456 789");
+    expect(consoleJson).not.toContain("super-secret");
+    expect(consoleJson).not.toContain("private-token");
+    expect(consoleJson).not.toContain("hunter2");
+    expect(consoleJson).not.toContain("customer=42");
+    expect(networkJson).toContain("https://shop.example/cart.js");
+    expect(networkJson).not.toContain("session=secret");
+    expect(networkJson).not.toContain("private-token");
+    executor.stop();
+  });
+
+  it("rejects eval_readonly on live origins and delegates full artifacts", async () => {
+    const liveController = controller();
+    const executor = new EditorCommandExecutor(liveController);
+
+    const evaluated = await executor.execute(command("eval_readonly", { code: "document.title" }));
+    const artifacts = { mutations: [{ selector: "#title", action: "setText", text: "Draft" }], customCss: "", customJs: "" };
+    const applied = await executor.execute(command("apply_artifacts", { artifacts }));
+
+    expect(evaluated.result).toMatchObject({
+      ok: false,
+      error: expect.stringContaining("unsupported on live merchant origins"),
+    });
+    expect(liveController.applyCommandArtifacts).toHaveBeenCalledWith(artifacts);
+    expect(applied.result.ok).toBe(true);
+  });
+
+  it("uses allowlisted declarative inspection instead of JavaScript evaluation", async () => {
+    const executor = new EditorCommandExecutor(controller("http://localhost:3000"));
+    await expect(executor.execute(command("eval_readonly", { operation: "document_title" }))).resolves.toMatchObject({
+      result: { ok: true, operation: "document_title", result: "Live store" },
+    });
+    await expect(executor.execute(command("eval_readonly", {
+      operation: "element_count",
+      selector: "button",
+    }))).resolves.toMatchObject({
+      result: { ok: true, operation: "element_count", result: 1 },
+    });
+    await expect(executor.execute(command("eval_readonly", {
+      operation: "element_summary",
+      selector: "input",
+    }))).resolves.toMatchObject({
+      result: {
+        ok: true,
+        operation: "element_summary",
+        result: expect.objectContaining({ tag: "input", text: null }),
+      },
+    });
+  });
+
+  it("rejects executable code even for loopback sessions", async () => {
+    const executor = new EditorCommandExecutor(controller("http://localhost:3000"));
+    await expect(executor.execute(command("eval_readonly", {
+      code: "document.body.dataset.exfiltrated = document.querySelector('input').value",
+    }))).resolves.toMatchObject({
+      result: { ok: false, error: expect.stringContaining("JavaScript evaluation is disabled") },
+    });
+    expect(document.body.dataset.exfiltrated).toBeUndefined();
+  });
+});
+
+describe("EditorCommandPoller", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("persists navigation completion before initiating hard navigation", async () => {
+    let resolveCompletion!: () => void;
+    const completion = new Promise<void>((resolve) => { resolveCompletion = resolve; });
+    const api = {
+      claimCommands: vi.fn()
+        .mockResolvedValueOnce([command("navigate", { url: "/collections/all?customer=42#private" })])
+        .mockResolvedValue([]),
+      completeCommand: vi.fn(() => completion),
+    } as unknown as EditorApi;
+    const navigate = vi.fn();
+    const executor = new EditorCommandExecutor(controller(), {
+      navigate,
+      reload: vi.fn(),
+      back: vi.fn(),
+      forward: vi.fn(),
+    });
+    const poller = new EditorCommandPoller(api, executor);
+
+    poller.start();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(api.completeCommand).toHaveBeenCalledWith("command-navigate", {
+      result: { ok: true, url: "https://shop.example/collections/all" },
+    });
+    expect(navigate).not.toHaveBeenCalled();
+
+    resolveCompletion();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(navigate).not.toHaveBeenCalled();
+    await vi.advanceTimersByTimeAsync(0);
+    expect(navigate).toHaveBeenCalledWith("https://shop.example/collections/all?customer=42#private");
+    poller.stop();
+  });
+});