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
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

View File

@@ -1,34 +1,34 @@
import { expect, test } from "@playwright/test"
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", async (route) => {
await route.fulfill({
status: 500,
contentType: "application/json",
body: JSON.stringify({ error: "Internal server error" }),
})
})
await page.route(
"**/api/chat",
createErrorMock(500, "Internal server error"),
)
await page.goto("/", { waitUntil: "networkidle" })
await page
.locator("iframe")
.waitFor({ state: "visible", timeout: 30000 })
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
const chatInput = page.locator('textarea[aria-label="Chat input"]')
await expect(chatInput).toBeVisible({ timeout: 10000 })
await sendMessage(page, "Draw a cat")
await chatInput.fill("Draw a cat")
await chatInput.press("ControlOrMeta+Enter")
// Should show error indication (toast, alert, or error text)
// 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 (input still functional)
// User should be able to type again
const chatInput = getChatInput(page)
await chatInput.fill("Retry message")
await expect(chatInput).toHaveValue("Retry message")
})
@@ -36,24 +36,15 @@ test.describe("Error Handling", () => {
test("displays error message when API returns 429 rate limit", async ({
page,
}) => {
await page.route("**/api/chat", async (route) => {
await route.fulfill({
status: 429,
contentType: "application/json",
body: JSON.stringify({ error: "Rate limit exceeded" }),
})
})
await page.route(
"**/api/chat",
createErrorMock(429, "Rate limit exceeded"),
)
await page.goto("/", { waitUntil: "networkidle" })
await page
.locator("iframe")
.waitFor({ state: "visible", timeout: 30000 })
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
const chatInput = page.locator('textarea[aria-label="Chat input"]')
await expect(chatInput).toBeVisible({ timeout: 10000 })
await chatInput.fill("Draw a cat")
await chatInput.press("ControlOrMeta+Enter")
await sendMessage(page, "Draw a cat")
// Should show error indication for rate limit
const errorIndicator = page
@@ -63,27 +54,21 @@ test.describe("Error Handling", () => {
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) => {
// Simulate timeout by not responding for a short time then aborting
await new Promise((resolve) => setTimeout(resolve, 2000))
await route.abort("timedout")
})
await page.goto("/", { waitUntil: "networkidle" })
await page
.locator("iframe")
.waitFor({ state: "visible", timeout: 30000 })
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
const chatInput = page.locator('textarea[aria-label="Chat input"]')
await expect(chatInput).toBeVisible({ timeout: 10000 })
await chatInput.fill("Draw a cat")
await chatInput.press("ControlOrMeta+Enter")
await sendMessage(page, "Draw a cat")
// Should show error indication for network failure
const errorIndicator = page
@@ -93,6 +78,7 @@ test.describe("Error Handling", () => {
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")
})
@@ -102,10 +88,6 @@ test.describe("Error Handling", () => {
const textId = `text_${Date.now()}`
const messageId = `msg_${Date.now()}`
// Truncated XML (missing closing tags)
const truncatedXml = `<mxCell id="node1" value="Start" style="rounded=1;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="100" height="40"`
const events = [
{ type: "start", messageId },
{ type: "text-start", id: textId },
@@ -120,7 +102,7 @@ test.describe("Error Handling", () => {
type: "tool-input-available",
toolCallId,
toolName: "display_diagram",
input: { xml: truncatedXml },
input: { xml: TRUNCATED_XML },
},
{
type: "tool-output-error",
@@ -142,15 +124,9 @@ test.describe("Error Handling", () => {
})
await page.goto("/", { waitUntil: "networkidle" })
await page
.locator("iframe")
.waitFor({ state: "visible", timeout: 30000 })
await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
const chatInput = page.locator('textarea[aria-label="Chat input"]')
await expect(chatInput).toBeVisible({ timeout: 10000 })
await chatInput.fill("Draw something")
await chatInput.press("ControlOrMeta+Enter")
await sendMessage(page, "Draw something")
// Should show truncated badge
await expect(page.locator('text="Truncated"')).toBeVisible({