From 6e2987e586c6df42d5c46265e25aff8293cf9722 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Fri, 19 Jun 2026 08:31:24 -0700
Subject: [PATCH] =?UTF-8?q?fix(graph):=20unique=20test=20id=20per=20GraphS?=
 =?UTF-8?q?elector=20mount=20(was=20duplicated=202=E2=80=933=C3=97)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

GraphSelector is mounted in up to three responsive slots at once (sidebar,
phone top-bar, workspace top-bar) and every instance hard-coded
data-testid="graph-selector". On desktop workspace that put 2+ elements with the
same test id in the DOM, so any strict-mode selector (e.g. the shared E2E
navigateToWorkspace helper's isVisible/getByTestId) errored with a strict-mode
violation. Add a `testId` prop (default 'graph-selector' = the canonical
workspace mount); the sidebar/phone mounts now use graph-selector-sidebar /
graph-selector-mobile. getByTestId('graph-selector') is unique again.

Found by a dogfood session against the live dev stack. Verified: typecheck;
THE GATE 5/5; canonical count == 1, 0 page/GraphQL errors.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/web/src/components/GraphSelector.tsx | 8 ++++++--
 packages/web/src/components/Layout.tsx        | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/GraphSelector.tsx b/packages/web/src/components/GraphSelector.tsx
index eb729aac..81cadfbe 100644
--- a/packages/web/src/components/GraphSelector.tsx
+++ b/packages/web/src/components/GraphSelector.tsx
@@ -10,9 +10,13 @@ interface GraphSelectorProps {
   onCreateGraph?: () => void;
   onEditGraph?: (graph: any) => void;
   onDeleteGraph?: (graph: any) => void;
+  // GraphSelector is mounted in 2–3 responsive slots at once (sidebar, phone
+  // top-bar, workspace top-bar); each needs a distinct test id so selectors stay
+  // unique. Defaults to the canonical 'graph-selector' (the workspace mount).
+  testId?: string;
 }
 
-export function GraphSelector({ onCreateGraph, onEditGraph, onDeleteGraph }: GraphSelectorProps) {
+export function GraphSelector({ onCreateGraph, onEditGraph, onDeleteGraph, testId = 'graph-selector' }: GraphSelectorProps) {
   const { currentGraph, graphHierarchy, selectGraph } = useGraph();
   const { currentTeam, currentUser } = useAuth();
   const [isOpen, setIsOpen] = useState(false);
@@ -229,7 +233,7 @@ export function GraphSelector({ onCreateGraph, onEditGraph, onDeleteGraph }: Gra
       <button
         ref={buttonRef}
         onClick={toggleDropdown}
-        data-testid="graph-selector"
+        data-testid={testId}
         className="flex items-center space-x-3 w-full p-3 text-left hover:bg-gray-700/80 rounded-xl transition-all duration-200 hover:scale-[1.02] border border-gray-600/30 hover:border-gray-500/50 shadow-lg hover:shadow-xl backdrop-blur-sm bg-gray-800/50"
       >
         <div className="flex-shrink-0">
diff --git a/packages/web/src/components/Layout.tsx b/packages/web/src/components/Layout.tsx
index 4990e570..8b4a55fc 100644
--- a/packages/web/src/components/Layout.tsx
+++ b/packages/web/src/components/Layout.tsx
@@ -54,7 +54,7 @@ export function Layout({ children }: LayoutProps) {
         <div className="md:hidden relative z-30 pt-safe">
           <div className="flex items-center bg-gray-800/90 backdrop-blur-sm px-3 py-2 border-b border-gray-700/50">
             <div className="flex-1 min-w-0">
-              <GraphSelector />
+              <GraphSelector testId="graph-selector-mobile" />
             </div>
           </div>
         </div>
@@ -166,7 +166,7 @@ export function Layout({ children }: LayoutProps) {
             {/* Graph Selector */}
             {!desktopSidebarCollapsed && (
               <div className="border-t border-gray-700">
-                <GraphSelector />
+                <GraphSelector testId="graph-selector-sidebar" />
               </div>
             )}