@drip-apex/sdk 0.1.0

package/src/commerce-revocation-lifecycle.test.ts

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  commerceAssignmentResponseFixture,
+  commercePriceFixture as commerce,
+  installCommerceProductPage,
+  priceExperimentsFixture as experiments,
+} from "./test-fixtures/commerce";
+
+describe("commerce authorization revocation lifecycle", () => {
+  const originalFetch = globalThis.fetch;
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.resetModules();
+    localStorage.clear();
+    sessionStorage.clear();
+    installCommerceProductPage();
+    fetchMock = vi.fn(async (input: RequestInfo | URL) =>
+      String(input).endsWith("/cart.js")
+        ? Response.json({ token: "cart-runtime?key=runtime-secret" })
+        : String(input).includes("/v1/assign")
+        ? Response.json(commerceAssignmentResponseFixture)
+        : new Response("ok", { status: 202 }));
+    globalThis.fetch = fetchMock as typeof fetch;
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    globalThis.fetch = originalFetch;
+    document.head.innerHTML = "";
+    document.body.innerHTML = "";
+  });
+
+  it("reverts the active price display when forced cart reauthorization fails", async () => {
+    const { getDiagnostics, init } = await import("./index");
+    init({
+      antiFlickerMode: "off",
+      commerce,
+      endpoint: "https://events.test",
+      experiments,
+      ingestSignature: "ingest-token",
+      shopId: "shop_123",
+      trackingStart: "immediate",
+    });
+    const authorizationCalls = () => fetchMock.mock.calls
+      .filter(([url]) => String(url).includes("/v1/assign"));
+    await vi.waitFor(() => {
+      expect(document.querySelector(".price")?.textContent).toBe("€1.149,95");
+      expect(getDiagnostics().spa.lastShopifyCartSync?.status).toBe("sent");
+    });
+    const authorizationsBeforeAdd = authorizationCalls().length;
+
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.endsWith("/cart.js")) {
+        return Response.json({ token: "rotated-cart?key=rotated-secret" });
+      }
+      if (url.includes("/v1/assign")) {
+        return new Response("unavailable", { status: 503 });
+      }
+      return new Response("ok", { status: 202 });
+    });
+
+    await window.fetch("/cart/add.js", { method: "POST" });
+    await vi.waitFor(() => {
+      expect(authorizationCalls()).toHaveLength(authorizationsBeforeAdd + 1);
+      expect(getDiagnostics().spa.lastShopifyCartSync).toMatchObject({
+        status: "failed",
+        reason: "authorization_failed",
+      });
+      expect(document.querySelector(".price")?.textContent).toBe("€1.299,00");
+    });
+  });
+});

package/src/commerce-shipping.test.ts

