i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-10 10:12:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: add shared fixtures and test.step() patterns

Browse Source 
- 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
This commit is contained in:
dayuan.jiang
2026-01-05 00:37:40 +09:00
parent 948cc4666d
commit 828bf43e31
19 changed files with 662 additions and 815 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
tests/e2e/theme.spec.ts
View File

@@ -1,112 +1,88 @@
import { expect, test } from "@playwright/test"
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 page
.locator("iframe")
.waitFor({ state: "visible", timeout: 30000 })
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
// Open settings
const settingsButton = page.locator(
'button[aria-label*="Settings"], button:has(svg.lucide-settings)',
)
await settingsButton.first().click()
await openSettings(page)
// Wait for settings dialog to open
await page.waitForTimeout(500)
// Check initial state (should have html class)
const html = page.locator("html")
const initialClass = await html.getAttribute("class")
// Find and click the theme toggle button (sun/moon icon)
const themeButton = page.locator(
"button:has(svg.lucide-sun), button:has(svg.lucide-moon)",
)
if ((await themeButton.count()) > 0) {
await themeButton.first().click()
await test.step("toggle theme", async () => {
await themeButton.first().click()
await sleep(500)
})
// Class should change
await page.waitForTimeout(500) // Wait for theme transition
const newClass = await html.getAttribute("class")
expect(newClass).not.toBe(initialClass)
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 page
.locator("iframe")
.waitFor({ state: "visible", timeout: 30000 })
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
// Open settings and toggle theme
const settingsButton = page.locator(
'button[aria-label*="Settings"], button:has(svg.lucide-settings)',
)
await settingsButton.first().click()
await openSettings(page)
// Click theme button if available
const themeButton = page.locator(
"button:has(svg.lucide-sun), button:has(svg.lucide-moon)",
)
if ((await themeButton.count()) > 0) {
await themeButton.first().click()
await page.waitForTimeout(300)
let themeClass: string | null
// Get current theme class
const html = page.locator("html")
const themeClass = await html.getAttribute("class")
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")
})
// Close dialog
await page.keyboard.press("Escape")
await test.step("reload page", async () => {
await page.reload({ waitUntil: "networkidle" })
await getIframe(page).waitFor({
state: "visible",
timeout: 30000,
})
})
// Reload page
await page.reload({ waitUntil: "networkidle" })
await page
.locator("iframe")
.waitFor({ state: "visible", timeout: 30000 })
// Theme should persist
const reloadedClass = await html.getAttribute("class")
expect(reloadedClass).toBe(themeClass)
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 page
.locator("iframe")
.waitFor({ state: "visible", timeout: 30000 })
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
// Open settings
const settingsButton = page.locator(
'button[aria-label*="Settings"], button:has(svg.lucide-settings)',
)
await settingsButton.first().click()
await openSettings(page)
// At least some settings content should be visible
await expect(
page.locator('[role="dialog"], [role="menu"], form').first(),
).toBeVisible({ timeout: 5000 })
})
test("system theme preference is respected", async ({ page }) => {
// Emulate dark mode preference
await page.emulateMedia({ colorScheme: "dark" })
await page.goto("/", { waitUntil: "networkidle" })
await page
.locator("iframe")
.waitFor({ state: "visible", timeout: 30000 })
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
// Check if dark mode is applied (depends on implementation)
const html = page.locator("html")
const classes = await html.getAttribute("class")
// Should have dark class or similar
// This depends on the app's theme implementation
expect(classes).toBeDefined()
})
})