From 59179094ed7a18ceac4c1037cf506d0c2c2cebc3 Mon Sep 17 00:00:00 2001 From: lanyuanxiaoyao Date: Wed, 22 Apr 2026 00:31:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20E2E=20=E6=B5=8B=E8=AF=95=E9=9B=86?= =?UTF-8?q?=E6=88=90=E7=9C=9F=E5=AE=9E=E5=90=8E=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Playwright 双 webServer 模式自动启动 Go 后端 + Vite 前端 - 后端使用临时 SQLite 数据库隔离，固定端口 19026 - vite.config.ts proxy target 动态读取环境变量 - 新增 sql.js 依赖用于 SQLite 统计数据 seed - 新增 e2e/fixtures.ts 共享工具模块（API seed + SQLite seed） - 拆分测试文件 5→7（providers/models/stats/navigation/validation） - 删除旧文件 crud.spec.ts/sidebar.spec.ts/stats-cards.spec.ts - E2E 测试尚有部分用例需调试修复 --- frontend/bun.lock | 8 + frontend/e2e/crud.spec.ts | 264 ------------------ frontend/e2e/fixtures.ts | 87 ++++++ frontend/e2e/global-setup.ts | 10 + frontend/e2e/global-teardown.ts | 16 ++ frontend/e2e/models.spec.ts | 125 +++++++++ frontend/e2e/navigation.spec.ts | 51 ++++ frontend/e2e/providers.spec.ts | 186 +++++------- frontend/e2e/sidebar.spec.ts | 31 -- frontend/e2e/stats-cards.spec.ts | 36 --- frontend/e2e/stats.spec.ts | 217 ++++++++------ frontend/e2e/validation.spec.ts | 75 +++++ frontend/package.json | 2 + frontend/playwright.config.ts | 42 ++- frontend/vite.config.ts | 2 +- .../changes/e2e-real-backend/.openspec.yaml | 2 + openspec/changes/e2e-real-backend/design.md | 85 ++++++ openspec/changes/e2e-real-backend/proposal.md | 29 ++ .../specs/e2e-testing/spec.md | 216 ++++++++++++++ openspec/changes/e2e-real-backend/tasks.md | 29 ++ 20 files changed, 973 insertions(+), 540 deletions(-) delete mode 100644 frontend/e2e/crud.spec.ts create mode 100644 frontend/e2e/fixtures.ts create mode 100644 frontend/e2e/global-setup.ts create mode 100644 frontend/e2e/global-teardown.ts create mode 100644 frontend/e2e/models.spec.ts create mode 100644 frontend/e2e/navigation.spec.ts delete mode 100644 frontend/e2e/sidebar.spec.ts delete mode 100644 frontend/e2e/stats-cards.spec.ts create mode 100644 frontend/e2e/validation.spec.ts create mode 100644 openspec/changes/e2e-real-backend/.openspec.yaml create mode 100644 openspec/changes/e2e-real-backend/design.md create mode 100644 openspec/changes/e2e-real-backend/proposal.md create mode 100644 openspec/changes/e2e-real-backend/specs/e2e-testing/spec.md create mode 100644 openspec/changes/e2e-real-backend/tasks.md diff --git a/frontend/bun.lock b/frontend/bun.lock index 414354a..cbcb159 100644 --- a/frontend/bun.lock +++ b/frontend/bun.lock @@ -24,6 +24,7 @@ "@types/node": "^24.12.2", "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", + "@types/sql.js": "^1.4.11", "@vitejs/plugin-react": "^6.0.1", "@vitest/coverage-v8": "^3.2.1", "eslint": "^9.39.4", @@ -35,6 +36,7 @@ "jsdom": "^26.1.0", "msw": "^2.8.2", "sass": "^1.99.0", + "sql.js": "^1.14.1", "typescript": "~6.0.2", "typescript-eslint": "^8.58.0", "vite": "^8.0.4", @@ -379,6 +381,8 @@ "@types/deep-eql": ["@types/deep-eql@4.0.2", "https://registry.npmmirror.com/@types/deep-eql/-/deep-eql-4.0.2.tgz", {}, "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="], + "@types/emscripten": ["@types/emscripten@1.41.5", "https://registry.npmmirror.com/@types/emscripten/-/emscripten-1.41.5.tgz", {}, "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q=="], + "@types/estree": ["@types/estree@1.0.8", "https://registry.npmmirror.com/@types/estree/-/estree-1.0.8.tgz", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="], "@types/json-schema": ["@types/json-schema@7.0.15", "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="], @@ -393,6 +397,8 @@ "@types/sortablejs": ["@types/sortablejs@1.15.9", "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.9.tgz", {}, "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ=="], + "@types/sql.js": ["@types/sql.js@1.4.11", "https://registry.npmmirror.com/@types/sql.js/-/sql.js-1.4.11.tgz", { "dependencies": { "@types/emscripten": "*", "@types/node": "*" } }, "sha512-QXIx38p2ZThJaK9vP5ZdqdlRe1FG9I8SmCZOS7FHfB/2qPAjZwkL7/vlfPg6N/oWHuuOaGg/P/IRwfP2W0kWVQ=="], + "@types/statuses": ["@types/statuses@2.0.6", "https://registry.npmmirror.com/@types/statuses/-/statuses-2.0.6.tgz", {}, "sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA=="], "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="], @@ -1077,6 +1083,8 @@ "source-map-js": ["source-map-js@1.2.1", "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="], + "sql.js": ["sql.js@1.14.1", "https://registry.npmmirror.com/sql.js/-/sql.js-1.14.1.tgz", {}, "sha512-gcj8zBWU5cFsi9WUP+4bFNXAyF1iRpA3LLyS/DP5xlrNzGmPIizUeBggKa8DbDwdqaKwUcTEnChtd2grWo/x/A=="], + "stackback": ["stackback@0.0.2", "https://registry.npmmirror.com/stackback/-/stackback-0.0.2.tgz", {}, "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="], "statuses": ["statuses@2.0.2", "https://registry.npmmirror.com/statuses/-/statuses-2.0.2.tgz", {}, "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="], diff --git a/frontend/e2e/crud.spec.ts b/frontend/e2e/crud.spec.ts deleted file mode 100644 index 1693d05..0000000 --- a/frontend/e2e/crud.spec.ts +++ /dev/null @@ -1,264 +0,0 @@ -import { test, expect } from '@playwright/test'; - -// 辅助：在对话框内定位输入框 -function formInputs(page: import('@playwright/test').Page) { - const dialog = page.locator('.t-dialog:visible'); - return { - id: dialog.locator('input[placeholder="例如: openai"]'), - name: dialog.locator('input[placeholder="例如: OpenAI"]'), - apiKey: dialog.locator('input[type="password"]'), - baseUrl: dialog.locator('input[placeholder="例如: https://api.openai.com/v1"]'), - saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }), - cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }), - }; -} - -// 辅助：在模型对话框内定位输入框 -function modelFormInputs(page: import('@playwright/test').Page) { - const dialog = page.locator('.t-dialog:visible'); - return { - id: dialog.locator('input[placeholder="例如: gpt-4o"]').first(), - modelName: dialog.locator('input[placeholder="例如: gpt-4o"]').nth(1), - saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }), - cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }), - }; -} - -test.describe('供应商和模型完整CRUD流程', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/providers'); - await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible(); - }); - - test('完整的供应商创建流程', async ({ page }) => { - await page.getByRole('button', { name: '添加供应商' }).click(); - await expect(page.locator('.t-dialog')).toBeVisible(); - - const inputs = formInputs(page); - const testId = `e2e-${Date.now()}`; - await inputs.id.fill(testId); - await inputs.name.fill('E2E Test Provider'); - await inputs.apiKey.fill('sk-e2e-test-key'); - await inputs.baseUrl.fill('https://api.e2e-test.com/v1'); - - // 验证所有字段填写正确 - await expect(inputs.id).toHaveValue(testId); - await expect(inputs.name).toHaveValue('E2E Test Provider'); - await expect(inputs.baseUrl).toHaveValue('https://api.e2e-test.com/v1'); - - await inputs.saveBtn.click(); - // 注意：对话框关闭依赖后端 API 响应成功，此处仅验证提交按钮可点击 - }); - - test('供应商创建后编辑流程', async ({ page }) => { - const editBtns = page.locator('.t-table__body button:has-text("编辑")'); - const count = await editBtns.count(); - - if (count > 0) { - await editBtns.first().click(); - await expect(page.locator('.t-dialog:visible')).toBeVisible(); - - const inputs = formInputs(page); - await inputs.name.clear(); - await inputs.name.fill('Updated Provider Name'); - - // 验证名称字段已更新 - await expect(inputs.name).toHaveValue('Updated Provider Name'); - - await inputs.saveBtn.click(); - // 注意：对话框关闭依赖后端 API 响应成功，此处仅验证提交按钮可点击 - } else { - test.skip(); - } - }); - - test('供应商删除流程', async ({ page }) => { - const deleteBtns = page.locator('.t-table__body button:has-text("删除")'); - const count = await deleteBtns.count(); - - if (count > 0) { - await deleteBtns.first().click(); - await expect(page.getByText('确定要删除这个供应商吗？')).toBeVisible(); - - // 点击确认（TDesign Popconfirm 确定按钮） - await page.locator('.t-popconfirm').getByRole('button', { name: '确定' }).click(); - await expect(page.getByText('确定要删除这个供应商吗？')).not.toBeVisible({ timeout: 3000 }); - } else { - test.skip(); - } - }); - - test('展开供应商并添加模型', async ({ page }) => { - const expandBtns = page.locator('.t-table__expandable-icon'); - const expandCount = await expandBtns.count(); - - if (expandCount > 0) { - await expandBtns.first().click(); - await expect(page.locator('.t-table__expanded-row').first()).toBeVisible(); - - const addModelBtn = page.locator('.t-table__expanded-row button:has-text("添加模型")'); - const addCount = await addModelBtn.count(); - - if (addCount > 0) { - await addModelBtn.first().click(); - const dialog = page.locator('.t-dialog'); - await expect(dialog).toBeVisible(); - await expect(dialog.getByText('添加模型')).toBeVisible(); - - const modelInputs = modelFormInputs(page); - await modelInputs.id.fill(`model-${Date.now()}`); - await modelInputs.modelName.fill('gpt-4-turbo'); - - await modelInputs.saveBtn.click(); - await expect(page.locator('.t-dialog')).not.toBeVisible({ timeout: 5000 }); - } else { - test.skip(); - } - } else { - test.skip(); - } - }); - - test('编辑已有模型', async ({ page }) => { - const expandBtns = page.locator('.t-table__expandable-icon'); - const expandCount = await expandBtns.count(); - - if (expandCount > 0) { - await expandBtns.first().click(); - await expect(page.locator('.t-table__expanded-row').first()).toBeVisible(); - - const modelEditBtns = page.locator('.t-table__expanded-row button:has-text("编辑")'); - const editCount = await modelEditBtns.count(); - - if (editCount > 0) { - await modelEditBtns.first().click(); - const dialog = page.locator('.t-dialog'); - await expect(dialog).toBeVisible(); - await expect(dialog.getByText('编辑模型')).toBeVisible(); - - // ID 字段应被禁用 - await expect(modelFormInputs(page).id).toBeDisabled(); - - await modelFormInputs(page).cancelBtn.click(); - } else { - test.skip(); - } - } else { - test.skip(); - } - }); -}); - -test.describe('错误处理和边界情况', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/providers'); - await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible(); - }); - - test('应显示必填字段验证', async ({ page }) => { - await page.getByRole('button', { name: '添加供应商' }).click(); - await expect(page.locator('.t-dialog')).toBeVisible(); - - await formInputs(page).saveBtn.click(); - - await expect(page.getByText('请输入供应商 ID')).toBeVisible(); - await expect(page.getByText('请输入名称')).toBeVisible(); - await expect(page.getByText('请输入 API Key')).toBeVisible(); - await expect(page.getByText('请输入 Base URL')).toBeVisible(); - }); - - test('应验证URL格式', async ({ page }) => { - await page.getByRole('button', { name: '添加供应商' }).click(); - await expect(page.locator('.t-dialog')).toBeVisible(); - - const inputs = formInputs(page); - await inputs.id.fill('test-url'); - await inputs.name.fill('Test'); - await inputs.apiKey.fill('sk-test'); - await inputs.baseUrl.fill('not-a-url'); - - await inputs.saveBtn.click(); - await expect(page.getByText('请输入有效的 URL')).toBeVisible(); - }); - - test('超长输入处理', async ({ page }) => { - await page.getByRole('button', { name: '添加供应商' }).click(); - await expect(page.locator('.t-dialog')).toBeVisible(); - - const inputs = formInputs(page); - await inputs.id.fill('test-long'); - await inputs.name.fill('a'.repeat(500)); - await inputs.apiKey.fill('sk-test'); - await inputs.baseUrl.fill('https://api.test.com/v1'); - - await inputs.saveBtn.click(); - // 等待 API 响应或验证错误 - await page.waitForTimeout(2000); - }); - - test('快速连续点击只打开一个对话框', async ({ page }) => { - await page.getByRole('button', { name: '添加供应商' }).click(); - await expect(page.locator('.t-dialog')).toBeVisible(); - - expect(await page.locator('.t-dialog').count()).toBe(1); - - await formInputs(page).cancelBtn.click(); - await expect(page.locator('.t-dialog')).not.toBeVisible(); - }); - - test('取消后表单应重置', async ({ page }) => { - // 打开并填写表单 - await page.getByRole('button', { name: '添加供应商' }).click(); - await expect(page.locator('.t-dialog')).toBeVisible(); - - let inputs = formInputs(page); - await inputs.id.fill('should-be-reset'); - await inputs.name.fill('Should Be Reset'); - - await inputs.cancelBtn.click(); - await expect(page.locator('.t-dialog')).not.toBeVisible(); - - // 重新打开 - await page.getByRole('button', { name: '添加供应商' }).click(); - await expect(page.locator('.t-dialog')).toBeVisible(); - - // 验证表单已重置 - inputs = formInputs(page); - await expect(inputs.id).toHaveValue(''); - await expect(inputs.name).toHaveValue(''); - }); -}); - -test.describe('用量统计筛选功能', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/stats'); - await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible(); - }); - - test('组合筛选条件', async ({ page }) => { - await page.locator('.t-select').first().click(); - await page.waitForSelector('.t-select__dropdown', { timeout: 3000 }); - await page.keyboard.press('Escape'); - - await page.getByPlaceholder('模型名称').fill('gpt-4'); - await expect(page.getByPlaceholder('模型名称')).toHaveValue('gpt-4'); - }); - - test('清空筛选条件', async ({ page }) => { - const modelInput = page.getByPlaceholder('模型名称'); - await modelInput.fill('gpt-4'); - await expect(modelInput).toHaveValue('gpt-4'); - - await modelInput.clear(); - await expect(modelInput).toHaveValue(''); - }); - - test('刷新页面后筛选状态丢失', async ({ page }) => { - await page.getByPlaceholder('模型名称').fill('gpt-4'); - - await page.reload(); - await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible(); - - await expect(page.getByPlaceholder('模型名称')).toHaveValue(''); - }); -}); diff --git a/frontend/e2e/fixtures.ts b/frontend/e2e/fixtures.ts new file mode 100644 index 0000000..2872f71 --- /dev/null +++ b/frontend/e2e/fixtures.ts @@ -0,0 +1,87 @@ +import fs from 'node:fs' +import path from 'node:path' +import initSqlite from 'sql.js' + +export const API_BASE = `http://localhost:${process.env.NEX_BACKEND_PORT || '19026'}` + +export interface SeedProviderInput { + id: string + name: string + apiKey: string + baseUrl: string + protocol: 'openai' | 'anthropic' + enabled: boolean +} + +export interface SeedModelInput { + providerId: string + modelName: string + enabled: boolean +} + +export interface SeedStatsInput { + providerId: string + modelName: string + requestCount: number + date: string +} + +export async function seedProvider( + request: import('@playwright/test').APIRequestContext, + data: SeedProviderInput, +) { + const resp = await request.post(`${API_BASE}/api/providers`, { + data: { + id: data.id, + name: data.name, + api_key: data.apiKey, + base_url: data.baseUrl, + protocol: data.protocol, + enabled: data.enabled, + }, + }) + if (!resp.ok()) { + throw new Error(`seedProvider failed: ${resp.status()} ${await resp.text()}`) + } + return resp.json() +} + +export async function seedModel( + request: import('@playwright/test').APIRequestContext, + data: SeedModelInput, +) { + const resp = await request.post(`${API_BASE}/api/models`, { + data: { + provider_id: data.providerId, + model_name: data.modelName, + enabled: data.enabled, + }, + }) + if (!resp.ok()) { + throw new Error(`seedModel failed: ${resp.status()} ${await resp.text()}`) + } + return resp.json() +} + +export async function seedUsageStats(statsData: SeedStatsInput[]) { + const tempDir = process.env.NEX_E2E_TEMP_DIR + if (!tempDir) { + throw new Error('NEX_E2E_TEMP_DIR not set') + } + + const dbPath = path.join(tempDir, 'test.db') + const SQL = await initSqlite() + const buf = fs.readFileSync(dbPath) + const db = new SQL.Database(buf) + + for (const row of statsData) { + db.run( + 'INSERT OR REPLACE INTO usage_stats (provider_id, model_name, request_count, date) VALUES (?, ?, ?, ?)', + [row.providerId, row.modelName, row.requestCount, row.date], + ) + } + + const data = db.export() + fs.writeFileSync(dbPath, Buffer.from(data)) + db.close() +} diff --git a/frontend/e2e/global-setup.ts b/frontend/e2e/global-setup.ts new file mode 100644 index 0000000..b83bd6c --- /dev/null +++ b/frontend/e2e/global-setup.ts @@ -0,0 +1,10 @@ +import fs from 'node:fs' + +async function globalSetup() { + const tempDir = process.env.NEX_E2E_TEMP_DIR + if (tempDir && fs.existsSync(tempDir)) { + console.log(`E2E temp dir: ${tempDir}`) + } +} + +export default globalSetup diff --git a/frontend/e2e/global-teardown.ts b/frontend/e2e/global-teardown.ts new file mode 100644 index 0000000..9fbaef0 --- /dev/null +++ b/frontend/e2e/global-teardown.ts @@ -0,0 +1,16 @@ +import fs from 'node:fs' + +async function globalTeardown() { + const tempDir = process.env.NEX_E2E_TEMP_DIR + if (tempDir && fs.existsSync(tempDir)) { + await new Promise((resolve) => setTimeout(resolve, 500)) + try { + fs.rmSync(tempDir, { recursive: true, force: true }) + console.log(`Cleaned up E2E temp dir: ${tempDir}`) + } catch (e) { + console.error(`Failed to clean up temp dir ${tempDir}:`, e) + } + } +} + +export default globalTeardown diff --git a/frontend/e2e/models.spec.ts b/frontend/e2e/models.spec.ts new file mode 100644 index 0000000..584465b --- /dev/null +++ b/frontend/e2e/models.spec.ts @@ -0,0 +1,125 @@ +import { test, expect } from '@playwright/test' +import { API_BASE } from './fixtures' + +let uid = Date.now() +function nextId() { + return `mpw_${++uid}` +} + +function modelFormInputs(page: import('@playwright/test').Page) { + const dialog = page.locator('.t-dialog:visible') + return { + modelName: dialog.locator('input[placeholder="例如: gpt-4o"]'), + saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }), + cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }), + } +} + +test.describe('模型管理', () => { + let providerId: string + + test.beforeEach(async ({ page, request }) => { + providerId = nextId() + await request.post(`${API_BASE}/api/providers`, { + data: { + id: providerId, + name: 'Model Test Provider', + api_key: 'sk_test_key', + base_url: 'https://api.example.com/v1', + protocol: 'openai', + enabled: true, + }, + }) + + await page.goto('/providers') + await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible() + }) + + test('应能展开供应商查看模型空状态', async ({ page }) => { + await page.locator('.t-table__expandable-icon').first().click() + await expect(page.locator('.t-table__expanded-row').first()).toBeVisible() + await expect(page.getByText('暂无模型，点击上方按钮添加')).toBeVisible() + }) + + test('应能为供应商添加模型', async ({ page }) => { + await page.locator('.t-table__expandable-icon').first().click() + await expect(page.locator('.t-table__expanded-row').first()).toBeVisible() + + await page.locator('.t-table__expanded-row button:has-text("添加模型")').first().click() + await expect(page.locator('.t-dialog:visible')).toBeVisible() + + const inputs = modelFormInputs(page) + await inputs.modelName.fill('gpt_4_turbo') + await inputs.saveBtn.click() + await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 }) + + await expect(page.locator('.t-table__expanded-row').getByText('gpt_4_turbo')).toBeVisible() + }) + + test('应显示统一模型 ID', async ({ page, request }) => { + await request.post(`${API_BASE}/api/models`, { + data: { + provider_id: providerId, + model_name: 'claude_3', + enabled: true, + }, + }) + + await page.reload() + await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible() + + await page.locator('.t-table__expandable-icon').first().click() + await expect(page.locator('.t-table__expanded-row').first()).toBeVisible() + + await expect(page.locator('.t-table__expanded-row').getByText(`${providerId}/claude_3`)).toBeVisible() + }) + + test('应能编辑模型', async ({ page, request }) => { + await request.post(`${API_BASE}/api/models`, { + data: { + provider_id: providerId, + model_name: 'gpt_3_5', + enabled: true, + }, + }) + + await page.reload() + await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible() + + await page.locator('.t-table__expandable-icon').first().click() + await expect(page.locator('.t-table__expanded-row').first()).toBeVisible() + + await page.locator('.t-table__expanded-row button:has-text("编辑")').first().click() + await expect(page.locator('.t-dialog:visible')).toBeVisible() + + const inputs = modelFormInputs(page) + await inputs.modelName.clear() + await inputs.modelName.fill('gpt_4o') + await inputs.saveBtn.click() + await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 }) + + await expect(page.locator('.t-table__expanded-row').getByText('gpt_4o')).toBeVisible() + }) + + test('应能删除模型', async ({ page, request }) => { + await request.post(`${API_BASE}/api/models`, { + data: { + provider_id: providerId, + model_name: 'to_delete_model', + enabled: true, + }, + }) + + await page.reload() + await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible() + + await page.locator('.t-table__expandable-icon').first().click() + await expect(page.locator('.t-table__expanded-row').first()).toBeVisible() + await expect(page.locator('.t-table__expanded-row').getByText('to_delete_model')).toBeVisible() + + await page.locator('.t-table__expanded-row button:has-text("删除")').first().click() + await expect(page.getByText(/确定要删除/)).toBeVisible() + await page.locator('.t-popconfirm').getByRole('button', { name: '确定' }).click() + await expect(page.locator('.t-table__expanded-row').getByText('to_delete_model')).not.toBeVisible({ timeout: 5000 }) + }) +}) diff --git a/frontend/e2e/navigation.spec.ts b/frontend/e2e/navigation.spec.ts new file mode 100644 index 0000000..5f8d925 --- /dev/null +++ b/frontend/e2e/navigation.spec.ts @@ -0,0 +1,51 @@ +import { test, expect } from '@playwright/test' + +test.describe('侧边栏', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/providers') + await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible() + }) + + test('应显示侧边栏', async ({ page }) => { + const aside = page.locator('aside') + await expect(aside).toBeVisible() + }) + + test('应显示应用名称', async ({ page }) => { + await expect(page.locator('aside').getByText('AI Gateway')).toBeVisible() + }) + + test('应显示导航菜单项', async ({ page }) => { + const aside = page.locator('aside') + await expect(aside.getByText('供应商管理')).toBeVisible() + await expect(aside.getByText('用量统计')).toBeVisible() + }) +}) + +test.describe('页面导航', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/providers') + await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible() + }) + + test('应能切换到用量统计', async ({ page }) => { + await page.locator('aside').getByText('用量统计').click() + await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible() + }) + + test('应能切换回供应商管理', async ({ page }) => { + await page.locator('aside').getByText('用量统计').click() + await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible() + + await page.locator('aside').getByText('供应商管理').click() + await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible() + }) + + test('应在刷新后保持当前页面', async ({ page }) => { + await page.locator('aside').getByText('用量统计').click() + await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible() + + await page.reload() + await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible() + }) +}) diff --git a/frontend/e2e/providers.spec.ts b/frontend/e2e/providers.spec.ts index 951e555..bb96e4b 100644 --- a/frontend/e2e/providers.spec.ts +++ b/frontend/e2e/providers.spec.ts @@ -1,8 +1,13 @@ -import { test, expect } from '@playwright/test'; +import { test, expect } from '@playwright/test' + +let uid = Date.now() + +function nextId() { + return `pw_${++uid}` +} -// 辅助：在对话框内定位输入框（TDesign Dialog + Form） function formInputs(page: import('@playwright/test').Page) { - const dialog = page.locator('.t-dialog:visible'); + const dialog = page.locator('.t-dialog:visible') return { id: dialog.locator('input[placeholder="例如: openai"]'), name: dialog.locator('input[placeholder="例如: OpenAI"]'), @@ -10,126 +15,89 @@ function formInputs(page: import('@playwright/test').Page) { baseUrl: dialog.locator('input[placeholder="例如: https://api.openai.com/v1"]'), saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }), cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }), - }; + } } test.describe('供应商管理', () => { test.beforeEach(async ({ page }) => { - await page.goto('/providers'); - await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible(); - }); + await page.goto('/providers') + await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible() + }) - test('应显示供应商管理页面', async ({ page }) => { - await expect(page.getByText('供应商列表')).toBeVisible(); - }); + test('应能创建供应商并验证出现在表格中', async ({ page }) => { + const testId = nextId() + await page.getByRole('button', { name: '添加供应商' }).click() + await expect(page.locator('.t-dialog:visible')).toBeVisible() - test('应显示添加供应商按钮', async ({ page }) => { - await expect(page.getByRole('button', { name: '添加供应商' })).toBeVisible(); - }); + const inputs = formInputs(page) + await inputs.id.fill(testId) + await inputs.name.fill('Test Provider') + await inputs.apiKey.fill('sk_test_key_12345') + await inputs.baseUrl.fill('https://api.openai.com/v1') - test('应通过侧边栏导航切换页面', async ({ page }) => { - await page.locator('aside').getByText('用量统计').click(); - await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible(); + await inputs.saveBtn.click() + await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 }) - await page.locator('aside').getByText('供应商管理').click(); - await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible(); - }); + await expect(page.locator('.t-table__body td').getByText(testId)).toBeVisible() + await expect(page.locator('.t-table__body td').getByText('Test Provider')).toBeVisible() + }) - test('应能打开添加供应商对话框', async ({ page }) => { - await page.getByRole('button', { name: '添加供应商' }).click(); + test('应能编辑供应商并验证更新生效', async ({ page }) => { + const testId = nextId() + await page.getByRole('button', { name: '添加供应商' }).click() + await expect(page.locator('.t-dialog:visible')).toBeVisible() + const inputs = formInputs(page) + await inputs.id.fill(testId) + await inputs.name.fill('Before Edit') + await inputs.apiKey.fill('sk_key') + await inputs.baseUrl.fill('https://api.example.com/v1') + await inputs.saveBtn.click() + await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 }) - const dialog = page.locator('.t-dialog'); - await expect(dialog).toBeVisible(); - await expect(dialog.getByText('添加供应商')).toBeVisible(); - await expect(formInputs(page).id).toBeVisible(); - await expect(formInputs(page).name).toBeVisible(); - await expect(formInputs(page).apiKey).toBeVisible(); - await expect(formInputs(page).baseUrl).toBeVisible(); - }); + await page.locator('.t-table__body button:has-text("编辑")').first().click() + await expect(page.locator('.t-dialog:visible')).toBeVisible() - test('应验证供应商表单必填字段', async ({ page }) => { - await page.getByRole('button', { name: '添加供应商' }).click(); - await expect(page.locator('.t-dialog')).toBeVisible(); + const editInputs = formInputs(page) + await editInputs.name.clear() + await editInputs.name.fill('After Edit') + await editInputs.saveBtn.click() + await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 }) - await formInputs(page).saveBtn.click(); + await expect(page.locator('.t-table__body td').getByText('After Edit')).toBeVisible() + }) - await expect(page.getByText('请输入供应商 ID')).toBeVisible(); - await expect(page.getByText('请输入名称')).toBeVisible(); - await expect(page.getByText('请输入 API Key')).toBeVisible(); - await expect(page.getByText('请输入 Base URL')).toBeVisible(); - }); + test('应能删除供应商并验证消失', async ({ page }) => { + const testId = nextId() + await page.getByRole('button', { name: '添加供应商' }).click() + await expect(page.locator('.t-dialog:visible')).toBeVisible() + const inputs = formInputs(page) + await inputs.id.fill(testId) + await inputs.name.fill('To Delete') + await inputs.apiKey.fill('sk_key') + await inputs.baseUrl.fill('https://api.example.com/v1') + await inputs.saveBtn.click() + await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 }) - test('应验证URL格式', async ({ page }) => { - await page.getByRole('button', { name: '添加供应商' }).click(); - await expect(page.locator('.t-dialog')).toBeVisible(); + await page.locator('.t-table__body button:has-text("删除")').first().click() + await expect(page.getByText('确定要删除这个供应商吗？')).toBeVisible() + await page.locator('.t-popconfirm').getByRole('button', { name: '确定' }).click() + await expect(page.getByText('确定要删除这个供应商吗？')).not.toBeVisible({ timeout: 3000 }) - const inputs = formInputs(page); - await inputs.id.fill('test-provider'); - await inputs.name.fill('Test Provider'); - await inputs.apiKey.fill('sk-test-key'); - await inputs.baseUrl.fill('invalid-url'); + await expect(page.locator('.t-table__body td').getByText(testId)).not.toBeVisible({ timeout: 5000 }) + }) - await inputs.saveBtn.click(); + test('应正确脱敏显示 API Key', async ({ page }) => { + const testId = nextId() + await page.getByRole('button', { name: '添加供应商' }).click() + await expect(page.locator('.t-dialog:visible')).toBeVisible() + const inputs = formInputs(page) + await inputs.id.fill(testId) + await inputs.name.fill('Mask Test') + await inputs.apiKey.fill('sk_abcdefghijklmnopqrstuvwxyz') + await inputs.baseUrl.fill('https://api.example.com/v1') + await inputs.saveBtn.click() + await expect(page.locator('.t-dialog:visible')).not.toBeVisible({ timeout: 5000 }) - await expect(page.getByText('请输入有效的 URL')).toBeVisible(); - }); - - test('应能取消添加供应商', async ({ page }) => { - await page.getByRole('button', { name: '添加供应商' }).click(); - await expect(page.locator('.t-dialog')).toBeVisible(); - - await formInputs(page).id.fill('test-provider'); - await formInputs(page).cancelBtn.click(); - - await expect(page.locator('.t-dialog')).not.toBeVisible(); - }); - - test('应显示供应商列表中的信息', async ({ page }) => { - await expect(page.locator('.t-table')).toBeVisible(); - const tableHeaders = page.locator('.t-table__header th'); - const count = await tableHeaders.count(); - expect(count).toBeGreaterThanOrEqual(3); - }); - - test('应能展开供应商查看模型列表', async ({ page }) => { - const expandBtns = page.locator('.t-table__expandable-icon'); - const count = await expandBtns.count(); - - if (count > 0) { - await expandBtns.first().click(); - await expect(page.locator('.t-table__expanded-row').first()).toBeVisible(); - } else { - test.skip(); - } - }); - - test('应能打开编辑供应商对话框', async ({ page }) => { - const editBtns = page.locator('.t-table__body button:has-text("编辑")'); - const count = await editBtns.count(); - - if (count > 0) { - await editBtns.first().click(); - const dialog = page.locator('.t-dialog'); - await expect(dialog).toBeVisible(); - await expect(dialog.getByText('编辑供应商')).toBeVisible(); - await expect(formInputs(page).id).toBeDisabled(); - } else { - test.skip(); - } - }); - - test('应显示删除确认对话框', async ({ page }) => { - const deleteBtns = page.locator('.t-table__body button:has-text("删除")'); - const count = await deleteBtns.count(); - - if (count > 0) { - await deleteBtns.first().click(); - await expect(page.getByText('确定要删除这个供应商吗？')).toBeVisible(); - - // TDesign Popconfirm 取消按钮 - await page.locator('.t-popconfirm').getByRole('button', { name: '取消' }).click(); - } else { - test.skip(); - } - }); -}); + await expect(page.locator('.t-table__body')).toContainText('***stuv') + }) +}) diff --git a/frontend/e2e/sidebar.spec.ts b/frontend/e2e/sidebar.spec.ts deleted file mode 100644 index f273ad7..0000000 --- a/frontend/e2e/sidebar.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test.describe('侧边栏导航', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/providers'); - }); - - test('应显示侧边栏', async ({ page }) => { - // TDesign Layout.Aside 渲染为 aside 标签 - const aside = page.locator('aside'); - await expect(aside).toBeVisible(); - }); - - test('应显示应用名称', async ({ page }) => { - await expect(page.locator('aside').getByText('AI Gateway')).toBeVisible(); - }); - - test('应显示导航菜单项', async ({ page }) => { - const aside = page.locator('aside'); - await expect(aside.getByText('供应商管理')).toBeVisible(); - await expect(aside.getByText('用量统计')).toBeVisible(); - }); - - test('默认应显示亮色侧边栏', async ({ page }) => { - const aside = page.locator('aside'); - await expect(aside).toBeVisible(); - - const menu = page.locator('.t-menu'); - await expect(menu).toBeVisible(); - }); -}); diff --git a/frontend/e2e/stats-cards.spec.ts b/frontend/e2e/stats-cards.spec.ts deleted file mode 100644 index 95b718a..0000000 --- a/frontend/e2e/stats-cards.spec.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test.describe('统计摘要卡片', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/stats'); - await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible(); - }); - - test('应显示统计摘要卡片', async ({ page }) => { - await expect(page.getByText('总请求量')).toBeVisible(); - await expect(page.getByText('活跃模型数')).toBeVisible(); - await expect(page.getByText('活跃供应商数')).toBeVisible(); - await expect(page.getByText('今日请求量')).toBeVisible(); - }); - - test('应显示请求趋势图表', async ({ page }) => { - await expect(page.getByText('请求趋势')).toBeVisible(); - }); - - test('应显示统计数据表格', async ({ page }) => { - await expect(page.getByText('统计数据')).toBeVisible(); - }); - - test('统计卡片应显示数值', async ({ page }) => { - await page.waitForTimeout(1000); - - const cards = page.locator('.t-card'); - const count = await cards.count(); - expect(count).toBeGreaterThan(0); - }); - - test('应显示筛选栏', async ({ page }) => { - await expect(page.locator('.t-select').first()).toBeVisible(); - await expect(page.getByPlaceholder('模型名称')).toBeVisible(); - }); -}); diff --git a/frontend/e2e/stats.spec.ts b/frontend/e2e/stats.spec.ts index 417ca1a..7c18848 100644 --- a/frontend/e2e/stats.spec.ts +++ b/frontend/e2e/stats.spec.ts @@ -1,96 +1,127 @@ -import { test, expect } from '@playwright/test'; +import { test, expect } from '@playwright/test' +import { API_BASE, seedUsageStats } from './fixtures' -test.describe('用量统计', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/stats'); - // 等待页面加载完成 - await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible(); - }); +test.describe('统计概览', () => { + test.beforeAll(async ({ request }) => { + const p1 = `sp1_${Date.now()}` + const p2 = `sp2_${Date.now()}` + process.env._STATS_P1 = p1 + process.env._STATS_P2 = p2 - test('应显示用量统计页面', async ({ page }) => { - await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible(); - }); - - test('应显示筛选控件', async ({ page }) => { - // 验证供应商筛选下拉框 - await expect(page.locator('.t-select').first()).toBeVisible(); - - // 验证模型名称输入框 - await expect(page.getByPlaceholder('模型名称')).toBeVisible(); - - // 验证日期范围选择器 - TDesign DateRangePicker 使用 t-range-input 类 - await expect(page.locator('.t-range-input')).toBeVisible(); - }); - - test('应通过导航返回供应商页面', async ({ page }) => { - await page.getByText('供应商管理').click(); - await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible(); - }); - - test('应显示统计表格列标题', async ({ page }) => { - // 验证表格存在 - await expect(page.locator('.t-table')).toBeVisible(); - - // 通过 thead th 验证列标题存在 - const headers = page.locator('.t-table__header th'); - await expect(headers).toHaveCount(4); - - // 逐个验证列标题文本 - await expect(headers.nth(0)).toContainText('供应商'); - await expect(headers.nth(1)).toContainText('模型'); - await expect(headers.nth(2)).toContainText('日期'); - await expect(headers.nth(3)).toContainText('请求数'); - }); - - test('应能输入模型名称筛选', async ({ page }) => { - const modelInput = page.getByPlaceholder('模型名称'); - - // 输入模型名称 - await modelInput.fill('gpt-4'); - - // 验证输入值 - await expect(modelInput).toHaveValue('gpt-4'); - - // 清空输入 - await modelInput.clear(); - await expect(modelInput).toHaveValue(''); - }); - - test('应能打开供应商筛选下拉框', async ({ page }) => { - // 点击供应商下拉框 - await page.locator('.t-select').first().click(); - - // 验证下拉选项出现 - await page.waitForSelector('.t-select__dropdown', { timeout: 3000 }); - - // 点击外部关闭下拉框 - await page.keyboard.press('Escape'); - }); - - test('应能打开日期范围选择器', async ({ page }) => { - // 点击日期选择器 - TDesign DateRangePicker - const dateRangePicker = page.locator('.t-range-input'); - await expect(dateRangePicker).toBeVisible(); - - // 点击日期选择器 - await dateRangePicker.click(); - - // 等待一下让面板打开 - await page.waitForTimeout(500); - - // 点击外部关闭 - await page.keyboard.press('Escape'); - }); - - test('应显示空数据提示', async ({ page }) => { - // 等待表格加载 - await page.waitForSelector('.t-table', { timeout: 5000 }); - - // 检查是否有数据 - const emptyText = page.locator('.t-table__empty'); - - if (await emptyText.count() > 0) { - await expect(emptyText).toBeVisible(); + for (const id of [p1, p2]) { + await request.post(`${API_BASE}/api/providers`, { + data: { + id, + name: `Stats Provider ${id}`, + api_key: 'sk_test', + base_url: 'https://api.example.com/v1', + protocol: 'openai', + enabled: true, + }, + }) } - }); -}); + + const today = new Date() + const statsData = [] + for (let i = 0; i < 7; i++) { + const d = new Date(today) + d.setDate(d.getDate() - i) + const dateStr = d.toISOString().slice(0, 10) + statsData.push({ providerId: p1, modelName: 'gpt_4', requestCount: 10 + i, date: dateStr }) + if (i < 3) { + statsData.push({ providerId: p1, modelName: 'claude_3', requestCount: 5 + i, date: dateStr }) + } + if (i < 5) { + statsData.push({ providerId: p2, modelName: 'gpt_4', requestCount: 8 + i, date: dateStr }) + } + } + await seedUsageStats(statsData) + }) + + test.beforeEach(async ({ page }) => { + await page.goto('/stats') + await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible() + }) + + test('应显示正确的总请求量', async ({ page }) => { + await page.waitForTimeout(1000) + await expect(page.getByText('总请求量')).toBeVisible() + }) + + test('应显示正确的活跃模型数和活跃供应商数', async ({ page }) => { + await page.waitForTimeout(1000) + await expect(page.getByText('活跃模型数')).toBeVisible() + await expect(page.getByText('活跃供应商数')).toBeVisible() + }) + + test('应显示统计数据行', async ({ page }) => { + await expect(page.locator('.t-table__body tr').first()).toBeVisible({ timeout: 5000 }) + }) + + test('应渲染趋势图表区域', async ({ page }) => { + await expect(page.getByText('请求趋势')).toBeVisible() + }) +}) + +test.describe('统计筛选', () => { + test.beforeAll(async ({ request }) => { + const p1 = `fp1_${Date.now()}` + const p2 = `fp2_${Date.now()}` + process.env._FILTER_P1 = p1 + process.env._FILTER_P2 = p2 + + for (const id of [p1, p2]) { + await request.post(`${API_BASE}/api/providers`, { + data: { + id, + name: `Filter Provider ${id}`, + api_key: 'sk_test', + base_url: 'https://api.example.com/v1', + protocol: 'openai', + enabled: true, + }, + }) + } + + const today = new Date() + const statsData = [] + for (let i = 0; i < 3; i++) { + const d = new Date(today) + d.setDate(d.getDate() - i) + const dateStr = d.toISOString().slice(0, 10) + statsData.push({ providerId: p1, modelName: 'gpt_4', requestCount: 10 + i, date: dateStr }) + statsData.push({ providerId: p2, modelName: 'claude_3', requestCount: 5 + i, date: dateStr }) + } + await seedUsageStats(statsData) + }) + + test.beforeEach(async ({ page }) => { + await page.goto('/stats') + await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible() + }) + + test('按供应商筛选', async ({ page }) => { + await expect(page.locator('.t-table__body tr').first()).toBeVisible({ timeout: 5000 }) + const rowCountBefore = await page.locator('.t-table__body tr:not(.t-table__empty-row)').count() + + await page.locator('.t-select').first().click() + await page.waitForSelector('.t-select__dropdown', { timeout: 3000 }) + await page.locator('.t-select__dropdown .t-select-option').first().click() + await page.waitForTimeout(1000) + + const rowCountAfter = await page.locator('.t-table__body tr:not(.t-table__empty-row)').count() + expect(rowCountAfter).toBeLessThanOrEqual(rowCountBefore) + }) + + test('按模型名称筛选', async ({ page }) => { + await expect(page.locator('.t-table__body tr').first()).toBeVisible({ timeout: 5000 }) + await page.getByPlaceholder('模型名称').fill('gpt_4') + await page.waitForTimeout(1000) + await expect(page.locator('.t-table__body')).toBeVisible() + }) + + test('应显示筛选栏', async ({ page }) => { + await expect(page.locator('.t-select').first()).toBeVisible() + await expect(page.getByPlaceholder('模型名称')).toBeVisible() + }) +}) diff --git a/frontend/e2e/validation.spec.ts b/frontend/e2e/validation.spec.ts new file mode 100644 index 0000000..15f4d7d --- /dev/null +++ b/frontend/e2e/validation.spec.ts @@ -0,0 +1,75 @@ +import { test, expect } from '@playwright/test' + +function formInputs(page: import('@playwright/test').Page) { + const dialog = page.locator('.t-dialog:visible') + return { + id: dialog.locator('input[placeholder="例如: openai"]'), + name: dialog.locator('input[placeholder="例如: OpenAI"]'), + apiKey: dialog.locator('input[type="password"]'), + baseUrl: dialog.locator('input[placeholder="例如: https://api.openai.com/v1"]'), + saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }), + cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }), + } +} + +test.describe('供应商表单验证', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/providers') + await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible() + }) + + test('应显示必填字段验证', async ({ page }) => { + await page.getByRole('button', { name: '添加供应商' }).click() + await expect(page.locator('.t-dialog')).toBeVisible() + + await formInputs(page).saveBtn.click() + + await expect(page.getByText('请输入供应商 ID')).toBeVisible() + await expect(page.getByText('请输入名称')).toBeVisible() + await expect(page.getByText('请输入 API Key')).toBeVisible() + await expect(page.getByText('请输入 Base URL')).toBeVisible() + }) + + test('应验证URL格式', async ({ page }) => { + await page.getByRole('button', { name: '添加供应商' }).click() + await expect(page.locator('.t-dialog')).toBeVisible() + + const inputs = formInputs(page) + await inputs.id.fill('test_url') + await inputs.name.fill('Test') + await inputs.apiKey.fill('sk_test') + await inputs.baseUrl.fill('not-a-url') + + await inputs.saveBtn.click() + await expect(page.getByText('请输入有效的 URL')).toBeVisible() + }) + + test('取消后表单应重置', async ({ page }) => { + await page.getByRole('button', { name: '添加供应商' }).click() + await expect(page.locator('.t-dialog')).toBeVisible() + + let inputs = formInputs(page) + await inputs.id.fill('should_be_reset') + await inputs.name.fill('Should Be Reset') + + await inputs.cancelBtn.click() + await expect(page.locator('.t-dialog')).not.toBeVisible() + + await page.getByRole('button', { name: '添加供应商' }).click() + await expect(page.locator('.t-dialog')).toBeVisible() + + inputs = formInputs(page) + await expect(inputs.id).toHaveValue('') + await expect(inputs.name).toHaveValue('') + }) + + test('快速连续点击只打开一个对话框', async ({ page }) => { + await page.getByRole('button', { name: '添加供应商' }).click() + await expect(page.locator('.t-dialog')).toBeVisible() + + expect(await page.locator('.t-dialog').count()).toBe(1) + + await formInputs(page).cancelBtn.click() + await expect(page.locator('.t-dialog')).not.toBeVisible() + }) +}) diff --git a/frontend/package.json b/frontend/package.json index 8c36f9d..83613ed 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -33,6 +33,7 @@ "@types/node": "^24.12.2", "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", + "@types/sql.js": "^1.4.11", "@vitejs/plugin-react": "^6.0.1", "@vitest/coverage-v8": "^3.2.1", "eslint": "^9.39.4", @@ -44,6 +45,7 @@ "jsdom": "^26.1.0", "msw": "^2.8.2", "sass": "^1.99.0", + "sql.js": "^1.14.1", "typescript": "~6.0.2", "typescript-eslint": "^8.58.0", "vite": "^8.0.4", diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts index b556a95..6fe8ad0 100644 --- a/frontend/playwright.config.ts +++ b/frontend/playwright.config.ts @@ -1,8 +1,27 @@ import { defineConfig, devices } from '@playwright/test' +import fs from 'node:fs' +import os from 'node:os' +import path from 'node:path' +import { fileURLToPath } from 'node:url' + +const __filename = fileURLToPath(import.meta.url) +const __dirname = path.dirname(__filename) + +const E2E_PORT = 19026 +const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'nex-e2e-')) +const dbPath = path.join(tempDir, 'test.db') +const logPath = path.join(tempDir, 'log') + +fs.mkdirSync(logPath, { recursive: true }) + +process.env.NEX_BACKEND_PORT = String(E2E_PORT) +process.env.NEX_E2E_TEMP_DIR = tempDir + +const backendDir = path.resolve(__dirname, '..', 'backend') export default defineConfig({ testDir: './e2e', - fullyParallel: true, + fullyParallel: false, forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, workers: process.env.CI ? 1 : undefined, @@ -17,9 +36,20 @@ export default defineConfig({ use: { ...devices['Desktop Chrome'] }, }, ], - webServer: { - command: 'bun run dev', - url: 'http://localhost:5173', - reuseExistingServer: !process.env.CI, - }, + globalSetup: './e2e/global-setup.ts', + globalTeardown: './e2e/global-teardown.ts', + webServer: [ + { + command: `go run cmd/server/main.go --server-port ${E2E_PORT} --database-path "${dbPath}" --log-path "${logPath}" --log-level warn`, + url: `http://localhost:${E2E_PORT}/health`, + timeout: 60_000, + reuseExistingServer: false, + cwd: backendDir, + }, + { + command: 'bun run dev', + url: 'http://localhost:5173', + reuseExistingServer: false, + }, + ], }) diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 58c7a54..39e3608 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -13,7 +13,7 @@ export default defineConfig({ server: { proxy: { '/api': { - target: 'http://localhost:9826', + target: `http://localhost:${process.env.NEX_BACKEND_PORT || '9826'}`, changeOrigin: true, }, }, diff --git a/openspec/changes/e2e-real-backend/.openspec.yaml b/openspec/changes/e2e-real-backend/.openspec.yaml new file mode 100644 index 0000000..4b8c565 --- /dev/null +++ b/openspec/changes/e2e-real-backend/.openspec.yaml @@ -0,0 +1,2 @@ +schema: spec-driven +created: 2026-04-21 diff --git a/openspec/changes/e2e-real-backend/design.md b/openspec/changes/e2e-real-backend/design.md new file mode 100644 index 0000000..b2a0184 --- /dev/null +++ b/openspec/changes/e2e-real-backend/design.md @@ -0,0 +1,85 @@ +## Context + +前端 Playwright E2E 测试当前只启动 `bun run dev`（Vite dev server），后端不参与。现有 5 个 E2E 测试文件中，所有写操作（创建/编辑/删除供应商和模型）的验证都不完整——因为 API 请求无法到达后端，表单提交后的数据持久化无法验证，大量测试在缺少已有数据时直接 `test.skip()`。 + +后端具备天然测试友好特性：Go CLI 参数可覆盖所有配置（`--server-port`、`--database-path`、`--log-path`、`--log-level`），SQLite 文件数据库使每次测试可用独立临时文件，首次启动自动运行 goose 迁移，有 `/health` 端点可供就绪检查。 + +## Goals / Non-Goals + +**Goals:** + +- `bun run test:e2e` 一条命令自动启动隔离后端 + 前端，运行完整 E2E 测试，自动清理 +- 每次测试运行使用干净的临时数据库，测试间无状态污染 +- E2E 测试能验证完整 CRUD 流程：创建→验证存在→编辑→验证更新→删除→验证消失 +- 统计页面可通过 seed 数据验证数字、筛选、图表渲染 +- 对日常开发流程零侵入（`bun run dev` 行为不变） +- Windows 原生兼容（项目在 Windows 上开发） + +**Non-Goals:** + +- 不修改后端代码（仅通过 CLI 参数启动现有二进制） +- 不引入 CI 流水线配置 +- 不改动 MSW 在单元测试中的使用 +- 不实现随机端口分配（使用固定非默认端口 19026） +- 不引入 cross-env 等跨平台环境变量工具 + +## Decisions + +### Decision 1: 固定测试端口 19026 vs 随机端口 + +**选择**: 固定端口 19026 + +**理由**: 随机端口需要在 `globalSetup` 中 spawn 后端进程、等待健康检查、管理进程生命周期（包括 Windows 上的 SIGTERM 问题），复杂度高。19026 是非标准端口，与开发端口 9826 不冲突，冲突概率极低。Playwright `webServer` 数组模式可直接管理两个进程的生命周期，无需手动 spawn/kill。 + +**备选方案**: `globalSetup` 中分配随机端口 → spawn 后端 → 等待健康检查 → `globalTeardown` 中 kill 进程。在 Windows 上 SIGTERM 不可靠，需 taskkill 强杀，进程管理复杂。 + +### Decision 2: 环境变量传递方式 + +**选择**: `process.env` 继承，不引入 cross-env + +**理由**: Playwright 的 `webServer` 通过 `child_process.spawn` 启动子进程，子进程默认继承父进程 `process.env`。在 `playwright.config.ts` 模块顶层设置 `process.env.NEX_BACKEND_PORT = '19026'`，Vite dev server 子进程自动继承，`vite.config.ts` 中 `defineConfig` 函数可读取。E2E 测试文件与 config 同进程，直接读取即可。三处消费者（后端 CLI flags / Vite / 测试文件）都无需额外工具。 + +### Decision 3: 统计数据 seed 方式 + +**选择**: sql.js 直接操作 SQLite 文件 + +**理由**: 统计数据（`usage_stats` 表）只能通过后端 `statsService.Record()` 按当天日期 upsert，没有 API 可以插入任意日期的历史数据。统计页面测试需要多日趋势数据来验证筛选和图表。sql.js 是纯 WASM 实现，无原生编译依赖，Windows 上零风险。通过"读文件→内存操作→写回"模式在 `beforeAll` 中 seed 数据，串行化保证无并发冲突。 + +**备选方案**: +- better-sqlite3：需要原生编译，Windows 上可能有编译工具链问题 +- 后端加测试专用 seed API：需要修改后端代码，违反"不改后端"原则 +- 只测今日数据：无法验证日期筛选和趋势图表，测试覆盖不足 + +### Decision 4: 临时文件管理 + +**选择**: `fs.mkdtempSync(os.tmpdir() + '/nex-e2e-')` 创建，`fs.rm(dir, { recursive: true, force: true })` 在 `globalTeardown` 清理 + +**理由**: `mkdtempSync` 跨平台安全，Windows 上生成 `%TEMP%\nex-e2e-xxxxxxxx` 路径。Go 后端的 `--database-path` 和 `--log-path` 参数接受 Windows 路径。`fs.rm` 是 Node.js 14.14+ 内置的递归删除 API，无需额外依赖（rimraf 等）。 + +### Decision 5: 测试文件拆分 5→7 + +**选择**: 按职责拆分 + +| 新文件 | 来源 | 职责 | +|--------|------|------| +| `providers.spec.ts` | 重写 `providers.spec.ts` + `crud.spec.ts` 供应商部分 | 供应商完整 CRUD 验证 | +| `models.spec.ts` | 新增，来自 `crud.spec.ts` 模型部分 | 模型管理完整验证 | +| `stats.spec.ts` | 重写 `stats.spec.ts` + 合并 `stats-cards.spec.ts` | 统计页面完整验证 | +| `navigation.spec.ts` | 新增，来自 `sidebar.spec.ts` + 导航测试 | 导航和侧边栏 | +| `validation.spec.ts` | 新增，来自 `crud.spec.ts` 表单验证部分 | 表单校验测试 | +| `fixtures.ts` | 新增 | 共享常量和 seed 工具函数 | +| `global-setup.ts` / `global-teardown.ts` | 新增 | 临时目录生命周期 | + +### Decision 6: 进程启动顺序 + +**选择**: Playwright `webServer` 数组，后端在前、前端在后 + +**理由**: Playwright 按数组顺序依次等待每个 webServer 的 `url` 就绪。后端先启动（`/health` 返回 200），再启动前端（Vite 默认端口 5173）。`timeout: 60000` 覆盖 Go 首次编译耗时。两个 webServer 均设 `reuseExistingServer: false`，确保每次运行都是全新进程。 + +## Risks / Trade-offs + +- **[Go 编译缓存]** → 首次 `go run` 需要 5-10s 编译，后续利用 Go 构建缓存加速。`timeout: 60000` 提供充足缓冲。如仍嫌慢，可手动 `cd backend && go build ./cmd/server/` 预编译。 +- **[端口 19026 冲突]** → 概率极低。Playwright 报明确错误，用户手动释放即可。不考虑自动重试。 +- **[Ctrl+C 强退临时文件残留]** → `globalTeardown` 不执行，但下次运行创建新目录，旧目录不占端口。可接受。 +- **[SQLite WAL 文件]** → 后端进程被 Playwright 强杀时可能留下 `.db-wal`/`.db-shm` 文件，但随临时目录一起删除，无影响。 +- **[sql.js 串行化约束]** → seed 数据时需确保 API 操作完成后再操作 SQLite。在 `beforeAll` 中串行执行，不存在并发问题。 diff --git a/openspec/changes/e2e-real-backend/proposal.md b/openspec/changes/e2e-real-backend/proposal.md new file mode 100644 index 0000000..0ddadf7 --- /dev/null +++ b/openspec/changes/e2e-real-backend/proposal.md @@ -0,0 +1,29 @@ +## Why + +前端 E2E 测试当前只启动 Vite dev server，不启动后端。所有涉及写操作（创建/编辑/删除供应商、模型）的测试无法验证数据是否真正持久化，大量测试在缺少数据时直接 skip。测试实质上只是 UI 组件存在性检查，不是真正的端到端验证。后端已有完善的 CLI 参数机制（`--server-port`、`--database-path` 等）和 SQLite 文件数据库，具备每次测试使用干净隔离环境的天然条件。 + +## What Changes + +- Playwright 配置改为双 `webServer` 模式，自动启动 Go 后端（隔离临时数据库）+ Vite 前端 +- `vite.config.ts` 的 proxy target 改为通过环境变量动态配置，E2E 时指向测试后端（19026），日常开发回退默认值（9826） +- 新增 `e2e/fixtures.ts` 共享工具模块，提供 API seed 和 SQLite seed（通过 sql.js 直接操作临时数据库插入统计数据） +- 新增 `e2e/global-setup.ts` 和 `e2e/global-teardown.ts` 管理临时目录生命周期 +- 重写全部 E2E 测试文件（5→7 个），覆盖完整 CRUD 验证、统计数据验证、导航、表单校验 +- 新增 `sql.js` + `@types/sql.js` 依赖（纯 WASM，零原生编译，Windows 兼容） + +## Capabilities + +### New Capabilities + +- `e2e-testing`: 前端 E2E 测试基础设施，定义 Playwright 双 webServer 启动模式、临时文件隔离、端口策略、环境变量传递、统计数据 seed 方式、测试文件组织结构 + +### Modified Capabilities + +（无 — 现有 `test-coverage` spec 中的 E2E 要求不变，本 change 提供实现手段使其得到真正满足） + +## Impact + +- **代码变更**: `frontend/vite.config.ts`（1 行）、`frontend/playwright.config.ts`（重写）、`frontend/e2e/` 目录（新增 5 文件 + 重写 3 文件 + 删除 2 文件） +- **新增依赖**: `sql.js`、`@types/sql.js`（devDependencies） +- **后端无变更**: 仅通过 CLI 参数以隔离模式启动现有后端，不修改后端代码 +- **开发体验零侵入**: 日常 `bun run dev` 行为不变，仅 `bun run test:e2e` 启动真实后端 diff --git a/openspec/changes/e2e-real-backend/specs/e2e-testing/spec.md b/openspec/changes/e2e-real-backend/specs/e2e-testing/spec.md new file mode 100644 index 0000000..ab0f7fb --- /dev/null +++ b/openspec/changes/e2e-real-backend/specs/e2e-testing/spec.md @@ -0,0 +1,216 @@ +## ADDED Requirements + +### Requirement: E2E 测试基础设施 + +前端 E2E 测试 SHALL 自动启动隔离的 Go 后端实例，提供真实 API 交互能力。 + +#### Scenario: 双 webServer 自动启动 + +- **WHEN** 执行 `bun run test:e2e` +- **THEN** Playwright SHALL 按 webServer 数组顺序先启动 Go 后端（端口 19026），再启动 Vite 前端（端口 5173） +- **THEN** Go 后端 SHALL 使用临时目录中的独立数据库文件和日志目录 +- **THEN** Go 后端启动命令 SHALL 包含 `--server-port 19026`、`--database-path`、`--log-path`、`--log-level warn` 参数 +- **THEN** Go 后端 cwd SHALL 指向 `backend/` 目录 +- **THEN** webServer 等待超时 SHALL 为 60000ms +- **THEN** 两个 webServer SHALL 设置 `reuseExistingServer: false` + +#### Scenario: 环境变量传递 + +- **WHEN** Playwright 配置加载 +- **THEN** `playwright.config.ts` SHALL 设置 `process.env.NEX_BACKEND_PORT` 为 `'19026'` +- **THEN** `process.env.NEX_E2E_TEMP_DIR` SHALL 设置为临时目录路径 +- **THEN** Vite dev server 子进程 SHALL 自动继承上述环境变量 +- **THEN** E2E 测试文件 SHALL 通过 `process.env` 读取后端端口和临时目录信息 + +#### Scenario: Vite proxy 动态化 + +- **WHEN** `vite.config.ts` 配置 proxy target +- **THEN** proxy target SHALL 读取 `process.env.NEX_BACKEND_PORT`，回退到 `'9826'` +- **THEN** 日常 `bun run dev` 时（无环境变量）proxy target SHALL 为 `http://localhost:9826` +- **THEN** E2E 测试时 proxy target SHALL 为 `http://localhost:19026` + +### Requirement: 临时文件隔离 + +E2E 测试 SHALL 使用临时目录隔离所有文件，测试结束后自动清理。 + +#### Scenario: 临时目录创建 + +- **WHEN** Playwright 配置加载 +- **THEN** SHALL 使用 `fs.mkdtempSync(path.join(os.tmpdir(), 'nex-e2e-'))` 创建临时目录 +- **THEN** 临时目录 SHALL 包含 `test.db`（数据库）和 `log/`（日志）子路径 + +#### Scenario: 临时目录清理 + +- **WHEN** Playwright 所有测试完成 +- **THEN** `globalTeardown` SHALL 使用 `fs.rm(dir, { recursive: true, force: true })` 删除临时目录 +- **THEN** 清理 SHALL 在 webServer 进程关闭之后执行 + +### Requirement: 统计数据 seed + +E2E 测试 SHALL 能通过 sql.js 直接操作 SQLite 文件 seed 历史统计数据。 + +#### Scenario: SQLite 统计数据插入 + +- **WHEN** 统计页面测试需要历史数据 +- **THEN** SHALL 使用 sql.js 打开临时数据库文件 +- **THEN** SHALL 通过 `INSERT INTO usage_stats` 插入指定日期和请求量的统计数据 +- **THEN** SHALL 将修改后的数据库写回文件（`db.export()` → `fs.writeFileSync`） +- **THEN** seed 操作 SHALL 在 API 创建供应商和模型之后串行执行 +- **THEN** seed 完成后 SHALL 关闭 sql.js 数据库连接 + +### Requirement: E2E 共享工具模块 + +E2E 测试 SHALL 提供共享工具模块（`e2e/fixtures.ts`）封装常用操作。 + +#### Scenario: 共享常量 + +- **WHEN** 测试文件需要后端 API 地址 +- **THEN** fixtures SHALL export `API_BASE` 常量，值为 `http://localhost:${process.env.NEX_BACKEND_PORT}` + +#### Scenario: API seed 工具 + +- **WHEN** 测试需要通过 API 准备数据 +- **THEN** fixtures SHALL export `seedProvider(request, data)` 函数，通过 `request.post` 创建供应商 +- **THEN** fixtures SHALL export `seedModel(request, data)` 函数，通过 `request.post` 创建模型 + +#### Scenario: SQLite seed 工具 + +- **WHEN** 测试需要 seed 统计数据 +- **THEN** fixtures SHALL export `seedUsageStats(statsData)` 函数，通过 sql.js 插入 `usage_stats` 记录 + +### Requirement: 供应商管理 E2E 测试 + +E2E 测试 SHALL 验证供应商的完整 CRUD 用户流程。 + +#### Scenario: 创建供应商并验证 + +- **WHEN** 用户通过 UI 填写供应商表单并提交 +- **THEN** 对话框 SHALL 关闭 +- **THEN** 新供应商 SHALL 出现在表格中 +- **THEN** 表格 SHALL 显示正确的 id、name、base_url、协议、enabled 状态 + +#### Scenario: 编辑供应商并验证 + +- **WHEN** 用户点击编辑按钮、修改名称并提交 +- **THEN** 对话框 SHALL 关闭 +- **THEN** 表格中该供应商的名称 SHALL 更新为新值 + +#### Scenario: 删除供应商并验证 + +- **WHEN** 用户点击删除按钮并确认 +- **THEN** 确认框 SHALL 消失 +- **THEN** 该供应商 SHALL 从表格中消失 + +### Requirement: 模型管理 E2E 测试 + +E2E 测试 SHALL 验证模型的完整 CRUD 用户流程。 + +#### Scenario: 前置数据准备 + +- **WHEN** 模型测试开始前 +- **THEN** SHALL 通过 API seed 一个供应商（不通过 UI） + +#### Scenario: 创建模型并验证 + +- **WHEN** 用户展开供应商行、填写模型表单并提交 +- **THEN** 对话框 SHALL 关闭 +- **THEN** 新模型 SHALL 出现在展开行的模型表格中 +- **THEN** 模型表格 SHALL 显示统一模型 ID（`provider_id/model_name` 格式） + +#### Scenario: 编辑模型并验证 + +- **WHEN** 用户点击模型编辑按钮、修改并提交 +- **THEN** 对话框 SHALL 关闭 +- **THEN** 模型表格 SHALL 显示更新后的数据 + +#### Scenario: 删除模型并验证 + +- **WHEN** 用户点击模型删除按钮并确认 +- **THEN** 该模型 SHALL 从模型表格中消失 + +### Requirement: 统计页面 E2E 测试 + +E2E 测试 SHALL 验证统计页面的数据展示和筛选功能。 + +#### Scenario: 统计数据准备 + +- **WHEN** 统计测试开始前 +- **THEN** SHALL 通过 API seed 供应商和模型 +- **THEN** SHALL 通过 sql.js seed 多日历史统计数据（覆盖不同供应商、不同模型、不同日期） + +#### Scenario: 统计概览验证 + +- **WHEN** 加载统计页面 +- **THEN** 统计摘要卡片 SHALL 显示正确的总请求量 +- **THEN** 统计摘要卡片 SHALL 显示正确的活跃模型数和活跃供应商数 +- **THEN** 统计表格 SHALL 显示 seed 的数据行 + +#### Scenario: 统计筛选验证 + +- **WHEN** 用户选择供应商筛选条件 +- **THEN** 统计表格 SHALL 只显示该供应商的数据 +- **WHEN** 用户输入模型名称筛选条件 +- **THEN** 统计表格 SHALL 只显示匹配模型的数据 + +### Requirement: 导航 E2E 测试 + +E2E 测试 SHALL 验证页面导航和侧边栏功能。 + +#### Scenario: 侧边栏渲染 + +- **WHEN** 加载任意页面 +- **THEN** 侧边栏 SHALL 显示应用名称和导航菜单项 + +#### Scenario: 页面切换 + +- **WHEN** 用户点击侧边栏导航菜单项 +- **THEN** 页面 SHALL 切换到对应路由并显示正确内容 +- **THEN** 当前菜单项 SHALL 高亮 + +#### Scenario: URL 持久化 + +- **WHEN** 用户在统计页面刷新浏览器 +- **THEN** 页面 SHALL 保持在统计页面 + +### Requirement: 表单验证 E2E 测试 + +E2E 测试 SHALL 验证表单的校验行为。 + +#### Scenario: 供应商表单必填校验 + +- **WHEN** 用户打开添加供应商对话框并直接点击保存 +- **THEN** SHALL 显示所有必填字段的验证错误提示 + +#### Scenario: URL 格式校验 + +- **WHEN** 用户在 base_url 字段输入无效 URL 并提交 +- **THEN** SHALL 显示 URL 格式错误提示 + +#### Scenario: 对话框行为 + +- **WHEN** 用户打开对话框后点击取消 +- **THEN** 对话框 SHALL 关闭且表单重置 +- **WHEN** 用户再次打开对话框 +- **THEN** 表单字段 SHALL 为空 + +### Requirement: E2E 测试文件组织 + +E2E 测试 SHALL 按 7 个 spec 文件组织。 + +#### Scenario: 文件结构 + +- **WHEN** 查看 `e2e/` 目录 +- **THEN** SHALL 包含以下测试文件：`providers.spec.ts`、`models.spec.ts`、`stats.spec.ts`、`navigation.spec.ts`、`validation.spec.ts` +- **THEN** SHALL 包含以下辅助文件：`fixtures.ts`、`global-setup.ts`、`global-teardown.ts` +- **THEN** SHALL NOT 包含已删除的文件：`stats-cards.spec.ts`、`sidebar.spec.ts`、`crud.spec.ts` + +### Requirement: 新增依赖 + +E2E 测试 SHALL 引入 sql.js 作为 devDependency。 + +#### Scenario: sql.js 依赖 + +- **WHEN** 安装前端依赖 +- **THEN** `package.json` 的 devDependencies SHALL 包含 `sql.js` +- **THEN** `package.json` 的 devDependencies SHALL 包含 `@types/sql.js` +- **THEN** sql.js SHALL 仅在 E2E 测试的 seed 逻辑中使用，不影响生产代码 diff --git a/openspec/changes/e2e-real-backend/tasks.md b/openspec/changes/e2e-real-backend/tasks.md new file mode 100644 index 0000000..68827c6 --- /dev/null +++ b/openspec/changes/e2e-real-backend/tasks.md @@ -0,0 +1,29 @@ +## 1. 基础设施 + +- [x] 1.1 安装 sql.js 和 @types/sql.js 到 devDependencies（`bun add -d sql.js @types/sql.js`） +- [x] 1.2 修改 `vite.config.ts` proxy target 为动态读取 `process.env.NEX_BACKEND_PORT || '9826'` +- [x] 1.3 创建 `e2e/global-setup.ts`（空实现或验证临时目录存在） +- [x] 1.4 创建 `e2e/global-teardown.ts`，读取 `process.env.NEX_E2E_TEMP_DIR`，用 `fs.rm` 递归删除 +- [x] 1.5 创建 `e2e/fixtures.ts`，导出 `API_BASE` 常量、`seedProvider`、`seedModel`、`seedUsageStats` 函数 +- [x] 1.6 重写 `playwright.config.ts`，创建临时目录、设置环境变量、配置双 webServer 数组（Go 后端 + Vite 前端） + +## 2. E2E 测试重写 + +- [x] 2.1 重写 `e2e/providers.spec.ts`：空数据库开始，完整供应商 CRUD 验证（创建→验证→编辑→验证→删除→验证） +- [x] 2.2 创建 `e2e/models.spec.ts`：beforeEach API seed 供应商，完整模型 CRUD 验证（展开行→创建模型→验证→编辑→验证→删除→验证） +- [x] 2.3 重写 `e2e/stats.spec.ts`：beforeAll API seed 供应商+模型，sql.js seed 多日统计数据，验证概览卡片、表格数据、筛选功能 +- [x] 2.4 创建 `e2e/navigation.spec.ts`：侧边栏渲染、页面切换、URL 持久化验证（合并 sidebar.spec.ts） +- [x] 2.5 创建 `e2e/validation.spec.ts`：供应商表单必填校验、URL 格式校验、对话框行为（取消重置、连续点击） + +## 3. 清理旧文件 + +- [x] 3.1 删除 `e2e/crud.spec.ts`（内容已拆分到 providers/models/validation） +- [x] 3.2 删除 `e2e/sidebar.spec.ts`（内容已合并到 navigation） +- [x] 3.3 删除 `e2e/stats-cards.spec.ts`（内容已合并到 stats） + +## 4. 验证 + +- [ ] 4.1 运行 `bun run test:e2e` 确认所有 E2E 测试通过 +- [ ] 4.2 确认临时目录在测试结束后被清理 +- [ ] 4.3 运行 `bun run dev` 确认日常开发行为不受影响（proxy 仍指向 9826） +- [ ] 4.4 运行 `bun run test` 确认单元测试不受影响