diff --git a/tests/e2e/keyboard.spec.ts b/tests/e2e/keyboard.spec.ts index 88f997e..db811c6 100644 --- a/tests/e2e/keyboard.spec.ts +++ b/tests/e2e/keyboard.spec.ts @@ -9,27 +9,28 @@ test.describe("Keyboard Interactions", () => { }) test("Escape closes settings dialog", async ({ page }) => { - // Find and click settings button - const buttons = page - .locator("button") - .filter({ has: page.locator("svg") }) - const settingsBtn = buttons.nth(1) // Usually second button is settings + // Find settings button using aria-label or icon + const settingsButton = page.locator( + 'button[aria-label*="settings"], button:has(svg[class*="settings"])', + ) + await expect(settingsButton).toBeVisible() + await settingsButton.click() - if (await settingsBtn.isVisible()) { - await settingsBtn.click() - await page.waitForTimeout(500) + // Wait for dialog to appear + const dialog = page.locator('[role="dialog"]') + await expect(dialog).toBeVisible({ timeout: 5000 }) - const dialog = page.locator('[role="dialog"]') - if (await dialog.isVisible()) { - await page.keyboard.press("Escape") - await expect(dialog).not.toBeVisible({ timeout: 2000 }) - } - } + // Press Escape and verify dialog closes + await page.keyboard.press("Escape") + await expect(dialog).not.toBeVisible({ timeout: 2000 }) }) - test("page responds to keyboard events", async ({ page }) => { - // Just verify the page is interactive - await page.keyboard.press("Tab") - // No error means success + test("page is keyboard accessible", async ({ page }) => { + // Verify page has focusable elements + const focusableElements = page.locator( + 'button, [tabindex="0"], input, textarea, a[href]', + ) + const count = await focusableElements.count() + expect(count).toBeGreaterThan(0) }) }) diff --git a/tests/e2e/model-config.spec.ts b/tests/e2e/model-config.spec.ts index cc88043..e324482 100644 --- a/tests/e2e/model-config.spec.ts +++ b/tests/e2e/model-config.spec.ts @@ -8,36 +8,22 @@ test.describe("Model Configuration", () => { .waitFor({ state: "visible", timeout: 30000 }) }) - test("model dropdown is visible", async ({ page }) => { - // Model selector should be in chat input area - const modelSelector = page.locator( - 'button[aria-label*="model"], [class*="model"]', - ) - - // At least one model-related element should exist - const modelElements = page.locator("text=/model|gpt|claude|gemini/i") - const count = await modelElements.count() - expect(count).toBeGreaterThanOrEqual(0) // May not have models configured - }) - - test("settings has model configuration section", async ({ page }) => { + test("settings dialog opens and shows configuration options", async ({ + page, + }) => { // Open settings const settingsButton = page.locator( 'button[aria-label*="settings"], button:has(svg[class*="settings"])', ) + await expect(settingsButton).toBeVisible() await settingsButton.click() const dialog = page.locator('[role="dialog"]') await expect(dialog).toBeVisible({ timeout: 5000 }) - // Should have provider/model related UI - // Look for common provider names or configuration labels - const hasProviderUI = - (await dialog - .locator("text=/provider|api key|openai|anthropic|google/i") - .count()) > 0 - - // This test passes if settings dialog opens successfully - // Model config may or may not be visible depending on app state + // Settings dialog should have some configuration UI + const buttons = dialog.locator("button") + const buttonCount = await buttons.count() + expect(buttonCount).toBeGreaterThan(0) }) }) diff --git a/tests/e2e/settings.spec.ts b/tests/e2e/settings.spec.ts index 9e98474..cb6f4ae 100644 --- a/tests/e2e/settings.spec.ts +++ b/tests/e2e/settings.spec.ts @@ -8,39 +8,18 @@ test.describe("Settings", () => { .waitFor({ state: "visible", timeout: 30000 }) }) - test("dark mode toggle works", async ({ page }) => { - // Open settings + test("settings dialog opens", async ({ page }) => { const settingsButton = page.locator( 'button[aria-label*="settings"], button:has(svg[class*="settings"])', ) + await expect(settingsButton).toBeVisible() await settingsButton.click() const dialog = page.locator('[role="dialog"]') await expect(dialog).toBeVisible({ timeout: 5000 }) - - // Find dark mode toggle - const darkModeButton = dialog.locator( - 'button:has(svg[class*="moon"]), button:has(svg[class*="sun"])', - ) - - if (await darkModeButton.isVisible()) { - // Get initial state - const htmlClass = await page.locator("html").getAttribute("class") - const wasDark = htmlClass?.includes("dark") - - // Click toggle - await darkModeButton.click() - - // Verify state changed - const newClass = await page.locator("html").getAttribute("class") - const isDark = newClass?.includes("dark") - - expect(isDark).not.toBe(wasDark) - } }) test("language selection is available", async ({ page }) => { - // Open settings const settingsButton = page.locator( 'button[aria-label*="settings"], button:has(svg[class*="settings"])', ) @@ -49,12 +28,11 @@ test.describe("Settings", () => { const dialog = page.locator('[role="dialog"]') await expect(dialog).toBeVisible({ timeout: 5000 }) - // Should have language selector + // Should have language selector showing English await expect(dialog.locator('text="English"')).toBeVisible() }) test("draw.io theme toggle exists", async ({ page }) => { - // Open settings const settingsButton = page.locator( 'button[aria-label*="settings"], button:has(svg[class*="settings"])', ) @@ -63,7 +41,7 @@ test.describe("Settings", () => { const dialog = page.locator('[role="dialog"]') await expect(dialog).toBeVisible({ timeout: 5000 }) - // Should have draw.io theme option + // Should have draw.io theme option (sketch or minimal) const themeText = dialog.locator("text=/sketch|minimal/i") await expect(themeText.first()).toBeVisible() }) diff --git a/tests/e2e/smoke.spec.ts b/tests/e2e/smoke.spec.ts index 506a68d..4f8d590 100644 --- a/tests/e2e/smoke.spec.ts +++ b/tests/e2e/smoke.spec.ts @@ -29,7 +29,7 @@ test.describe("Smoke Tests", () => { }) test("settings dialog opens", async ({ page }) => { - await page.goto("/") + await page.goto("/", { waitUntil: "networkidle" }) // Wait for page to load await page @@ -38,14 +38,14 @@ test.describe("Smoke Tests", () => { // Click settings button (gear icon) const settingsButton = page.locator( - 'button[aria-label*="settings"], button:has(svg[class*="lucide-settings"])', + 'button[aria-label*="settings"], button:has(svg[class*="settings"])', ) - if (await settingsButton.isVisible()) { - await settingsButton.click() - // Check if settings dialog appears - await expect(page.locator('[role="dialog"]')).toBeVisible({ - timeout: 5000, - }) - } + await expect(settingsButton).toBeVisible() + await settingsButton.click() + + // Check if settings dialog appears + await expect(page.locator('[role="dialog"]')).toBeVisible({ + timeout: 5000, + }) }) })