@snowcone-app/ui 0.9.2 → 0.9.4

package/src/patterns/__tests__/RealtimeProvider.cropDelivery.test.tsx

@@ -40,11 +40,17 @@ const h = vi.hoisted(() => {
     disconnect: vi.fn(),
     flushPendingBlobs: vi.fn(),
     hasPendingBlobs: vi.fn(() => false),
+    getLastSentVersion: vi.fn(() => 0),
+    getLatestSentVersions: vi.fn(() => ({})),
+    rerender: vi.fn((_ids: string[]) => true),
+    opts: null as null | { onError?: (msg: string, detail: Record<string, unknown>) => void },
   };
 });
 
 vi.mock("@snowcone-app/sdk/react", () => ({
-  useRealtimeMockup: () => ({
+  useRealtimeMockup: (opts: unknown) => {
+    h.opts = opts as typeof h.opts;
+    return {
     isConnected: true,
     isConfigured: true,
     renderError: null,
@@ -59,7 +65,11 @@ vi.mock("@snowcone-app/sdk/react", () => ({
     disconnect: h.disconnect,
     flushPendingBlobs: h.flushPendingBlobs,
     hasPendingBlobs: h.hasPendingBlobs,
-  }),
+    getLastSentVersion: h.getLastSentVersion,
+    getLatestSentVersions: h.getLatestSentVersions,
+    rerender: h.rerender,
+  };
+  },
 }));
 
 vi.mock("@snowcone-app/sdk", () => ({
@@ -124,6 +134,23 @@ function sentConfigs(): Array<Record<string, unknown>> {
 
 let blobCounter = 0;
 
+/**
+ * The box's rule (rendercenter realtime.ts renderFingerprint): a config
+ * re-renders only when its render fingerprint changes — overlayCrop is NOT in
+ * it and mockupIds are SORTED. Returns the mockup sets the box re-renders for
+ * `configs`, given the set in force before them.
+ */
+function boxRerenders(before: string[], configs: Array<Record<string, unknown>>): string[][] {
+  const fp = (ids: unknown) => [...(ids as string[])].sort().join(",");
+  let prev = fp(before);
+  const out: string[][] = [];
+  for (const c of configs) {
+    if (fp(c.mockupIds) !== prev) out.push(c.mockupIds as string[]);
+    prev = fp(c.mockupIds);
+  }
+  return out;
+}
+
 beforeEach(() => {
   vi.clearAllMocks();
   h.state.results = [];
@@ -220,12 +247,20 @@ describe("RealtimeProvider cropped delivery", () => {
     await act(async () => rerender(<Harness version={4} />));
 
     await waitFor(() => {
-      // Unflipped: config re-sent WITHOUT overlayCrop
+      // Unflipped: configs WITHOUT overlayCrop, ending on the whole session
+      // set (m1 + m2)...
       expect(sentConfigs().length).toBeGreaterThan(0);
       expect(sentConfigs().every((c) => !c.overlayCrop)).toBe(true);
-      // The lost edit is re-rendered full-frame
-      expect(h.updateMockupIds).toHaveBeenCalledWith(["m1"]);
+      expect(sentConfigs().at(-1)?.mockupIds).toEqual(["m1", "m2"]);
     });
+    // ...and the box really re-renders the lost edit. Dropping the crop with
+    // the same set is "no change" to the box (BC43BE swap, prod 2026-11-11:
+    // the hero stayed on v1 while the canvas reached v3).
+    const rerenders = boxRerenders(["m1", "m2"], sentConfigs());
+    expect(rerenders.some((ids) => ids.includes("m1"))).toBe(true);
+    expect(rerenders.at(-1)).toEqual(["m1", "m2"]);
+    // Never a single-mockup request: the server renders the last config's set.
+    expect(h.updateMockupIds).not.toHaveBeenCalled();
 
     // Kill-switch: even after everything re-seeds, no flip this session
     h.sendConfig.mockClear();
@@ -238,6 +273,81 @@ describe("RealtimeProvider cropped delivery", () => {
     errSpy.mockRestore();
   });
 
+  it("several failed composites in one edit never narrow the session to the last one (BC43BE, 2026-11-11)", async () => {
+    // Prod trace: five cropped frames failed together and the fallback sent
+    // one config per mockup — [V7X7MN] … [YDNHY6] — so the server rendered
+    // only YDNHY6 on every later edit and the hero never updated.
+    const { rerender } = render(<Harness version={1} />);
+    await waitFor(() => expect(h.sendConfig).toHaveBeenCalled());
+    await seedAndFlip(rerender);
+    h.sendConfig.mockClear();
+
+    h.compositeCroppedFrame.mockRejectedValue(new Error("E_OVERLAY_ENCODE_FAILED"));
+    const errSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    h.state.results = [
+      croppedResult("m1", "https://r/m1-crop-2"),
+      croppedResult("m2", "https://r/m2-crop-2"),
+    ];
+    await act(async () => rerender(<Harness version={4} />));
+
+    await waitFor(() => expect(sentConfigs().length).toBeGreaterThan(0));
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 20));
+    });
+    // The box re-renders both failed pictures, and the config left in force
+    // (the last one: the server renders the last config's set on every later
+    // edit) covers every picture.
+    const configs = sentConfigs();
+    expect(configs.every((c) => c.overlayCrop === undefined)).toBe(true);
+    expect(configs.at(-1)?.mockupIds).toEqual(["m1", "m2"]);
+    const rerenders = boxRerenders(["m1", "m2"], configs);
+    expect(rerenders.at(-1)).toEqual(["m1", "m2"]);
+    expect(h.updateMockupIds).not.toHaveBeenCalled();
+    errSpy.mockRestore();
+  });
+
+  it("a composite whose frame was superseded mid-drag is dropped, not treated as a failure", async () => {
+    // The SDK revokes a mockup's previous blob: frame when the next one lands,
+    // so the old composite fails to load it. The newer frame must win and
+    // cropped delivery must stay on.
+    const { rerender } = render(<Harness version={1} />);
+    await waitFor(() => expect(h.sendConfig).toHaveBeenCalled());
+    await seedAndFlip(rerender);
+    h.sendConfig.mockClear();
+
+    let rejectOld!: (e: Error) => void;
+    h.compositeCroppedFrame.mockImplementationOnce(
+      () => new Promise((_, reject) => { rejectOld = reject; })
+    );
+    const errSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const seen: string[] = [];
+    capturedCtx.subscribeMockupResultById("m1", (r) => seen.push(r.imageUrl));
+
+    h.state.results = [croppedResult("m1", "blob:v3-m1"), fullResult("m2", "https://r/m2-full")];
+    await act(async () => rerender(<Harness version={4} />));
+    await waitFor(() => expect(h.compositeCroppedFrame).toHaveBeenCalledTimes(1));
+
+    // v4 lands while v3 is still compositing; the SDK revoked v3's URL.
+    h.state.results = [croppedResult("m1", "blob:v4-m1"), fullResult("m2", "https://r/m2-full")];
+    await act(async () => rerender(<Harness version={5} />));
+    await act(async () => { rejectOld(new Error("E_OVERLAY_FRAME_LOAD")); });
+
+    await waitFor(() => {
+      expect(h.compositeCroppedFrame).toHaveBeenLastCalledWith(
+        expect.objectContaining({ frameUrl: "blob:v4-m1" })
+      );
+      expect(seen.some((u) => u.startsWith("blob:composite-"))).toBe(true);
+    });
+    await act(async () => { await new Promise((r) => setTimeout(r, 20)); });
+    expect(h.sendConfig).not.toHaveBeenCalled(); // no unflip, no re-request
+    expect(h.updateMockupIds).not.toHaveBeenCalled();
+    expect(errSpy).not.toHaveBeenCalledWith(
+      expect.stringContaining("E_OVERLAY_COMPOSITE_FAILED"),
+      expect.anything()
+    );
+    errSpy.mockRestore();
+  });
+
   it("drops to full-frame before rendering a never-seeded mockup via updateMockupIds", async () => {
     const { rerender } = render(<Harness version={1} />);
     await waitFor(() => expect(h.sendConfig).toHaveBeenCalled());
@@ -259,4 +369,48 @@ describe("RealtimeProvider cropped delivery", () => {
     });
     expect(h.sendConfig).not.toHaveBeenCalled();
   });
+
+  it("with a box that stamps per-placement versions, a failed composite asks `rerender` for exactly that picture (no config trick)", async () => {
+    const { rerender } = render(<Harness version={1} />);
+    await waitFor(() => expect(h.sendConfig).toHaveBeenCalled());
+    // Seed with frames that carry versions: the box has rc#839/#840.
+    const v = { versions: { Front: 1 } };
+    h.state.results = [{ ...fullResult("m1", "https://r/m1-full"), ...v }];
+    await act(async () => rerender(<Harness version={2} />));
+    h.state.results = [{ ...fullResult("m1", "https://r/m1-full"), ...v }, { ...fullResult("m2", "https://r/m2-full"), ...v }];
+    await act(async () => rerender(<Harness version={3} />));
+    await waitFor(() => expect(sentConfigs().some((c) => c.overlayCrop === "auto")).toBe(true));
+    h.sendConfig.mockClear();
+
+    h.compositeCroppedFrame.mockRejectedValue(new Error("E_OVERLAY_ENCODE_FAILED"));
+    const errSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    h.state.results = [croppedResult("m1", "https://r/m1-crop")];
+    await act(async () => rerender(<Harness version={4} />));
+    await waitFor(() => expect(h.rerender).toHaveBeenCalledWith(["m1"]));
+    // One config (crop dropped, same set), never an intermediate narrower one.
+    expect(sentConfigs().map((c) => c.mockupIds)).toEqual([["m1", "m2"]]);
+    expect(sentConfigs()[0].overlayCrop).toBeUndefined();
+
+    // The box refuses (rate limit): fall back to the config way for the same picture.
+    h.sendConfig.mockClear();
+    await act(async () => {
+      h.opts!.onError!("rate limited", { code: "E_RERENDER_RATE_LIMITED", message: "rate limited" });
+    });
+    expect(sentConfigs().map((c) => c.mockupIds)).toEqual([["m1"], ["m1", "m2"]]);
+    errSpy.mockRestore();
+  });
+
+  it("with a box that has no versions stamp, `rerender` is never sent (it would not understand it)", async () => {
+    const { rerender } = render(<Harness version={1} />);
+    await waitFor(() => expect(h.sendConfig).toHaveBeenCalled());
+    await seedAndFlip(rerender);
+    h.compositeCroppedFrame.mockRejectedValue(new Error("E_OVERLAY_ENCODE_FAILED"));
+    const errSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    h.state.results = [croppedResult("m1", "https://r/m1-crop")];
+    await act(async () => rerender(<Harness version={4} />));
+    await waitFor(() => expect(sentConfigs().at(-1)?.mockupIds).toEqual(["m1", "m2"]));
+    expect(h.rerender).not.toHaveBeenCalled();
+    errSpy.mockRestore();
+  });
 });
+