fix(tests): flaky Chat Client E2E tests and failing CreateServer unit test (#8887)

* Initial plan

* Fix flaky and failing Chat Client E2E tests

- Fix 5 flaky tests (strict mode violations) in username-display.spec.ts and
  message-variations.spec.ts by adding .first() to getByText() locators.
  The SSE mock echo response 'I received your message: ...' contains the
  sent text, causing Playwright to find 2 elements and fail strict mode.
- Fix consistently failing test 'should disable input while waiting for
  response' in input-validation.spec.ts by adding a test-specific route
  handler for message/stream that delays the response by 3 seconds,
  ensuring the agent request stays in-flight long enough to observe the
  disabled input state (previously route.continue() failed immediately
  with no real backend, causing the input to re-enable too quickly).
- Extract delay as named constant MESSAGE_STREAM_MOCK_DELAY_MS for clarity.

Co-authored-by: ccastrotrejo <102700317+ccastrotrejo@users.noreply.github.com>

* Fix unit test: CreateServer closes panel after successful submission

Two related fixes:

1. libs/designer/src/lib/ui/mcp/panel/server/create.tsx:
   Move dispatch(closePanel()) inside the try block (after await onUpdate())
   instead of after the finally block. This is semantically correct (panel
   should only close on success, not when onUpdate throws) and avoids subtle
   Promise chain timing issues in async tests with React 18 + jsdom.

2. libs/designer/src/lib/ui/mcp/panel/server/__test__/create.spec.tsx:
   Rewrite "closes panel after successful submission" test to use
   fireEvent.change instead of userEvent.type. Fluent UI's tabster
   focus-trapping library intercepts keyboard events fired by userEvent.type,
   causing only partial text to be typed (CI evidence: value="T" in HTML
   snapshot instead of value="TestServer"). Use waitFor to wait for the
   submit button to become enabled before clicking, matching the established
   pattern in the file (test "calls onUpdate with correct data" at line 472).

Co-authored-by: ccastrotrejo <102700317+ccastrotrejo@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: ccastrotrejo <102700317+ccastrotrejo@users.noreply.github.com>

Author: Copilot

e2e/chatClient/tests/features/authentication/username-display.spec.ts

@@ -205,7 +205,8 @@ test.describe('Username Edge Cases', { tag: '@mock' }, () => {
     await sendButton.click();
 
     // Message should still appear and chat should function normally
-    await expect(page.getByText('Test message without username')).toBeVisible({ timeout: 5000 });
+    // Use .first() to avoid strict mode violation when agent echo response also contains the message text
+    await expect(page.getByText('Test message without username').first()).toBeVisible({ timeout: 5000 });
     // Chat should remain functional
     await expect(messageInput).toBeEnabled({ timeout: 10000 });
   });
@@ -233,7 +234,8 @@ test.describe('Username Edge Cases', { tag: '@mock' }, () => {
     await sendButton.click();
 
     // Chat should still work despite malformed JWT
-    await expect(page.getByText('Test with malformed token')).toBeVisible({ timeout: 5000 });
+    // Use .first() to avoid strict mode violation when agent echo response also contains the message text
+    await expect(page.getByText('Test with malformed token').first()).toBeVisible({ timeout: 5000 });
     await expect(messageInput).toBeEnabled({ timeout: 10000 });
   });
 
@@ -260,7 +262,8 @@ test.describe('Username Edge Cases', { tag: '@mock' }, () => {
     await sendButton.click();
 
     // Chat should still function without username
-    await expect(page.getByText('Test without access token')).toBeVisible({ timeout: 5000 });
+    // Use .first() to avoid strict mode violation when agent echo response also contains the message text
+    await expect(page.getByText('Test without access token').first()).toBeVisible({ timeout: 5000 });
     await expect(messageInput).toBeEnabled({ timeout: 10000 });
   });
 });

e2e/chatClient/tests/features/messaging/input-validation.spec.ts

