Files
next-ai-draw-io/tests/e2e/settings.spec.ts
T
dayuan.jiang 366d9ee4ff feat(ui): canvas-first redesign with a self-hosted draw.io
The canvas now fills the window and the chat floats on its right. draw.io is
served from our own origin (public/drawio, downloaded at build time and
checked against the release's SHA-256), so the app can drive the editor
directly:

- every AI change becomes a version card with a thumbnail; compare, restore
  or undo it, and Ctrl+Z on the canvas takes an AI change back in one step
- shapes the AI just changed are highlighted on the canvas
- selected shapes appear as a chip and are sent to the model
- the app's own canvas toolbar, shape library and page tabs replace
  draw.io's chrome
- new start screen, session rename and switcher, open .drawio files
- settings split into Models & keys, Appearance, Advanced and About
- phones switch between canvas and chat
- dark mode keeps the diagram on a white sheet and no longer flashes

With an external draw.io (NEXT_PUBLIC_DRAWIO_BASE_URL) the app falls back to
draw.io's own toolbar and the features above that need same origin are off.

The chat logic moved from the 1500-line chat panel into a chat engine plus
small UI components; zustand holds canvas, versions, settings and UI state.
2026-10-06 22:01:09 +09:00

58 lines
1.8 KiB
TypeScript

import {
expect,
getIframe,
openSettings,
openSettingsTab,
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 openSettingsTab(page, "appearance")
const dialog = page.locator('[role="dialog"]')
await expect(dialog.locator("#language-select")).toHaveText(/English/)
})
test("max output tokens is editable and persists", async ({ page }) => {
await openSettingsTab(page, "advanced")
const input = page.locator("#max-output-tokens")
await expect(input).toBeVisible()
await input.fill("48000")
await expect
.poll(() =>
page.evaluate(() =>
localStorage.getItem("next-ai-draw-io-max-output-tokens"),
),
)
.toBe("48000")
// Non-digits are dropped so the header always carries a plain number
await input.fill("12k000")
await expect(input).toHaveValue("12000")
})
test("theme can be light, dark or follow the system", async ({ page }) => {
await openSettingsTab(page, "appearance")
const dialog = page.locator('[role="dialog"]')
for (const name of ["Light", "Dark", "System"]) {
await expect(dialog.getByRole("radio", { name })).toBeVisible()
}
await dialog.getByRole("radio", { name: "Dark" }).click()
await expect(page.locator("html")).toHaveClass(/dark/)
})
})