@drip-apex/sdk 0.1.0

package/src/editor/view.test.ts

@@ -0,0 +1,535 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi } from "vitest";
+import { mountEditorView } from "./view";
+import * as operator from "./operator";
+import type { EditorController } from "./controller";
+import type { EditorState } from "./types";
+
+function state(overrides: Partial<EditorState> = {}): EditorState {
+  return {
+    variation: { id: "variation-1", name: "Treatment", artifactHash: "hash", reviewStatus: "approved" },
+    artifacts: { mutations: [], customCss: "", customJs: "" },
+    artifactsEnabled: true,
+    pickerActive: false,
+    selectedElement: null,
+    selectedSelector: null,
+    saveState: "saved",
+    saveMessage: "Saved",
+    dock: "top",
+    canUndo: false,
+    canRedo: false,
+    jsApplied: false,
+    reloadRequired: false,
+    deviceState: "closed",
+    ...overrides,
+  };
+}
+
+function makeController(initial: EditorState = state()) {
+  let current = initial;
+  const listeners = new Set<(value: EditorState) => void>();
+  const controller = {
+    apiOrigin: "https://app.test",
+    session: {
+      sid: "session-1",
+      bearer: "bearer",
+      targetUrl: "https://shop.test/products/one?preview_token=private#secret",
+      targetOrigin: "https://shop.test",
+      experimentId: "experiment-1",
+      experimentName: "PDP — free returns messaging",
+      initialVariationId: "variation-1",
+      shopId: "shop-1",
+      expiresAt: new Date(Date.now() + 90 * 60 * 1000).toISOString(),
+      variations: [
+        { id: "variation-1", name: "Treatment" },
+        { id: "variation-2", name: "Urgency angle" },
+      ],
+    },
+    getState: () => current,
+    subscribe: (next: (value: EditorState) => void) => {
+      listeners.add(next);
+      next(current);
+      return () => listeners.delete(next);
+    },
+    emit: (next: EditorState) => {
+      current = next;
+      for (const listener of listeners) listener(current);
+    },
+    attachDevicePreview: vi.fn(),
+    setDeviceState: vi.fn(),
+    setPickerActive: vi.fn(),
+    selectElement: vi.fn(),
+    clearSelection: vi.fn(),
+    clearSelectedElement: vi.fn(),
+    selectVariation: vi.fn(),
+    toggleArtifacts: vi.fn(),
+    undo: vi.fn(),
+    redo: vi.fn(),
+    openDevicePreview: vi.fn(),
+    closeDevicePreview: vi.fn(),
+    exit: vi.fn(),
+    applyCustomJs: vi.fn(),
+    setCustomCss: vi.fn(),
+    setCustomJs: vi.fn(),
+    removeSelector: vi.fn(),
+    removeMutation: vi.fn(),
+    restoreArtifacts: vi.fn(),
+    resolveConflict: vi.fn(),
+    extendSession: vi.fn(async () => null),
+    applyCommandArtifacts: vi.fn(() => ({ ok: true })),
+    saveNow: vi.fn(async () => undefined),
+  };
+  return controller as typeof controller & EditorController;
+}
+
+function mount(controller = makeController()) {
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  const shadow = host.attachShadow({ mode: "open" });
+  const view = mountEditorView(shadow, controller as unknown as EditorController);
+  return {
+    shadow,
+    view,
+    controller,
+    cleanup() {
+      view.destroy();
+      host.remove();
+    },
+  };
+}
+
+describe("editor view v2", () => {
+  it("renders the operator-first dock with identity, tabs, and calm status chrome", () => {
+    const { shadow, cleanup } = mount();
+
+    expect(shadow.textContent).toContain("PDP — free returns messaging");
+    expect(shadow.textContent).toContain("On your store · shop.test");
+    expect(shadow.textContent).toContain("Draft");
+    expect(shadow.textContent).toContain("What should change on this page?");
+    expect(shadow.querySelector('[role="tablist"]')).not.toBeNull();
+    expect(shadow.querySelector('[data-tab="operator"]')?.getAttribute("aria-selected")).toBe("true");
+    expect(shadow.querySelector('[data-tab="code"]')).not.toBeNull();
+    expect(shadow.querySelector('[data-tab="changes"]')).not.toBeNull();
+    expect(shadow.querySelector<HTMLButtonElement>('[aria-label="Undo"]')?.disabled).toBe(true);
+    // Session status is a quiet footer note, connection chip only when degraded.
+    expect(shadow.textContent).toMatch(/Session · \d+ min left/);
+    expect(shadow.textContent).not.toContain("Offline");
+    expect(shadow.querySelector("style")?.textContent).toContain("prefers-reduced-motion");
+    expect(shadow.querySelector<HTMLIFrameElement>("iframe")?.name).toBe("apex-editor-device-preview");
+    // No manual visual-property controls anywhere.
+    expect(shadow.textContent).not.toContain("Text color");
+    expect(shadow.textContent).not.toContain("Hide");
+    cleanup();
+  });
+
+  it("shows the boot overlay until the first draft loads", () => {
+    const controller = makeController(state({ variation: null, saveState: "idle", saveMessage: "Loading draft..." }));
+    const { shadow, cleanup } = mount(controller);
+
+    expect(shadow.textContent).toContain("Starting a secure editing session");
+    expect(shadow.textContent).toContain("Connecting to shop.test");
+    expect(shadow.textContent).toContain("shoppers never see your edits");
+
+    controller.emit(state());
+    expect(shadow.querySelector<HTMLElement>(".boot")?.hidden).toBe(true);
+    cleanup();
+  });
+
+  it("has a [hidden] display:none override for the boot overlay, since .boot sets display:flex", () => {
+    // Regression: `.boot` declares `display:flex`. Author CSS always wins over the
+    // UA `[hidden]{display:none}` default, so toggling the `hidden` IDL property
+    // alone (asserted above) does not hide the overlay in a real browser unless
+    // the stylesheet also carries a `.boot[hidden]` reset — the overlay stayed on
+    // screen forever even after `bootDone` flipped true and `variation` loaded.
+    const { shadow, cleanup } = mount();
+    const styleText = shadow.querySelector("style")?.textContent ?? "";
+    expect(styleText).toMatch(/\.boot\[hidden\]\s*\{[^}]*display:\s*none/);
+    cleanup();
+  });
+
+  it("renders the conflict modal and routes both resolutions to the controller", () => {
+    const controller = makeController();
+    const { shadow, cleanup } = mount(controller);
+
+    controller.emit(state({ saveState: "conflict", saveMessage: "Draft changed elsewhere" }));
+    expect(shadow.textContent).toContain("This draft changed somewhere else");
+    shadow.querySelector<HTMLButtonElement>('[data-action="conflict-mine"]')?.click();
+    expect(controller.resolveConflict).toHaveBeenCalledWith("mine");
+    shadow.querySelector<HTMLButtonElement>('[data-action="conflict-theirs"]')?.click();
+    expect(controller.resolveConflict).toHaveBeenCalledWith("theirs");
+    cleanup();
+  });
+
+  it("runs an Operator turn from the conversation and reports the result card", async () => {
+    const generated = {
+      mutations: [{ selector: "h1", action: "setText" as const, text: "Generated" }],
+      customCss: "",
+      customJs: "",
+    };
+    vi.spyOn(operator, "runEditorOperatorTurn").mockResolvedValueOnce({
+      artifacts: generated,
+      explanation: "Updated the heading.",
+      artifactCount: 1,
+      mergeStrategy: "append",
+    });
+    const selectedButton = document.createElement("button");
+    selectedButton.textContent = "Add to cart";
+    document.body.appendChild(selectedButton);
+    const controller = makeController(state({
+      selectedElement: selectedButton,
+      selectedSelector: "button.add-to-cart",
+    }));
+    const { shadow, cleanup } = mount(controller);
+
+    const prompt = shadow.querySelector<HTMLTextAreaElement>('[data-field="operator-prompt"]');
+    expect(prompt).not.toBeNull();
+    expect(shadow.textContent).toContain("Talking about");
+    expect(shadow.textContent).toContain("button");
+    prompt!.value = "Make the heading clearer";
+    prompt!.dispatchEvent(new Event("input", { bubbles: true }));
+    prompt!.closest("form")?.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+
+    expect(shadow.textContent).toContain("Make the heading clearer");
+    await vi.waitFor(() => expect(controller.saveNow).toHaveBeenCalledOnce());
+    expect(operator.runEditorOperatorTurn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        apiOrigin: "https://app.test",
+        pageContext: expect.stringContaining(
+          "Live merchant page: https://shop.test/products/one",
+        ),
+        prompt: "Make the heading clearer",
+        selectedElement: {
+          selector: "button.add-to-cart",
+          tag: "button",
+          textPreview: "Add to cart",
+        },
+        variationId: "variation-1",
+      }),
+    );
+    expect(controller.clearSelectedElement).toHaveBeenCalledOnce();
+    expect(controller.applyCommandArtifacts).toHaveBeenCalledWith(generated);
+    await vi.waitFor(() => expect(shadow.textContent).toContain("it's on the page now"));
+    expect(shadow.textContent).toContain("Updated the heading.");
+    expect(shadow.textContent).toContain("Undo this");
+    cleanup();
+    selectedButton.remove();
+  });
+
+  it("shows the failure card with the nothing-changed guarantee", async () => {
+    vi.spyOn(operator, "runEditorOperatorTurn").mockRejectedValueOnce(new Error("Model unavailable"));
+    const controller = makeController();
+    const { shadow, cleanup } = mount(controller);
+
+    const prompt = shadow.querySelector<HTMLTextAreaElement>('[data-field="operator-prompt"]');
+    prompt!.value = "Add a countdown";
+    prompt!.dispatchEvent(new Event("input", { bubbles: true }));
+    prompt!.closest("form")?.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+
+    await vi.waitFor(() => expect(shadow.textContent).toContain("Operator couldn't finish"));
+    expect(shadow.textContent).toContain("Model unavailable");
+    expect(shadow.textContent).toContain("Nothing was changed on the draft.");
+    expect(shadow.querySelector('[data-action="op-retry"]')).not.toBeNull();
+    expect(controller.applyCommandArtifacts).not.toHaveBeenCalled();
+    cleanup();
+  });
+
+  it("does not apply a stopped Operator result that resolves late", async () => {
+    const generated = {
+      mutations: [{ selector: "h1", action: "setText" as const, text: "Late result" }],
+      customCss: "",
+      customJs: "",
+    };
+    let resolveTurn!: (value: Awaited<ReturnType<typeof operator.runEditorOperatorTurn>>) => void;
+    vi.spyOn(operator, "runEditorOperatorTurn").mockReturnValueOnce(new Promise((resolve) => {
+      resolveTurn = resolve;
+    }));
+    const controller = makeController();
+    const { shadow, cleanup } = mount(controller);
+
+    const prompt = shadow.querySelector<HTMLTextAreaElement>('[data-field="operator-prompt"]')!;
+    prompt.value = "Make a late change";
+    prompt.dispatchEvent(new Event("input", { bubbles: true }));
+    prompt.closest("form")?.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+    shadow.querySelector<HTMLButtonElement>('[data-action="op-stop"]')?.click();
+    resolveTurn({ artifacts: generated, explanation: "Late", artifactCount: 1, mergeStrategy: "append" });
+
+    await vi.waitFor(() => expect(shadow.textContent).not.toContain("Make a late change"));
+    expect(controller.applyCommandArtifacts).not.toHaveBeenCalled();
+    expect(controller.saveNow).not.toHaveBeenCalled();
+    cleanup();
+  });
+
+  it("aborts an active Operator run when the editor view is destroyed", async () => {
+    let resolveTurn!: (value: Awaited<ReturnType<typeof operator.runEditorOperatorTurn>>) => void;
+    vi.spyOn(operator, "runEditorOperatorTurn").mockReturnValueOnce(new Promise((resolve) => {
+      resolveTurn = resolve;
+    }));
+    const controller = makeController();
+    const { shadow, view } = mount(controller);
+
+    const prompt = shadow.querySelector<HTMLTextAreaElement>('[data-field="operator-prompt"]')!;
+    prompt.value = "Make a late teardown change";
+    prompt.dispatchEvent(new Event("input", { bubbles: true }));
+    prompt.closest("form")?.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+    const signal = vi.mocked(operator.runEditorOperatorTurn).mock.calls.at(-1)?.[0].signal;
+
+    view.destroy();
+    expect(signal?.aborted).toBe(true);
+    resolveTurn({
+      artifacts: {
+        mutations: [{ selector: "h1", action: "setText", text: "Late result" }],
+        customCss: "",
+        customJs: "",
+      },
+      explanation: "Late",
+      artifactCount: 1,
+      mergeStrategy: "append",
+    });
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(controller.applyCommandArtifacts).not.toHaveBeenCalled();
+    expect(controller.saveNow).not.toHaveBeenCalled();
+  });
+
+  it("keeps an applied Operator change visible and reports a save failure honestly", async () => {
+    const generated = {
+      mutations: [{ selector: "h1", action: "setText" as const, text: "Unsaved result" }],
+      customCss: "",
+      customJs: "",
+    };
+    vi.spyOn(operator, "runEditorOperatorTurn").mockResolvedValueOnce({
+      artifacts: generated,
+      explanation: "Updated the heading.",
+      artifactCount: 1,
+      mergeStrategy: "append",
+    });
+    const controller = makeController();
+    controller.applyCommandArtifacts.mockImplementationOnce((artifacts) => {
+      controller.emit(state({ artifacts, saveState: "idle", saveMessage: "Unsaved changes" }));
+      return { ok: true };
+    });
+    controller.saveNow.mockImplementationOnce(async () => {
+      controller.emit({ ...controller.getState(), saveState: "error", saveMessage: "Network unavailable" });
+    });
+    const { shadow, cleanup } = mount(controller);
+
+    const prompt = shadow.querySelector<HTMLTextAreaElement>('[data-field="operator-prompt"]')!;
+    prompt.value = "Update the heading";
+    prompt.dispatchEvent(new Event("input", { bubbles: true }));
+    prompt.closest("form")?.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+
+    await vi.waitFor(() => expect(shadow.textContent).toContain("Change applied, but not saved"));
+    expect(shadow.textContent).toContain("remains on this page");
+    expect(shadow.textContent).not.toContain("Nothing was changed on the draft");
+    expect(controller.getState().artifacts).toEqual(generated);
+    cleanup();
+  });
+
+  it("disables run-level undo after a later manual edit changes the artifact", async () => {
+    const generated = {
+      mutations: [{ selector: "h1", action: "setText" as const, text: "Generated" }],
+      customCss: "",
+      customJs: "",
+    };
+    vi.spyOn(operator, "runEditorOperatorTurn").mockResolvedValueOnce({
+      artifacts: generated,
+      explanation: "Updated the heading.",
+      artifactCount: 1,
+      mergeStrategy: "append",
+    });
+    const controller = makeController();
+    controller.applyCommandArtifacts.mockImplementationOnce((artifacts) => {
+      controller.emit(state({ artifacts, saveState: "idle" }));
+      return { ok: true };
+    });
+    const { shadow, cleanup } = mount(controller);
+
+    const prompt = shadow.querySelector<HTMLTextAreaElement>('[data-field="operator-prompt"]')!;
+    prompt.value = "Update the heading";
+    prompt.dispatchEvent(new Event("input", { bubbles: true }));
+    prompt.closest("form")?.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+
+    await vi.waitFor(() => expect(shadow.querySelector<HTMLButtonElement>('[data-action="op-undo-run"]')?.disabled).toBe(false));
+    controller.emit(state({ artifacts: { ...generated, customCss: "h1{color:red}" }, saveState: "idle" }));
+    expect(shadow.querySelector<HTMLButtonElement>('[data-action="op-undo-run"]')?.disabled).toBe(true);
+    cleanup();
+  });
+
+  it("cancels an active Operator run and saves before switching variations", async () => {
+    const generated = {
+      mutations: [{ selector: "h1", action: "setText" as const, text: "Late result" }],
+      customCss: "",
+      customJs: "",
+    };
+    let resolveTurn!: (value: Awaited<ReturnType<typeof operator.runEditorOperatorTurn>>) => void;
+    vi.spyOn(operator, "runEditorOperatorTurn").mockReturnValueOnce(new Promise((resolve) => {
+      resolveTurn = resolve;
+    }));
+    const controller = makeController();
+    const { shadow, cleanup } = mount(controller);
+
+    const prompt = shadow.querySelector<HTMLTextAreaElement>('[data-field="operator-prompt"]')!;
+    prompt.value = "Change before switching";
+    prompt.dispatchEvent(new Event("input", { bubbles: true }));
+    prompt.closest("form")?.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+    shadow.querySelector<HTMLButtonElement>('[data-action="variation-open"]')?.click();
+    shadow.querySelector<HTMLButtonElement>('[data-action="variation-pick"][data-variation="variation-2"]')?.click();
+    resolveTurn({ artifacts: generated, explanation: "Late", artifactCount: 1, mergeStrategy: "append" });
+
+    await vi.waitFor(() => expect(controller.selectVariation).toHaveBeenCalledWith("variation-2"));
+    expect(controller.applyCommandArtifacts).not.toHaveBeenCalled();
+    expect(controller.saveNow).toHaveBeenCalled();
+    expect(controller.toggleArtifacts).toHaveBeenCalledWith(true);
+    cleanup();
+  });
+
+  it("lists changes with origins, supports per-change removal, and exposes the artifact JSON", () => {
+    const controller = makeController(state({
+      artifacts: {
+        mutations: [{ selector: "h1.title", action: "setText", text: "New title" }],
+        customCss: ".a{color:red}",
+        customJs: "",
+      },
+    }));
+    const { shadow, cleanup } = mount(controller);
+
+    shadow.querySelector<HTMLButtonElement>('[data-tab="changes"]')?.click();
+    expect(shadow.textContent).toContain("2 changes in this draft");
+    expect(shadow.textContent).toContain("Operator");
+    expect(shadow.textContent).toContain("Custom CSS");
+
+    shadow.querySelector<HTMLButtonElement>('[data-action="chg-remove"][data-kind="mutation"]')?.click();
+    expect(controller.removeMutation).toHaveBeenCalledWith(0);
+    shadow.querySelector<HTMLButtonElement>('[data-action="chg-remove"][data-kind="css"]')?.click();
+    expect(controller.setCustomCss).toHaveBeenCalledWith("");
+
+    shadow.querySelector<HTMLButtonElement>('[data-action="artifact-toggle"]')?.click();
+    expect(shadow.textContent).toContain("New title");
+    expect(shadow.textContent).toContain("artifactHash");
+    cleanup();
+  });
+
+  it("compares with the original via the segment and shows the viewing-original chip", () => {
+    const controller = makeController();
+    const { shadow, cleanup } = mount(controller);
+
+    shadow.querySelector<HTMLButtonElement>('[data-action="compare"][data-view="original"]')?.click();
+    expect(controller.toggleArtifacts).toHaveBeenCalledWith(false);
+    expect(shadow.textContent).toContain("Viewing the original — draft changes hidden");
+
+    shadow.querySelector<HTMLButtonElement>('[data-action="show-variation"]')?.click();
+    expect(controller.toggleArtifacts).toHaveBeenCalledWith(true);
+    expect(shadow.textContent).not.toContain("Viewing the original");
+    cleanup();
+  });
+
+  it("detects query-only SPA navigation away from the target", async () => {
+    vi.useFakeTimers();
+    history.replaceState({}, "", "/products/one?preview_token=private");
+    const { shadow, cleanup } = mount();
+
+    history.replaceState({}, "", "/products/one?preview_token=other");
+    await vi.advanceTimersByTimeAsync(1_000);
+
+    expect(shadow.textContent).toContain(
+      "You navigated to /products/one?preview_token=other",
+    );
+    cleanup();
+    history.replaceState({}, "", "/");
+    vi.useRealTimers();
+  });
+
+  it("exposes the mobile sheet state on the host for browser QA", () => {
+    const originalMatchMedia = window.matchMedia;
+    window.matchMedia = vi.fn(() => ({
+      matches: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    })) as unknown as typeof window.matchMedia;
+    const { shadow, cleanup } = mount();
+
+    expect((shadow.host as HTMLElement).dataset.apexEditorSheetState).toBe("collapsed");
+    shadow.querySelector<HTMLButtonElement>('[data-action="sheet-toggle"]')?.click();
+    expect((shadow.host as HTMLElement).dataset.apexEditorSheetState).toBe("expanded");
+
+    cleanup();
+    window.matchMedia = originalMatchMedia;
+  });
+
+  it("keeps the code path independent and honest about JavaScript reversibility", () => {
+    const controller = makeController();
+    const { shadow, cleanup } = mount(controller);
+
+    shadow.querySelector<HTMLButtonElement>('[data-tab="code"]')?.click();
+    expect(shadow.textContent).toContain("works without Operator");
+    const css = shadow.querySelector<HTMLTextAreaElement>('[data-field="css"]');
+    css!.value = ".x{display:none}";
+    css!.dispatchEvent(new Event("input", { bubbles: true }));
+    expect(controller.setCustomCss).toHaveBeenCalledWith(".x{display:none}");
+
+    shadow.querySelector<HTMLButtonElement>('[data-action="code-lang"][data-lang="js"]')?.click();
+    expect(shadow.textContent).toContain("can't be undone by the editor");
+    shadow.querySelector<HTMLButtonElement>('[data-action="run-js"]')?.click();
+    expect(controller.applyCustomJs).toHaveBeenCalled();
+    cleanup();
+  });
+
+  it("opens the review-and-close modal from Done and saves before exiting", async () => {
+    const controller = makeController();
+    const { shadow, cleanup } = mount(controller);
+
+    shadow.querySelector<HTMLButtonElement>('[data-action="done"]')?.click();
+    expect(shadow.textContent).toContain("Done editing?");
+    expect(shadow.textContent).toContain("never starts traffic");
+
+    shadow.querySelector<HTMLButtonElement>('[data-action="modal-save-close"]')?.click();
+    await vi.waitFor(() => expect(controller.exit).toHaveBeenCalled());
+    expect(controller.saveNow).toHaveBeenCalled();
+    cleanup();
+  });
+
+  it("keeps the editor open when Save and close cannot save", async () => {
+    const controller = makeController();
+    controller.saveNow.mockImplementationOnce(async () => {
+      controller.emit(state({ saveState: "error", saveMessage: "Network unavailable" }));
+    });
+    const { shadow, cleanup } = mount(controller);
+
+    shadow.querySelector<HTMLButtonElement>('[data-action="done"]')?.click();
+    shadow.querySelector<HTMLButtonElement>('[data-action="modal-save-close"]')?.click();
+
+    await vi.waitFor(() => expect(controller.saveNow).toHaveBeenCalled());
+    expect(controller.exit).not.toHaveBeenCalled();
+    expect(shadow.textContent).toContain("Done editing?");
+    cleanup();
+  });
+
+  it("extends the session and refreshes the displayed time", async () => {
+    const controller = makeController();
+    const extended = new Date(Date.now() + 4 * 60 * 1000).toISOString();
+    controller.session.expiresAt = new Date(Date.now() + 60 * 1000).toISOString();
+    controller.extendSession.mockImplementationOnce(async () => {
+      controller.session.expiresAt = extended;
+      return extended;
+    });
+    const { shadow, cleanup } = mount(controller);
+
+    expect(shadow.textContent).toContain("Session ends in");
+    shadow.querySelector<HTMLButtonElement>('[data-action="extend-session"]')?.click();
+
+    await vi.waitFor(() => expect(controller.extendSession).toHaveBeenCalledOnce());
+    await vi.waitFor(() => expect(shadow.textContent).toMatch(/Session ends in 3:5\d/));
+    cleanup();
+  });
+
+  it("enters inspect mode with the loud selection treatment", () => {
+    const controller = makeController();
+    const { shadow, cleanup } = mount(controller);
+
+    controller.emit(state({ pickerActive: true }));
+    expect(shadow.textContent).toContain("Click an element to talk about it");
+    expect(shadow.querySelector(".page-border")).not.toBeNull();
+    cleanup();
+  });
+});