mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-10 02:02:31 +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
50
tests/unit/ai-providers.test.ts
Normal file
50
tests/unit/ai-providers.test.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { describe, expect, it } from "vitest"
|
||||
import { supportsImageInput, supportsPromptCaching } from "@/lib/ai-providers"
|
||||
|
||||
describe("supportsPromptCaching", () => {
|
||||
it("returns true for Claude models", () => {
|
||||
expect(supportsPromptCaching("claude-sonnet-4-5")).toBe(true)
|
||||
expect(supportsPromptCaching("anthropic.claude-3-5-sonnet")).toBe(true)
|
||||
expect(supportsPromptCaching("us.anthropic.claude-3-5-sonnet")).toBe(
|
||||
true,
|
||||
)
|
||||
expect(supportsPromptCaching("eu.anthropic.claude-3-5-sonnet")).toBe(
|
||||
true,
|
||||
)
|
||||
})
|
||||
|
||||
it("returns false for non-Claude models", () => {
|
||||
expect(supportsPromptCaching("gpt-4o")).toBe(false)
|
||||
expect(supportsPromptCaching("gemini-pro")).toBe(false)
|
||||
expect(supportsPromptCaching("deepseek-chat")).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe("supportsImageInput", () => {
|
||||
it("returns true for models with vision capability", () => {
|
||||
expect(supportsImageInput("gpt-4-vision")).toBe(true)
|
||||
expect(supportsImageInput("qwen-vl")).toBe(true)
|
||||
expect(supportsImageInput("deepseek-vl")).toBe(true)
|
||||
})
|
||||
|
||||
it("returns false for Kimi K2 models without vision", () => {
|
||||
expect(supportsImageInput("kimi-k2")).toBe(false)
|
||||
expect(supportsImageInput("moonshot/kimi-k2")).toBe(false)
|
||||
})
|
||||
|
||||
it("returns false for DeepSeek text models", () => {
|
||||
expect(supportsImageInput("deepseek-chat")).toBe(false)
|
||||
expect(supportsImageInput("deepseek-coder")).toBe(false)
|
||||
})
|
||||
|
||||
it("returns false for Qwen text models", () => {
|
||||
expect(supportsImageInput("qwen-turbo")).toBe(false)
|
||||
expect(supportsImageInput("qwen-plus")).toBe(false)
|
||||
})
|
||||
|
||||
it("returns true for Claude and GPT models by default", () => {
|
||||
expect(supportsImageInput("claude-sonnet-4-5")).toBe(true)
|
||||
expect(supportsImageInput("gpt-4o")).toBe(true)
|
||||
expect(supportsImageInput("gemini-pro")).toBe(true)
|
||||
})
|
||||
})
|
||||
54
tests/unit/cached-responses.test.ts
Normal file
54
tests/unit/cached-responses.test.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { describe, expect, it } from "vitest"
|
||||
import {
|
||||
CACHED_EXAMPLE_RESPONSES,
|
||||
findCachedResponse,
|
||||
} from "@/lib/cached-responses"
|
||||
|
||||
describe("findCachedResponse", () => {
|
||||
it("returns cached response for exact match without image", () => {
|
||||
const result = findCachedResponse(
|
||||
"Give me a **animated connector** diagram of transformer's architecture",
|
||||
false,
|
||||
)
|
||||
expect(result).toBeDefined()
|
||||
expect(result?.xml).toContain("Transformer Architecture")
|
||||
})
|
||||
|
||||
it("returns cached response for exact match with image", () => {
|
||||
const result = findCachedResponse("Replicate this in aws style", true)
|
||||
expect(result).toBeDefined()
|
||||
expect(result?.xml).toContain("AWS")
|
||||
})
|
||||
|
||||
it("returns undefined for non-matching prompt", () => {
|
||||
const result = findCachedResponse(
|
||||
"random prompt that doesn't exist",
|
||||
false,
|
||||
)
|
||||
expect(result).toBeUndefined()
|
||||
})
|
||||
|
||||
it("returns undefined when hasImage doesn't match", () => {
|
||||
// This prompt exists but requires hasImage=true
|
||||
const result = findCachedResponse("Replicate this in aws style", false)
|
||||
expect(result).toBeUndefined()
|
||||
})
|
||||
|
||||
it("returns undefined for partial match", () => {
|
||||
const result = findCachedResponse("Give me a diagram", false)
|
||||
expect(result).toBeUndefined()
|
||||
})
|
||||
|
||||
it("returns response for Draw a cat prompt", () => {
|
||||
const result = findCachedResponse("Draw a cat for me", false)
|
||||
expect(result).toBeDefined()
|
||||
expect(result?.xml).toContain("ellipse")
|
||||
})
|
||||
|
||||
it("all cached responses have non-empty xml", () => {
|
||||
for (const response of CACHED_EXAMPLE_RESPONSES) {
|
||||
expect(response.xml).not.toBe("")
|
||||
expect(response.xml.length).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
})
|
||||
171
tests/unit/chat-helpers.test.ts
Normal file
171
tests/unit/chat-helpers.test.ts
Normal file
@@ -0,0 +1,171 @@
|
||||
// @vitest-environment node
|
||||
import { describe, expect, it } from "vitest"
|
||||
import {
|
||||
isMinimalDiagram,
|
||||
replaceHistoricalToolInputs,
|
||||
validateFileParts,
|
||||
} from "@/lib/chat-helpers"
|
||||
|
||||
describe("validateFileParts", () => {
|
||||
it("returns valid for no files", () => {
|
||||
const messages = [
|
||||
{ role: "user", parts: [{ type: "text", text: "hello" }] },
|
||||
]
|
||||
expect(validateFileParts(messages)).toEqual({ valid: true })
|
||||
})
|
||||
|
||||
it("returns valid for files under limit", () => {
|
||||
const smallBase64 = btoa("x".repeat(100))
|
||||
const messages = [
|
||||
{
|
||||
role: "user",
|
||||
parts: [
|
||||
{
|
||||
type: "file",
|
||||
url: `data:image/png;base64,${smallBase64}`,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
expect(validateFileParts(messages)).toEqual({ valid: true })
|
||||
})
|
||||
|
||||
it("returns error for too many files", () => {
|
||||
const messages = [
|
||||
{
|
||||
role: "user",
|
||||
parts: Array(6)
|
||||
.fill(null)
|
||||
.map(() => ({
|
||||
type: "file",
|
||||
url: "data:image/png;base64,abc",
|
||||
})),
|
||||
},
|
||||
]
|
||||
const result = validateFileParts(messages)
|
||||
expect(result.valid).toBe(false)
|
||||
expect(result.error).toContain("Too many files")
|
||||
})
|
||||
|
||||
it("returns error for file exceeding size limit", () => {
|
||||
// Create base64 that decodes to > 2MB
|
||||
const largeBase64 = btoa("x".repeat(3 * 1024 * 1024))
|
||||
const messages = [
|
||||
{
|
||||
role: "user",
|
||||
parts: [
|
||||
{
|
||||
type: "file",
|
||||
url: `data:image/png;base64,${largeBase64}`,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const result = validateFileParts(messages)
|
||||
expect(result.valid).toBe(false)
|
||||
expect(result.error).toContain("exceeds")
|
||||
})
|
||||
})
|
||||
|
||||
describe("isMinimalDiagram", () => {
|
||||
it("returns true for empty diagram", () => {
|
||||
const xml = '<mxCell id="0"/><mxCell id="1" parent="0"/>'
|
||||
expect(isMinimalDiagram(xml)).toBe(true)
|
||||
})
|
||||
|
||||
it("returns false for diagram with content", () => {
|
||||
const xml =
|
||||
'<mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="Hello"/>'
|
||||
expect(isMinimalDiagram(xml)).toBe(false)
|
||||
})
|
||||
|
||||
it("handles whitespace correctly", () => {
|
||||
const xml = ' <mxCell id="0"/> <mxCell id="1" parent="0"/> '
|
||||
expect(isMinimalDiagram(xml)).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe("replaceHistoricalToolInputs", () => {
|
||||
it("replaces display_diagram tool inputs with placeholder", () => {
|
||||
const messages = [
|
||||
{
|
||||
role: "assistant",
|
||||
content: [
|
||||
{
|
||||
type: "tool-call",
|
||||
toolName: "display_diagram",
|
||||
input: { xml: "<mxCell...>" },
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const result = replaceHistoricalToolInputs(messages)
|
||||
expect(result[0].content[0].input.placeholder).toContain(
|
||||
"XML content replaced",
|
||||
)
|
||||
})
|
||||
|
||||
it("replaces edit_diagram tool inputs with placeholder", () => {
|
||||
const messages = [
|
||||
{
|
||||
role: "assistant",
|
||||
content: [
|
||||
{
|
||||
type: "tool-call",
|
||||
toolName: "edit_diagram",
|
||||
input: { operations: [] },
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const result = replaceHistoricalToolInputs(messages)
|
||||
expect(result[0].content[0].input.placeholder).toContain(
|
||||
"XML content replaced",
|
||||
)
|
||||
})
|
||||
|
||||
it("removes tool calls with invalid inputs", () => {
|
||||
const messages = [
|
||||
{
|
||||
role: "assistant",
|
||||
content: [
|
||||
{
|
||||
type: "tool-call",
|
||||
toolName: "display_diagram",
|
||||
input: {},
|
||||
},
|
||||
{
|
||||
type: "tool-call",
|
||||
toolName: "display_diagram",
|
||||
input: null,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const result = replaceHistoricalToolInputs(messages)
|
||||
expect(result[0].content).toHaveLength(0)
|
||||
})
|
||||
|
||||
it("preserves non-assistant messages", () => {
|
||||
const messages = [{ role: "user", content: "hello" }]
|
||||
const result = replaceHistoricalToolInputs(messages)
|
||||
expect(result).toEqual(messages)
|
||||
})
|
||||
|
||||
it("preserves other tool calls", () => {
|
||||
const messages = [
|
||||
{
|
||||
role: "assistant",
|
||||
content: [
|
||||
{
|
||||
type: "tool-call",
|
||||
toolName: "other_tool",
|
||||
input: { foo: "bar" },
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const result = replaceHistoricalToolInputs(messages)
|
||||
expect(result[0].content[0].input).toEqual({ foo: "bar" })
|
||||
})
|
||||
})
|
||||
86
tests/unit/utils.test.ts
Normal file
86
tests/unit/utils.test.ts
Normal file
@@ -0,0 +1,86 @@
|
||||
import { describe, expect, it } from "vitest"
|
||||
import { cn, isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
|
||||
|
||||
describe("isMxCellXmlComplete", () => {
|
||||
it("returns false for empty/null input", () => {
|
||||
expect(isMxCellXmlComplete("")).toBe(false)
|
||||
expect(isMxCellXmlComplete(null)).toBe(false)
|
||||
expect(isMxCellXmlComplete(undefined)).toBe(false)
|
||||
})
|
||||
|
||||
it("returns true for self-closing mxCell", () => {
|
||||
const xml =
|
||||
'<mxCell id="2" value="Hello" style="rounded=1;" vertex="1" parent="1"/>'
|
||||
expect(isMxCellXmlComplete(xml)).toBe(true)
|
||||
})
|
||||
|
||||
it("returns true for mxCell with closing tag", () => {
|
||||
const xml = `<mxCell id="2" value="Hello" vertex="1" parent="1">
|
||||
<mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
|
||||
</mxCell>`
|
||||
expect(isMxCellXmlComplete(xml)).toBe(true)
|
||||
})
|
||||
|
||||
it("returns false for truncated mxCell", () => {
|
||||
const xml =
|
||||
'<mxCell id="2" value="Hello" style="rounded=1;" vertex="1" parent'
|
||||
expect(isMxCellXmlComplete(xml)).toBe(false)
|
||||
})
|
||||
|
||||
it("returns false for mxCell with unclosed geometry", () => {
|
||||
const xml = `<mxCell id="2" value="Hello" vertex="1" parent="1">
|
||||
<mxGeometry x="100" y="100" width="120"`
|
||||
expect(isMxCellXmlComplete(xml)).toBe(false)
|
||||
})
|
||||
|
||||
it("returns true for multiple complete mxCells", () => {
|
||||
const xml = `<mxCell id="2" value="A" vertex="1" parent="1"/>
|
||||
<mxCell id="3" value="B" vertex="1" parent="1"/>`
|
||||
expect(isMxCellXmlComplete(xml)).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe("wrapWithMxFile", () => {
|
||||
it("wraps empty string with default structure", () => {
|
||||
const result = wrapWithMxFile("")
|
||||
expect(result).toContain("<mxfile>")
|
||||
expect(result).toContain("<mxGraphModel>")
|
||||
expect(result).toContain('<mxCell id="0"/>')
|
||||
expect(result).toContain('<mxCell id="1" parent="0"/>')
|
||||
})
|
||||
|
||||
it("wraps raw mxCell content", () => {
|
||||
const xml = '<mxCell id="2" value="Hello"/>'
|
||||
const result = wrapWithMxFile(xml)
|
||||
expect(result).toContain("<mxfile>")
|
||||
expect(result).toContain(xml)
|
||||
expect(result).toContain("</mxfile>")
|
||||
})
|
||||
|
||||
it("returns full mxfile unchanged", () => {
|
||||
const fullXml =
|
||||
'<mxfile><diagram name="Page-1"><mxGraphModel></mxGraphModel></diagram></mxfile>'
|
||||
const result = wrapWithMxFile(fullXml)
|
||||
expect(result).toBe(fullXml)
|
||||
})
|
||||
|
||||
it("handles whitespace in input", () => {
|
||||
const result = wrapWithMxFile(" ")
|
||||
expect(result).toContain("<mxfile>")
|
||||
})
|
||||
})
|
||||
|
||||
describe("cn (class name utility)", () => {
|
||||
it("merges class names", () => {
|
||||
expect(cn("foo", "bar")).toBe("foo bar")
|
||||
})
|
||||
|
||||
it("handles conditional classes", () => {
|
||||
expect(cn("foo", false && "bar", "baz")).toBe("foo baz")
|
||||
})
|
||||
|
||||
it("merges tailwind classes correctly", () => {
|
||||
expect(cn("px-2", "px-4")).toBe("px-4")
|
||||
expect(cn("text-red-500", "text-blue-500")).toBe("text-blue-500")
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user