@drip-apex/sdk 0.1.0 → 0.3.0

package/src/mutate.test.ts

@@ -1,9 +1,21 @@
 // @vitest-environment jsdom
-import { afterEach, describe, expect, it } from "vitest";
-import { applyTrackedMutation, createMutationApplicationContext, getMutationKey, isInsertAction, isInsertDuplicate, resetAppliedMutations, __test } from "./mutate";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  addAppliedMutationOwners,
+  applyMutations,
+  applyTrackedMutation,
+  createMutationApplicationContext,
+  getMutationKey,
+  isInsertAction,
+  isInsertDuplicate,
+  replayArtifact,
+  resetAppliedMutations,
+  resetAppliedMutationsForOwner,
+  __test,
+} from "./mutate";
 import { setJsPolicy } from "./js";
 
-const { normalizeCssPropertyName } = __test;
+const { baselineAttributeNames, normalizeCssPropertyName } = __test;
 
 describe("normalizeCssPropertyName", () => {
   it("converts camelCase to kebab-case (backgroundColor)", () => {
@@ -148,7 +160,426 @@ describe("mutation rollback", () => {
     setJsPolicy("hybrid");
   });
 
-  it("blocks dangerous attributes only under strict policy", () => {
+  it("restores only the tracked attribute and preserves host DOM changes", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-state", "control");
+
+    applyTrackedMutation({
+      selector: "div",
+      action: "attribute",
+      attributes: { "data-state": "treatment" },
+    }, element);
+
+    const hostChild = document.createElement("button");
+    hostChild.textContent = "Host child";
+    element.appendChild(hostChild);
+    element.setAttribute("data-host", "live");
+
+    resetAppliedMutations();
+
+    expect(element.getAttribute("data-state")).toBe("control");
+    expect(element.getAttribute("data-host")).toBe("live");
+    expect(element.firstElementChild).toBe(hostChild);
+  });
+
+  it("preserves body content and host listeners when reverting an attribute", () => {
+    document.body.innerHTML = '<button type="button">Host action</button>';
+    const button = document.body.querySelector("button")!;
+    const onClick = vi.fn();
+    button.addEventListener("click", onClick);
+
+    applyTrackedMutation({
+      selector: "body",
+      action: "attribute",
+      attributes: { "data-treatment": "active" },
+    }, document.body);
+    document.body.append(" current host content");
+    const currentHostHtml = document.body.innerHTML;
+
+    resetAppliedMutations();
+
+    expect(document.body.innerHTML).toBe(currentHostHtml);
+    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("restores pre-mutation innerHTML for an html action", () => {
+    const element = document.createElement("div");
+    element.innerHTML = "<strong>Control</strong>";
+
+    applyTrackedMutation({
+      selector: "div",
+      action: "html",
+      html: "<em>Treatment</em>",
+    }, element);
+    resetAppliedMutations();
+
+    expect(element.innerHTML).toBe("<strong>Control</strong>");
+  });
+
+  it("restores text without clobbering host attributes", () => {
+    const element = document.createElement("div");
+    element.textContent = "Control";
+
+    applyTrackedMutation({
+      selector: "div",
+      action: "text",
+      text: "Treatment",
+    }, element);
+    element.setAttribute("data-host", "live");
+    resetAppliedMutations();
+
+    expect(element.textContent).toBe("Control");
+    expect(element.getAttribute("data-host")).toBe("live");
+  });
+
+  it("restores pristine markup after text then html mutations", () => {
+    const element = document.createElement("div");
+    element.innerHTML = "<span>Control</span>";
+
+    applyTrackedMutation({ selector: "div", action: "text", text: "Treatment" }, element);
+    applyTrackedMutation({ selector: "div", action: "html", html: "<em>H</em>" }, element);
+    resetAppliedMutations();
+
+    expect(element.innerHTML).toBe("<span>Control</span>");
+  });
+
+  it("restores child markup after a text mutation", () => {
+    const element = document.createElement("div");
+    element.innerHTML = "<strong>Control</strong>";
+
+    applyTrackedMutation({ selector: "div", action: "text", text: "Treatment" }, element);
+    resetAppliedMutations();
+
+    expect(element.innerHTML).toBe("<strong>Control</strong>");
+  });
+
+  it("captures style properties from the original tracked style attribute", () => {
+    const element = document.createElement("div");
+    element.setAttribute("style", "color: blue");
+
+    applyTrackedMutation({
+      selector: "div",
+      action: "attribute",
+      attribute: { name: "style", value: "color: red" },
+    }, element);
+    applyTrackedMutation({
+      selector: "div",
+      action: "style",
+      styles: { color: "green" },
+    }, element);
+    resetAppliedMutations();
+
+    expect(element.style.color).toBe("blue");
+  });
+
+  it("does not restore stale content during a later attribute-only teardown", () => {
+    const element = document.createElement("div");
+    element.textContent = "Control";
+
+    applyTrackedMutation(
+      { selector: "div", action: "text", text: "Content treatment" },
+      element,
+      undefined,
+      ["content-owner"],
+    );
+    resetAppliedMutationsForOwner("content-owner");
+    element.textContent = "Host update";
+
+    applyTrackedMutation(
+      {
+        selector: "div",
+        action: "attribute",
+        attributes: { "data-state": "attribute-treatment" },
+      },
+      element,
+      undefined,
+      ["attribute-owner"],
+    );
+    resetAppliedMutationsForOwner("attribute-owner");
+
+    expect(element.textContent).toBe("Host update");
+    expect(element.getAttribute("data-state")).toBeNull();
+  });
+
+  it("shares a pristine baseline between style properties and the style attribute", () => {
+    const element = document.createElement("div");
+    element.setAttribute("style", "color: blue");
+
+    applyTrackedMutation({
+      selector: "div",
+      action: "style",
+      styles: { color: "green" },
+    }, element);
+    applyTrackedMutation({
+      selector: "div",
+      action: "attribute",
+      attribute: { name: "style", value: "color: red" },
+    }, element);
+    resetAppliedMutations();
+
+    expect(element.getAttribute("style")).toBe("color: blue");
+  });
+
+  it("falls back to textContent when innerHTML is not a string", () => {
+    const element = {
+      innerHTML: undefined,
+      textContent: "Control copy",
+    } as unknown as Element;
+
+    applyTrackedMutation(
+      { selector: ".hero", action: "text", text: "Treatment copy" },
+      element,
+    );
+    resetAppliedMutations();
+
+    expect((element as unknown as { innerHTML?: string }).innerHTML).toBeUndefined();
+    expect(element.textContent).toBe("Control copy");
+  });
+
+  it("replays surviving html while restoring a removed attribute owner", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-state", "control");
+    element.innerHTML = "<span>Control</span>";
+
+    applyTrackedMutation({
+      selector: "div",
+      action: "attribute",
+      attributes: { "data-state": "attribute-treatment" },
+    }, element, undefined, ["attribute-owner"]);
+    applyTrackedMutation({
+      selector: "div",
+      action: "html",
+      html: "<strong>HTML treatment</strong>",
+    }, element, undefined, ["html-owner"]);
+
+    resetAppliedMutationsForOwner("attribute-owner");
+
+    expect(element.getAttribute("data-state")).toBe("control");
+    expect(element.innerHTML).toBe("<strong>HTML treatment</strong>");
+  });
+
+  it("does not adopt and rewrite a framework-owned replacement during route teardown", () => {
+    const originalRoute = document.createElement("main");
+    originalRoute.className = "route-shell";
+    originalRoute.innerHTML = '<button type="button">Original route</button>';
+    document.body.appendChild(originalRoute);
+
+    applyTrackedMutation(
+      {
+        selector: ".route-shell",
+        action: "html",
+        html: '<p data-apex-treatment="true">Treatment</p>',
+      },
+      originalRoute,
+      undefined,
+      ["page-home"],
+      "experiment-a:variation-a",
+    );
+
+    const frameworkRoute = document.createElement("main");
+    frameworkRoute.className = "route-shell";
+    const frameworkButton = document.createElement("button");
+    frameworkButton.type = "button";
+    frameworkButton.textContent = "Return home";
+    const onFrameworkClick = vi.fn();
+    frameworkButton.addEventListener("click", onFrameworkClick);
+    frameworkRoute.appendChild(frameworkButton);
+    originalRoute.replaceWith(frameworkRoute);
+
+    resetAppliedMutationsForOwner("page-home", "experiment-a:variation-a", {
+      preserveReplacementTargets: true,
+    });
+
+    expect(document.querySelector(".route-shell")).toBe(frameworkRoute);
+    expect(frameworkRoute.firstElementChild).toBe(frameworkButton);
+    frameworkButton.click();
+    expect(onFrameworkClick).toHaveBeenCalledOnce();
+  });
+
+  it("restores a still-connected target during replacement-preserving teardown", () => {
+    const route = document.createElement("main");
+    route.className = "connected-route-shell";
+    route.innerHTML = '<button type="button">Original route</button>';
+    document.body.appendChild(route);
+
+    applyTrackedMutation(
+      {
+        selector: ".connected-route-shell",
+        action: "html",
+        html: '<p data-apex-treatment="true">Treatment</p>',
+      },
+      route,
+      undefined,
+      ["page-connected"],
+      "experiment-connected:variation-a",
+    );
+
+    expect(route.innerHTML).toBe(
+      '<p data-apex-treatment="true">Treatment</p>',
+    );
+
+    resetAppliedMutationsForOwner(
+      "page-connected",
+      "experiment-connected:variation-a",
+      { preserveReplacementTargets: true },
+    );
+
+    expect(route.isConnected).toBe(true);
+    expect(route.innerHTML).toBe(
+      '<button type="button">Original route</button>',
+    );
+  });
+
+  it("keeps a mutation until its final Page owner tears down", () => {
+    const element = { textContent: "Control" } as unknown as Element;
+    applyTrackedMutation(
+      { selector: ".hero", action: "text", text: "Treatment" },
+      element,
+      undefined,
+      ["page-a"],
+    );
+    addAppliedMutationOwners(new Set(["page-a"]), ["page-b"]);
+
+    resetAppliedMutationsForOwner("page-a");
+    expect((element as unknown as { textContent: string }).textContent).toBe(
+      "Treatment",
+    );
+
+    resetAppliedMutationsForOwner("page-b");
+    expect((element as unknown as { textContent: string }).textContent).toBe(
+      "Control",
+    );
+  });
+
+  it("adopts owners only for the requested artifact", () => {
+    const first = document.createElement("div");
+    const second = document.createElement("div");
+    first.textContent = "First control";
+    second.textContent = "Second control";
+    applyTrackedMutation(
+      { selector: ".first", action: "text", text: "First treatment" },
+      first,
+      undefined,
+      ["page-a"],
+      "artifact-a",
+    );
+    applyTrackedMutation(
+      { selector: ".second", action: "text", text: "Second treatment" },
+      second,
+      undefined,
+      ["page-a"],
+      "artifact-b",
+    );
+    addAppliedMutationOwners(new Set(["page-a"]), ["page-b"], "artifact-a");
+
+    resetAppliedMutationsForOwner("page-a");
+    expect(first.textContent).toBe("First treatment");
+    expect(second.textContent).toBe("Second control");
+
+    resetAppliedMutationsForOwner("page-b");
+    expect(first.textContent).toBe("First control");
+  });
+
+  it("replays a surviving stacked attribute write after the earlier owner tears down", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-state", "control");
+
+    applyTrackedMutation({
+      selector: "div",
+      action: "attribute",
+      attributes: { "data-state": "owner-a" },
+    }, element, undefined, ["page-a"]);
+    applyTrackedMutation({
+      selector: "div",
+      action: "attribute",
+      attributes: { "data-state": "owner-b" },
+    }, element, undefined, ["page-b"]);
+
+    resetAppliedMutationsForOwner("page-a");
+    expect(element.getAttribute("data-state")).toBe("owner-b");
+
+    resetAppliedMutationsForOwner("page-b");
+    expect(element.getAttribute("data-state")).toBe("control");
+  });
+
+  it("shares an HTML attribute baseline across case-variant stacked owners", () => {
+    const element = document.createElement("div");
+    element.setAttribute("data-state", "control");
+
+    applyTrackedMutation({
+      selector: "div",
+      action: "attribute",
+      attributes: { "DATA-STATE": "owner-a" },
+    }, element, undefined, ["page-a"]);
+    applyTrackedMutation({
+      selector: "div",
+      action: "attribute",
+      attributes: { "data-state": "owner-b" },
+    }, element, undefined, ["page-b"]);
+
+    expect(baselineAttributeNames(element)).toEqual(["data-state"]);
+    resetAppliedMutationsForOwner("page-a");
+    expect(element.getAttribute("data-state")).toBe("owner-b");
+    expect(baselineAttributeNames(element)).toEqual(["data-state"]);
+
+    resetAppliedMutationsForOwner("page-b");
+    expect(element.getAttribute("data-state")).toBe("control");
+    expect(baselineAttributeNames(element)).toEqual([]);
+  });
+
+  it("preserves mixed-case SVG attribute names in the baseline", () => {
+    const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    element.setAttribute("viewBox", "0 0 10 10");
+
+    applyTrackedMutation({
+      selector: "svg",
+      action: "attribute",
+      attributes: { viewBox: "0 0 20 20" },
+    }, element, undefined, ["page-svg"]);
+
+    expect(baselineAttributeNames(element)).toEqual(["viewBox"]);
+    resetAppliedMutationsForOwner("page-svg");
+    expect(element.getAttribute("viewBox")).toBe("0 0 10 10");
+  });
+
+  it("adopts a duplicate insertion so the nodes survive until the final owner tears down", () => {
+    document.body.innerHTML = '<div id="anchor">Anchor</div>';
+    const mutation = {
+      selector: "#anchor",
+      action: "insertAfter" as const,
+      html: '<span class="shared-insert">Shared</span>',
+    };
+
+    applyMutations([mutation], { ownerKeys: ["page-a"] });
+    applyMutations([mutation], { ownerKeys: ["page-b"] });
+    expect(document.querySelectorAll(".shared-insert")).toHaveLength(1);
+
+    resetAppliedMutationsForOwner("page-a");
+    expect(document.querySelectorAll(".shared-insert")).toHaveLength(1);
+
+    resetAppliedMutationsForOwner("page-b");
+    expect(document.querySelectorAll(".shared-insert")).toHaveLength(0);
+  });
+
+  it("rebuilds a treatment after a foreign DOM replacement", () => {
+    document.body.innerHTML = '<div id="hero">Control</div>';
+    applyMutations([{
+      selector: "#hero",
+      action: "text",
+      text: "Treatment",
+    }], {
+      artifactId: "artifact-a",
+      ownerKeys: ["page-a"],
+    });
+
+    document.getElementById("hero")!.outerHTML = '<div id="hero">Framework</div>';
+    replayArtifact("artifact-a");
+
+    expect(document.getElementById("hero")?.textContent).toBe("Treatment");
+  });
+
+  it("blocks dangerous attributes under every custom JavaScript policy", () => {
     const element = document.createElement("a");
     setJsPolicy("strict");
     applyTrackedMutation({ selector: "a", action: "attribute", attributes: {
@@ -162,8 +593,21 @@ describe("mutation rollback", () => {
     applyTrackedMutation({ selector: "a", action: "attribute", attributes: {
       onclick: "alert(1)", href: "javascript:alert(1)",
     } }, element);
-    expect(element.getAttribute("onclick")).toBe("alert(1)");
-    expect(element.getAttribute("href")).toBe("javascript:alert(1)");
+    expect(element.getAttribute("onclick")).toBeNull();
+    expect(element.getAttribute("href")).toBeNull();
+  });
+
+  it("allows an attribute mutation to remove an existing inline handler", () => {
+    const element = document.createElement("button");
+    element.setAttribute("onclick", "alert(1)");
+
+    applyTrackedMutation({
+      selector: "button",
+      action: "attribute",
+      attributes: { onclick: null },
+    }, element);
+
+    expect(element.hasAttribute("onclick")).toBe(false);
   });
 
   it.each([
@@ -171,7 +615,7 @@ describe("mutation rollback", () => {
     ["data:text/html,<script>alert(1)</script>", false],
     ["data:image/svg+xml,<svg onload='alert(1)'></svg>", false],
     [" \tDATA: IMAGE/PNG ;BASE64,iVBORw0KGgo=", true],
-  ])("applies strict data URL allowlisting to %s", (url, allowed) => {
+  ])("applies data URL allowlisting to %s", (url, allowed) => {
     const element = document.createElement("iframe");
     setJsPolicy("strict");
 
@@ -185,20 +629,21 @@ describe("mutation rollback", () => {
   });
 
   it.each(["html", "insertBefore", "insertAfter"] as const)(
-    "strips executable attributes from %s mutations under strict policy",
+    "strips unsafe attributes from %s mutations under the default policy",
     (action) => {
       document.body.innerHTML = '<div id="target"></div>';
       const target = document.querySelector("#target")!;
-      setJsPolicy("strict");
+      setJsPolicy("hybrid");
       applyTrackedMutation({
         selector: "#target",
         action,
-        html: '<iframe srcdoc="<script>alert(1)</script>"></iframe><a onclick="alert(1)" href="javascript:alert(1)">Safe copy</a>',
+        html: '<iframe srcdoc="<script>alert(1)</script>"></iframe><a onclick="alert(1)" href="data:text/html,alert(1)">Safe copy</a><img src="data:image/png;base64,iVBORw0KGgo=">',
       }, target);
       const scope = action === "html" ? target : document.body;
       expect(scope.querySelector("iframe")?.hasAttribute("srcdoc")).toBe(false);
       expect(scope.querySelector("a")?.hasAttribute("onclick")).toBe(false);
       expect(scope.querySelector("a")?.hasAttribute("href")).toBe(false);
+      expect(scope.querySelector("img")?.getAttribute("src")).toBe("data:image/png;base64,iVBORw0KGgo=");
       expect(scope.querySelector("a")?.textContent).toBe("Safe copy");
     },
   );
@@ -291,6 +736,25 @@ describe("mutation rollback", () => {
     );
   });
 
+  it("rolls back a partial multi-mutation application in reverse order and is idempotent", () => {
+    document.body.innerHTML = `<h1 id="title">Original</h1>`;
+    const context = createMutationApplicationContext();
+    const missed: string[] = [];
+
+    context.apply([
+      { selector: "#title", action: "text", text: "First" },
+      { selector: "#title", action: "text", text: "Second" },
+      { selector: "#missing", action: "text", text: "Never applied" },
+    ], { onMiss: (mutation) => missed.push(mutation.selector) });
+
+    expect(document.getElementById("title")?.textContent).toBe("Second");
+    expect(missed).toEqual(["#missing"]);
+    context.rollback();
+    expect(document.getElementById("title")?.textContent).toBe("Original");
+    context.rollback();
+    expect(document.getElementById("title")?.textContent).toBe("Original");
+  });
+
   it("does not snapshot or remove a pre-existing sibling for an empty insertion", () => {
     document.body.innerHTML = `<div id="anchor">Anchor</div><p id="existing">Existing</p>`;
     const context = createMutationApplicationContext();