editor/packages/editor/e2e/suggestion-menu.spec.ts

import { expect, test } from "@playwright/test"

test.describe("Suggestion menu", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/editor?e2e=true")
  })

  test("typing / opens the suggestion menu", async ({ page }) => {
    const firstBlock = page.locator("[data-block-id]").first()
    await firstBlock.focus()
    await page.keyboard.type("/")

    await expect(page.locator("[data-command-palette]")).toBeVisible({
      timeout: 3000,
    })
  })

  test("suggestion menu shows items with data-menu-item-index", async ({ page }) => {
    const firstBlock = page.locator("[data-block-id]").first()
    await firstBlock.focus()
    await page.keyboard.type("/")

    const menu = page.locator("[data-command-palette]")
    await expect(menu).toBeVisible({ timeout: 3000 })

    const items = menu.locator("[data-menu-item-index]")
    const count = await items.count()
    expect(count).toBeGreaterThan(0)
  })

  test("Escape closes the suggestion menu", async ({ page }) => {
    const firstBlock = page.locator("[data-block-id]").first()
    await firstBlock.focus()
    await page.keyboard.type("/")

    const menu = page.locator("[data-command-palette]")
    await expect(menu).toBeVisible({ timeout: 3000 })

    await page.keyboard.press("Escape")
    await expect(menu).not.toBeVisible()
  })

  test("ArrowDown highlights next item", async ({ page }) => {
    const firstBlock = page.locator("[data-block-id]").first()
    await firstBlock.focus()
    await page.keyboard.type("/")

    const menu = page.locator("[data-command-palette]")
    await expect(menu).toBeVisible({ timeout: 3000 })

    // First item should be highlighted initially
    const firstItem = menu.locator('[data-menu-item-index="0"]')
    await expect(firstItem).toHaveAttribute("data-highlighted")

    await page.keyboard.press("ArrowDown")

    // Second item should now be highlighted
    const secondItem = menu.locator('[data-menu-item-index="1"]')
    await expect(secondItem).toHaveAttribute("data-highlighted")
  })

  test("ArrowUp wraps to last item", async ({ page }) => {
    const firstBlock = page.locator("[data-block-id]").first()
    await firstBlock.focus()
    await page.keyboard.type("/")

    const menu = page.locator("[data-command-palette]")
    await expect(menu).toBeVisible({ timeout: 3000 })

    await page.keyboard.press("ArrowUp")

    const items = menu.locator("[data-menu-item-index]")
    const lastIndex = (await items.count()) - 1
    const lastItem = menu.locator(`[data-menu-item-index="${lastIndex}"]`)
    await expect(lastItem).toHaveAttribute("data-highlighted")
  })

  test("Enter selects the highlighted item and closes menu", async ({ page }) => {
    const firstBlock = page.locator("[data-block-id]").first()
    await firstBlock.focus()
    await page.keyboard.type("/")

    const menu = page.locator("[data-command-palette]")
    await expect(menu).toBeVisible({ timeout: 3000 })

    // Slash commands insert content — just verify the menu closes
    await page.keyboard.press("Enter")
    await expect(menu).not.toBeVisible()
  })
})