mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-09-01 17:10:24 +08:00
test: add Vitest and Playwright testing infrastructure (#512)
* test: add Vitest and Playwright testing infrastructure - Add Vitest for unit tests (39 tests) - cached-responses.test.ts - ai-providers.test.ts - chat-helpers.test.ts - utils.test.ts - Add Playwright for E2E tests (3 smoke tests) - Homepage load - Japanese locale - Settings dialog - Add CI workflow (.github/workflows/test.yml) - Add vitest.config.mts and playwright.config.ts - Update .gitignore for test artifacts * test: add more E2E tests for UI components - Chat panel tests (interactive elements, iframe) - Settings tests (dark mode, language, draw.io theme) - Save dialog tests (buttons exist) - History dialog tests - Model config tests - Keyboard interaction tests - Upload area tests Total: 15 E2E tests, all passing * test: fix E2E test issues from review Fixes based on Gemini and Codex review: - Remove brittle nth(1) selector in keyboard tests - Remove waitForTimeout(500) race condition - Remove if(isVisible) silent skip patterns - Add proper assertions instead of no-op checks - Remove expect(count >= 0) that always passes - Remove unused hasProviderUI variable All 14 E2E tests and 39 unit tests pass. * style: auto-format with Biome * fix: resolve lint errors for CI * test(e2e): add diagram generation tests with mocked AI responses - Add tests for generate, edit, and append diagram operations - Use SSE mocked responses matching AI SDK UI message stream format - Generate mxCell XML directly in tests for deterministic assertions - Tests verify tool card rendering and 'Complete' badge state * test: add comprehensive E2E tests for all major features - Error handling tests (API errors, rate limits, network timeout, truncated XML) - Multi-turn conversation tests (sequential requests, history preservation) - File upload tests (upload button, file preview, sending with message) - Theme switching tests (dark mode toggle, persistence, system preference) - Language switching tests (EN/JA/ZH, persistence, locale URLs) - Iframe interaction tests (draw.io loading, toolbar, diagram rendering) - Copy/paste tests (chat input, XML input, special characters) - History restore tests (new chat, persistence, browser navigation) * refactor: extract shared test helpers and improve error assertions - Create tests/e2e/lib/helpers.ts with shared SSE mock functions - Add proper error UI assertions to error-handling.spec.ts - Remove waitForTimeout calls in favor of real assertions - Update 6 test files to use shared helpers * docs: add testing section to CONTRIBUTING.md * fix: improve test infrastructure based on PR review - Fix double build in CI: remove redundant build from playwright webServer - Export chat helpers from shared module for proper unit testing - Replace waitForTimeout with explicit waits in E2E tests - Add data-testid attributes to settings and new chat buttons - Add list reporter for CI to show failures in logs - Add Playwright browser caching to speed up CI - Add vitest coverage configuration - Fix conditional test assertions to use test.skip() instead of silent pass - Remove unused variables flagged by linter * fix: improve E2E test assertions and remove silent skips - Replace silent test.skip() with explicit conditional skips - Add actual persistence assertion after page reload - Use data-testid selector for new chat button test * refactor: add shared fixtures and test.step() patterns - Add tests/e2e/lib/fixtures.ts with shared test helpers - Add tests/e2e/fixtures/diagrams.ts with XML test data - Add expectBeforeAndAfterReload() helper for persistence tests - Add test.step() for better test reporting in complex tests - Consolidate mock helpers into fixtures module - Reduce code duplication across 17 test files * fix: make persistence tests more reliable - Remove expectBeforeAndAfterReload from mocked API tests - Add explicit test.step() for before/after reload checks - Add retry config for flaky clipboard tests - Add sleep after reload for language persistence test * test: remove flaky XML paste test * docs: run both unit and e2e tests before PR * chore: add type check and unit test git hooks --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Dayuan Jiang
22
tests/e2e/chat.spec.ts
Normal file
22
tests/e2e/chat.spec.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { expect, getIframe, test } from "./lib/fixtures"
|
||||
|
||||
test.describe("Chat Panel", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
})
|
||||
|
||||
test("page has interactive elements", async ({ page }) => {
|
||||
const buttons = page.locator("button")
|
||||
const count = await buttons.count()
|
||||
expect(count).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
test("draw.io iframe is interactive", async ({ page }) => {
|
||||
const iframe = getIframe(page)
|
||||
await expect(iframe).toBeVisible()
|
||||
|
||||
const src = await iframe.getAttribute("src")
|
||||
expect(src).toBeTruthy()
|
||||
})
|
||||
})
|
||||
137
tests/e2e/copy-paste.spec.ts
Normal file
137
tests/e2e/copy-paste.spec.ts
Normal file
@@ -0,0 +1,137 @@
|
||||
import { SINGLE_BOX_XML } from "./fixtures/diagrams"
|
||||
import {
|
||||
expect,
|
||||
getChatInput,
|
||||
getIframe,
|
||||
sendMessage,
|
||||
test,
|
||||
} from "./lib/fixtures"
|
||||
import { createMockSSEResponse } from "./lib/helpers"
|
||||
|
||||
test.describe("Copy/Paste Functionality", () => {
|
||||
test("can paste text into chat input", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const chatInput = getChatInput(page)
|
||||
await expect(chatInput).toBeVisible({ timeout: 10000 })
|
||||
|
||||
await chatInput.focus()
|
||||
await page.keyboard.insertText("Create a flowchart diagram")
|
||||
|
||||
await expect(chatInput).toHaveValue("Create a flowchart diagram")
|
||||
})
|
||||
|
||||
test("can paste multiline text into chat input", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const chatInput = getChatInput(page)
|
||||
await expect(chatInput).toBeVisible({ timeout: 10000 })
|
||||
|
||||
await chatInput.focus()
|
||||
const multilineText = "Line 1\nLine 2\nLine 3"
|
||||
await page.keyboard.insertText(multilineText)
|
||||
|
||||
await expect(chatInput).toHaveValue(multilineText)
|
||||
})
|
||||
|
||||
test("copy button copies response text", async ({ page }) => {
|
||||
await page.route("**/api/chat", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createMockSSEResponse(
|
||||
SINGLE_BOX_XML,
|
||||
"Here is your diagram with a test box.",
|
||||
),
|
||||
})
|
||||
})
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await sendMessage(page, "Create a test box")
|
||||
|
||||
// Wait for response
|
||||
await expect(
|
||||
page.locator('text="Here is your diagram with a test box."'),
|
||||
).toBeVisible({ timeout: 15000 })
|
||||
|
||||
// Find copy button in message
|
||||
const copyButton = page.locator(
|
||||
'[data-testid="copy-button"], button[aria-label*="Copy"], button:has(svg.lucide-copy), button:has(svg.lucide-clipboard)',
|
||||
)
|
||||
|
||||
// Copy button feature may not exist - skip if not available
|
||||
const buttonCount = await copyButton.count()
|
||||
if (buttonCount === 0) {
|
||||
test.skip()
|
||||
return
|
||||
}
|
||||
|
||||
await copyButton.first().click()
|
||||
await expect(
|
||||
page.locator('text="Copied"').or(page.locator("svg.lucide-check")),
|
||||
).toBeVisible({ timeout: 3000 })
|
||||
})
|
||||
|
||||
test("keyboard shortcuts work in chat input", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const chatInput = getChatInput(page)
|
||||
await expect(chatInput).toBeVisible({ timeout: 10000 })
|
||||
|
||||
await chatInput.fill("Hello world")
|
||||
await chatInput.press("ControlOrMeta+a")
|
||||
await chatInput.fill("New text")
|
||||
|
||||
await expect(chatInput).toHaveValue("New text")
|
||||
})
|
||||
|
||||
test("can undo/redo in chat input", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const chatInput = getChatInput(page)
|
||||
await expect(chatInput).toBeVisible({ timeout: 10000 })
|
||||
|
||||
await chatInput.fill("First text")
|
||||
await chatInput.press("Tab")
|
||||
|
||||
await chatInput.focus()
|
||||
await chatInput.fill("Second text")
|
||||
await chatInput.press("ControlOrMeta+z")
|
||||
|
||||
// Verify page is still functional after undo
|
||||
await expect(chatInput).toBeVisible()
|
||||
})
|
||||
|
||||
test("chat input handles special characters", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const chatInput = getChatInput(page)
|
||||
await expect(chatInput).toBeVisible({ timeout: 10000 })
|
||||
|
||||
const specialText = "Test <>&\"' special chars 日本語 中文 🎉"
|
||||
await chatInput.fill(specialText)
|
||||
|
||||
await expect(chatInput).toHaveValue(specialText)
|
||||
})
|
||||
|
||||
test("long text in chat input scrolls", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const chatInput = getChatInput(page)
|
||||
await expect(chatInput).toBeVisible({ timeout: 10000 })
|
||||
|
||||
const longText = "This is a very long text. ".repeat(50)
|
||||
await chatInput.fill(longText)
|
||||
|
||||
const value = await chatInput.inputValue()
|
||||
expect(value.length).toBeGreaterThan(500)
|
||||
})
|
||||
})
|
||||
128
tests/e2e/diagram-generation.spec.ts
Normal file
128
tests/e2e/diagram-generation.spec.ts
Normal file
@@ -0,0 +1,128 @@
|
||||
import {
|
||||
CAT_DIAGRAM_XML,
|
||||
FLOWCHART_XML,
|
||||
NEW_NODE_XML,
|
||||
} from "./fixtures/diagrams"
|
||||
import {
|
||||
createMultiTurnMock,
|
||||
expect,
|
||||
getChatInput,
|
||||
sendMessage,
|
||||
test,
|
||||
waitForComplete,
|
||||
waitForCompleteCount,
|
||||
} from "./lib/fixtures"
|
||||
import { createMockSSEResponse } from "./lib/helpers"
|
||||
|
||||
test.describe("Diagram Generation", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.route("**/api/chat", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createMockSSEResponse(
|
||||
CAT_DIAGRAM_XML,
|
||||
"I'll create a diagram for you.",
|
||||
),
|
||||
})
|
||||
})
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await page
|
||||
.locator("iframe")
|
||||
.waitFor({ state: "visible", timeout: 30000 })
|
||||
})
|
||||
|
||||
test("generates and displays a diagram", async ({ page }) => {
|
||||
await sendMessage(page, "Draw a cat")
|
||||
await expect(page.locator('text="Generate Diagram"')).toBeVisible({
|
||||
timeout: 15000,
|
||||
})
|
||||
await waitForComplete(page)
|
||||
})
|
||||
|
||||
test("chat input clears after sending", async ({ page }) => {
|
||||
const chatInput = getChatInput(page)
|
||||
await expect(chatInput).toBeVisible({ timeout: 10000 })
|
||||
|
||||
await chatInput.fill("Draw a cat")
|
||||
await chatInput.press("ControlOrMeta+Enter")
|
||||
|
||||
await expect(chatInput).toHaveValue("", { timeout: 5000 })
|
||||
})
|
||||
|
||||
test("user message appears in chat", async ({ page }) => {
|
||||
await sendMessage(page, "Draw a cute cat")
|
||||
await expect(page.locator('text="Draw a cute cat"')).toBeVisible({
|
||||
timeout: 10000,
|
||||
})
|
||||
})
|
||||
|
||||
test("assistant text message appears in chat", async ({ page }) => {
|
||||
await sendMessage(page, "Draw a cat")
|
||||
await expect(
|
||||
page.locator('text="I\'ll create a diagram for you."'),
|
||||
).toBeVisible({ timeout: 10000 })
|
||||
})
|
||||
})
|
||||
|
||||
test.describe("Diagram Edit", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.route(
|
||||
"**/api/chat",
|
||||
createMultiTurnMock([
|
||||
{ xml: FLOWCHART_XML, text: "I'll create a diagram for you." },
|
||||
{
|
||||
xml: FLOWCHART_XML.replace("Process", "Updated Process"),
|
||||
text: "I'll create a diagram for you.",
|
||||
},
|
||||
]),
|
||||
)
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await page
|
||||
.locator("iframe")
|
||||
.waitFor({ state: "visible", timeout: 30000 })
|
||||
})
|
||||
|
||||
test("can edit an existing diagram", async ({ page }) => {
|
||||
// First: create initial diagram
|
||||
await sendMessage(page, "Create a flowchart")
|
||||
await waitForComplete(page)
|
||||
|
||||
// Second: edit the diagram
|
||||
await sendMessage(page, "Change Process to Updated Process")
|
||||
await waitForCompleteCount(page, 2)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe("Diagram Append", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.route(
|
||||
"**/api/chat",
|
||||
createMultiTurnMock([
|
||||
{ xml: FLOWCHART_XML, text: "I'll create a diagram for you." },
|
||||
{
|
||||
xml: NEW_NODE_XML,
|
||||
text: "I'll create a diagram for you.",
|
||||
toolName: "append_diagram",
|
||||
},
|
||||
]),
|
||||
)
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await page
|
||||
.locator("iframe")
|
||||
.waitFor({ state: "visible", timeout: 30000 })
|
||||
})
|
||||
|
||||
test("can append to an existing diagram", async ({ page }) => {
|
||||
// First: create initial diagram
|
||||
await sendMessage(page, "Create a flowchart")
|
||||
await waitForComplete(page)
|
||||
|
||||
// Second: append to diagram
|
||||
await sendMessage(page, "Add a new node to the right")
|
||||
await waitForCompleteCount(page, 2)
|
||||
})
|
||||
})
|
||||
136
tests/e2e/error-handling.spec.ts
Normal file
136
tests/e2e/error-handling.spec.ts
Normal file
@@ -0,0 +1,136 @@
|
||||
import { TRUNCATED_XML } from "./fixtures/diagrams"
|
||||
import {
|
||||
createErrorMock,
|
||||
expect,
|
||||
getChatInput,
|
||||
getIframe,
|
||||
sendMessage,
|
||||
test,
|
||||
} from "./lib/fixtures"
|
||||
|
||||
test.describe("Error Handling", () => {
|
||||
test("displays error message when API returns 500", async ({ page }) => {
|
||||
await page.route(
|
||||
"**/api/chat",
|
||||
createErrorMock(500, "Internal server error"),
|
||||
)
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await sendMessage(page, "Draw a cat")
|
||||
|
||||
// Should show error indication
|
||||
const errorIndicator = page
|
||||
.locator('[role="alert"]')
|
||||
.or(page.locator("[data-sonner-toast]"))
|
||||
.or(page.locator("text=/error|failed|something went wrong/i"))
|
||||
await expect(errorIndicator.first()).toBeVisible({ timeout: 10000 })
|
||||
|
||||
// User should be able to type again
|
||||
const chatInput = getChatInput(page)
|
||||
await chatInput.fill("Retry message")
|
||||
await expect(chatInput).toHaveValue("Retry message")
|
||||
})
|
||||
|
||||
test("displays error message when API returns 429 rate limit", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.route(
|
||||
"**/api/chat",
|
||||
createErrorMock(429, "Rate limit exceeded"),
|
||||
)
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await sendMessage(page, "Draw a cat")
|
||||
|
||||
// Should show error indication for rate limit
|
||||
const errorIndicator = page
|
||||
.locator('[role="alert"]')
|
||||
.or(page.locator("[data-sonner-toast]"))
|
||||
.or(page.locator("text=/rate limit|too many|try again/i"))
|
||||
await expect(errorIndicator.first()).toBeVisible({ timeout: 10000 })
|
||||
|
||||
// User should be able to type again
|
||||
const chatInput = getChatInput(page)
|
||||
await chatInput.fill("Retry after rate limit")
|
||||
await expect(chatInput).toHaveValue("Retry after rate limit")
|
||||
})
|
||||
|
||||
test("handles network timeout gracefully", async ({ page }) => {
|
||||
await page.route("**/api/chat", async (route) => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000))
|
||||
await route.abort("timedout")
|
||||
})
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await sendMessage(page, "Draw a cat")
|
||||
|
||||
// Should show error indication for network failure
|
||||
const errorIndicator = page
|
||||
.locator('[role="alert"]')
|
||||
.or(page.locator("[data-sonner-toast]"))
|
||||
.or(page.locator("text=/error|failed|network|timeout/i"))
|
||||
await expect(errorIndicator.first()).toBeVisible({ timeout: 10000 })
|
||||
|
||||
// After timeout, user should be able to type again
|
||||
const chatInput = getChatInput(page)
|
||||
await chatInput.fill("Try again after timeout")
|
||||
await expect(chatInput).toHaveValue("Try again after timeout")
|
||||
})
|
||||
|
||||
test("shows truncated badge for incomplete XML", async ({ page }) => {
|
||||
const toolCallId = `call_${Date.now()}`
|
||||
const textId = `text_${Date.now()}`
|
||||
const messageId = `msg_${Date.now()}`
|
||||
|
||||
const events = [
|
||||
{ type: "start", messageId },
|
||||
{ type: "text-start", id: textId },
|
||||
{ type: "text-delta", id: textId, delta: "Creating diagram..." },
|
||||
{ type: "text-end", id: textId },
|
||||
{
|
||||
type: "tool-input-start",
|
||||
toolCallId,
|
||||
toolName: "display_diagram",
|
||||
},
|
||||
{
|
||||
type: "tool-input-available",
|
||||
toolCallId,
|
||||
toolName: "display_diagram",
|
||||
input: { xml: TRUNCATED_XML },
|
||||
},
|
||||
{
|
||||
type: "tool-output-error",
|
||||
toolCallId,
|
||||
error: "XML validation failed",
|
||||
},
|
||||
{ type: "finish" },
|
||||
]
|
||||
|
||||
await page.route("**/api/chat", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body:
|
||||
events
|
||||
.map((e) => `data: ${JSON.stringify(e)}\n\n`)
|
||||
.join("") + "data: [DONE]\n\n",
|
||||
})
|
||||
})
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await sendMessage(page, "Draw something")
|
||||
|
||||
// Should show truncated badge
|
||||
await expect(page.locator('text="Truncated"')).toBeVisible({
|
||||
timeout: 15000,
|
||||
})
|
||||
})
|
||||
})
|
||||
152
tests/e2e/file-upload.spec.ts
Normal file
152
tests/e2e/file-upload.spec.ts
Normal file
@@ -0,0 +1,152 @@
|
||||
import { SINGLE_BOX_XML } from "./fixtures/diagrams"
|
||||
import {
|
||||
expect,
|
||||
getChatInput,
|
||||
getIframe,
|
||||
sendMessage,
|
||||
test,
|
||||
} from "./lib/fixtures"
|
||||
import { createMockSSEResponse } from "./lib/helpers"
|
||||
|
||||
test.describe("File Upload", () => {
|
||||
test("upload button opens file picker", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const uploadButton = page.locator(
|
||||
'button[aria-label="Upload file"], button:has(svg.lucide-image)',
|
||||
)
|
||||
await expect(uploadButton.first()).toBeVisible({ timeout: 10000 })
|
||||
await expect(uploadButton.first()).toBeEnabled()
|
||||
})
|
||||
|
||||
test("shows file preview after selecting image", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const fileInput = page.locator('input[type="file"]')
|
||||
|
||||
await fileInput.setInputFiles({
|
||||
name: "test-image.png",
|
||||
mimeType: "image/png",
|
||||
buffer: Buffer.from(
|
||||
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
|
||||
"base64",
|
||||
),
|
||||
})
|
||||
|
||||
await expect(
|
||||
page.locator('[role="alert"][data-type="error"]'),
|
||||
).not.toBeVisible({ timeout: 2000 })
|
||||
})
|
||||
|
||||
test("can remove uploaded file", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const fileInput = page.locator('input[type="file"]')
|
||||
|
||||
await fileInput.setInputFiles({
|
||||
name: "test-image.png",
|
||||
mimeType: "image/png",
|
||||
buffer: Buffer.from(
|
||||
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
|
||||
"base64",
|
||||
),
|
||||
})
|
||||
|
||||
await expect(
|
||||
page.locator('[role="alert"][data-type="error"]'),
|
||||
).not.toBeVisible({ timeout: 2000 })
|
||||
|
||||
const removeButton = page.locator(
|
||||
'[data-testid="remove-file-button"], button[aria-label*="Remove"], button:has(svg.lucide-x)',
|
||||
)
|
||||
|
||||
const removeButtonCount = await removeButton.count()
|
||||
if (removeButtonCount === 0) {
|
||||
test.skip()
|
||||
return
|
||||
}
|
||||
|
||||
await removeButton.first().click()
|
||||
await expect(removeButton.first()).not.toBeVisible({ timeout: 2000 })
|
||||
})
|
||||
|
||||
test("sends file with message to API", async ({ page }) => {
|
||||
let capturedRequest: any = null
|
||||
|
||||
await page.route("**/api/chat", async (route) => {
|
||||
capturedRequest = route.request()
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createMockSSEResponse(
|
||||
SINGLE_BOX_XML,
|
||||
"Based on your image, here is a diagram:",
|
||||
),
|
||||
})
|
||||
})
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const fileInput = page.locator('input[type="file"]')
|
||||
|
||||
await fileInput.setInputFiles({
|
||||
name: "architecture.png",
|
||||
mimeType: "image/png",
|
||||
buffer: Buffer.from(
|
||||
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
|
||||
"base64",
|
||||
),
|
||||
})
|
||||
|
||||
await sendMessage(page, "Convert this to a diagram")
|
||||
|
||||
await expect(
|
||||
page.locator('text="Based on your image, here is a diagram:"'),
|
||||
).toBeVisible({ timeout: 15000 })
|
||||
|
||||
expect(capturedRequest).not.toBeNull()
|
||||
})
|
||||
|
||||
test("shows error for oversized file", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const fileInput = page.locator('input[type="file"]')
|
||||
const largeBuffer = Buffer.alloc(3 * 1024 * 1024, "x")
|
||||
|
||||
await fileInput.setInputFiles({
|
||||
name: "large-image.png",
|
||||
mimeType: "image/png",
|
||||
buffer: largeBuffer,
|
||||
})
|
||||
|
||||
await expect(
|
||||
page.locator('[role="alert"], [data-sonner-toast]').first(),
|
||||
).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test("drag and drop file upload works", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const chatForm = page.locator("form").first()
|
||||
|
||||
const dataTransfer = await page.evaluateHandle(() => {
|
||||
const dt = new DataTransfer()
|
||||
const file = new File(["test content"], "dropped-image.png", {
|
||||
type: "image/png",
|
||||
})
|
||||
dt.items.add(file)
|
||||
return dt
|
||||
})
|
||||
|
||||
await chatForm.dispatchEvent("dragover", { dataTransfer })
|
||||
await chatForm.dispatchEvent("drop", { dataTransfer })
|
||||
|
||||
await expect(getChatInput(page)).toBeVisible({ timeout: 3000 })
|
||||
})
|
||||
})
|
||||
50
tests/e2e/fixtures/diagrams.ts
Normal file
50
tests/e2e/fixtures/diagrams.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Shared XML diagram fixtures for E2E tests
|
||||
*/
|
||||
|
||||
// Simple cat diagram
|
||||
export const CAT_DIAGRAM_XML = `<mxCell id="cat-head" value="Cat Head" style="ellipse;whiteSpace=wrap;html=1;fillColor=#FFE4B5;" vertex="1" parent="1">
|
||||
<mxGeometry x="200" y="100" width="100" height="80" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="cat-body" value="Cat Body" style="ellipse;whiteSpace=wrap;html=1;fillColor=#FFE4B5;" vertex="1" parent="1">
|
||||
<mxGeometry x="180" y="180" width="140" height="100" as="geometry"/>
|
||||
</mxCell>`
|
||||
|
||||
// Simple flowchart
|
||||
export const FLOWCHART_XML = `<mxCell id="start" value="Start" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;" vertex="1" parent="1">
|
||||
<mxGeometry x="200" y="50" width="100" height="40" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="process" value="Process" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;" vertex="1" parent="1">
|
||||
<mxGeometry x="200" y="130" width="100" height="40" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="end" value="End" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;" vertex="1" parent="1">
|
||||
<mxGeometry x="200" y="210" width="100" height="40" as="geometry"/>
|
||||
</mxCell>`
|
||||
|
||||
// Simple single box
|
||||
export const SINGLE_BOX_XML = `<mxCell id="box" value="Test Box" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;" vertex="1" parent="1">
|
||||
<mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
|
||||
</mxCell>`
|
||||
|
||||
// Test node for iframe interaction tests
|
||||
export const TEST_NODE_XML = `<mxCell id="test-node-123" value="Test Node" style="rounded=1;fillColor=#d5e8d4;" vertex="1" parent="1">
|
||||
<mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
|
||||
</mxCell>`
|
||||
|
||||
// Architecture box
|
||||
export const ARCHITECTURE_XML = `<mxCell id="arch" value="Architecture" style="rounded=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="100" y="100" width="120" height="50" as="geometry"/>
|
||||
</mxCell>`
|
||||
|
||||
// New node for append tests
|
||||
export const NEW_NODE_XML = `<mxCell id="new-node" value="New Node" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;" vertex="1" parent="1">
|
||||
<mxGeometry x="350" y="130" width="100" height="40" as="geometry"/>
|
||||
</mxCell>`
|
||||
|
||||
// Truncated XML for error tests
|
||||
export const TRUNCATED_XML = `<mxCell id="node1" value="Start" style="rounded=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="100" y="100" width="100" height="40"`
|
||||
|
||||
// Simple boxes for multi-turn tests
|
||||
export const createBoxXml = (id: string, label: string, y = 100) =>
|
||||
`<mxCell id="${id}" value="${label}" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="${y}" width="100" height="40" as="geometry"/></mxCell>`
|
||||
215
tests/e2e/history-restore.spec.ts
Normal file
215
tests/e2e/history-restore.spec.ts
Normal file
@@ -0,0 +1,215 @@
|
||||
import { SINGLE_BOX_XML } from "./fixtures/diagrams"
|
||||
import {
|
||||
expect,
|
||||
expectBeforeAndAfterReload,
|
||||
getChatInput,
|
||||
getIframe,
|
||||
getIframeContent,
|
||||
openSettings,
|
||||
sendMessage,
|
||||
test,
|
||||
waitForComplete,
|
||||
waitForText,
|
||||
} from "./lib/fixtures"
|
||||
import { createMockSSEResponse } from "./lib/helpers"
|
||||
|
||||
test.describe("History and Session Restore", () => {
|
||||
test("new chat button clears conversation", async ({ page }) => {
|
||||
await page.route("**/api/chat", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createMockSSEResponse(
|
||||
SINGLE_BOX_XML,
|
||||
"Created your test diagram.",
|
||||
),
|
||||
})
|
||||
})
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await test.step("create a conversation", async () => {
|
||||
await sendMessage(page, "Create a test diagram")
|
||||
await waitForText(page, "Created your test diagram.")
|
||||
})
|
||||
|
||||
await test.step("click new chat button", async () => {
|
||||
const newChatButton = page.locator(
|
||||
'[data-testid="new-chat-button"]',
|
||||
)
|
||||
await expect(newChatButton).toBeVisible({ timeout: 5000 })
|
||||
await newChatButton.click()
|
||||
})
|
||||
|
||||
await test.step("verify conversation is cleared", async () => {
|
||||
await expect(
|
||||
page.locator('text="Created your test diagram."'),
|
||||
).not.toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
})
|
||||
|
||||
test("chat history sidebar shows past conversations", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const historyButton = page.locator(
|
||||
'button[aria-label*="History"]:not([disabled]), button:has(svg.lucide-history):not([disabled]), button:has(svg.lucide-menu):not([disabled]), button:has(svg.lucide-sidebar):not([disabled]), button:has(svg.lucide-panel-left):not([disabled])',
|
||||
)
|
||||
|
||||
const buttonCount = await historyButton.count()
|
||||
if (buttonCount === 0) {
|
||||
test.skip()
|
||||
return
|
||||
}
|
||||
|
||||
await historyButton.first().click()
|
||||
await expect(getChatInput(page)).toBeVisible({ timeout: 3000 })
|
||||
})
|
||||
|
||||
test("conversation persists after page reload", async ({ page }) => {
|
||||
await page.route("**/api/chat", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createMockSSEResponse(
|
||||
SINGLE_BOX_XML,
|
||||
"This message should persist.",
|
||||
),
|
||||
})
|
||||
})
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await test.step("create conversation", async () => {
|
||||
await sendMessage(page, "Create persistent diagram")
|
||||
await waitForText(page, "This message should persist.")
|
||||
})
|
||||
|
||||
await test.step("verify message appears before reload", async () => {
|
||||
await expect(getChatInput(page)).toBeVisible({ timeout: 10000 })
|
||||
await expect(
|
||||
page.locator('text="This message should persist."'),
|
||||
).toBeVisible({ timeout: 10000 })
|
||||
})
|
||||
|
||||
// Note: After reload, mocked responses won't persist since we're not
|
||||
// testing with real localStorage. We just verify the app loads correctly.
|
||||
await test.step("verify app loads after reload", async () => {
|
||||
await page.reload({ waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
await expect(getChatInput(page)).toBeVisible({ timeout: 10000 })
|
||||
})
|
||||
})
|
||||
|
||||
test("diagram state persists after reload", async ({ page }) => {
|
||||
await page.route("**/api/chat", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createMockSSEResponse(
|
||||
SINGLE_BOX_XML,
|
||||
"Created a diagram that should be saved.",
|
||||
),
|
||||
})
|
||||
})
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await sendMessage(page, "Create saveable diagram")
|
||||
await waitForComplete(page)
|
||||
|
||||
await page.reload({ waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const frame = getIframeContent(page)
|
||||
await expect(
|
||||
frame
|
||||
.locator(".geMenubarContainer, .geDiagramContainer, canvas")
|
||||
.first(),
|
||||
).toBeVisible({ timeout: 30000 })
|
||||
})
|
||||
|
||||
test("can restore from browser back/forward", async ({ page }) => {
|
||||
await page.route("**/api/chat", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createMockSSEResponse(
|
||||
SINGLE_BOX_XML,
|
||||
"Testing browser navigation.",
|
||||
),
|
||||
})
|
||||
})
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await sendMessage(page, "Test navigation")
|
||||
await waitForText(page, "Testing browser navigation.")
|
||||
|
||||
await page.goto("/about", { waitUntil: "networkidle" })
|
||||
await page.goBack({ waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await expect(getChatInput(page)).toBeVisible({ timeout: 10000 })
|
||||
})
|
||||
|
||||
test("settings are restored after reload", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await openSettings(page)
|
||||
await page.keyboard.press("Escape")
|
||||
|
||||
await page.reload({ waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await openSettings(page)
|
||||
})
|
||||
|
||||
test("model selection persists", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const modelSelector = page.locator(
|
||||
'button[aria-label*="Model"], [data-testid="model-selector"], button:has-text("Claude")',
|
||||
)
|
||||
|
||||
const selectorCount = await modelSelector.count()
|
||||
if (selectorCount === 0) {
|
||||
test.skip()
|
||||
return
|
||||
}
|
||||
|
||||
const initialModel = await modelSelector.first().textContent()
|
||||
|
||||
await page.reload({ waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const modelAfterReload = await modelSelector.first().textContent()
|
||||
expect(modelAfterReload).toBe(initialModel)
|
||||
})
|
||||
|
||||
test("handles localStorage quota exceeded gracefully", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await page.evaluate(() => {
|
||||
try {
|
||||
const largeData = "x".repeat(5 * 1024 * 1024)
|
||||
localStorage.setItem("test-large-data", largeData)
|
||||
} catch {
|
||||
// Expected to fail on some browsers
|
||||
}
|
||||
})
|
||||
|
||||
await expect(getChatInput(page)).toBeVisible({ timeout: 10000 })
|
||||
|
||||
await page.evaluate(() => {
|
||||
localStorage.removeItem("test-large-data")
|
||||
})
|
||||
})
|
||||
})
|
||||
18
tests/e2e/history.spec.ts
Normal file
18
tests/e2e/history.spec.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { expect, getIframe, test } from "./lib/fixtures"
|
||||
|
||||
test.describe("History Dialog", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
})
|
||||
|
||||
test("history button exists in UI", async ({ page }) => {
|
||||
// History button may be disabled initially (no history)
|
||||
// Just verify it exists in the DOM
|
||||
const historyButton = page
|
||||
.locator("button")
|
||||
.filter({ has: page.locator("svg") })
|
||||
const count = await historyButton.count()
|
||||
expect(count).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
122
tests/e2e/iframe-interaction.spec.ts
Normal file
122
tests/e2e/iframe-interaction.spec.ts
Normal file
@@ -0,0 +1,122 @@
|
||||
import { TEST_NODE_XML } from "./fixtures/diagrams"
|
||||
import {
|
||||
expect,
|
||||
getChatInput,
|
||||
getIframe,
|
||||
getIframeContent,
|
||||
sendMessage,
|
||||
test,
|
||||
waitForComplete,
|
||||
} from "./lib/fixtures"
|
||||
import { createMockSSEResponse } from "./lib/helpers"
|
||||
|
||||
test.describe("Iframe Interaction", () => {
|
||||
test("draw.io iframe loads successfully", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
|
||||
const iframe = getIframe(page)
|
||||
await expect(iframe).toBeVisible({ timeout: 30000 })
|
||||
|
||||
// iframe should have loaded draw.io content
|
||||
const frame = getIframeContent(page)
|
||||
await expect(
|
||||
frame
|
||||
.locator(".geMenubarContainer, .geDiagramContainer, canvas")
|
||||
.first(),
|
||||
).toBeVisible({ timeout: 30000 })
|
||||
})
|
||||
|
||||
test("can interact with draw.io toolbar", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const frame = getIframeContent(page)
|
||||
|
||||
// Draw.io menu items should be accessible
|
||||
await expect(
|
||||
frame
|
||||
.locator('text="Diagram"')
|
||||
.or(frame.locator('[title*="Diagram"]')),
|
||||
).toBeVisible({ timeout: 10000 })
|
||||
})
|
||||
|
||||
test("diagram XML is rendered in iframe after generation", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.route("**/api/chat", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createMockSSEResponse(
|
||||
TEST_NODE_XML,
|
||||
"Here is your diagram:",
|
||||
),
|
||||
})
|
||||
})
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await sendMessage(page, "Create a test node")
|
||||
await waitForComplete(page)
|
||||
|
||||
// Give draw.io time to render
|
||||
await page.waitForTimeout(1000)
|
||||
})
|
||||
|
||||
test("zoom controls work in draw.io", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const frame = getIframeContent(page)
|
||||
|
||||
// draw.io should be loaded and functional - check for diagram container
|
||||
await expect(
|
||||
frame.locator(".geDiagramContainer, canvas").first(),
|
||||
).toBeVisible({ timeout: 10000 })
|
||||
})
|
||||
|
||||
test("can resize the panel divider", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
// Find the resizer/divider between panels
|
||||
const resizer = page.locator(
|
||||
'[role="separator"], [data-panel-resize-handle-id], .resize-handle',
|
||||
)
|
||||
|
||||
if ((await resizer.count()) > 0) {
|
||||
await expect(resizer.first()).toBeVisible()
|
||||
|
||||
const box = await resizer.first().boundingBox()
|
||||
if (box) {
|
||||
await page.mouse.move(
|
||||
box.x + box.width / 2,
|
||||
box.y + box.height / 2,
|
||||
)
|
||||
await page.mouse.down()
|
||||
await page.mouse.move(box.x + 50, box.y + box.height / 2)
|
||||
await page.mouse.up()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
test("iframe responds to window resize", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const iframe = getIframe(page)
|
||||
const initialBox = await iframe.boundingBox()
|
||||
|
||||
// Resize window
|
||||
await page.setViewportSize({ width: 800, height: 600 })
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
const newBox = await iframe.boundingBox()
|
||||
|
||||
expect(newBox).toBeDefined()
|
||||
if (initialBox && newBox) {
|
||||
expect(newBox.width).toBeLessThanOrEqual(800)
|
||||
}
|
||||
})
|
||||
})
|
||||
26
tests/e2e/keyboard.spec.ts
Normal file
26
tests/e2e/keyboard.spec.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { expect, getIframe, openSettings, test } from "./lib/fixtures"
|
||||
|
||||
test.describe("Keyboard Interactions", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
})
|
||||
|
||||
test("Escape closes settings dialog", async ({ page }) => {
|
||||
await openSettings(page)
|
||||
|
||||
const dialog = page.locator('[role="dialog"]')
|
||||
await expect(dialog).toBeVisible({ timeout: 5000 })
|
||||
|
||||
await page.keyboard.press("Escape")
|
||||
await expect(dialog).not.toBeVisible({ timeout: 2000 })
|
||||
})
|
||||
|
||||
test("page is keyboard accessible", async ({ page }) => {
|
||||
const focusableElements = page.locator(
|
||||
'button, [tabindex="0"], input, textarea, a[href]',
|
||||
)
|
||||
const count = await focusableElements.count()
|
||||
expect(count).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
105
tests/e2e/language.spec.ts
Normal file
105
tests/e2e/language.spec.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
import {
|
||||
expect,
|
||||
expectBeforeAndAfterReload,
|
||||
getChatInput,
|
||||
getIframe,
|
||||
openSettings,
|
||||
sleep,
|
||||
test,
|
||||
} from "./lib/fixtures"
|
||||
|
||||
test.describe("Language Switching", () => {
|
||||
test("loads English by default", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const chatInput = getChatInput(page)
|
||||
await expect(chatInput).toBeVisible({ timeout: 10000 })
|
||||
|
||||
await expect(page.locator('button:has-text("Send")')).toBeVisible()
|
||||
})
|
||||
|
||||
test("can switch to Japanese", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await test.step("open settings and select Japanese", async () => {
|
||||
await openSettings(page)
|
||||
const languageSelector = page.locator('button:has-text("English")')
|
||||
await languageSelector.first().click()
|
||||
await page.locator('text="日本語"').click()
|
||||
})
|
||||
|
||||
await test.step("verify UI is in Japanese", async () => {
|
||||
await expect(page.locator('button:has-text("送信")')).toBeVisible({
|
||||
timeout: 5000,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
test("can switch to Chinese", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await test.step("open settings and select Chinese", async () => {
|
||||
await openSettings(page)
|
||||
const languageSelector = page.locator('button:has-text("English")')
|
||||
await languageSelector.first().click()
|
||||
await page.locator('text="中文"').click()
|
||||
})
|
||||
|
||||
await test.step("verify UI is in Chinese", async () => {
|
||||
await expect(page.locator('button:has-text("发送")')).toBeVisible({
|
||||
timeout: 5000,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
test("language persists after reload", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await test.step("switch to Japanese", async () => {
|
||||
await openSettings(page)
|
||||
const languageSelector = page.locator('button:has-text("English")')
|
||||
await languageSelector.first().click()
|
||||
await page.locator('text="日本語"').click()
|
||||
await page.keyboard.press("Escape")
|
||||
await sleep(500)
|
||||
})
|
||||
|
||||
await test.step("verify Japanese before reload", async () => {
|
||||
await expect(page.locator('button:has-text("送信")')).toBeVisible({
|
||||
timeout: 10000,
|
||||
})
|
||||
})
|
||||
|
||||
await test.step("reload and verify Japanese persists", async () => {
|
||||
await page.reload({ waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
// Wait for hydration and localStorage to be read
|
||||
await sleep(1000)
|
||||
await expect(page.locator('button:has-text("送信")')).toBeVisible({
|
||||
timeout: 10000,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
test("Japanese locale URL works", async ({ page }) => {
|
||||
await page.goto("/ja", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await expect(page.locator('button:has-text("送信")')).toBeVisible({
|
||||
timeout: 10000,
|
||||
})
|
||||
})
|
||||
|
||||
test("Chinese locale URL works", async ({ page }) => {
|
||||
await page.goto("/zh", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await expect(page.locator('button:has-text("发送")')).toBeVisible({
|
||||
timeout: 10000,
|
||||
})
|
||||
})
|
||||
})
|
||||
208
tests/e2e/lib/fixtures.ts
Normal file
208
tests/e2e/lib/fixtures.ts
Normal file
@@ -0,0 +1,208 @@
|
||||
/**
|
||||
* Playwright test fixtures for E2E tests
|
||||
* Uses test.extend to provide common setup and helpers
|
||||
*/
|
||||
|
||||
import { test as base, expect, type Page, type Route } from "@playwright/test"
|
||||
import { createMockSSEResponse, createTextOnlyResponse } from "./helpers"
|
||||
|
||||
/**
|
||||
* Extended test with common fixtures
|
||||
*/
|
||||
export const test = base.extend<{
|
||||
/** Page with iframe already loaded */
|
||||
appPage: Page
|
||||
}>({
|
||||
appPage: async ({ page }, use) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await page
|
||||
.locator("iframe")
|
||||
.waitFor({ state: "visible", timeout: 30000 })
|
||||
await use(page)
|
||||
},
|
||||
})
|
||||
|
||||
export { expect }
|
||||
|
||||
// ============================================
|
||||
// Locator helpers
|
||||
// ============================================
|
||||
|
||||
/** Get the chat input textarea */
|
||||
export function getChatInput(page: Page) {
|
||||
return page.locator('textarea[aria-label="Chat input"]')
|
||||
}
|
||||
|
||||
/** Get the draw.io iframe */
|
||||
export function getIframe(page: Page) {
|
||||
return page.locator("iframe")
|
||||
}
|
||||
|
||||
/** Get the iframe's frame locator for internal queries */
|
||||
export function getIframeContent(page: Page) {
|
||||
return page.frameLocator("iframe")
|
||||
}
|
||||
|
||||
/** Get the settings button */
|
||||
export function getSettingsButton(page: Page) {
|
||||
return page.locator('[data-testid="settings-button"]')
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Action helpers
|
||||
// ============================================
|
||||
|
||||
/** Send a message in the chat input */
|
||||
export async function sendMessage(page: Page, message: string) {
|
||||
const chatInput = getChatInput(page)
|
||||
await expect(chatInput).toBeVisible({ timeout: 10000 })
|
||||
await chatInput.fill(message)
|
||||
await chatInput.press("ControlOrMeta+Enter")
|
||||
}
|
||||
|
||||
/** Wait for diagram generation to complete */
|
||||
export async function waitForComplete(page: Page, timeout = 15000) {
|
||||
await expect(page.locator('text="Complete"')).toBeVisible({ timeout })
|
||||
}
|
||||
|
||||
/** Wait for N "Complete" badges */
|
||||
export async function waitForCompleteCount(
|
||||
page: Page,
|
||||
count: number,
|
||||
timeout = 15000,
|
||||
) {
|
||||
await expect(page.locator('text="Complete"')).toHaveCount(count, {
|
||||
timeout,
|
||||
})
|
||||
}
|
||||
|
||||
/** Wait for a specific text to appear */
|
||||
export async function waitForText(page: Page, text: string, timeout = 15000) {
|
||||
await expect(page.locator(`text="${text}"`)).toBeVisible({ timeout })
|
||||
}
|
||||
|
||||
/** Open settings dialog */
|
||||
export async function openSettings(page: Page) {
|
||||
await getSettingsButton(page).click()
|
||||
await expect(page.locator('[role="dialog"]')).toBeVisible({ timeout: 5000 })
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Mock helpers
|
||||
// ============================================
|
||||
|
||||
interface MockResponse {
|
||||
xml: string
|
||||
text: string
|
||||
toolName?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a multi-turn mock handler
|
||||
* Each request gets the next response in the array
|
||||
*/
|
||||
export function createMultiTurnMock(responses: MockResponse[]) {
|
||||
let requestCount = 0
|
||||
return async (route: Route) => {
|
||||
const response =
|
||||
responses[requestCount] || responses[responses.length - 1]
|
||||
requestCount++
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createMockSSEResponse(
|
||||
response.xml,
|
||||
response.text,
|
||||
response.toolName,
|
||||
),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a mock that returns text-only responses
|
||||
*/
|
||||
export function createTextOnlyMock(responses: string[]) {
|
||||
let requestCount = 0
|
||||
return async (route: Route) => {
|
||||
const text = responses[requestCount] || responses[responses.length - 1]
|
||||
requestCount++
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createTextOnlyResponse(text),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a mock that alternates between text and diagram responses
|
||||
*/
|
||||
export function createMixedMock(
|
||||
responses: Array<
|
||||
| { type: "text"; text: string }
|
||||
| { type: "diagram"; xml: string; text: string }
|
||||
>,
|
||||
) {
|
||||
let requestCount = 0
|
||||
return async (route: Route) => {
|
||||
const response =
|
||||
responses[requestCount] || responses[responses.length - 1]
|
||||
requestCount++
|
||||
if (response.type === "text") {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createTextOnlyResponse(response.text),
|
||||
})
|
||||
} else {
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createMockSSEResponse(response.xml, response.text),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a mock that returns an error
|
||||
*/
|
||||
export function createErrorMock(status: number, error: string) {
|
||||
return async (route: Route) => {
|
||||
await route.fulfill({
|
||||
status,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ error }),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Persistence helpers
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Test that state persists across page reload.
|
||||
* Runs assertions before reload, reloads page, then runs assertions again.
|
||||
* Keep assertions narrow and explicit - test one specific thing.
|
||||
*
|
||||
* @param page - Playwright page
|
||||
* @param description - What persistence is being tested (for debugging)
|
||||
* @param assertion - Async function with expect() calls
|
||||
*/
|
||||
export async function expectBeforeAndAfterReload(
|
||||
page: Page,
|
||||
description: string,
|
||||
assertion: () => Promise<void>,
|
||||
) {
|
||||
await test.step(`verify ${description} before reload`, assertion)
|
||||
await page.reload({ waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
await test.step(`verify ${description} after reload`, assertion)
|
||||
}
|
||||
|
||||
/** Simple sleep helper */
|
||||
export function sleep(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms))
|
||||
}
|
||||
88
tests/e2e/lib/helpers.ts
Normal file
88
tests/e2e/lib/helpers.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* Shared test helpers for E2E tests
|
||||
*/
|
||||
|
||||
/**
|
||||
* Creates a mock SSE response for the chat API
|
||||
* Format matches AI SDK UI message stream protocol
|
||||
*/
|
||||
export function createMockSSEResponse(
|
||||
xml: string,
|
||||
text: string,
|
||||
toolName = "display_diagram",
|
||||
) {
|
||||
const messageId = `msg_${Date.now()}`
|
||||
const toolCallId = `call_${Date.now()}`
|
||||
const textId = `text_${Date.now()}`
|
||||
|
||||
const events = [
|
||||
{ type: "start", messageId },
|
||||
{ type: "text-start", id: textId },
|
||||
{ type: "text-delta", id: textId, delta: text },
|
||||
{ type: "text-end", id: textId },
|
||||
{ type: "tool-input-start", toolCallId, toolName },
|
||||
{ type: "tool-input-available", toolCallId, toolName, input: { xml } },
|
||||
{
|
||||
type: "tool-output-available",
|
||||
toolCallId,
|
||||
output: "Successfully displayed the diagram",
|
||||
},
|
||||
{ type: "finish" },
|
||||
]
|
||||
|
||||
return (
|
||||
events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
|
||||
"data: [DONE]\n\n"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a text-only SSE response (no tool call)
|
||||
*/
|
||||
export function createTextOnlyResponse(text: string) {
|
||||
const messageId = `msg_${Date.now()}`
|
||||
const textId = `text_${Date.now()}`
|
||||
|
||||
const events = [
|
||||
{ type: "start", messageId },
|
||||
{ type: "text-start", id: textId },
|
||||
{ type: "text-delta", id: textId, delta: text },
|
||||
{ type: "text-end", id: textId },
|
||||
{ type: "finish" },
|
||||
]
|
||||
|
||||
return (
|
||||
events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
|
||||
"data: [DONE]\n\n"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a mock SSE response with a tool error
|
||||
*/
|
||||
export function createToolErrorResponse(text: string, errorMessage: string) {
|
||||
const messageId = `msg_${Date.now()}`
|
||||
const toolCallId = `call_${Date.now()}`
|
||||
const textId = `text_${Date.now()}`
|
||||
|
||||
const events = [
|
||||
{ type: "start", messageId },
|
||||
{ type: "text-start", id: textId },
|
||||
{ type: "text-delta", id: textId, delta: text },
|
||||
{ type: "text-end", id: textId },
|
||||
{ type: "tool-input-start", toolCallId, toolName: "display_diagram" },
|
||||
{
|
||||
type: "tool-input-available",
|
||||
toolCallId,
|
||||
toolName: "display_diagram",
|
||||
input: { xml: "<invalid>" },
|
||||
},
|
||||
{ type: "tool-output-error", toolCallId, error: errorMessage },
|
||||
{ type: "finish" },
|
||||
]
|
||||
|
||||
return (
|
||||
events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
|
||||
"data: [DONE]\n\n"
|
||||
)
|
||||
}
|
||||
19
tests/e2e/model-config.spec.ts
Normal file
19
tests/e2e/model-config.spec.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { expect, getIframe, openSettings, test } from "./lib/fixtures"
|
||||
|
||||
test.describe("Model Configuration", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
})
|
||||
|
||||
test("settings dialog opens and shows configuration options", async ({
|
||||
page,
|
||||
}) => {
|
||||
await openSettings(page)
|
||||
|
||||
const dialog = page.locator('[role="dialog"]')
|
||||
const buttons = dialog.locator("button")
|
||||
const buttonCount = await buttons.count()
|
||||
expect(buttonCount).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
113
tests/e2e/multi-turn.spec.ts
Normal file
113
tests/e2e/multi-turn.spec.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
import { ARCHITECTURE_XML, createBoxXml } from "./fixtures/diagrams"
|
||||
import {
|
||||
createMixedMock,
|
||||
createMultiTurnMock,
|
||||
expect,
|
||||
getChatInput,
|
||||
sendMessage,
|
||||
test,
|
||||
waitForComplete,
|
||||
waitForText,
|
||||
} from "./lib/fixtures"
|
||||
import { createTextOnlyResponse } from "./lib/helpers"
|
||||
|
||||
test.describe("Multi-turn Conversation", () => {
|
||||
test("handles multiple diagram requests in sequence", async ({ page }) => {
|
||||
await page.route(
|
||||
"**/api/chat",
|
||||
createMultiTurnMock([
|
||||
{
|
||||
xml: createBoxXml("box1", "First"),
|
||||
text: "Creating diagram 1...",
|
||||
},
|
||||
{
|
||||
xml: createBoxXml("box2", "Second", 200),
|
||||
text: "Creating diagram 2...",
|
||||
},
|
||||
]),
|
||||
)
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await page
|
||||
.locator("iframe")
|
||||
.waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
// First request
|
||||
await sendMessage(page, "Draw first box")
|
||||
await waitForText(page, "Creating diagram 1...")
|
||||
|
||||
// Second request
|
||||
await sendMessage(page, "Draw second box")
|
||||
await waitForText(page, "Creating diagram 2...")
|
||||
|
||||
// Both messages should be visible
|
||||
await expect(page.locator('text="Draw first box"')).toBeVisible()
|
||||
await expect(page.locator('text="Draw second box"')).toBeVisible()
|
||||
})
|
||||
|
||||
test("preserves conversation history", async ({ page }) => {
|
||||
let requestCount = 0
|
||||
await page.route("**/api/chat", async (route) => {
|
||||
requestCount++
|
||||
const request = route.request()
|
||||
const body = JSON.parse(request.postData() || "{}")
|
||||
|
||||
// Verify messages array grows with each request
|
||||
if (requestCount === 2) {
|
||||
expect(body.messages?.length).toBeGreaterThan(1)
|
||||
}
|
||||
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "text/event-stream",
|
||||
body: createTextOnlyResponse(`Response ${requestCount}`),
|
||||
})
|
||||
})
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await page
|
||||
.locator("iframe")
|
||||
.waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
// First message
|
||||
await sendMessage(page, "Hello")
|
||||
await waitForText(page, "Response 1")
|
||||
|
||||
// Second message (should include history)
|
||||
await sendMessage(page, "Follow up question")
|
||||
await waitForText(page, "Response 2")
|
||||
})
|
||||
|
||||
test("can continue after a text-only response", async ({ page }) => {
|
||||
await page.route(
|
||||
"**/api/chat",
|
||||
createMixedMock([
|
||||
{
|
||||
type: "text",
|
||||
text: "I understand. Let me explain the architecture first.",
|
||||
},
|
||||
{
|
||||
type: "diagram",
|
||||
xml: ARCHITECTURE_XML,
|
||||
text: "Here is the diagram:",
|
||||
},
|
||||
]),
|
||||
)
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await page
|
||||
.locator("iframe")
|
||||
.waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
// Ask for explanation first
|
||||
await sendMessage(page, "Explain the architecture")
|
||||
await waitForText(
|
||||
page,
|
||||
"I understand. Let me explain the architecture first.",
|
||||
)
|
||||
|
||||
// Then ask for diagram
|
||||
await sendMessage(page, "Now show it as a diagram")
|
||||
await waitForComplete(page)
|
||||
})
|
||||
})
|
||||
16
tests/e2e/save.spec.ts
Normal file
16
tests/e2e/save.spec.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { expect, getIframe, test } from "./lib/fixtures"
|
||||
|
||||
test.describe("Save Dialog", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
})
|
||||
|
||||
test("save/download buttons exist", async ({ page }) => {
|
||||
const buttons = page
|
||||
.locator("button")
|
||||
.filter({ has: page.locator("svg") })
|
||||
const count = await buttons.count()
|
||||
expect(count).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
34
tests/e2e/settings.spec.ts
Normal file
34
tests/e2e/settings.spec.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import {
|
||||
expect,
|
||||
getIframe,
|
||||
getSettingsButton,
|
||||
openSettings,
|
||||
test,
|
||||
} from "./lib/fixtures"
|
||||
|
||||
test.describe("Settings", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
})
|
||||
|
||||
test("settings dialog opens", async ({ page }) => {
|
||||
await openSettings(page)
|
||||
// openSettings already verifies dialog is visible
|
||||
})
|
||||
|
||||
test("language selection is available", async ({ page }) => {
|
||||
await openSettings(page)
|
||||
|
||||
const dialog = page.locator('[role="dialog"]')
|
||||
await expect(dialog.locator('text="English"')).toBeVisible()
|
||||
})
|
||||
|
||||
test("draw.io theme toggle exists", async ({ page }) => {
|
||||
await openSettings(page)
|
||||
|
||||
const dialog = page.locator('[role="dialog"]')
|
||||
const themeText = dialog.locator("text=/sketch|minimal/i")
|
||||
await expect(themeText.first()).toBeVisible()
|
||||
})
|
||||
})
|
||||
36
tests/e2e/smoke.spec.ts
Normal file
36
tests/e2e/smoke.spec.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { expect, getIframe, openSettings, test } from "./lib/fixtures"
|
||||
|
||||
test.describe("Smoke Tests", () => {
|
||||
test("homepage loads without errors", async ({ page }) => {
|
||||
const errors: string[] = []
|
||||
page.on("pageerror", (err) => errors.push(err.message))
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await expect(page).toHaveTitle(/Draw\.io/i, { timeout: 10000 })
|
||||
|
||||
const iframe = getIframe(page)
|
||||
await expect(iframe).toBeVisible({ timeout: 30000 })
|
||||
|
||||
expect(errors).toEqual([])
|
||||
})
|
||||
|
||||
test("Japanese locale page loads", async ({ page }) => {
|
||||
const errors: string[] = []
|
||||
page.on("pageerror", (err) => errors.push(err.message))
|
||||
|
||||
await page.goto("/ja", { waitUntil: "networkidle" })
|
||||
await expect(page).toHaveTitle(/Draw\.io/i, { timeout: 10000 })
|
||||
|
||||
const iframe = getIframe(page)
|
||||
await expect(iframe).toBeVisible({ timeout: 30000 })
|
||||
|
||||
expect(errors).toEqual([])
|
||||
})
|
||||
|
||||
test("settings dialog opens", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await openSettings(page)
|
||||
})
|
||||
})
|
||||
88
tests/e2e/theme.spec.ts
Normal file
88
tests/e2e/theme.spec.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
import { expect, getIframe, openSettings, sleep, test } from "./lib/fixtures"
|
||||
|
||||
test.describe("Theme Switching", () => {
|
||||
test("can toggle app dark mode", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await openSettings(page)
|
||||
|
||||
const html = page.locator("html")
|
||||
const initialClass = await html.getAttribute("class")
|
||||
|
||||
const themeButton = page.locator(
|
||||
"button:has(svg.lucide-sun), button:has(svg.lucide-moon)",
|
||||
)
|
||||
|
||||
if ((await themeButton.count()) > 0) {
|
||||
await test.step("toggle theme", async () => {
|
||||
await themeButton.first().click()
|
||||
await sleep(500)
|
||||
})
|
||||
|
||||
await test.step("verify theme changed", async () => {
|
||||
const newClass = await html.getAttribute("class")
|
||||
expect(newClass).not.toBe(initialClass)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
test("theme persists after page reload", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await openSettings(page)
|
||||
|
||||
const themeButton = page.locator(
|
||||
"button:has(svg.lucide-sun), button:has(svg.lucide-moon)",
|
||||
)
|
||||
|
||||
if ((await themeButton.count()) > 0) {
|
||||
let themeClass: string | null
|
||||
|
||||
await test.step("change theme", async () => {
|
||||
await themeButton.first().click()
|
||||
await sleep(300)
|
||||
themeClass = await page.locator("html").getAttribute("class")
|
||||
await page.keyboard.press("Escape")
|
||||
})
|
||||
|
||||
await test.step("reload page", async () => {
|
||||
await page.reload({ waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({
|
||||
state: "visible",
|
||||
timeout: 30000,
|
||||
})
|
||||
})
|
||||
|
||||
await test.step("verify theme persisted", async () => {
|
||||
const reloadedClass = await page
|
||||
.locator("html")
|
||||
.getAttribute("class")
|
||||
expect(reloadedClass).toBe(themeClass)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
test("draw.io theme toggle exists", async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
await openSettings(page)
|
||||
|
||||
await expect(
|
||||
page.locator('[role="dialog"], [role="menu"], form').first(),
|
||||
).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test("system theme preference is respected", async ({ page }) => {
|
||||
await page.emulateMedia({ colorScheme: "dark" })
|
||||
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
|
||||
const html = page.locator("html")
|
||||
const classes = await html.getAttribute("class")
|
||||
expect(classes).toBeDefined()
|
||||
})
|
||||
})
|
||||
20
tests/e2e/upload.spec.ts
Normal file
20
tests/e2e/upload.spec.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { expect, getIframe, test } from "./lib/fixtures"
|
||||
|
||||
test.describe("File Upload Area", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto("/", { waitUntil: "networkidle" })
|
||||
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
|
||||
})
|
||||
|
||||
test("page loads without console errors", async ({ page }) => {
|
||||
const errors: string[] = []
|
||||
page.on("pageerror", (err) => errors.push(err.message))
|
||||
|
||||
await page.waitForTimeout(1000)
|
||||
|
||||
const criticalErrors = errors.filter(
|
||||
(e) => !e.includes("ResizeObserver") && !e.includes("Script error"),
|
||||
)
|
||||
expect(criticalErrors).toEqual([])
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user