@@ -24,6 +24,10 @@ const AGENT_CARD = {
 
 const AGENT_CARD_URL = 'http://localhost:3001/api/agents/test/.well-known/agent-card.json';
 
+// Delay (ms) used in the message/stream mock to keep the agent request in-flight
+// long enough for tests to observe the disabled input state.
+const MESSAGE_STREAM_MOCK_DELAY_MS = 3000;
+
 test.describe('Input Validation', { tag: '@mock' }, () => {
   test.beforeEach(async ({ page }) => {
     // Mock authentication - return authenticated user
@@ -276,6 +280,48 @@ test.describe('Input State Management', { tag: '@mock' }, () => {
     // Input should be enabled initially
     await expect(messageInput).toBeEnabled();
 
+    // Override agent route for this test to add a delay on message/stream requests.
+    // This ensures the request stays in-flight long enough to observe the disabled state,
+    // instead of failing immediately (route.continue() with no real backend) and re-enabling.
+    await page.route('**/api/agents/test', async (route: Route) => {
+      if (route.request().method() !== 'POST') {
+        await route.continue();
+        return;
+      }
+
+      const postData = route.request().postDataJSON();
+
+      if (postData?.method === 'contexts/list') {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ jsonrpc: '2.0', id: postData.id, result: [] }),
+        });
+        return;
+      }
+
+      if (postData?.method === 'message/stream') {
+        // Delay response so the input stays disabled long enough to be observed
+        await new Promise<void>((resolve) => setTimeout(resolve, MESSAGE_STREAM_MOCK_DELAY_MS));
+        await route.fulfill({
+          status: 200,
+          headers: {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive',
+          },
+          body: `data: ${JSON.stringify({
+            jsonrpc: '2.0',
+            id: postData.id,
+            result: { status: { state: 'completed' }, kind: 'status-update', final: true },
+          })}\n\n`,
+        });
+        return;
+      }
+
+      await route.continue();
+    });
+
     // Send first message
     await messageInput.fill('First message');
     await sendButton.click();

e2e/chatClient/tests/features/messaging/message-variations.spec.ts

@@ -277,7 +277,7 @@ test.describe('Emoji and Complex Unicode', { tag: '@mock' }, () => {
     await messageInput.fill(symbolsMessage);
     await sendButton.click();
 
-    await expect(page.getByText(symbolsMessage)).toBeVisible({ timeout: 5000 });
+    await expect(page.getByText(symbolsMessage).first()).toBeVisible({ timeout: 5000 });
   });
 
   test('should handle box drawing and block characters', async ({ page }) => {
@@ -289,7 +289,8 @@ test.describe('Emoji and Complex Unicode', { tag: '@mock' }, () => {
     await sendButton.click();
 
     // Check for a part of the box drawing
-    await expect(page.getByText('┌─┬─┐', { exact: false })).toBeVisible({ timeout: 5000 });
+    // Use .first() to avoid strict mode violation when agent echo response also contains the message text
+    await expect(page.getByText('┌─┬─┐', { exact: false }).first()).toBeVisible({ timeout: 5000 });
   });
 });
 

libs/designer/src/lib/ui/mcp/panel/server/__test__/create.spec.tsx

@@ -528,22 +528,23 @@ describe('CreateServer', () => {
     });
 
     it('closes panel after successful submission', async () => {
-      const user = userEvent.setup();
-
       renderWithProviders({ onUpdate: mockOnUpdate, onClose: mockOnClose });
 
       const nameInput = screen.getByTestId('textfield-name');
       const descriptionInput = screen.getByTestId('textarea-description');
       const workflow1Option = screen.getByTestId('option-workflow1');
-      const submitButton = screen.getByTestId('footer-button-0');
 
-      await user.clear(nameInput);
-      await user.type(nameInput, 'TestServer');
-      await user.clear(descriptionInput);
-      await user.type(descriptionInput, 'Test Description');
+      // Use fireEvent.change for direct, synchronous control to avoid keyboard event
+      // interference from Fluent UI's tabster focus-trapping (consistent with the
+      // "calls onUpdate with correct data" test above)
+      fireEvent.change(nameInput, { target: { value: 'TestServer' } });
+      fireEvent.change(descriptionInput, { target: { value: 'Test Description' } });
       fireEvent.click(workflow1Option);
 
-      fireEvent.click(submitButton);
+      // Wait for state updates to settle so the submit button is enabled
+      await waitFor(() => expect(screen.getByTestId('footer-button-0')).toBeEnabled());
+
+      fireEvent.click(screen.getByTestId('footer-button-0'));
 
       await waitFor(() => {
         expect(mockClosePanel).toHaveBeenCalled();

libs/designer/src/lib/ui/mcp/panel/server/create.tsx

@@ -274,12 +274,12 @@ export const CreateServer = ({
         description: serverDescription,
         tools: selectedTools.map((toolName) => ({ name: workflowOptions.find((option) => option.value === toolName)?.label ?? toolName })),
       });
+      dispatch(closePanel());
     } catch {
       // Need to log the error properly here.
     } finally {
       setIsCreatingOrUpdating(false);
     }
-    dispatch(closePanel());
   }, [dispatch, onUpdate, serverName, serverDescription, selectedTools, workflowOptions]);
 
   const createOrUpdateButtonText = useMemo(() => {