From 2efa8433068636a5a08ce0e54168ccbd44530300 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Mon, 14 Sep 2026 23:23:22 +0200
Subject: [PATCH] fix(test): the MCP endpoint cases find their own row again

FE-COMP-INTEGRATIONS-004, -015 and -016 took the first <code> and the first
Copy button on the tab and expected the MCP endpoint. Since the API keys card
shows the /api/v1 address with a copy button of its own (#2371), and it sits
above the MCP section, those queries landed on the API card: the URL read
/api/v1 and the click copied it. The cases now go through the endpoint's own
label.
---
 .../Settings/IntegrationsTab.test.tsx         | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Settings/IntegrationsTab.test.tsx b/client/src/components/Settings/IntegrationsTab.test.tsx
index b60726f98..e04a95619 100644
--- a/client/src/components/Settings/IntegrationsTab.test.tsx
+++ b/client/src/components/Settings/IntegrationsTab.test.tsx
@@ -18,6 +18,18 @@ function enableMcp() {
   });
 }
 
+/**
+ * The MCP endpoint row: the URL under its label and the copy button beside it.
+ *
+ * Found through its own label, not as "the first <code>" and "the first Copy
+ * button". The API keys card above it shows the /api/v1 address with a copy
+ * button of its own, and a positional query lands on that one instead.
+ */
+function mcpEndpointRow() {
+  const row = screen.getByText('MCP Endpoint').nextElementSibling as HTMLElement;
+  return { code: row.querySelector('code')!, copy: row.querySelector('button')! };
+}
+
 const clipboardWriteText = vi.fn().mockResolvedValue(undefined);
 
 beforeAll(() => {
@@ -67,9 +79,9 @@ describe('IntegrationsTab', () => {
     enableMcp();
     render(<IntegrationsTab />);
     await screen.findByText('MCP Configuration');
-    const codeEl = document.querySelector('code');
-    expect(codeEl).not.toBeNull();
-    expect(codeEl!.textContent).toContain('/mcp');
+    const { code } = mcpEndpointRow();
+    expect(code).not.toBeNull();
+    expect(code.textContent).toContain('/mcp');
   });
 
   it('FE-COMP-INTEGRATIONS-005: JSON config block is rendered when expanded', async () => {
@@ -273,8 +285,7 @@ describe('IntegrationsTab', () => {
     await screen.findByText('MCP Configuration');
     // Spy after userEvent.setup() may have replaced navigator.clipboard
     const writeSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
-    const copyBtns = screen.getAllByTitle('Copy');
-    await user.click(copyBtns[0]);
+    await user.click(mcpEndpointRow().copy);
     expect(writeSpy).toHaveBeenCalledWith(expect.stringContaining('/mcp'));
   });
 
@@ -284,12 +295,11 @@ describe('IntegrationsTab', () => {
     render(<IntegrationsTab />);
     await screen.findByText('MCP Configuration');
     vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
-    const copyBtns = screen.getAllByTitle('Copy');
-    await user.click(copyBtns[0]);
+    const { copy } = mcpEndpointRow();
+    await user.click(copy);
     await waitFor(() => {
       // After copy, icon changes to Check (green). The button should contain an svg with text-green-500
-      const btn = copyBtns[0];
-      const svg = btn.querySelector('svg');
+      const svg = copy.querySelector('svg');
       expect(svg).toHaveClass('text-green-500');
     });
   });