feat: E2E 测试集成真实后端

- 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 测试尚有部分用例需调试修复
2026-04-22 00:31:35 +08:00
parent 4fc5fb4764
commit 59179094ed
20 changed files with 973 additions and 540 deletions
--- a/frontend/e2e/models.spec.ts
+++ 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 })
+  })
+})