@drip-apex/sdk 0.1.0

package/src/editor/controller.test.ts

@@ -0,0 +1,371 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { EditorApi, EditorApiError } from "./api";
+import { EditorController } from "./controller";
+import type { DevicePreview } from "./device-preview";
+import type { ActiveEditorSession, EditorArtifacts } from "./types";
+
+const session: ActiveEditorSession = {
+  sid: "session-1",
+  bearer: "bearer",
+  expiresAt: new Date(Date.now() + 60_000).toISOString(),
+  shopId: "shop-1",
+  experimentId: "experiment-1",
+  initialVariationId: "variation-1",
+  targetUrl: "https://shop.example/",
+  targetOrigin: "https://shop.example",
+  variations: [{ id: "variation-1", name: "Treatment" }],
+};
+
+function fakeApi(artifacts: EditorArtifacts = { mutations: [], customCss: "", customJs: "" }) {
+  return {
+    loadArtifacts: vi.fn(async () => ({
+      variation: { id: "variation-1", name: "Treatment", artifactHash: "hash-1", reviewStatus: "approved" },
+      artifacts,
+    })),
+    saveArtifacts: vi.fn(async (_variationId: string, next: EditorArtifacts) => ({
+      artifactHash: "hash-2",
+      reviewStatus: "approved",
+      warningIssues: [],
+      artifacts: next,
+    })),
+    revoke: vi.fn(async () => undefined),
+  };
+}
+
+describe("EditorController", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    document.head.innerHTML = "";
+    document.body.innerHTML = `<h1 id="title">Shopper copy</h1>`;
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("applies and toggles a scoped visual draft", async () => {
+    const api = fakeApi({
+      mutations: [{ selector: "#title", action: "setText", text: "Draft copy" }],
+      customCss: "#title{color:red}",
+      customJs: "",
+    });
+    const controller = new EditorController(session, "https://app.example", api as unknown as EditorApi);
+    await controller.initialize();
+    expect(document.querySelector("h1")?.textContent).toBe("Draft copy");
+    expect(document.getElementById("apex-editor-draft-css")).not.toBeNull();
+
+    controller.toggleArtifacts(false);
+    expect(document.querySelector("h1")?.textContent).toBe("Shopper copy");
+    expect(document.getElementById("apex-editor-draft-css")).toBeNull();
+    controller.destroy();
+  });
+
+  it("upserts edits, supports history, and debounces a full save", async () => {
+    const api = fakeApi();
+    const controller = new EditorController(session, "https://app.example", api as unknown as EditorApi);
+    await controller.initialize();
+    const title = document.querySelector("h1")!;
+    controller.selectElement(title, "#title");
+    controller.setText("Treatment copy");
+    expect(title.textContent).toBe("Treatment copy");
+    controller.undo();
+    expect(title.textContent).toBe("Shopper copy");
+    controller.redo();
+    expect(title.textContent).toBe("Treatment copy");
+
+    await vi.advanceTimersByTimeAsync(700);
+    expect(api.saveArtifacts).toHaveBeenCalledWith(
+      "variation-1",
+      expect.objectContaining({
+        mutations: [{ selector: "#title", action: "setText", text: "Treatment copy" }],
+      }),
+      "hash-1",
+    );
+    expect(controller.getState().saveState).toBe("saved");
+    controller.destroy();
+  });
+
+  it("enters a terminal conflict state and does not auto-overwrite", async () => {
+    const api = fakeApi();
+    api.saveArtifacts.mockRejectedValueOnce(new EditorApiError("Conflict", 409));
+    const controller = new EditorController(session, "https://app.example", api as unknown as EditorApi);
+    await controller.initialize();
+    controller.setCustomCss("h1{color:blue}");
+    await vi.advanceTimersByTimeAsync(700);
+    expect(controller.getState().saveState).toBe("conflict");
+    controller.setCustomCss("h1{color:green}");
+    await vi.advanceTimersByTimeAsync(700);
+    expect(api.saveArtifacts).toHaveBeenCalledTimes(1);
+    controller.destroy();
+  });
+
+  it("serializes autosaves and sends the latest draft with the newest hash", async () => {
+    let resolveFirst!: (value: {
+      artifactHash: string;
+      reviewStatus: string;
+      warningIssues: never[];
+      artifacts: EditorArtifacts;
+    }) => void;
+    const firstSave = new Promise<{
+      artifactHash: string;
+      reviewStatus: string;
+      warningIssues: never[];
+      artifacts: EditorArtifacts;
+    }>((resolve) => { resolveFirst = resolve; });
+    const api = fakeApi();
+    api.saveArtifacts.mockImplementationOnce(() => firstSave);
+    const controller = new EditorController(session, "https://app.example", api as unknown as EditorApi);
+    await controller.initialize();
+
+    controller.setCustomCss("h1{color:blue}");
+    await vi.advanceTimersByTimeAsync(700);
+    expect(api.saveArtifacts).toHaveBeenCalledTimes(1);
+
+    controller.setCustomCss("h1{color:green}");
+    await vi.advanceTimersByTimeAsync(700);
+    expect(api.saveArtifacts).toHaveBeenCalledTimes(1);
+
+    resolveFirst({
+      artifactHash: "hash-2",
+      reviewStatus: "approved",
+      warningIssues: [],
+      artifacts: { mutations: [], customCss: "h1{color:blue}", customJs: "" },
+    });
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(api.saveArtifacts).toHaveBeenCalledTimes(2);
+    expect(api.saveArtifacts).toHaveBeenNthCalledWith(
+      2,
+      "variation-1",
+      expect.objectContaining({ customCss: "h1{color:green}" }),
+      "hash-2",
+    );
+    expect(controller.getState().artifacts.customCss).toBe("h1{color:green}");
+    controller.destroy();
+  });
+
+  it("ignores a stale variation response after a faster switch", async () => {
+    let resolveFirst!: (value: Awaited<ReturnType<EditorApi["loadArtifacts"]>>) => void;
+    const first = new Promise<Awaited<ReturnType<EditorApi["loadArtifacts"]>>>((resolve) => {
+      resolveFirst = resolve;
+    });
+    const api = fakeApi();
+    api.loadArtifacts
+      .mockImplementationOnce(() => first)
+      .mockResolvedValueOnce({
+        variation: { id: "variation-2", name: "Second", artifactHash: "hash-2", reviewStatus: "approved" },
+        artifacts: { mutations: [], customCss: "body{color:blue}", customJs: "" },
+      });
+    const controller = new EditorController(session, "https://app.example", api as unknown as EditorApi);
+
+    const pendingFirst = controller.selectVariation("variation-1");
+    await controller.selectVariation("variation-2");
+    resolveFirst({
+      variation: { id: "variation-1", name: "First", artifactHash: "hash-1", reviewStatus: "approved" },
+      artifacts: { mutations: [], customCss: "body{color:red}", customJs: "" },
+    });
+    await pendingFirst;
+
+    expect(controller.getState().variation?.id).toBe("variation-2");
+    expect(controller.getState().artifacts.customCss).toBe("body{color:blue}");
+    controller.destroy();
+  });
+
+  it("signals the exact app origin before revoking and reloading", async () => {
+    const api = fakeApi();
+    const reload = vi.fn();
+    const postMessage = vi.fn();
+    Object.defineProperty(window, "opener", { configurable: true, value: { postMessage } });
+    const controller = new EditorController(
+      session,
+      "https://app.example",
+      api as unknown as EditorApi,
+      reload,
+    );
+    await controller.initialize();
+
+    await controller.exit();
+
+    expect(postMessage).toHaveBeenCalledWith({
+      type: "apex:editor-exited",
+      sid: "session-1",
+      experimentId: "experiment-1",
+      variationId: "variation-1",
+    }, "https://app.example");
+    expect(api.revoke).toHaveBeenCalledOnce();
+    expect(reload).toHaveBeenCalledOnce();
+  });
+
+  it("keeps the device preview synchronized with the visual toggle", async () => {
+    const api = fakeApi();
+    const controller = new EditorController(session, "https://app.example", api as unknown as EditorApi);
+    await controller.initialize();
+    const preview = { update: vi.fn(), open: vi.fn(), close: vi.fn() } as unknown as DevicePreview;
+    controller.attachDevicePreview(preview);
+
+    controller.toggleArtifacts(false);
+    controller.openDevicePreview();
+
+    expect(preview.update).toHaveBeenCalledWith(controller.getState().artifacts, false);
+    expect(preview.open).toHaveBeenCalledWith({ mutations: [], customCss: "", customJs: "" });
+    controller.destroy();
+  });
+
+  it("applies command artifacts through the scoped controller and reports misses", async () => {
+    const api = fakeApi();
+    const controller = new EditorController(session, "https://app.example", api as unknown as EditorApi);
+    await controller.initialize();
+
+    const audit = controller.applyCommandArtifacts({
+      mutations: [
+        { selector: "#title", action: "setText", text: "Command copy" },
+        { selector: ".missing", action: "setStyle", styles: { color: "red" } },
+      ],
+      customCss: "#title{font-weight:bold}",
+      customJs: "fetch('/cart.js')",
+    });
+
+    expect(document.getElementById("title")?.textContent).toBe("Command copy");
+    expect(audit).toMatchObject({ ok: false, networkRequired: true, customJsDeferred: true });
+    expect(audit.mutationAudit[0]).toMatchObject({ beforeCount: 1, effectVerified: true });
+    expect(audit.mutationAudit[1]).toMatchObject({ beforeCount: 0, effectVerified: false });
+    controller.destroy();
+  });
+
+  it("verifies HTML mutations against the sanitized browser-normalized result", async () => {
+    const api = fakeApi();
+    const controller = new EditorController(session, "https://app.example", api as unknown as EditorApi);
+    await controller.initialize();
+    const verify = (controller as unknown as {
+      verifyMutationEffect: (
+        mutation: { selector: string; action: "html"; html: string },
+        beforeCount: number,
+        afterCount: number,
+      ) => boolean;
+    }).verifyMutationEffect.bind(controller);
+    const title = document.getElementById("title")!;
+    const mutation = {
+      selector: "#title",
+      action: "html" as const,
+      html: `<strong onclick="steal()">Expected</strong><script>steal()</script>`,
+    };
+
+    title.innerHTML = `<em>Different non-empty HTML</em>`;
+    expect(verify(mutation, 1, 1)).toBe(false);
+    title.innerHTML = `<strong>Expected</strong>`;
+    expect(verify(mutation, 1, 1)).toBe(true);
+    controller.destroy();
+  });
+
+  it("bounds session revocation before reloading on exit", async () => {
+    const api = fakeApi();
+    api.revoke.mockImplementationOnce(() => new Promise<void>(() => {}));
+    const reload = vi.fn();
+    const controller = new EditorController(
+      session,
+      "https://app.example",
+      api as unknown as EditorApi,
+      reload,
+    );
+    await controller.initialize();
+
+    const exiting = controller.exit();
+    await vi.advanceTimersByTimeAsync(1_499);
+    expect(reload).not.toHaveBeenCalled();
+    await vi.advanceTimersByTimeAsync(1);
+    await exiting;
+    expect(reload).toHaveBeenCalledOnce();
+  });
+
+  it("removes a selector's mutations and restores artifact snapshots", async () => {
+    const api = fakeApi({
+      mutations: [{ selector: "#title", action: "setText", text: "Draft copy" }],
+      customCss: "",
+      customJs: "",
+    });
+    const controller = new EditorController(session, "https://app.example", api as unknown as EditorApi);
+    await controller.initialize();
+    const snapshot = controller.getState().artifacts;
+
+    controller.removeSelector("#title");
+    expect(controller.getState().artifacts.mutations).toHaveLength(0);
+    expect(document.querySelector("h1")?.textContent).toBe("Shopper copy");
+    expect(controller.getState().canUndo).toBe(true);
+
+    controller.restoreArtifacts(snapshot);
+    expect(controller.getState().artifacts.mutations).toHaveLength(1);
+    expect(document.querySelector("h1")?.textContent).toBe("Draft copy");
+    controller.destroy();
+  });
+
+  it("removes only the selected mutation when a selector has sibling changes", async () => {
+    const api = fakeApi({
+      mutations: [
+        { selector: "#title", action: "setText", text: "Draft copy" },
+        { selector: "#title", action: "attribute", attributes: { title: "Tooltip" } },
+      ],
+      customCss: "",
+      customJs: "",
+    });
+    const controller = new EditorController(session, "https://app.example", api as unknown as EditorApi);
+    await controller.initialize();
+
+    controller.removeMutation(0);
+
+    expect(controller.getState().artifacts.mutations).toEqual([
+      expect.objectContaining({ action: "attribute", attributes: { title: "Tooltip" } }),
+    ]);
+    controller.destroy();
+  });
+
+  it("resolves a conflict by keeping mine (rebase hash, resave) or loading theirs", async () => {
+    const api = fakeApi();
+    api.saveArtifacts.mockRejectedValueOnce(new EditorApiError("Conflict", 409));
+    const controller = new EditorController(session, "https://app.example", api as unknown as EditorApi);
+    await controller.initialize();
+    controller.setCustomCss("h1{color:blue}");
+    await vi.advanceTimersByTimeAsync(700);
+    expect(controller.getState().saveState).toBe("conflict");
+
+    const keepMine = controller.resolveConflict("mine");
+    await vi.advanceTimersByTimeAsync(700);
+    await keepMine;
+    expect(api.loadArtifacts).toHaveBeenCalledTimes(2);
+    expect(api.saveArtifacts).toHaveBeenLastCalledWith(
+      "variation-1",
+      expect.objectContaining({ customCss: "h1{color:blue}" }),
+      "hash-1",
+    );
+    expect(controller.getState().saveState).toBe("saved");
+
+    api.saveArtifacts.mockRejectedValueOnce(new EditorApiError("Conflict", 409));
+    controller.setCustomCss("h1{color:green}");
+    await vi.advanceTimersByTimeAsync(700);
+    expect(controller.getState().saveState).toBe("conflict");
+    await controller.resolveConflict("theirs");
+    expect(controller.getState().artifacts.customCss).toBe("");
+    expect(controller.getState().saveState).toBe("saved");
+    controller.destroy();
+  });
+
+  it("extends the session through the api and updates the local expiry", async () => {
+    const api = fakeApi();
+    const later = new Date(Date.now() + 3_600_000).toISOString();
+    const extendable = {
+      ...api,
+      extendSession: vi.fn(async () => later),
+    };
+    const localSession = { ...session };
+    const controller = new EditorController(
+      localSession,
+      "https://app.example",
+      extendable as unknown as EditorApi,
+    );
+    await controller.initialize();
+    await expect(controller.extendSession()).resolves.toBe(later);
+    expect(localSession.expiresAt).toBe(later);
+    controller.destroy();
+  });
+});