breakpilot-pwa/admin-v2/e2e/specs/command-bar.spec.ts

/**
 * 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)
  })
})