From f496df9de87453ed6d4a165b414ee3194a388317 Mon Sep 17 00:00:00 2001
From: Lifei Zhou <lifei@squareup.com>
Date: Wed, 25 Feb 2026 20:50:55 +1100
Subject: [PATCH] clean up

---
 ui/desktop/playwright.config.ts               |  6 +--
 .../components/Layout/CondensedRenderer.tsx   |  9 ++++-
 .../components/Layout/ExpandedRenderer.tsx    |  5 ++-
 .../src/components/Layout/navigation/index.ts |  1 +
 .../components/Layout/navigation/testIds.ts   |  3 ++
 ui/desktop/tests/e2e/app.spec.ts              | 37 +++++--------------
 6 files changed, 28 insertions(+), 33 deletions(-)
 create mode 100644 ui/desktop/src/components/Layout/navigation/testIds.ts

diff --git a/ui/desktop/playwright.config.ts b/ui/desktop/playwright.config.ts
index 0beb7b431b..196b8180fd 100644
--- a/ui/desktop/playwright.config.ts
+++ b/ui/desktop/playwright.config.ts
@@ -4,7 +4,7 @@ const config: PlaywrightTestConfig = {
   testDir: './tests/e2e',
   timeout: 60000,
   expect: {
-    timeout: 30000
+    timeout: 10000
   },
   fullyParallel: false,
   workers: 1,
@@ -13,7 +13,7 @@ const config: PlaywrightTestConfig = {
     ['list']
   ],
   use: {
-    actionTimeout: 30000,
+    actionTimeout: 10000,
     navigationTimeout: 30000,
     video: 'on',
     screenshot: 'only-on-failure'
@@ -22,4 +22,4 @@ const config: PlaywrightTestConfig = {
   preserveOutput: 'always'
 };
 
-export default config;
\ No newline at end of file
+export default config;
diff --git a/ui/desktop/src/components/Layout/CondensedRenderer.tsx b/ui/desktop/src/components/Layout/CondensedRenderer.tsx
index 9f1713acb4..290c5244dc 100644
--- a/ui/desktop/src/components/Layout/CondensedRenderer.tsx
+++ b/ui/desktop/src/components/Layout/CondensedRenderer.tsx
@@ -3,7 +3,7 @@ import { GripVertical, ChevronDown, ChevronRight, Plus } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { cn } from '../../utils';
 import { DropdownMenu, DropdownMenuTrigger } from '../ui/dropdown-menu';
-import { ChatSessionsDropdown, SessionsList } from './navigation';
+import { ChatSessionsDropdown, SessionsList, getSidebarButtonTestId } from './navigation';
 import type { NavigationRendererProps } from './navigation/types';
 
 export const CondensedRenderer: React.FC<NavigationRendererProps> = ({
@@ -76,6 +76,7 @@ export const CondensedRenderer: React.FC<NavigationRendererProps> = ({
             const isDragging = drag.draggedItem === item.id;
             const isDragOver = drag.dragOverItem === item.id;
             const isChatItem = item.id === 'chat';
+            const navButtonTestId = getSidebarButtonTestId(item.id);
 
             return (
               <motion.div
@@ -107,6 +108,7 @@ export const CondensedRenderer: React.FC<NavigationRendererProps> = ({
                     <DropdownMenu open={chatPopoverOpen} onOpenChange={setChatPopoverOpen}>
                       <DropdownMenuTrigger asChild>
                         <button
+                          data-testid={navButtonTestId}
                           className={cn(
                             'flex items-center justify-center',
                             'rounded-lg transition-colors duration-200 no-drag',
@@ -135,6 +137,7 @@ export const CondensedRenderer: React.FC<NavigationRendererProps> = ({
                       {isChatItem && !isCondensedIconOnly ? (
                         <div className="relative">
                           <motion.button
+                            data-testid={navButtonTestId}
                             onClick={onToggleChatExpanded}
                             whileHover={{ scale: 1.02 }}
                             whileTap={{ scale: 0.98 }}
@@ -184,6 +187,7 @@ export const CondensedRenderer: React.FC<NavigationRendererProps> = ({
                         </div>
                       ) : (
                         <motion.button
+                          data-testid={navButtonTestId}
                           onClick={() => onNavClick(item.path)}
                           whileHover={{ scale: 1.02 }}
                           whileTap={{ scale: 0.98 }}
@@ -260,6 +264,7 @@ export const CondensedRenderer: React.FC<NavigationRendererProps> = ({
           const isDragging = drag.draggedItem === item.id;
           const isDragOver = drag.dragOverItem === item.id;
           const isChatItem = item.id === 'chat';
+          const navButtonTestId = getSidebarButtonTestId(item.id);
 
           return (
             <motion.div
@@ -283,6 +288,7 @@ export const CondensedRenderer: React.FC<NavigationRendererProps> = ({
                   <DropdownMenu open={chatPopoverOpen} onOpenChange={setChatPopoverOpen}>
                     <DropdownMenuTrigger asChild>
                       <motion.button
+                        data-testid={navButtonTestId}
                         whileHover={{ scale: 1.02 }}
                         whileTap={{ scale: 0.98 }}
                         className={cn(
@@ -313,6 +319,7 @@ export const CondensedRenderer: React.FC<NavigationRendererProps> = ({
                   </DropdownMenu>
                 ) : (
                   <motion.button
+                    data-testid={navButtonTestId}
                     onClick={() => onNavClick(item.path)}
                     whileHover={{ scale: 1.02 }}
                     whileTap={{ scale: 0.98 }}
diff --git a/ui/desktop/src/components/Layout/ExpandedRenderer.tsx b/ui/desktop/src/components/Layout/ExpandedRenderer.tsx
index a379273632..6563b3aade 100644
--- a/ui/desktop/src/components/Layout/ExpandedRenderer.tsx
+++ b/ui/desktop/src/components/Layout/ExpandedRenderer.tsx
@@ -4,7 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { Z_INDEX } from './constants';
 import { cn } from '../../utils';
 import { DropdownMenu, DropdownMenuTrigger } from '../ui/dropdown-menu';
-import { ChatSessionsDropdown } from './navigation';
+import { ChatSessionsDropdown, getSidebarButtonTestId } from './navigation';
 import type { NavigationRendererProps } from './navigation/types';
 
 export const ExpandedRenderer: React.FC<NavigationRendererProps> = ({
@@ -147,6 +147,7 @@ export const ExpandedRenderer: React.FC<NavigationRendererProps> = ({
             const isDragging = drag.draggedItem === item.id;
             const isDragOver = drag.dragOverItem === item.id;
             const isChatItem = item.id === 'chat';
+            const navButtonTestId = getSidebarButtonTestId(item.id);
 
             if (isChatItem) {
               return (
@@ -172,6 +173,7 @@ export const ExpandedRenderer: React.FC<NavigationRendererProps> = ({
                     <div className="relative">
                       <DropdownMenuTrigger asChild>
                         <motion.div
+                          data-testid={navButtonTestId}
                           className={cn(
                             'w-full relative flex flex-col rounded-lg',
                             'transition-colors duration-200 aspect-square cursor-pointer',
@@ -247,6 +249,7 @@ export const ExpandedRenderer: React.FC<NavigationRendererProps> = ({
                   )}
                 >
                   <button
+                    data-testid={navButtonTestId}
                     onClick={() => onNavClick(item.path)}
                     className="flex-1 flex flex-col items-start justify-between p-5 no-drag text-left"
                   >
diff --git a/ui/desktop/src/components/Layout/navigation/index.ts b/ui/desktop/src/components/Layout/navigation/index.ts
index 63a77a7b82..127e21acb0 100644
--- a/ui/desktop/src/components/Layout/navigation/index.ts
+++ b/ui/desktop/src/components/Layout/navigation/index.ts
@@ -1,3 +1,4 @@
 export { ChatSessionsDropdown } from './ChatSessionsDropdown';
 export { NavigationOverlay } from './NavigationOverlay';
 export { SessionsList } from './SessionsList';
+export { getSidebarButtonTestId } from './testIds';
diff --git a/ui/desktop/src/components/Layout/navigation/testIds.ts b/ui/desktop/src/components/Layout/navigation/testIds.ts
new file mode 100644
index 0000000000..1d2452a7d9
--- /dev/null
+++ b/ui/desktop/src/components/Layout/navigation/testIds.ts
@@ -0,0 +1,3 @@
+export function getSidebarButtonTestId(itemId: string): string {
+  return `sidebar-${itemId}-button`;
+}
diff --git a/ui/desktop/tests/e2e/app.spec.ts b/ui/desktop/tests/e2e/app.spec.ts
index fd939d1cb5..a89cdc0aed 100644
--- a/ui/desktop/tests/e2e/app.spec.ts
+++ b/ui/desktop/tests/e2e/app.spec.ts
@@ -5,7 +5,6 @@ import { join } from 'path';
 
 const { runningQuotes } = require('./basic-mcp');
 
-const DEFAULT_TIMEOUT = 10000;
 const LLM_TIMEOUT = 30000;
 
 // Define provider interface
@@ -58,7 +57,7 @@ async function selectProvider(mainWindow: Page, provider: Provider) {
   // The config is seeded with GOOSE_PROVIDER, so the chat interface should be available.
   const chatInput = mainWindow.getByTestId('chat-input');
   try {
-    await expect(chatInput).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+    await expect(chatInput).toBeVisible();
     console.log('Provider already configured, chat interface is available');
     return;
   } catch {
@@ -104,38 +103,20 @@ async function selectProvider(mainWindow: Page, provider: Provider) {
   }
 
   // Wait for chat interface to appear
-  await expect(mainWindow.getByTestId('chat-input')).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+  await expect(mainWindow.getByTestId('chat-input')).toBeVisible();
 
 }
 
-async function openSettings(mainWindow: Page) {
-  const settingsButton = mainWindow.getByRole('button', { name: /^settings$/i }).first();
-  await expect(settingsButton).toBeVisible({ timeout: DEFAULT_TIMEOUT });
-  await settingsButton.click();
-}
-
-async function openHome(mainWindow: Page) {
-  const homeButton = mainWindow.getByRole('button', { name: /^home$/i }).first();
-  await expect(homeButton).toBeVisible({ timeout: DEFAULT_TIMEOUT });
-  await homeButton.click();
-}
-
-async function openExtensions(mainWindow: Page) {
-  const extensionsButton = mainWindow.getByRole('button', { name: /^extensions$/i }).first();
-  await expect(extensionsButton).toBeVisible({ timeout: DEFAULT_TIMEOUT });
-  await extensionsButton.click();
-}
-
 test.describe('Goose App', () => {
 
   test.describe('General UI', () => {
     test('dark mode toggle', async () => {
       console.log('Testing dark mode toggle...');
 
-      await expect(mainWindow.getByTestId('chat-input')).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+      await expect(mainWindow.getByTestId('chat-input')).toBeVisible();
 
       // Navigate to Settings via sidebar
-      await openSettings(mainWindow);
+      await mainWindow.getByTestId('sidebar-settings-button').click();
 
       // Navigate to App tab
       await mainWindow.getByTestId('settings-app-tab').click();
@@ -165,7 +146,7 @@ test.describe('Goose App', () => {
       await lightModeButton.click();
 
       // Navigate back to home
-      await openHome(mainWindow);
+      await mainWindow.getByTestId('sidebar-home-button').click();
     });
   });
 
@@ -225,7 +206,7 @@ test.describe('Goose App', () => {
 
       test('MCP integration - add extension and use tool', async () => {
           // Navigate to Extensions via sidebar
-          await openExtensions(mainWindow);
+          await mainWindow.getByTestId('sidebar-extensions-button').click();
 
           // Add custom extension
           await mainWindow.getByRole('button', { name: 'Add custom extension' }).click();
@@ -240,13 +221,13 @@ test.describe('Goose App', () => {
           await mainWindow.getByTestId('extension-submit-btn').click();
 
           // Wait for the extension to appear and be enabled
-          await mainWindow.locator('#extension-running-quotes').waitFor({ timeout: DEFAULT_TIMEOUT });
+          await expect(mainWindow.locator('#extension-running-quotes')).toBeVisible();
           await expect(
             mainWindow.locator('#extension-running-quotes button[role="switch"][data-state="checked"]')
-          ).toBeVisible({ timeout: DEFAULT_TIMEOUT });
+          ).toBeVisible();
 
           // Navigate back to home
-          await openHome(mainWindow);
+          await mainWindow.getByTestId('sidebar-home-button').click();
 
           // Send a message requesting a running quote
           const chatInput = mainWindow.getByTestId('chat-input');