@drip-apex/sdk 0.1.0

package/src/commerce-price.test.ts

@@ -0,0 +1,1145 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  applyCommercePrice as applyCommercePriceWithStamp,
+  cleanupCommercePrice,
+  isCommercePriceActive,
+  isCommercePriceExposureEligible,
+  isCommercePriceWorkPending,
+  notifyCommerceCartStampConfirmed,
+} from "./commerce-price";
+import type { Assignment, CommercePriceSettings } from "./types";
+
+const settings: CommercePriceSettings = {
+  revision: 1,
+  checksum: "sum",
+  experiments: [
+    {
+      experiment_id: "exp_price",
+      assignment_epoch: 1,
+      currency: "EUR",
+      variants: {
+        treatment: [
+          {
+            variant_gid: "gid://shopify/ProductVariant/123",
+            fixedPricePerUnit: "1149.95",
+          },
+        ],
+      },
+    },
+  ],
+};
+const assignments = [
+  {
+    experimentId: "exp_price",
+    variationId: "treatment",
+    assignmentEpoch: 1,
+    mutations: [],
+    index: 1,
+  },
+] as Assignment[];
+
+function applyCommercePrice(
+  priceSettings: CommercePriceSettings | undefined,
+  activeAssignments: Assignment[],
+  isCohortStampedOnCart: () => boolean | "pending" = () => true,
+): void {
+  applyCommercePriceWithStamp(
+    priceSettings,
+    activeAssignments,
+    isCohortStampedOnCart,
+  );
+}
+
+function shopify(pageType = "product", currency = "EUR", withMeta = true) {
+  Object.assign(window, {
+    Shopify: { currency: { active: currency } },
+    ShopifyAnalytics: withMeta
+      ? {
+          meta: {
+            page: { pageType, handle: "current-product" },
+            product: { variants: [{ id: 123, price: 129900 }] },
+          },
+        }
+      : undefined,
+  });
+}
+
+describe("commerce price display swap", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    shopify();
+  });
+
+  afterEach(() => {
+    cleanupCommercePrice();
+    delete (window as any).Shopify;
+    delete (window as any).ShopifyAnalytics;
+  });
+
+  it("swaps all matched PDP nodes while preserving localized formatting", () => {
+    document.body.innerHTML =
+      '<div class="price">€1.299,00</div><div class="product-price">Now €1.299,00</div>';
+    applyCommercePrice(settings, assignments);
+    expect(document.querySelector(".price")?.textContent).toBe("€1.149,95");
+    expect(document.querySelector(".product-price")?.textContent).toBe(
+      "Now €1.149,95",
+    );
+  });
+
+  it("keeps the published price when the active plane does not authorize the assignment", () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    const authorizeNone = () => false;
+
+    expect(
+      isCommercePriceWorkPending(settings, assignments, authorizeNone),
+    ).toBe(false);
+    expect(isCommercePriceActive(settings, assignments, authorizeNone)).toBe(
+      false,
+    );
+    applyCommercePriceWithStamp(
+      settings,
+      assignments,
+      () => true,
+      undefined,
+      authorizeNone,
+    );
+
+    expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+  });
+
+  it("gates compare-at framing on assignment authorization and keeps the live current price", () => {
+    document.body.innerHTML = '<div><span class="price">€1.299,00</span></div>';
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          ...settings.experiments[0],
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                compareAt: { mode: "set", amount: "1499.00" },
+              },
+            ],
+          },
+        },
+      ],
+    };
+    applyCommercePriceWithStamp(
+      compareSettings,
+      assignments,
+      () => true,
+      undefined,
+      () => false,
+    );
+    expect(document.querySelector("[data-apex-compare-at]")).toBeNull();
+    expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+    applyCommercePriceWithStamp(
+      compareSettings,
+      assignments,
+      () => true,
+      undefined,
+      () => true,
+    );
+    expect(document.querySelector("[data-apex-compare-at]")?.textContent).toBe(
+      "€1.499,00",
+    );
+    expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+  });
+
+  it("frames every eligible price surface and removes every frame on clear", () => {
+    document.body.innerHTML = `
+      <div data-main><span class="price">€1.299,00</span></div>
+      <div data-sticky><span class="product-price">€1.299,00</span></div>
+    `;
+    const adjustment: {
+      variant_gid: string;
+      compareAt: { mode: "set"; amount: string } | { mode: "clear" };
+    } = {
+      variant_gid: "gid://shopify/ProductVariant/123",
+      compareAt: { mode: "set" as const, amount: "1499.00" },
+    };
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        { ...settings.experiments[0], variants: { treatment: [adjustment] } },
+      ],
+    };
+
+    applyCommercePrice(compareSettings, assignments);
+
+    expect(document.querySelectorAll("[data-apex-compare-at]")).toHaveLength(2);
+    expect(
+      document.querySelector("[data-main] [data-apex-compare-at]")?.textContent,
+    ).toBe("€1.499,00");
+    expect(
+      document.querySelector("[data-sticky] [data-apex-compare-at]")
+        ?.textContent,
+    ).toBe("€1.499,00");
+
+    adjustment.compareAt = { mode: "clear" };
+    applyCommercePrice(compareSettings, assignments);
+    expect(document.querySelectorAll("[data-apex-compare-at]")).toHaveLength(0);
+  });
+
+  it("keeps Apex compare-at framing visible after a price DOM refresh", async () => {
+    document.body.innerHTML = '<div><span class="price">€1.299,00</span></div>';
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          ...settings.experiments[0],
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                compareAt: { mode: "set", amount: "1499.00" },
+              },
+            ],
+          },
+        },
+      ],
+    };
+    applyCommercePrice(compareSettings, assignments);
+    document.querySelector(".price")!.textContent = "€1.299,00";
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(
+      (document.querySelector("[data-apex-compare-at]") as HTMLElement).style
+        .display,
+    ).not.toBe("none");
+    expect(document.querySelectorAll("[data-apex-compare-at]")).toHaveLength(1);
+  });
+
+  it("renders display-only framing beside an unauthorized charged arm without waiting for a cart stamp", () => {
+    document.body.innerHTML = '<div><span class="price">€1.299,00</span></div>';
+    const displayAssignment = {
+      experimentId: "exp_compare",
+      variationId: "treatment",
+      mutations: [],
+      index: 2,
+    } as Assignment;
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        settings.experiments[0],
+        {
+          experiment_id: "exp_compare",
+          currency: "EUR",
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                compareAt: { mode: "set", amount: "1499.00" },
+              },
+            ],
+          },
+        },
+      ],
+    };
+
+    applyCommercePriceWithStamp(
+      compareSettings,
+      [...assignments, displayAssignment],
+      () => false,
+      undefined,
+      (assignment) => assignment.experimentId === "exp_compare",
+    );
+
+    expect(document.querySelector("[data-apex-compare-at]")?.textContent).toBe(
+      "€1.499,00",
+    );
+    expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+  });
+
+  it("reconciles compare-at framing when the product form changes variant", async () => {
+    Object.assign((window as any).ShopifyAnalytics.meta.product, {
+      variants: [
+        { id: 123, price: 129900 },
+        { id: 456, price: 17900 },
+      ],
+    });
+    document.body.innerHTML = `
+      <form action="/cart/add"><select name="id"><option value="123" selected>First</option><option value="456">Second</option></select></form>
+      <div><span class="price">€1.299,00</span></div>
+    `;
+    const adjustments = [
+      {
+        variant_gid: "gid://shopify/ProductVariant/123",
+        compareAt: { mode: "set" as const, amount: "1499.00" },
+      },
+      {
+        variant_gid: "gid://shopify/ProductVariant/456",
+        compareAt: { mode: "set" as const, amount: "199.00" },
+      },
+    ];
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        { ...settings.experiments[0], variants: { treatment: adjustments } },
+      ],
+    };
+    applyCommercePrice(compareSettings, assignments);
+    const select = document.querySelector<HTMLSelectElement>('[name="id"]')!;
+    expect(document.querySelector("[data-apex-compare-at]")?.textContent).toBe(
+      "€1.499,00",
+    );
+
+    select.value = "456";
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(document.querySelector("[data-apex-compare-at]")?.textContent).toBe(
+      "€199,00",
+    );
+
+    adjustments[1] = {
+      variant_gid: "gid://shopify/ProductVariant/456",
+      compareAt: { mode: "clear" },
+    };
+    select.dispatchEvent(new Event("input", { bubbles: true }));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(document.querySelector("[data-apex-compare-at]")).toBeNull();
+  });
+
+  it("uses the checked radio when a variant picker shares the id name", async () => {
+    Object.assign((window as any).ShopifyAnalytics.meta.product, {
+      variants: [
+        { id: 123, price: 129900 },
+        { id: 456, price: 9900 },
+      ],
+    });
+    document.body.innerHTML = `
+      <form action="/cart/add">
+        <input type="radio" name="id" value="123" checked>
+        <input type="radio" name="id" value="456">
+      </form>
+      <div><span class="price">€1.299,00</span></div>
+    `;
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          ...settings.experiments[0],
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                compareAt: { mode: "set", amount: "1499.00" },
+              },
+              {
+                variant_gid: "gid://shopify/ProductVariant/456",
+                compareAt: { mode: "set", amount: "149.00" },
+              },
+            ],
+          },
+        },
+      ],
+    };
+    applyCommercePrice(compareSettings, assignments);
+    expect(document.querySelector("[data-apex-compare-at]")?.textContent).toBe(
+      "€1.499,00",
+    );
+
+    const radios = document.querySelectorAll<HTMLInputElement>(
+      'input[type="radio"]',
+    );
+    radios[0]!.checked = false;
+    radios[1]!.checked = true;
+    radios[1]!.dispatchEvent(new Event("change", { bubbles: true }));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(document.querySelector("[data-apex-compare-at]")?.textContent).toBe(
+      "€149,00",
+    );
+  });
+
+  it("keeps display exposure scoped to the assignment that rendered", () => {
+    document.body.innerHTML =
+      '<form action="/cart/add"><input name="id" value="123"></form><span class="price">€1.299,00</span>';
+    const otherAssignment = {
+      ...assignments[0],
+      experimentId: "zz_exp_other",
+    };
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          ...settings.experiments[0],
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                compareAt: { mode: "set", amount: "1499.00" },
+              },
+            ],
+          },
+        },
+        {
+          ...settings.experiments[0],
+          experiment_id: "zz_exp_other",
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                compareAt: { mode: "set", amount: "1599.00" },
+              },
+            ],
+          },
+        },
+      ],
+    };
+
+    applyCommercePrice(compareSettings, [assignments[0], otherAssignment]);
+
+    expect(
+      isCommercePriceExposureEligible(compareSettings, assignments[0]),
+    ).toBe(true);
+    expect(
+      isCommercePriceExposureEligible(compareSettings, otherAssignment),
+    ).toBe(false);
+  });
+
+  it("keeps native compare-at hidden for a clear arm across passes", async () => {
+    document.body.innerHTML = `
+      <form action="/cart/add"><input name="id" value="123" /></form>
+      <div><span class="price">€1.299,00</span><s data-native-compare>€1.499,00</s></div>
+    `;
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          ...settings.experiments[0],
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                compareAt: { mode: "clear" },
+              },
+            ],
+          },
+        },
+      ],
+    };
+    applyCommercePrice(compareSettings, assignments);
+    const native = document.querySelector(
+      "[data-native-compare]",
+    ) as HTMLElement;
+    expect(native.style.display).toBe("none");
+    expect(document.querySelector("[data-apex-compare-at]")).toBeNull();
+    // A later pass (variant-form event) must not restore the native node.
+    document
+      .querySelector('[name="id"]')!
+      .dispatchEvent(new Event("change", { bubbles: true }));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(native.style.display).toBe("none");
+  });
+
+  it("scopes compare-at framing and cleanup to the current product", () => {
+    document.body.innerHTML = `
+      <div><span class="price" data-main>€1.299,00</span><s data-main-compare>€1.399,00</s></div>
+      <a href="/products/related-product"><div><span class="price">€1.299,00</span><s data-related-compare>€1.499,00</s></div></a>
+    `;
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          ...settings.experiments[0],
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                compareAt: { mode: "set", amount: "1599.00" },
+              },
+            ],
+          },
+        },
+      ],
+    };
+    applyCommercePrice(compareSettings, assignments);
+    expect(
+      document
+        .querySelector("[data-main]")
+        ?.previousElementSibling?.getAttribute("data-apex-compare-at"),
+    ).toBe("true");
+    expect(
+      (document.querySelector("[data-main-compare]") as HTMLElement).style
+        .display,
+    ).toBe("none");
+    expect(
+      (document.querySelector("[data-related-compare]") as HTMLElement).style
+        .display,
+    ).not.toBe("none");
+  });
+
+  it("leaves a sibling-price product card untouched", () => {
+    document.body.innerHTML = `
+      <article class="product-card"><a href="/products/related-product">Related</a><span class="price" data-related>€1.299,00</span><s data-related-compare>€1.499,00</s></article>
+      <section><span class="price" data-main>€1.299,00</span></section>
+    `;
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          ...settings.experiments[0],
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                compareAt: { mode: "set", amount: "1599.00" },
+              },
+            ],
+          },
+        },
+      ],
+    };
+    applyCommercePrice(compareSettings, assignments);
+    expect(
+      (document.querySelector("[data-related-compare]") as HTMLElement).style
+        .display,
+    ).not.toBe("none");
+    expect(
+      document
+        .querySelector("[data-related]")
+        ?.previousElementSibling?.hasAttribute("data-apex-compare-at"),
+    ).not.toBe(true);
+    expect(
+      document
+        .querySelector("[data-main]")
+        ?.previousElementSibling?.getAttribute("data-apex-compare-at"),
+    ).toBe("true");
+  });
+
+  it("ignores a recommendation quick-add form before the current product form", () => {
+    Object.assign((window as any).ShopifyAnalytics.meta.product, {
+      variants: [
+        { id: 123, price: 129900 },
+        { id: 456, price: 9900 },
+      ],
+    });
+    document.body.innerHTML = `
+      <article class="product-card"><a href="/products/related-product">Related</a><form action="/cart/add"><input name="id" value="456"></form></article>
+      <section><form action="/cart/add"><select name="id"><option value="123" selected>Current</option></select></form><span class="price">€1.299,00</span></section>
+    `;
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          ...settings.experiments[0],
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                compareAt: { mode: "set", amount: "1499.00" },
+              },
+              {
+                variant_gid: "gid://shopify/ProductVariant/456",
+                compareAt: { mode: "set", amount: "149.00" },
+              },
+            ],
+          },
+        },
+      ],
+    };
+    applyCommercePrice(compareSettings, assignments);
+    expect(document.querySelector("[data-apex-compare-at]")?.textContent).toBe(
+      "€1.499,00",
+    );
+  });
+
+  it.each(["1299.00", "1200.00"])(
+    "refuses non-discount compare-at framing at %s",
+    (amount) => {
+      document.body.innerHTML =
+        '<section><span class="price">€1.299,00</span><s class="price__compare">€1.399,00</s></section>';
+      const compareSettings: CommercePriceSettings = {
+        ...settings,
+        experiments: [
+          {
+            ...settings.experiments[0],
+            variants: {
+              treatment: [
+                {
+                  variant_gid: "gid://shopify/ProductVariant/123",
+                  compareAt: { mode: "set", amount },
+                },
+              ],
+            },
+          },
+        ],
+      };
+      applyCommercePrice(compareSettings, assignments);
+      expect(document.querySelector("[data-apex-compare-at]")).toBeNull();
+      expect(
+        (document.querySelector(".price__compare") as HTMLElement).style.display,
+      ).toBe("");
+    },
+  );
+
+  it("uses the selected variant baseline and does nothing when selection is ambiguous", () => {
+    Object.assign((window as any).ShopifyAnalytics.meta.product, {
+      variants: [
+        { id: 123, price: 129900 },
+        { id: 456, price: 9900 },
+      ],
+    });
+    const compareSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          ...settings.experiments[0],
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                compareAt: { mode: "set", amount: "1499.00" },
+              },
+              {
+                variant_gid: "gid://shopify/ProductVariant/456",
+                compareAt: { mode: "set", amount: "149.00" },
+              },
+            ],
+          },
+        },
+      ],
+    };
+    document.body.innerHTML =
+      '<a href="/products/related-product"><span class="price">€99,00</span></a><div><span class="price">€1.299,00</span></div>';
+    applyCommercePrice(compareSettings, assignments);
+    expect(document.querySelector("[data-apex-compare-at]")).toBeNull();
+    cleanupCommercePrice();
+    history.replaceState({}, "", "?variant=123");
+    applyCommercePrice(compareSettings, assignments);
+    expect(document.querySelector("[data-apex-compare-at]")?.textContent).toBe(
+      "€1.499,00",
+    );
+  });
+
+  it.each([129900, "129900"])(
+    "matches zero-decimal displays against Shopify's stored price scale (%s)",
+    (storedPrice) => {
+      shopify("product", "JPY");
+      Object.assign((window as any).ShopifyAnalytics.meta.product, {
+        variants: [{ id: 123, price: storedPrice }],
+      });
+      const jpySettings: CommercePriceSettings = {
+        ...settings,
+        experiments: [
+          {
+            ...settings.experiments[0],
+            currency: "JPY",
+            variants: {
+              treatment: [
+                {
+                  variant_gid: "gid://shopify/ProductVariant/123",
+                  fixedPricePerUnit: "1149",
+                },
+              ],
+            },
+          },
+        ],
+      };
+      document.body.innerHTML = '<div class="price">¥1299</div>';
+
+      applyCommercePrice(jpySettings, assignments);
+
+      expect(document.querySelector(".price")?.textContent).toBe("¥1149");
+    },
+  );
+
+  it("keeps an accessible price label synchronized and restores it on cleanup", () => {
+    document.body.innerHTML =
+      '<div class="price" aria-label="Current price €1.299,00">€1.299,00</div>';
+    applyCommercePrice(settings, assignments);
+    const price = document.querySelector(".price");
+    expect(price?.textContent).toBe("€1.149,95");
+    expect(price?.getAttribute("aria-label")).toBe("Current price €1.149,95");
+    cleanupCommercePrice();
+    expect(price?.textContent).toBe("€1.299,00");
+    expect(price?.getAttribute("aria-label")).toBe("Current price €1.299,00");
+  });
+
+  it("excludes compare-at and strikethrough prices", () => {
+    document.body.innerHTML =
+      '<div class="price"><s>€1.299,00</s><span>€1.299,00</span></div><div class="price-item--compare">€1.299,00</div>';
+    applyCommercePrice(settings, assignments);
+    expect(document.querySelector("s")?.textContent).toBe("€1.299,00");
+    expect(document.querySelector("span")?.textContent).toBe("€1.149,95");
+    expect(document.querySelector(".price-item--compare")?.textContent).toBe(
+      "€1.299,00",
+    );
+  });
+
+  it("leaves another linked product untouched while swapping the unlinked PDP price", () => {
+    document.body.innerHTML = `
+      <link rel="canonical" href="https://shop.test/products/current-product">
+      <div class="price" data-main-price>€1.299,00</div>
+      <a href="/products/related-product"><div class="price" data-related-price>€1.299,00</div></a>
+    `;
+    applyCommercePrice(settings, assignments);
+    expect(document.querySelector("[data-main-price]")?.textContent).toBe(
+      "€1.149,95",
+    );
+    expect(document.querySelector("[data-related-price]")?.textContent).toBe(
+      "€1.299,00",
+    );
+  });
+
+  it("swaps the PDP price but not a cross-sell card under their shared ancestor", () => {
+    document.body.innerHTML = `
+      <main>
+        <div class="price" data-main-price>€1.299,00</div>
+        <article class="product-card">
+          <a href="/products/related-product">Related product</a>
+          <div class="price" data-card-price>€1.299,00</div>
+        </article>
+      </main>`;
+    applyCommercePrice(settings, assignments);
+    expect(document.querySelector("[data-main-price]")?.textContent).toBe(
+      "€1.149,95",
+    );
+    expect(document.querySelector("[data-card-price]")?.textContent).toBe(
+      "€1.299,00",
+    );
+  });
+
+  it("leaves a price wrapped by a cross-sell product link untouched", () => {
+    document.body.innerHTML = `
+      <div class="price" data-main-price>€1.299,00</div>
+      <a href="/products/related-product"><span class="price" data-card-price>€1.299,00</span></a>`;
+    applyCommercePrice(settings, assignments);
+    expect(document.querySelector("[data-main-price]")?.textContent).toBe(
+      "€1.149,95",
+    );
+    expect(document.querySelector("[data-card-price]")?.textContent).toBe(
+      "€1.299,00",
+    );
+  });
+
+  it("is inert on currency mismatch, missing assignment/meta, or non-product pages", () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    shopify("product", "USD");
+    expect(isCommercePriceActive(settings, assignments)).toBe(false);
+    applyCommercePrice(settings, assignments);
+    expect(document.body.textContent).toContain("€1.299,00");
+    shopify();
+    expect(isCommercePriceActive(settings, [])).toBe(false);
+    expect(
+      isCommercePriceActive(settings, [
+        { ...assignments[0], variationId: "control" },
+      ]),
+    ).toBe(false);
+    expect(
+      isCommercePriceActive(settings, [{ ...assignments[0], isControl: true }]),
+    ).toBe(false);
+    shopify("product", "EUR", false);
+    expect(isCommercePriceActive(settings, assignments)).toBe(false);
+    Object.assign(window, {
+      ShopifyAnalytics: { meta: { page: { pageType: "product" } } },
+    });
+    expect(isCommercePriceActive(settings, assignments)).toBe(false);
+    shopify("collection");
+    expect(isCommercePriceActive(settings, assignments)).toBe(false);
+  });
+
+  it("fails closed when the storefront assignment epoch differs from the price plane", () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+
+    expect(
+      isCommercePriceActive(settings, [
+        { ...assignments[0], assignmentEpoch: 2 },
+      ]),
+    ).toBe(false);
+    applyCommercePrice(settings, [{ ...assignments[0], assignmentEpoch: 2 }]);
+
+    expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+    expect(
+      isCommercePriceWorkPending(settings, [
+        { ...assignments[0], assignmentEpoch: 2 },
+      ]),
+    ).toBe(false);
+  });
+
+  it("keeps legacy price planes without an epoch compatible during rollout", () => {
+    const legacySettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        { ...settings.experiments[0], assignment_epoch: undefined },
+      ],
+    };
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+
+    applyCommercePrice(legacySettings, assignments);
+
+    expect(document.querySelector(".price")?.textContent).toBe("€1.149,95");
+  });
+
+  it("selects the assigned experiment that actually targets the current product", () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    const multiProductSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          experiment_id: "exp_other_product",
+          currency: "EUR",
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/999",
+                fixedPricePerUnit: "9.99",
+              },
+            ],
+          },
+        },
+        settings.experiments[0],
+      ],
+    };
+    const multiAssignments = [
+      { ...assignments[0], experimentId: "exp_other_product" },
+      assignments[0],
+    ];
+    applyCommercePrice(multiProductSettings, multiAssignments);
+    expect(document.querySelector(".price")?.textContent).toBe("€1.149,95");
+  });
+
+  it("displays the lowest authorized match when price experiments collide", () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    const collisionSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          experiment_id: "exp_higher_price",
+          assignment_epoch: 1,
+          currency: "EUR",
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                fixedPricePerUnit: "1199.95",
+              },
+            ],
+          },
+        },
+        {
+          experiment_id: "exp_lower_price",
+          assignment_epoch: 1,
+          currency: "EUR",
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                fixedPricePerUnit: "1099.95",
+              },
+            ],
+          },
+        },
+      ],
+    };
+    const collisionAssignments = [
+      { ...assignments[0], experimentId: "exp_higher_price" },
+      { ...assignments[0], experimentId: "exp_lower_price" },
+    ];
+
+    applyCommercePrice(collisionSettings, collisionAssignments);
+
+    expect(document.querySelector(".price")?.textContent).toBe("€1.099,95");
+  });
+
+  it("fails closed for equal, higher, over-precise, or unsafe treatment prices", () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    for (const fixedPricePerUnit of [
+      "1299.00",
+      "1399.00",
+      "1149.951",
+      "999999999999999999.00",
+    ]) {
+      const invalidSettings: CommercePriceSettings = {
+        ...settings,
+        experiments: [
+          {
+            ...settings.experiments[0],
+            variants: {
+              treatment: [
+                {
+                  variant_gid: "gid://shopify/ProductVariant/123",
+                  fixedPricePerUnit,
+                },
+              ],
+            },
+          },
+        ],
+      };
+      applyCommercePrice(invalidSettings, assignments);
+      expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+    }
+  });
+
+  it("fails closed when Shopify publishes a non-integer or unsafe minor-unit price", () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    for (const price of [129900.5, Number.MAX_SAFE_INTEGER + 1]) {
+      Object.assign((window as any).ShopifyAnalytics.meta.product, {
+        variants: [{ id: 123, price }],
+      });
+      applyCommercePrice(settings, assignments);
+      expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+    }
+  });
+
+  it("re-swaps a theme-rendered price after a variant update", async () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    applyCommercePrice(settings, assignments);
+    document.querySelector(".price")!.textContent = "€1.299,00";
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(document.querySelector(".price")?.textContent).toBe("€1.149,95");
+  });
+
+  it("drops conflicting targets for a shared source price but keeps identical targets", () => {
+    shopify();
+    Object.assign((window as any).ShopifyAnalytics.meta.product, {
+      variants: [
+        { id: 123, price: 129900 },
+        { id: 456, price: 129900 },
+      ],
+    });
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    const ambiguousSettings: CommercePriceSettings = {
+      ...settings,
+      experiments: [
+        {
+          ...settings.experiments[0],
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                fixedPricePerUnit: "1149.95",
+              },
+              {
+                variant_gid: "gid://shopify/ProductVariant/456",
+                fixedPricePerUnit: "1099.95",
+              },
+            ],
+          },
+        },
+      ],
+    };
+    applyCommercePrice(ambiguousSettings, assignments);
+    expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+
+    const equalSettings: CommercePriceSettings = {
+      ...ambiguousSettings,
+      experiments: [
+        {
+          ...ambiguousSettings.experiments[0],
+          variants: {
+            treatment: [
+              {
+                variant_gid: "gid://shopify/ProductVariant/123",
+                fixedPricePerUnit: "1149.95",
+              },
+              {
+                variant_gid: "gid://shopify/ProductVariant/456",
+                fixedPricePerUnit: "1149.95",
+              },
+            ],
+          },
+        },
+      ],
+    };
+    applyCommercePrice(equalSettings, assignments);
+    expect(document.querySelector(".price")?.textContent).toBe("€1.149,95");
+  });
+
+  it("swaps a matching price block mounted after the initial pass", async () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    applyCommercePrice(settings, assignments);
+    document.body.insertAdjacentHTML(
+      "beforeend",
+      '<aside class="sticky-atc"><div class="product-price">€1.299,00</div></aside>',
+    );
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(
+      document.querySelector(".sticky-atc .product-price")?.textContent,
+    ).toBe("€1.149,95");
+  });
+
+  it("cleans up and stops observing when an observer-triggered pass throws", async () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    applyCommercePrice(settings, assignments);
+    const price = document.querySelector(".price")!;
+    const createTreeWalker = document.createTreeWalker.bind(document);
+    document.createTreeWalker = (() => {
+      throw new Error("malformed price convention");
+    }) as typeof document.createTreeWalker;
+    price.textContent = "€1.299,00";
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    document.createTreeWalker = createTreeWalker;
+
+    price.textContent = "€1.299,00";
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(price.textContent).toBe("€1.299,00");
+  });
+
+  it("restores original text on cleanup", () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    applyCommercePrice(settings, assignments);
+    cleanupCommercePrice();
+    expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+  });
+
+  it("keeps the published price when a pending cohort stamp fails", async () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    let stamp: boolean | "pending" = "pending";
+    applyCommercePrice(settings, assignments, () => stamp);
+    expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+
+    stamp = false;
+    await new Promise((resolve) => setTimeout(resolve, 30));
+
+    expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+  });
+
+  it("does not swap when the cohort stamp is impossible from the start", () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    applyCommercePrice(settings, assignments, () => false);
+    expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+  });
+
+  it("keeps the swap when a pending cohort stamp becomes confirmed", async () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    let stamp: boolean | "pending" = "pending";
+    applyCommercePrice(settings, assignments, () => stamp);
+    expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+    stamp = true;
+    await new Promise((resolve) => setTimeout(resolve, 30));
+    expect(document.querySelector(".price")?.textContent).toBe("€1.149,95");
+  });
+
+  it("restores the latest theme-rendered source price after a variant update", async () => {
+    document.body.innerHTML = '<div class="price">€1.299,00</div>';
+    applyCommercePrice(settings, assignments);
+    const price = document.querySelector(".price")!;
+    Object.assign((window as any).ShopifyAnalytics.meta.product.variants[0], {
+      price: 139900,
+    });
+    price.textContent = "€1.399,00";
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    cleanupCommercePrice();
+    expect(price.textContent).toBe("€1.399,00");
+  });
+
+  it("retries activation until Shopify publishes product metadata, then swaps", async () => {
+    // Measured on a live storefront: the SDK boots at ~43ms but Shopify has not yet
+    // populated ShopifyAnalytics.meta.product. Activation must survive that window.
+    vi.useFakeTimers();
+    try {
+      shopify("product", "EUR", false);
+      document.body.innerHTML = '<div class="price">€1.299,00</div>';
+
+      applyCommercePrice(settings, assignments);
+      expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+
+      shopify();
+      await vi.advanceTimersByTimeAsync(200);
+
+      expect(document.querySelector(".price")?.textContent).toBe("€1.149,95");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("does not retry when the page can never become eligible", async () => {
+    vi.useFakeTimers();
+    try {
+      shopify("collection");
+      document.body.innerHTML = '<div class="price">€1.299,00</div>';
+      const timer = vi.spyOn(globalThis, "setTimeout");
+
+      applyCommercePrice(settings, assignments);
+      await vi.advanceTimersByTimeAsync(6000);
+
+      expect(timer).not.toHaveBeenCalled();
+      expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+      timer.mockRestore();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("stops a pending activation retry on cleanup", async () => {
+    vi.useFakeTimers();
+    try {
+      shopify("product", "EUR", false);
+      document.body.innerHTML = '<div class="price">€1.299,00</div>';
+
+      applyCommercePrice(settings, assignments);
+      cleanupCommercePrice();
+      shopify();
+      await vi.advanceTimersByTimeAsync(1000);
+
+      expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("fails closed when the cohort stamp never confirms", async () => {
+    vi.useFakeTimers();
+    try {
+      document.body.innerHTML = '<div class="price">€1.299,00</div>';
+      // stamp stays "pending" forever (e.g. the cart sync request never resolves)
+      applyCommercePrice(settings, assignments, () => "pending");
+      expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+
+      await vi.advanceTimersByTimeAsync(9000);
+
+      // a price we cannot prove Shopify will charge must not stay on screen
+      expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+    } finally {
+      cleanupCommercePrice();
+      vi.useRealTimers();
+    }
+  });
+
+  it("applies the treatment after a cart stamp confirms beyond the reveal timeout", async () => {
+    vi.useFakeTimers();
+    try {
+      document.body.innerHTML = '<div class="price">€1.299,00</div>';
+      let stamp: boolean | "pending" = "pending";
+      applyCommercePrice(settings, assignments, () => stamp);
+
+      await vi.advanceTimersByTimeAsync(9000);
+      expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+
+      stamp = true;
+      notifyCommerceCartStampConfirmed();
+      expect(document.querySelector(".price")?.textContent).toBe("€1.149,95");
+    } finally {
+      cleanupCommercePrice();
+      vi.useRealTimers();
+    }
+  });
+
+  it("reports pending price work while Shopify metadata is still missing", () => {
+    // The reveal barrier uses this: a metadata-late PDP must keep content hidden
+    // until the swap lands, instead of flashing the original price.
+    shopify("product", "EUR", false);
+    expect(isCommercePriceWorkPending(settings, assignments)).toBe(true);
+
+    shopify();
+    expect(isCommercePriceWorkPending(settings, assignments)).toBe(true);
+  });
+
+  it("reports no pending price work for a control visitor or a non-product page", () => {
+    shopify("collection");
+    expect(isCommercePriceWorkPending(settings, assignments)).toBe(false);
+
+    shopify();
+    const control = [
+      { ...assignments[0], isControl: true },
+    ] as typeof assignments;
+    expect(isCommercePriceWorkPending(settings, control)).toBe(false);
+  });
+});