/** * E2E Tests: Command Bar * * Tests for the command bar functionality including * keyboard shortcuts, search, navigation, and actions. */ import { test, expect, selectors, useCommandBarToNavigate } from '../fixtures/sdk-fixtures' test.describe('Command Bar', () => { test('Cmd+K opens command bar', async ({ sdkPage }) => { // Open command bar with keyboard shortcut await sdkPage.keyboard.press('Meta+k') // Command bar should be visible const commandBar = sdkPage.locator(selectors.commandBar) await expect(commandBar).toBeVisible() }) test('Ctrl+K opens command bar (Windows/Linux)', async ({ sdkPage }) => { await sdkPage.keyboard.press('Control+k') const commandBar = sdkPage.locator(selectors.commandBar) await expect(commandBar).toBeVisible() }) test('Escape closes command bar', async ({ commandBar }) => { // Command bar should already be open from fixture await expect(commandBar.locator(selectors.commandBar)).toBeVisible() // Press Escape await commandBar.keyboard.press('Escape') // Command bar should be closed await expect(commandBar.locator(selectors.commandBar)).not.toBeVisible() }) test('shows navigation suggestions', async ({ commandBar }) => { // Type a navigation term await commandBar.fill(selectors.commandInput, 'DSFA') // Should show relevant suggestions const suggestions = commandBar.locator('[data-testid^="command-suggestion"]') await expect(suggestions.first()).toBeVisible({ timeout: 5000 }) // First suggestion should be related to DSFA const firstSuggestion = suggestions.first() await expect(firstSuggestion).toContainText(/DSFA|Datenschutz/i) }) test('navigates to step from command bar', async ({ commandBar }) => { // Type search term await commandBar.fill(selectors.commandInput, 'Risk') // Wait for suggestions await commandBar.waitForSelector(selectors.commandSuggestion(0), { timeout: 5000 }) // Click suggestion await commandBar.click(selectors.commandSuggestion(0)) // Should navigate to risks page await expect(commandBar).toHaveURL(/risk/i) }) test('shows action suggestions', async ({ commandBar }) => { // Type an action keyword await commandBar.fill(selectors.commandInput, 'Export') // Should show export-related actions const suggestions = commandBar.locator('[data-testid^="command-suggestion"]') await expect(suggestions.first()).toBeVisible({ timeout: 5000 }) }) test('keyboard navigation through suggestions', async ({ commandBar }) => { // Type search term await commandBar.fill(selectors.commandInput, 'a') // Wait for suggestions await commandBar.waitForSelector(selectors.commandSuggestion(0), { timeout: 5000 }) // Press down arrow to navigate await commandBar.keyboard.press('ArrowDown') // Second suggestion should be focused/highlighted const secondSuggestion = commandBar.locator(selectors.commandSuggestion(1)) await expect(secondSuggestion).toHaveAttribute('data-highlighted', 'true') }) test('Enter selects highlighted suggestion', async ({ commandBar }) => { // Type search term await commandBar.fill(selectors.commandInput, 'TOMs') // Wait for suggestions await commandBar.waitForSelector(selectors.commandSuggestion(0), { timeout: 5000 }) // Press Enter to select first suggestion await commandBar.keyboard.press('Enter') // Command bar should close and navigation should happen await expect(commandBar.locator(selectors.commandBar)).not.toBeVisible() }) }) test.describe('Command Bar with Demo Data', () => { test('shows recent searches', async ({ withDemoData }) => { // Demo data includes recent searches await withDemoData.keyboard.press('Meta+k') const commandBar = withDemoData.locator(selectors.commandBar) await expect(commandBar).toBeVisible() // Should show recent searches section const recentSection = withDemoData.locator('text=Zuletzt gesucht') // This may or may not be visible depending on implementation }) }) test.describe('Command Bar RAG Search', () => { test('searches for DSGVO content', async ({ commandBar }) => { // Type a legal query await commandBar.fill(selectors.commandInput, 'DSGVO Art. 5') // Wait for search results await commandBar.waitForSelector(selectors.commandSuggestion(0), { timeout: 5000 }) // Should show search type suggestions const suggestions = commandBar.locator('[data-testid^="command-suggestion"]') const count = await suggestions.count() expect(count).toBeGreaterThan(0) }) test('searches for AI Act content', async ({ commandBar }) => { await commandBar.fill(selectors.commandInput, 'AI Act Hochrisiko') await commandBar.waitForSelector(selectors.commandSuggestion(0), { timeout: 5000 }) const suggestions = commandBar.locator('[data-testid^="command-suggestion"]') const count = await suggestions.count() expect(count).toBeGreaterThan(0) }) })