diff --git a/browser_tests/tests/bottomPanelShortcuts.spec.ts b/browser_tests/tests/bottomPanelShortcuts.spec.ts index 32cc2a5a9..2206fd3c1 100644 --- a/browser_tests/tests/bottomPanelShortcuts.spec.ts +++ b/browser_tests/tests/bottomPanelShortcuts.spec.ts @@ -147,47 +147,46 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => { test('should maintain panel state when switching to terminal', async ({ comfyPage }) => { - // First open the bottom panel to check if terminal tab is available - // Terminal tabs are loaded asynchronously, so wait for the "Logs" tab to appear - await comfyPage.page - .locator('button[aria-label*="Toggle Bottom Panel"]') - .click() - - // Check if terminal tab exists (loaded asynchronously, not available in cloud) - // Look for the "Logs" tab text in the bottom panel - const logsTab = comfyPage.page.locator('.bottom-panel').getByRole('tab', { - name: /Logs/i - }) - const terminalTabExists = await logsTab - .isVisible({ timeout: 5000 }) - .catch(() => false) - - if (!terminalTabExists) { - // Close panel and skip test - terminal not available in this distribution - await comfyPage.page - .locator('button[aria-label*="Toggle Bottom Panel"]') - .click() - test.skip() - return - } - - // Close the panel to reset state - await comfyPage.page - .locator('button[aria-label*="Toggle Bottom Panel"]') - .click() - - // Open shortcuts panel first + // Terminal tabs are loaded asynchronously via dynamic import. + // First, open the shortcuts panel which is always available (registered synchronously). await comfyPage.page .locator('button[aria-label*="Keyboard Shortcuts"]') .click() await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible() - // Open terminal panel (should switch panels) - await comfyPage.page - .locator('button[aria-label*="Toggle Bottom Panel"]') - .click() + // Now check if terminal tabs have loaded by looking for the "Logs" tab in sidebar tooltip + // Terminal panel toggle only works after tabs are registered asynchronously + // Wait for terminal tabs to be available (check via aria-label on sidebar button) + const terminalButton = comfyPage.page.locator( + 'button[aria-label*="Toggle Bottom Panel"]' + ) - // Panel should still be visible but showing terminal content + // Wait a bit for dynamic import to complete, then check if terminal panel works + // The Terminal tabs are loaded via dynamic import, so we need to wait + await comfyPage.page.waitForTimeout(1000) + + // Try clicking terminal button - if tabs aren't loaded, panel won't change + await terminalButton.click() + + // Check if we're now showing terminal content by looking for Logs tab + const logsTab = comfyPage.page.locator('.bottom-panel').getByRole('tab', { + name: /Logs/i + }) + const terminalTabExists = await logsTab + .isVisible({ timeout: 2000 }) + .catch(() => false) + + if (!terminalTabExists) { + // Terminal not available (cloud distribution or async load failed) - skip test + // Close the shortcuts panel first + await comfyPage.page + .locator('button[aria-label*="Keyboard Shortcuts"]') + .click() + test.skip() + return + } + + // Terminal panel is showing - verify panel is visible await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible() // Switch back to shortcuts diff --git a/browser_tests/tests/menu.spec.ts b/browser_tests/tests/menu.spec.ts index 06ab9a9a8..2a00c647b 100644 --- a/browser_tests/tests/menu.spec.ts +++ b/browser_tests/tests/menu.spec.ts @@ -108,13 +108,15 @@ test.describe('Menu', { tag: '@ui' }, () => { await expect(checkmark).toHaveClass(/invisible/) // Click Bottom Panel to toggle it on + // Note: Terminal tabs are loaded asynchronously, so this may show shortcuts panel + // as a fallback if terminal tabs aren't loaded yet. Either way, bottom panel should show. await bottomPanelItem.click() // Verify menu is still visible after clicking await expect(menu).toBeVisible() await expect(viewSubmenu).toBeVisible() - // Verify bottom panel is now visible + // Verify bottom panel is now visible (either terminal or shortcuts panel) await expect(bottomPanel).toBeVisible() // Checkmark should now be visible (panel is shown) diff --git a/src/stores/workspace/bottomPanelStore.ts b/src/stores/workspace/bottomPanelStore.ts index 7176637e4..230adf225 100644 --- a/src/stores/workspace/bottomPanelStore.ts +++ b/src/stores/workspace/bottomPanelStore.ts @@ -72,8 +72,15 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => { } const toggleBottomPanel = () => { - // Legacy method - toggles terminal panel - togglePanel('terminal') + // Legacy method - toggles terminal panel, falls back to shortcuts if no terminal tabs + // Terminal tabs are loaded asynchronously, so may not be available immediately + const terminalPanel = panels.value.terminal + if (terminalPanel.tabs.length > 0) { + togglePanel('terminal') + } else { + // Fall back to shortcuts panel if terminal tabs aren't loaded yet + togglePanel('shortcuts') + } } const setActiveTab = (tabId: string) => {