@@ -0,0 +1,630 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  applyCommerceShipping,
+  cleanupCommerceShipping,
+  isShippingCartEligibilityConfirmed,
+} from "./commerce-shipping";
+import type { Assignment, CommerceShippingSettings } from "./types";
+
+const assignments = [
+  {
+    experimentId: "exp_shipping",
+    variationId: "treatment",
+    assignmentEpoch: 1,
+    mutations: [],
+    index: 1,
+  },
+] as Assignment[];
+
+function settings(
+  treatment: "progress_bar" | "banner" | "none" = "progress_bar",
+  copy = "Only {remaining} until free shipping ({threshold})",
+): CommerceShippingSettings {
+  return {
+    experiments: [
+      {
+        experiment_id: "exp_shipping",
+        assignment_epoch: 1,
+        currency: "EUR",
+        variants: {
+          treatment: {
+            threshold: "50.00",
+            treatment,
+            progressCopy: copy,
+            reachedCopy: "Free shipping reached at {threshold}",
+          },
+        },
+      },
+    ],
+  };
+}
+
+function flush() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+describe("commerce shipping messaging", () => {
+  it("ignores stale cart responses before mutating target eligibility", async () => {
+    const targeted = settings();
+    targeted.experiments[0].variants.treatment.target = {
+      productGids: ["gid://shopify/Product/42"],
+      variantGids: [],
+    };
+    let resolveFirst!: (response: Response) => void;
+    let resolveSecond!: (response: Response) => void;
+    let cartReads = 0;
+    vi.stubGlobal("AbortController", undefined);
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) => {
+      if (String(input) !== "/cart.js") return new Response("mutation");
+      cartReads += 1;
+      return new Promise<Response>((resolve) => {
+        if (cartReads === 1) resolveFirst = resolve;
+        else resolveSecond = resolve;
+      });
+    });
+
+    applyCommerceShipping(targeted, assignments);
+    await vi.waitFor(() => expect(cartReads).toBe(1));
+    await window.fetch("/cart/update.js", { method: "POST" });
+    await vi.waitFor(() => expect(cartReads).toBe(2));
+    resolveSecond(
+      Response.json({
+        currency: "EUR",
+        items_subtotal_price: 2500,
+        items: [{ product_id: 42, variant_id: 7 }],
+      }),
+    );
+    await vi.waitFor(() =>
+      expect(isShippingCartEligibilityConfirmed("exp_shipping")).toBe(true),
+    );
+    resolveFirst(
+      Response.json({
+        currency: "EUR",
+        items_subtotal_price: 2500,
+        items: [],
+      }),
+    );
+    await flush();
+    expect(isShippingCartEligibilityConfirmed("exp_shipping")).toBe(true);
+  });
+
+  it("notifies once when a later targeted-cart read first confirms eligibility", async () => {
+    const targeted = settings();
+    targeted.experiments[0].variants.treatment.target = {
+      productGids: ["gid://shopify/Product/42"],
+      variantGids: [],
+    };
+    const confirmed = vi.fn();
+    let cartReads = 0;
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) => {
+      if (String(input) !== "/cart.js") return new Response("ok");
+      cartReads += 1;
+      return Response.json({
+        currency: "EUR",
+        items_subtotal_price: 2500,
+        items: cartReads === 1 ? [] : [{ product_id: 42, variant_id: 7 }],
+      });
+    });
+
+    applyCommerceShipping(targeted, assignments, confirmed);
+    await vi.waitFor(() => expect(cartReads).toBe(1));
+    expect(confirmed).not.toHaveBeenCalled();
+    await window.fetch("/cart/update.js", { method: "POST" });
+    await vi.waitFor(() => expect(confirmed).toHaveBeenCalledTimes(1));
+  });
+
+  it("confirms targeted eligibility when optional thresholdless copy is empty", async () => {
+    const targeted = settings();
+    targeted.experiments[0].variants.treatment = {
+      ...targeted.experiments[0].variants.treatment,
+      threshold: null,
+      treatment: "flat_rate",
+      bannerCopy: "",
+      target: {
+        productGids: ["gid://shopify/Product/42"],
+        variantGids: [],
+      },
+    };
+    const confirmed = vi.fn();
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) =>
+      String(input) === "/cart.js"
+        ? Response.json({
+            currency: "EUR",
+            items_subtotal_price: 2500,
+            items: [{ product_id: 42, variant_id: 7 }],
+          })
+        : new Response("mutation", { status: 200 }),
+    );
+
+    applyCommerceShipping(targeted, assignments, confirmed);
+    await vi.waitFor(() => expect(confirmed).toHaveBeenCalledTimes(1));
+    expect(document.querySelector("[data-apex-shipping]")).toBeNull();
+  });
+
+  it("confirms cross-currency thresholdless percentage eligibility but fences currency-bound arms", async () => {
+    (window as any).Shopify.currency.active = "USD";
+    cartCurrency = "USD";
+    const crossCurrency = settings("banner");
+    crossCurrency.experiments[0].variants.treatment = {
+      ...crossCurrency.experiments[0].variants.treatment,
+      threshold: null,
+      treatment: "percent_off",
+      bannerCopy: "Shipping offer active",
+      target: {
+        productGids: ["gid://shopify/Product/42"],
+        variantGids: [],
+      },
+    };
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) =>
+      String(input) === "/cart.js"
+        ? Response.json({
+            currency: "USD",
+            items_subtotal_price: 2500,
+            items: [{ product_id: 42, variant_id: 7 }],
+          })
+        : new Response("mutation", { status: 200 }),
+    );
+
+    applyCommerceShipping(crossCurrency, assignments);
+    await vi.waitFor(() =>
+      expect(isShippingCartEligibilityConfirmed("exp_shipping")).toBe(true),
+    );
+    expect(
+      document.querySelector("[data-apex-shipping]")?.textContent,
+    ).toContain("Shipping offer active");
+
+    for (const currencyBound of [
+      { treatment: "percent_off" as const, threshold: "50.00" },
+      { treatment: "flat_rate" as const, threshold: null },
+    ]) {
+      cleanupCommerceShipping();
+      fetchMock.mockClear();
+      const fenced = settings("banner");
+      fenced.experiments[0].variants.treatment = {
+        ...fenced.experiments[0].variants.treatment,
+        ...currencyBound,
+      };
+      applyCommerceShipping(fenced, assignments);
+      await flush();
+      expect(fetchMock).not.toHaveBeenCalled();
+      expect(isShippingCartEligibilityConfirmed("exp_shipping")).toBe(false);
+    }
+  });
+  let subtotal: number;
+  let cartCurrency: string;
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    subtotal = 2500;
+    cartCurrency = "EUR";
+    Object.assign(window, {
+      Shopify: { currency: { active: "EUR" }, routes: { root: "/" } },
+    });
+    fetchMock = vi.fn(async (input: RequestInfo | URL) => {
+      const path = String(input);
+      return path === "/cart.js"
+        ? Response.json({
+            currency: cartCurrency,
+            items_subtotal_price: subtotal,
+          })
+        : new Response("mutation", { status: 200 });
+    });
+    vi.stubGlobal("fetch", fetchMock);
+  });
+
+  afterEach(() => {
+    cleanupCommerceShipping();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    delete (window as any).Shopify;
+  });
+
+  it("renders scoped shipping messaging only when a targeted cart line is present", async () => {
+    const scoped = settings();
+    scoped.experiments[0]!.variants.treatment!.target = {
+      productGids: ["gid://shopify/Product/123"],
+      variantGids: [],
+    };
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) =>
+      String(input) === "/cart.js"
+        ? Response.json({
+            currency: cartCurrency,
+            items_subtotal_price: subtotal,
+            items: [{ product_id: 999, variant_id: 1000 }],
+          })
+        : new Response("mutation", { status: 200 }),
+    );
+    applyCommerceShipping(scoped, assignments);
+    await flush();
+    expect(document.querySelector("[data-apex-shipping]")).toBeNull();
+
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) =>
+      String(input) === "/cart.js"
+        ? Response.json({
+            currency: cartCurrency,
+            items_subtotal_price: subtotal,
+            items: [{ product_id: 123, variant_id: 456 }],
+          })
+        : new Response("mutation", { status: 200 }),
+    );
+    await window.fetch("/cart/change.js", { method: "POST" });
+    await flush();
+    expect(document.querySelector("[data-apex-shipping]")).not.toBeNull();
+
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) =>
+      String(input) === "/cart.js"
+        ? Response.json({
+            currency: cartCurrency,
+            items_subtotal_price: subtotal,
+            items: [{ product_id: 999, variant_id: 1000 }],
+          })
+        : new Response("mutation", { status: 200 }),
+    );
+    await window.fetch("/cart/change.js", { method: "POST" });
+    await flush();
+    expect(document.querySelector("[data-apex-shipping]")).toBeNull();
+    document.body.append(document.createElement("div"));
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(document.querySelector("[data-apex-shipping]")).toBeNull();
+  });
+
+  it("renders formatted progress, reaches the final copy, and clamps the fill", async () => {
+    applyCommerceShipping(settings(), assignments);
+    await flush();
+    const expectedRemaining = new Intl.NumberFormat(undefined, {
+      style: "currency",
+      currency: "EUR",
+    }).format(25);
+    const expectedThreshold = new Intl.NumberFormat(undefined, {
+      style: "currency",
+      currency: "EUR",
+    }).format(50);
+    expect(
+      document.querySelector("[data-apex-shipping]")?.textContent,
+    ).toContain(
+      `Only ${expectedRemaining} until free shipping (${expectedThreshold})`,
+    );
+    expect(
+      (document.querySelector("[data-apex-shipping] div div") as HTMLElement)
+        .style.width,
+    ).toBe("50%");
+    const wrapper = document.querySelector("[data-apex-shipping]")!;
+    expect(wrapper.getAttribute("role")).toBe("status");
+    expect(wrapper.getAttribute("aria-live")).toBe("polite");
+    expect(
+      wrapper
+        .querySelector('[role="progressbar"]')
+        ?.getAttribute("aria-valuenow"),
+    ).toBe("50");
+
+    subtotal = 7500;
+    await window.fetch("/cart/change.js", { method: "POST" });
+    await flush();
+    expect(
+      document.querySelector("[data-apex-shipping]")?.textContent,
+    ).toContain(`Free shipping reached at ${expectedThreshold}`);
+    expect(
+      (document.querySelector("[data-apex-shipping] div div") as HTMLElement)
+        .style.width,
+    ).toBe("100%");
+  });
+
+  it("uses Shopify's locale root for cart reads and mutation refreshes", async () => {
+    (window as any).Shopify.routes.root = "/fr/";
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) =>
+      String(input) === "/fr/cart.js"
+        ? Response.json({ currency: "EUR", items_subtotal_price: subtotal })
+        : new Response("mutation", { status: 200 }),
+    );
+    applyCommerceShipping(settings(), assignments);
+    await flush();
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/fr/cart.js",
+      expect.objectContaining({ headers: { Accept: "application/json" } }),
+    );
+
+    subtotal = 5000;
+    await window.fetch("/fr/cart/change.js", { method: "POST" });
+    await flush();
+    expect(
+      fetchMock.mock.calls.filter(([url]) => url === "/fr/cart.js"),
+    ).toHaveLength(2);
+    expect(
+      document.querySelector("[data-apex-shipping]")?.textContent,
+    ).toContain("Free shipping reached");
+
+    await window.fetch("/cart/change.js", { method: "POST" });
+    await flush();
+    expect(
+      fetchMock.mock.calls.filter(([url]) => url === "/fr/cart.js"),
+    ).toHaveLength(2);
+  });
+
+  it("uses each currency's standard minor-unit precision", async () => {
+    const jpy = settings();
+    jpy.experiments[0].currency = "JPY";
+    jpy.experiments[0].variants.treatment.threshold = "5000";
+    (window as any).Shopify.currency.active = "JPY";
+    cartCurrency = "JPY";
+    applyCommerceShipping(jpy, assignments);
+    await flush();
+    expect(
+      (document.querySelector("[data-apex-shipping] div div") as HTMLElement)
+        .style.width,
+    ).toBe("50%");
+    expect(
+      document.querySelector("[data-apex-shipping]")?.textContent,
+    ).toContain(
+      new Intl.NumberFormat(undefined, {
+        style: "currency",
+        currency: "JPY",
+      }).format(2500),
+    );
+
+    cleanupCommerceShipping();
+    const kwd = settings();
+    kwd.experiments[0].currency = "KWD";
+    kwd.experiments[0].variants.treatment.threshold = "50.125";
+    (window as any).Shopify.currency.active = "KWD";
+    cartCurrency = "KWD";
+    subtotal = 25_063;
+    applyCommerceShipping(kwd, assignments);
+    await flush();
+    expect(
+      document.querySelector("[data-apex-shipping]")?.textContent,
+    ).toContain(
+      new Intl.NumberFormat(undefined, {
+        style: "currency",
+        currency: "KWD",
+      }).format(50.125),
+    );
+  });
+
+  it("renders banner copy without a progress track", async () => {
+    applyCommerceShipping(settings("banner", "Spend {remaining}"), assignments);
+    await flush();
+    const wrapper = document.querySelector("[data-apex-shipping]")!;
+    expect(wrapper.textContent).toContain("Spend");
+    expect(wrapper.children).toHaveLength(1);
+  });
+
+  it("keeps messaging fail-soft when AbortController is unavailable", async () => {
+    vi.stubGlobal("AbortController", undefined);
+    applyCommerceShipping(settings("banner"), assignments);
+    await flush();
+    expect(
+      document.querySelector("[data-apex-shipping]")?.textContent,
+    ).toContain("Only");
+  });
+
+  it("is inert for currency mismatch and none treatments", async () => {
+    (window as any).Shopify.currency.active = "USD";
+    applyCommerceShipping(settings(), assignments);
+    await flush();
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(document.querySelector("[data-apex-shipping]")).toBeNull();
+
+    (window as any).Shopify.currency.active = "EUR";
+    applyCommerceShipping(settings("none"), assignments);
+    await flush();
+    expect(fetchMock).not.toHaveBeenCalled();
+
+    // A control assignment now reads the cart once to confirm exposure
+    // eligibility (currency/target parity with its treatment sibling), but
+    // still renders nothing.
+    applyCommerceShipping(settings(), [{ ...assignments[0], isControl: true }]);
+    await flush();
+    expect(document.querySelector("[data-apex-shipping]")).toBeNull();
+  });
+
+  it("fails closed when the storefront assignment epoch differs from the shipping plane", async () => {
+    applyCommerceShipping(settings(), [
+      { ...assignments[0], assignmentEpoch: 2 },
+    ]);
+    await flush();
+
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(document.querySelector("[data-apex-shipping]")).toBeNull();
+  });
+
+  it("keeps legacy shipping planes without an epoch compatible during rollout", async () => {
+    const legacy = settings();
+    legacy.experiments[0].assignment_epoch = undefined;
+
+    applyCommerceShipping(legacy, assignments);
+    await flush();
+
+    expect(document.querySelector("[data-apex-shipping]")).not.toBeNull();
+  });
+
+  it("fails closed for cart-currency drift and invalid cart subtotals", async () => {
+    cartCurrency = "USD";
+    applyCommerceShipping(settings(), assignments);
+    await flush();
+    expect(document.querySelector("[data-apex-shipping]")).toBeNull();
+
+    cartCurrency = "EUR";
+    for (const invalidSubtotal of [-1, 12.5, Number.MAX_SAFE_INTEGER + 1]) {
+      subtotal = invalidSubtotal;
+      applyCommerceShipping(settings(), assignments);
+      await flush();
+      expect(document.querySelector("[data-apex-shipping]")).toBeNull();
+    }
+  });
+
+  it("fails closed for unsafe thresholds or multiple active shipping assignments", async () => {
+    const unsafe = settings();
+    unsafe.experiments[0].variants.treatment.threshold = "999999999999999.99";
+    applyCommerceShipping(unsafe, assignments);
+    await flush();
+    expect(fetchMock).not.toHaveBeenCalled();
+
+    const invalidJpy = settings();
+    invalidJpy.experiments[0].currency = "JPY";
+    invalidJpy.experiments[0].variants.treatment.threshold = "50.01";
+    (window as any).Shopify.currency.active = "JPY";
+    applyCommerceShipping(invalidJpy, assignments);
+    await flush();
+    expect(fetchMock).not.toHaveBeenCalled();
+
+    const ambiguous = settings();
+    ambiguous.experiments.push({
+      ...ambiguous.experiments[0],
+      experiment_id: "exp_shipping_2",
+    });
+    applyCommerceShipping(ambiguous, [
+      assignments[0],
+      { ...assignments[0], experimentId: "exp_shipping_2" },
+    ]);
+    await flush();
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it("prepends to a drawer candidate and otherwise uses a fixed banner", async () => {
+    document.body.innerHTML = "<cart-drawer><p>Cart</p></cart-drawer>";
+    applyCommerceShipping(settings("banner"), assignments);
+    await flush();
+    expect(document.querySelector("cart-drawer")?.firstElementChild).toBe(
+      document.querySelector("[data-apex-shipping]"),
+    );
+
+    cleanupCommerceShipping();
+    document.body.innerHTML = "";
+    applyCommerceShipping(settings("banner"), assignments);
+    await flush();
+    expect(
+      (document.querySelector("[data-apex-shipping]") as HTMLElement).style
+        .position,
+    ).toBe("fixed");
+  });
+
+  it("re-reads after cart mutations without replacing their response", async () => {
+    applyCommerceShipping(settings(), assignments);
+    await flush();
+    subtotal = 5000;
+    const response = await window.fetch("/cart/add.js", { method: "POST" });
+    expect(await response.text()).toBe("mutation");
+    await flush();
+    expect(
+      fetchMock.mock.calls.filter(([url]) => url === "/cart.js"),
+    ).toHaveLength(2);
+    expect(
+      document.querySelector("[data-apex-shipping]")?.textContent,
+    ).toContain("Free shipping reached");
+  });
+
+  it("ignores an older cart read that resolves after a mutation refresh", async () => {
+    let cartReads = 0;
+    let resolveOld: ((response: Response) => void) | undefined;
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) => {
+      if (String(input) !== "/cart.js") {
+        return new Response("mutation", { status: 200 });
+      }
+      cartReads += 1;
+      if (cartReads === 1) {
+        return new Promise<Response>((resolve) => {
+          resolveOld = resolve;
+        });
+      }
+      return Response.json({ currency: "EUR", items_subtotal_price: 5000 });
+    });
+    applyCommerceShipping(settings(), assignments);
+    await window.fetch("/cart/change.js", { method: "POST" });
+    await flush();
+    expect(
+      document.querySelector("[data-apex-shipping]")?.textContent,
+    ).toContain("Free shipping reached");
+
+    resolveOld?.(
+      Response.json({ currency: "EUR", items_subtotal_price: 2500 }),
+    );
+    await flush();
+    expect(
+      document.querySelector("[data-apex-shipping]")?.textContent,
+    ).toContain("Free shipping reached");
+  });
+
+  it("restores the original fetch and removes its element on cleanup", async () => {
+    const original = window.fetch;
+    applyCommerceShipping(settings(), assignments);
+    expect(window.fetch).not.toBe(original);
+    await flush();
+    cleanupCommerceShipping();
+    expect(window.fetch).toBe(original);
+    expect(document.querySelector("[data-apex-shipping]")).toBeNull();
+  });
+
+  it("does not clobber a fetch wrapper installed after Apex", () => {
+    applyCommerceShipping(settings(), assignments);
+    const apexFetch = window.fetch;
+    const laterWrapper = vi.fn((...args: Parameters<typeof fetch>) =>
+      apexFetch(...args),
+    );
+    window.fetch = laterWrapper;
+    cleanupCommerceShipping();
+    expect(window.fetch).toBe(laterWrapper);
+  });
+
+  it("remains additive when AbortController is unavailable", async () => {
+    vi.stubGlobal("AbortController", undefined);
+    applyCommerceShipping(settings(), assignments);
+    await flush();
+    expect(document.querySelector("[data-apex-shipping]")).not.toBeNull();
+  });
+
+  it("renders merchant markup as text only", async () => {
+    applyCommerceShipping(
+      settings("banner", "<img src=x onerror=alert(1)> {remaining}"),
+      assignments,
+    );
+    await flush();
+    const wrapper = document.querySelector("[data-apex-shipping]")!;
+    expect(wrapper.textContent).toContain("<img src=x onerror=alert(1)>");
+    expect(wrapper.querySelector("img")).toBeNull();
+  });
+
+  it("re-reads the cart when the shared drawer detector observes an open", async () => {
+    vi.useFakeTimers();
+    document.body.innerHTML = '<cart-drawer aria-hidden="true"></cart-drawer>';
+    const drawer = document.querySelector("cart-drawer") as HTMLElement;
+    drawer.getBoundingClientRect = () => ({
+      width: 300,
+      height: 500,
+      top: 0,
+      right: 300,
+      bottom: 500,
+      left: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    applyCommerceShipping(settings(), assignments);
+    await Promise.resolve();
+    drawer.setAttribute("aria-hidden", "false");
+    await Promise.resolve();
+    vi.advanceTimersByTime(80);
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(
+      fetchMock.mock.calls.filter(([url]) => url === "/cart.js").length,
+    ).toBeGreaterThanOrEqual(2);
+  });
+
+  it("reinstalls the message when a theme replaces the cart drawer", async () => {
+    document.body.innerHTML = "<cart-drawer></cart-drawer>";
+    applyCommerceShipping(settings("banner"), assignments);
+    await flush();
+    document.querySelector("cart-drawer")?.remove();
+    document.body.insertAdjacentHTML(
+      "beforeend",
+      "<cart-drawer data-replaced></cart-drawer>",
+    );
+    await new Promise((resolve) => setTimeout(resolve, 90));
+    expect(
+      document.querySelector("cart-drawer[data-replaced] [data-apex-shipping]"),
+    ).not.toBeNull();
+    expect(document.querySelectorAll("[data-apex-shipping]")).toHaveLength(1);
+  });
+});