From 3b3672f71ab18d82dc6cdce734da97e8e60554f0 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Sun, 10 May 2026 12:42:52 +0000
Subject: [PATCH] fix(canvas/test): Legend panel test reliability via
 data-testid

- Add data-testid="legend-panel" to Legend component root div so
  tests can select the panel reliably instead of .closest("div")
  (the "Legend" text also appears in the collapsed pill).
- Update palette-offset positioning tests to use container.querySelector
  with data-testid instead of screen.getByText + .closest("div").
- PurchaseSuccessModal: skip URL stripping when no target params present.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/Legend.tsx                |  5 ++++-
 canvas/src/components/PurchaseSuccessModal.tsx  |  2 ++
 canvas/src/components/__tests__/Legend.test.tsx | 11 +++++++----
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/canvas/src/components/Legend.tsx b/canvas/src/components/Legend.tsx
index f31d4935..828e8073 100644
--- a/canvas/src/components/Legend.tsx
+++ b/canvas/src/components/Legend.tsx
@@ -86,7 +86,10 @@ export function Legend() {
   }
 
   return (
-    <div className={`fixed bottom-6 ${leftClass} z-30 bg-surface-sunken/95 border border-line/50 rounded-xl px-4 py-3 shadow-xl shadow-black/30 backdrop-blur-sm max-w-[280px] transition-[left] duration-200`}>
+    <div
+      data-testid="legend-panel"
+      className={`fixed bottom-6 ${leftClass} z-30 bg-surface-sunken/95 border border-line/50 rounded-xl px-4 py-3 shadow-xl shadow-black/30 backdrop-blur-sm max-w-[280px] transition-[left] duration-200`}
+    >
       <div className="flex items-start justify-between mb-2">
         <div className="text-[11px] font-semibold text-ink-mid uppercase tracking-wider">Legend</div>
         <button
diff --git a/canvas/src/components/PurchaseSuccessModal.tsx b/canvas/src/components/PurchaseSuccessModal.tsx
index d20cf698..a39c7ccd 100644
--- a/canvas/src/components/PurchaseSuccessModal.tsx
+++ b/canvas/src/components/PurchaseSuccessModal.tsx
@@ -34,6 +34,8 @@ function readPurchaseParams(): { open: boolean; item: string | null } {
 function stripPurchaseParams() {
   if (typeof window === "undefined") return;
   const url = new URL(window.location.href);
+  // Skip if there are no params to strip.
+  if (!url.searchParams.has("purchase_success") && !url.searchParams.has("item")) return;
   url.searchParams.delete("purchase_success");
   url.searchParams.delete("item");
   // replaceState (not pushState) so back-button doesn't return to the
diff --git a/canvas/src/components/__tests__/Legend.test.tsx b/canvas/src/components/__tests__/Legend.test.tsx
index d2530121..ed5da6c8 100644
--- a/canvas/src/components/__tests__/Legend.test.tsx
+++ b/canvas/src/components/__tests__/Legend.test.tsx
@@ -144,12 +144,15 @@ describe("Legend — close and reopen", () => {
 });
 
 describe("Legend — palette offset positioning", () => {
+  // The panel has data-testid="legend-panel" so we can select it reliably.
+  // screen.getByText("Legend") also appears in the collapsed pill, so the
+  // old .closest("div") approach matched the wrong element in the DOM.
   it("uses left-4 when template palette is NOT open", () => {
     vi.mocked(useCanvasStore).mockImplementation(
       (sel) => sel({ templatePaletteOpen: false } as ReturnType<typeof useCanvasStore.getState>)
     );
-    render(<Legend />);
-    const panel = screen.getByText("Legend").closest("div");
+    const { container } = render(<Legend />);
+    const panel = container.querySelector('[data-testid="legend-panel"]');
     expect(panel?.className).toContain("left-4");
   });
 
@@ -157,8 +160,8 @@ describe("Legend — palette offset positioning", () => {
     vi.mocked(useCanvasStore).mockImplementation(
       (sel) => sel({ templatePaletteOpen: true } as ReturnType<typeof useCanvasStore.getState>)
     );
-    render(<Legend />);
-    const panel = screen.getByText("Legend").closest("div");
+    const { container } = render(<Legend />);
+    const panel = container.querySelector('[data-testid="legend-panel"]');
     expect(panel?.className).toContain("left-[296px]");
   });
 });