fix: 修复前端登录体验和API调用问题
- 修复路由守卫：未登录时直接跳转，不显示提示信息 - 修复API拦截器：401错误直接跳转，无需确认 - 移除不必要的ElMessageBox确认框 - 优化Token过期处理逻辑 - 修复文件管理API引入路径和URL前缀 - 修复调拨/回收管理API端点不匹配问题 - 修复通知管理API方法不匹配问题 - 统一系统配置API路径为单数形式 影响文件： - src/router/index.ts - src/api/request.ts - src/api/file.ts - src/api/index.ts 测试状态： - 前端构建通过 - 所有API路径已验证 - 登录流程测试通过 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude
364
tests/e2e/assets.spec.ts
Normal file
364
tests/e2e/assets.spec.ts
Normal file
@@ -0,0 +1,364 @@
|
||||
/**
|
||||
* 资产管理E2E测试
|
||||
*
|
||||
* 测试内容:
|
||||
* - 资产列表查看
|
||||
* - 创建资产
|
||||
* - 编辑资产
|
||||
* - 删除资产
|
||||
* - 资产搜索
|
||||
* - 资产分配
|
||||
* - 批量导入
|
||||
* - 扫码查询
|
||||
*/
|
||||
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('资产管理E2E测试', () => {
|
||||
// 在每个测试前登录
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('http://localhost:5173/login')
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
await page.click('button[type="submit"]')
|
||||
await page.waitForURL('http://localhost:5173/')
|
||||
})
|
||||
|
||||
test('应该显示资产列表', async ({ page }) => {
|
||||
// 导航到资产列表页
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 等待列表加载
|
||||
await expect(page.locator('.asset-list')).toBeVisible()
|
||||
await expect(page.locator('.el-table')).toBeVisible()
|
||||
|
||||
// 验证统计数据
|
||||
await expect(page.locator('.asset-statistics')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该搜索资产', async ({ page }) => {
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 输入搜索关键词
|
||||
await page.fill('input[placeholder="搜索资产编码/名称/型号"]', '联想')
|
||||
await page.click('button:has-text("搜索")')
|
||||
|
||||
// 等待搜索结果
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
// 验证搜索结果
|
||||
const tableRows = await page.locator('.el-table__body-wrapper .el-table__row').count()
|
||||
expect(tableRows).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
test('应该创建新资产', async ({ page }) => {
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 点击创建按钮
|
||||
await page.click('button:has-text("新增资产")')
|
||||
|
||||
// 等待对话框打开
|
||||
await expect(page.locator('.el-dialog')).toBeVisible()
|
||||
|
||||
// 填写表单
|
||||
await page.selectOption('select[name="deviceType"]', '1')
|
||||
await page.fill('input[name="assetName"]', '测试资产-E2E')
|
||||
await page.fill('input[name="model"]', '测试型号')
|
||||
await page.fill('input[name="serialNumber"]', 'SN-E2E-001')
|
||||
await page.selectOption('select[name="organization"]', '1')
|
||||
await page.fill('input[name="location"]', '测试位置')
|
||||
|
||||
// 如果有动态字段
|
||||
await page.fill('input[name="cpu"]', 'Intel i5-10400')
|
||||
await page.selectOption('select[name="memory"]', '16')
|
||||
|
||||
// 提交表单
|
||||
await page.click('button:has-text("确定")')
|
||||
|
||||
// 等待成功提示
|
||||
await expect(page.locator('.el-message--success')).toBeVisible()
|
||||
await expect(page.locator('.el-message--success')).toContainText('创建成功')
|
||||
|
||||
// 验证新资产出现在列表中
|
||||
await expect(page.locator('text=测试资产-E2E')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该编辑资产', async ({ page }) => {
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 点击第一行的编辑按钮
|
||||
await page.click('.el-table__row:first-child .edit-button')
|
||||
|
||||
// 等待编辑对话框
|
||||
await expect(page.locator('.el-dialog')).toBeVisible()
|
||||
|
||||
// 修改资产名称
|
||||
await page.fill('input[name="assetName"]', '更新后的资产名称')
|
||||
|
||||
// 提交修改
|
||||
await page.click('button:has-text("确定")')
|
||||
|
||||
// 等待成功提示
|
||||
await expect(page.locator('.el-message--success')).toBeVisible()
|
||||
|
||||
// 验证修改已生效
|
||||
await expect(page.locator('text=更新后的资产名称')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该删除资产', async ({ page }) => {
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 获取初始行数
|
||||
const initialRows = await page.locator('.el-table__body-wrapper .el-table__row').count()
|
||||
|
||||
// 点击第一行的删除按钮
|
||||
await page.click('.el-table__row:first-child .delete-button')
|
||||
|
||||
// 确认删除
|
||||
await page.click('.el-message-box__btns button:has-text("确定")')
|
||||
|
||||
// 等待成功提示
|
||||
await expect(page.locator('.el-message--success')).toBeVisible()
|
||||
|
||||
// 验证行数减少
|
||||
const finalRows = await page.locator('.el-table__body-wrapper .el-table__row').count()
|
||||
expect(finalRows).toBe(initialRows - 1)
|
||||
})
|
||||
|
||||
test('应该支持分页', async ({ page }) => {
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 等待列表加载
|
||||
await expect(page.locator('.el-table')).toBeVisible()
|
||||
|
||||
// 点击下一页
|
||||
await page.click('.el-pagination .btn-next')
|
||||
|
||||
// 等待加载
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
// 验证页码改变
|
||||
const currentPage = await page.locator('.el-pager .number.active').textContent()
|
||||
expect(parseInt(currentPage || '0')).toBeGreaterThan(1)
|
||||
})
|
||||
|
||||
test('应该按状态筛选', async ({ page }) => {
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 选择状态筛选
|
||||
await page.click('.el-select:has-text="资产状态")')
|
||||
await page.click('text=使用中')
|
||||
|
||||
// 等待筛选结果
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
// 验证筛选结果
|
||||
const statusCells = await page.locator('.el-table__body .el-table__cell:last-child').allTextContents()
|
||||
statusCells.forEach(status => {
|
||||
expect(status).toContain('使用中')
|
||||
})
|
||||
})
|
||||
|
||||
test('应该按设备类型筛选', async ({ page }) => {
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 选择设备类型筛选
|
||||
await page.click('.el-select:has-text="设备类型")')
|
||||
await page.click('text=计算机')
|
||||
|
||||
// 等待筛选结果
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
// 验证筛选标签已显示
|
||||
await expect(page.locator('.filter-tag:has-text("计算机")')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该查看资产详情', async ({ page }) => {
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 点击第一行查看详情
|
||||
await page.click('.el-table__row:first-child .detail-button')
|
||||
|
||||
// 等待详情对话框
|
||||
await expect(page.locator('.el-dialog')).toBeVisible()
|
||||
|
||||
// 验证详情信息
|
||||
await expect(page.locator('.asset-detail')).toBeVisible()
|
||||
await expect(page.locator('.asset-detail .asset-code')).toBeVisible()
|
||||
await expect(page.locator('.asset-detail .status-history')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该批量导入资产', async ({ page }) => {
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 点击批量导入按钮
|
||||
await page.click('button:has-text("批量导入")')
|
||||
|
||||
// 等待上传对话框
|
||||
await expect(page.locator('.el-dialog')).toBeVisible()
|
||||
|
||||
// 选择文件
|
||||
const fileInput = page.locator('input[type="file"]')
|
||||
await fileInput.setInputFiles('tests/fixtures/test_assets.xlsx')
|
||||
|
||||
// 点击上传
|
||||
await page.click('button:has-text("确定")')
|
||||
|
||||
// 等待上传完成
|
||||
await page.waitForTimeout(2000)
|
||||
|
||||
// 验证成功提示
|
||||
await expect(page.locator('.el-message--success')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该导出资产', async ({ page }) => {
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 设置下载处理
|
||||
const downloadPromise = page.waitForEvent('download')
|
||||
|
||||
// 点击导出按钮
|
||||
await page.click('button:has-text("导出")')
|
||||
|
||||
// 等待下载开始
|
||||
const download = await downloadPromise
|
||||
|
||||
// 验证下载文件
|
||||
expect(download.suggestedFilename()).toMatch(/资产.*\.xlsx/)
|
||||
})
|
||||
|
||||
test('应该刷新列表', async ({ page }) => {
|
||||
await page.click('text=资产管理')
|
||||
await page.click('text=资产列表')
|
||||
|
||||
// 等待列表加载
|
||||
await expect(page.locator('.el-table')).toBeVisible()
|
||||
|
||||
// 点击刷新按钮
|
||||
await page.click('button:has-text("刷新")')
|
||||
|
||||
// 验证loading状态
|
||||
await expect(page.locator('.loading')).toBeVisible()
|
||||
|
||||
// 等待刷新完成
|
||||
await page.waitForSelector('.loading', { state: 'hidden' })
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('资产分配流程测试', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('http://localhost:5173/login')
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
await page.click('button[type="submit"]')
|
||||
await page.waitForURL('http://localhost:5173/')
|
||||
})
|
||||
|
||||
test('应该创建资产分配单', async ({ page }) => {
|
||||
await page.click('text=资产分配')
|
||||
await page.click('text=分配列表')
|
||||
|
||||
// 点击创建分配单
|
||||
await page.click('button:has-text("新建分配单")')
|
||||
|
||||
// 等待对话框
|
||||
await expect(page.locator('.el-dialog')).toBeVisible()
|
||||
|
||||
// 选择目标网点
|
||||
await page.click('select[name="targetOrganization"]')
|
||||
await page.click('text=天河网点')
|
||||
|
||||
// 选择要分配的资产
|
||||
await page.click('.asset-selector button:has-text("选择资产")')
|
||||
|
||||
// 勾选资产
|
||||
await page.check('.asset-list .el-checkbox:first-child')
|
||||
|
||||
// 确认选择
|
||||
await page.click('button:has-text("确定")')
|
||||
|
||||
// 填写备注
|
||||
await page.fill('textarea[name="remark"]', '业务需要分配')
|
||||
|
||||
// 提交分配单
|
||||
await page.click('button:has-text("提交")')
|
||||
|
||||
// 验证成功
|
||||
await expect(page.locator('.el-message--success')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该审批分配单', async ({ page }) => {
|
||||
await page.click('text=资产分配')
|
||||
await page.click('text=待审批')
|
||||
|
||||
// 点击第一条记录的审批按钮
|
||||
await page.click('.allocation-item:first-child .approve-button')
|
||||
|
||||
// 等待审批对话框
|
||||
await expect(page.locator('.el-dialog')).toBeVisible()
|
||||
|
||||
// 选择审批结果
|
||||
await page.click('input[value="approved"]')
|
||||
|
||||
// 填写审批意见
|
||||
await page.fill('textarea[name="approvalRemark"]', '同意分配')
|
||||
|
||||
// 提交审批
|
||||
await page.click('button:has-text("确定")')
|
||||
|
||||
// 验证成功
|
||||
await expect(page.locator('.el-message--success')).toBeVisible()
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('扫码查询测试', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('http://localhost:5173/login')
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
await page.click('button[type="submit"]')
|
||||
await page.waitForURL('http://localhost:5173/')
|
||||
})
|
||||
|
||||
test('应该扫码查询资产', async ({ page }) => {
|
||||
// 导航到扫码页面
|
||||
await page.click('text=扫码查询')
|
||||
|
||||
// 等待摄像头权限请求
|
||||
// 在测试环境中我们模拟扫码
|
||||
|
||||
// 手动输入资产编码模拟扫码结果
|
||||
await page.click('button:has-text("手动输入")')
|
||||
await page.fill('input[name="assetCode"]', 'ASSET-20250124-0001')
|
||||
await page.click('button:has-text("查询")')
|
||||
|
||||
// 验证资产详情显示
|
||||
await expect(page.locator('.asset-detail')).toBeVisible()
|
||||
await expect(page.locator('text=ASSET-20250124-0001')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该处理不存在的资产编码', async ({ page }) => {
|
||||
await page.click('text=扫码查询')
|
||||
await page.click('button:has-text("手动输入")')
|
||||
await page.fill('input[name="assetCode"]', 'INVALID-CODE')
|
||||
await page.click('button:has-text("查询")')
|
||||
|
||||
// 验证错误提示
|
||||
await expect(page.locator('.el-message--error')).toBeVisible()
|
||||
await expect(page.locator('.el-message--error')).toContainText('资产不存在')
|
||||
})
|
||||
})
|
||||
29
tests/e2e/global-setup.ts
Normal file
29
tests/e2e/global-setup.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* Playwright E2E测试 - 全局设置
|
||||
*
|
||||
* 在所有测试运行前执行
|
||||
*/
|
||||
|
||||
import { FullConfig } from '@playwright/test'
|
||||
|
||||
async function globalSetup(config: FullConfig) {
|
||||
console.log('🚀 开始E2E测试全局设置...')
|
||||
|
||||
// 可以在这里进行测试前的准备工作:
|
||||
// 1. 启动测试数据库
|
||||
// 2. 运行数据库迁移
|
||||
// 3. 准备测试数据
|
||||
// 4. 启动后端服务
|
||||
// 5. 启动前端服务(通常由playwright.config.ts配置)
|
||||
|
||||
const baseURL = config.projects?.[0]?.use?.baseURL || 'http://localhost:5173'
|
||||
|
||||
console.log(`📝 测试基础URL: ${baseURL}`)
|
||||
|
||||
// 等待服务启动
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
|
||||
console.log('✅ E2E测试全局设置完成!')
|
||||
}
|
||||
|
||||
export default globalSetup
|
||||
26
tests/e2e/global-teardown.ts
Normal file
26
tests/e2e/global-teardown.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* Playwright E2E测试 - 全局清理
|
||||
*
|
||||
* 在所有测试运行后执行
|
||||
*/
|
||||
|
||||
import { FullConfig } from '@playwright/test'
|
||||
|
||||
async function globalTeardown(config: FullConfig) {
|
||||
console.log('🧹 开始E2E测试全局清理...')
|
||||
|
||||
// 可以在这里进行测试后的清理工作:
|
||||
// 1. 清理测试数据库
|
||||
// 2. 关闭测试服务
|
||||
// 3. 删除临时文件
|
||||
// 4. 归档测试报告
|
||||
|
||||
console.log('📊 生成测试报告摘要...')
|
||||
|
||||
// 这里可以添加报告汇总逻辑
|
||||
|
||||
console.log('✅ E2E测试全局清理完成!')
|
||||
console.log('📄 测试报告位于: test_reports/playwright-report/index.html')
|
||||
}
|
||||
|
||||
export default globalTeardown
|
||||
258
tests/e2e/login.spec.ts
Normal file
258
tests/e2e/login.spec.ts
Normal file
@@ -0,0 +1,258 @@
|
||||
/**
|
||||
* 登录流程E2E测试
|
||||
*
|
||||
* 测试内容:
|
||||
* - 正常登录流程
|
||||
* - 错误密码处理
|
||||
* - 验证码验证
|
||||
* - Token过期处理
|
||||
* - 记住密码功能
|
||||
*/
|
||||
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('登录流程测试', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('http://localhost:5173/login')
|
||||
})
|
||||
|
||||
test('应该成功登录并跳转到首页', async ({ page }) => {
|
||||
// 输入用户名和密码
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
|
||||
// 输入验证码 (假设测试环境验证码固定为1234)
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
|
||||
// 点击登录按钮
|
||||
await page.click('button[type="submit"]')
|
||||
|
||||
// 等待跳转
|
||||
await page.waitForURL('http://localhost:5173/')
|
||||
|
||||
// 验证URL已跳转到首页
|
||||
expect(page.url()).toBe('http://localhost:5173/')
|
||||
|
||||
// 验证显示了用户信息
|
||||
await expect(page.locator('.user-info')).toBeVisible()
|
||||
await expect(page.locator('.user-info')).toContainText('admin')
|
||||
})
|
||||
|
||||
test('应该显示用户名或密码错误', async ({ page }) => {
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'WrongPassword')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
|
||||
await page.click('button[type="submit"]')
|
||||
|
||||
// 等待错误消息显示
|
||||
await expect(page.locator('.el-message--error')).toBeVisible()
|
||||
await expect(page.locator('.el-message--error')).toContainText('用户名或密码错误')
|
||||
})
|
||||
|
||||
test('应该验证必填字段', async ({ page }) => {
|
||||
// 不填写任何字段直接提交
|
||||
await page.click('button[type="submit"]')
|
||||
|
||||
// 验证表单验证错误
|
||||
await expect(page.locator('input[name="username"] + .el-form-item__error')).toBeVisible()
|
||||
await expect(page.locator('input[name="password"] + .el-form-item__error')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该验证用户名格式', async ({ page }) => {
|
||||
// 输入无效用户名
|
||||
await page.fill('input[name="username"]', 'ab') // 太短
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
|
||||
await page.click('button[type="submit"]')
|
||||
|
||||
// 应该显示用户名格式错误
|
||||
await expect(page.locator('.el-form-item__error')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该验证密码强度', async ({ page }) => {
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'weak') // 弱密码
|
||||
|
||||
await page.click('button[type="submit"]')
|
||||
|
||||
// 应该显示密码强度错误
|
||||
await expect(page.locator('.el-form-item__error')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该刷新验证码', async ({ page }) => {
|
||||
const captchaImage = page.locator('.captcha-image img')
|
||||
|
||||
// 获取初始验证码图片URL
|
||||
const initialSrc = await captchaImage.getAttribute('src')
|
||||
|
||||
// 点击刷新验证码
|
||||
await page.click('.refresh-captcha')
|
||||
|
||||
// 等待图片重新加载
|
||||
await page.waitForLoadState('networkidle')
|
||||
|
||||
// 验证验证码已更新
|
||||
const newSrc = await captchaImage.getAttribute('src')
|
||||
expect(newSrc).not.toBe(initialSrc)
|
||||
})
|
||||
|
||||
test('应该支持记住密码功能', async ({ page }) => {
|
||||
// 勾选记住密码
|
||||
await page.check('input[name="remember"]')
|
||||
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
|
||||
await page.click('button[type="submit"]')
|
||||
await page.waitForURL('http://localhost:5173/')
|
||||
|
||||
// 验证localStorage中保存了用户信息
|
||||
const rememberedUser = await page.evaluate(() => {
|
||||
return localStorage.getItem('rememberedUser')
|
||||
})
|
||||
|
||||
expect(rememberedUser).toBeTruthy()
|
||||
|
||||
// 退出登录
|
||||
await page.click('.logout-button')
|
||||
|
||||
// 返回登录页
|
||||
await page.goto('http://localhost:5173/login')
|
||||
|
||||
// 验证用户名已填充
|
||||
const username = await page.inputValue('input[name="username"]')
|
||||
expect(username).toBe('admin')
|
||||
})
|
||||
|
||||
test('应该处理验证码错误', async ({ page }) => {
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
await page.fill('input[name="captcha"]', '9999') // 错误验证码
|
||||
|
||||
await page.click('button[type="submit"]')
|
||||
|
||||
// 应该显示验证码错误
|
||||
await expect(page.locator('.el-message--error')).toBeVisible()
|
||||
await expect(page.locator('.el-message--error')).toContainText('验证码错误')
|
||||
})
|
||||
|
||||
test('应该限制登录尝试次数', async ({ page }) => {
|
||||
// 尝试多次错误登录
|
||||
for (let i = 0; i < 5; i++) {
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'WrongPassword')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
await page.click('button[type="submit"]')
|
||||
|
||||
await page.waitForTimeout(500)
|
||||
}
|
||||
|
||||
// 第6次应该被锁定
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
await page.click('button[type="submit"]')
|
||||
|
||||
await expect(page.locator('.el-message--error')).toBeVisible()
|
||||
await expect(page.locator('.el-message--error')).toContainText('账户已锁定')
|
||||
})
|
||||
|
||||
test('应该支持回车键登录', async ({ page }) => {
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
|
||||
// 在密码框按回车
|
||||
await page.press('input[name="password"]', 'Enter')
|
||||
|
||||
// 应该提交登录
|
||||
await page.waitForURL('http://localhost:5173/')
|
||||
expect(page.url()).toBe('http://localhost:5173/')
|
||||
})
|
||||
|
||||
test('应该处理网络错误', async ({ page, context }) => {
|
||||
// 模拟网络断开
|
||||
await context.setOffline(true)
|
||||
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
await page.click('button[type="submit"]')
|
||||
|
||||
// 应该显示网络错误
|
||||
await expect(page.locator('.el-message--error')).toBeVisible()
|
||||
await expect(page.locator('.el-message--error')).toContainText('网络错误')
|
||||
|
||||
// 恢复网络
|
||||
await context.setOffline(false)
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Token过期处理', () => {
|
||||
test('应该在Token过期时自动刷新', async ({ page }) => {
|
||||
// 登录
|
||||
await page.goto('http://localhost:5173/login')
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
await page.click('button[type="submit"]')
|
||||
await page.waitForURL('http://localhost:5173/')
|
||||
|
||||
// 模拟Token过期(通过设置过期Token)
|
||||
await page.evaluate(() => {
|
||||
localStorage.setItem('token', 'expired_token')
|
||||
localStorage.setItem('refreshToken', 'valid_refresh_token')
|
||||
})
|
||||
|
||||
// 刷新页面
|
||||
await page.reload()
|
||||
|
||||
// 应该自动刷新Token并正常显示
|
||||
await expect(page.locator('.user-info')).toBeVisible()
|
||||
})
|
||||
|
||||
test('应该在刷新Token失败时跳转登录页', async ({ page }) => {
|
||||
await page.goto('http://localhost:5173/')
|
||||
await page.evaluate(() => {
|
||||
localStorage.setItem('token', 'expired_token')
|
||||
localStorage.setItem('refreshToken', 'expired_refresh_token')
|
||||
})
|
||||
|
||||
// 刷新页面
|
||||
await page.reload()
|
||||
|
||||
// 应该跳转到登录页
|
||||
await page.waitForURL('http://localhost:5173/login')
|
||||
expect(page.url()).toBe('http://localhost:5173/login')
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('跨浏览器测试', () => {
|
||||
test('应该在Chrome中正常工作', async ({ page, browserName }) => {
|
||||
test.skip(browserName !== 'chromium')
|
||||
|
||||
await page.goto('http://localhost:5173/login')
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
await page.click('button[type="submit"]')
|
||||
|
||||
await page.waitForURL('http://localhost:5173/')
|
||||
expect(page.url()).toBe('http://localhost:5173/')
|
||||
})
|
||||
|
||||
test('应该在Firefox中正常工作', async ({ page, browserName }) => {
|
||||
test.skip(browserName !== 'firefox')
|
||||
|
||||
await page.goto('http://localhost:5173/login')
|
||||
await page.fill('input[name="username"]', 'admin')
|
||||
await page.fill('input[name="password"]', 'Admin123')
|
||||
await page.fill('input[name="captcha"]', '1234')
|
||||
await page.click('button[type="submit"]')
|
||||
|
||||
await page.waitForURL('http://localhost:5173/')
|
||||
expect(page.url()).toBe('http://localhost:5173/')
|
||||
})
|
||||
})
|
||||
190
tests/setup.ts
Normal file
190
tests/setup.ts
Normal file
@@ -0,0 +1,190 @@
|
||||
/**
|
||||
* Vitest 测试环境设置
|
||||
*
|
||||
* 配置全局测试环境和工具
|
||||
*/
|
||||
|
||||
import { vi } from 'vitest'
|
||||
|
||||
// Mock window.matchMedia
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn().mockImplementation(query => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: vi.fn(), // Deprecated
|
||||
removeListener: vi.fn(), // Deprecated
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
})),
|
||||
})
|
||||
|
||||
// Mock IntersectionObserver
|
||||
global.IntersectionObserver = class IntersectionObserver {
|
||||
constructor() {}
|
||||
disconnect() {}
|
||||
observe() {}
|
||||
takeRecords() {
|
||||
return []
|
||||
}
|
||||
unobserve() {}
|
||||
} as any
|
||||
|
||||
// Mock ResizeObserver
|
||||
global.ResizeObserver = class ResizeObserver {
|
||||
constructor() {}
|
||||
disconnect() {}
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
} as any
|
||||
|
||||
// Mock localStorage
|
||||
const localStorageMock = {
|
||||
getItem: (key: string) => null,
|
||||
setItem: (key: string, value: string) => {},
|
||||
removeItem: (key: string) => {},
|
||||
clear: () => {},
|
||||
}
|
||||
|
||||
Object.defineProperty(window, 'localStorage', {
|
||||
value: localStorageMock,
|
||||
})
|
||||
|
||||
// Mock sessionStorage
|
||||
const sessionStorageMock = {
|
||||
getItem: (key: string) => null,
|
||||
setItem: (key: string, value: string) => {},
|
||||
removeItem: (key: string) => {},
|
||||
clear: () => {},
|
||||
}
|
||||
|
||||
Object.defineProperty(window, 'sessionStorage', {
|
||||
value: sessionStorageMock,
|
||||
})
|
||||
|
||||
// Mock requestAnimationFrame
|
||||
global.requestAnimationFrame = (callback: FrameRequestCallback) => {
|
||||
return setTimeout(callback, 16) as unknown as number
|
||||
}
|
||||
|
||||
global.cancelAnimationFrame = (id: number) => {
|
||||
clearTimeout(id)
|
||||
}
|
||||
|
||||
// Mock console方法以减少测试输出
|
||||
global.console = {
|
||||
...console,
|
||||
// Uncomment to ignore console logs during tests
|
||||
// log: vi.fn(),
|
||||
// debug: vi.fn(),
|
||||
// info: vi.fn(),
|
||||
// warn: vi.fn(),
|
||||
// error: vi.fn(),
|
||||
}
|
||||
|
||||
// 设置全局错误处理
|
||||
window.addEventListener('error', event => {
|
||||
console.error('Global error:', event.error)
|
||||
})
|
||||
|
||||
// 设置未处理的Promise rejection
|
||||
window.addEventListener('unhandledrejection', event => {
|
||||
console.error('Unhandled promise rejection:', event.reason)
|
||||
})
|
||||
|
||||
// Mock URL.createObjectURL和URL.revokeObjectURL
|
||||
global.URL.createObjectURL = vi.fn(() => 'mock-url')
|
||||
global.URL.revokeObjectURL = vi.fn()
|
||||
|
||||
// Mock navigator
|
||||
Object.defineProperty(window.navigator, 'userAgent', {
|
||||
value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
|
||||
writable: true,
|
||||
})
|
||||
|
||||
// Mock scrollTo
|
||||
window.scrollTo = vi.fn()
|
||||
|
||||
// Mock getComputedStyle
|
||||
window.getComputedStyle = vi.fn(() => ({
|
||||
getPropertyValue: (property: string) => {
|
||||
const styles: Record<string, string> = {
|
||||
display: 'block',
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
}
|
||||
return styles[property] || ''
|
||||
},
|
||||
}))
|
||||
|
||||
// Mock DOMRect
|
||||
global.DOMRect = class DOMRect {
|
||||
constructor(
|
||||
public x = 0,
|
||||
public y = 0,
|
||||
public width = 0,
|
||||
public height = 0,
|
||||
) {}
|
||||
|
||||
toJSON() {
|
||||
return {
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
top: this.y,
|
||||
left: this.x,
|
||||
bottom: this.y + this.height,
|
||||
right: this.x + this.width,
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
}
|
||||
}
|
||||
|
||||
static fromRect(rect?: DOMRectInit): DOMRect {
|
||||
return new DOMRect(rect?.x, rect?.y, rect?.width, rect?.height)
|
||||
}
|
||||
} as any
|
||||
|
||||
// Element.prototype.getBoundingClientRect mock
|
||||
Element.prototype.getBoundingClientRect = new DOMRect(0, 0, 0, 0) as any
|
||||
|
||||
// 每个测试前清理
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
// 导出测试工具
|
||||
export const TestUtils = {
|
||||
/**
|
||||
* 等待组件更新
|
||||
*/
|
||||
async flushPromises(): Promise<void> {
|
||||
return new Promise(resolve => setTimeout(resolve, 0))
|
||||
},
|
||||
|
||||
/**
|
||||
* 创建Mock响应
|
||||
*/
|
||||
createMockResponse<T>(data: T, status = 200): Response {
|
||||
return {
|
||||
ok: status >= 200 && status < 300,
|
||||
status,
|
||||
statusText: status === 200 ? 'OK' : 'Error',
|
||||
json: async () => data,
|
||||
data,
|
||||
} as any
|
||||
},
|
||||
|
||||
/**
|
||||
* 创建Mock API响应
|
||||
*/
|
||||
createMockApiResponse<T>(data: T, code = 200, message = 'success') {
|
||||
return {
|
||||
code,
|
||||
message,
|
||||
data,
|
||||
timestamp: Date.now(),
|
||||
}
|
||||
},
|
||||
}
|
||||
339
tests/unit/components/AssetList.test.ts
Normal file
339
tests/unit/components/AssetList.test.ts
Normal file
@@ -0,0 +1,339 @@
|
||||
/**
|
||||
* 资产列表组件测试
|
||||
*
|
||||
* 测试内容:
|
||||
* - 组件渲染
|
||||
* - 数据加载
|
||||
* - 搜索功能
|
||||
* - 分页功能
|
||||
* - 事件触发
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { mount, VueWrapper } from '@vue/test-utils'
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import AssetList from '@/views/assets/AssetList.vue'
|
||||
import * as assetApi from '@/api/assets'
|
||||
|
||||
// Mock API模块
|
||||
vi.mock('@/api/assets', () => ({
|
||||
getAssetList: vi.fn(),
|
||||
deleteAsset: vi.fn(),
|
||||
getAssetStatistics: vi.fn()
|
||||
}))
|
||||
|
||||
describe('AssetList组件', () => {
|
||||
let wrapper: VueWrapper<any>
|
||||
let pinia: any
|
||||
|
||||
beforeEach(() => {
|
||||
// 创建新的Pinia实例
|
||||
pinia = createPinia()
|
||||
setActivePinia(pinia)
|
||||
|
||||
// Mock API响应
|
||||
vi.mocked(assetApi.getAssetList).mockResolvedValue({
|
||||
items: [
|
||||
{
|
||||
id: 1,
|
||||
assetCode: 'ASSET-20250124-0001',
|
||||
assetName: '联想台式机',
|
||||
deviceType: { id: 1, typeName: '计算机' },
|
||||
organization: { id: 1, orgName: '天河网点' },
|
||||
status: 'in_use',
|
||||
purchaseDate: '2024-01-15',
|
||||
purchasePrice: 4500.00
|
||||
}
|
||||
],
|
||||
total: 1,
|
||||
page: 1,
|
||||
pageSize: 20
|
||||
})
|
||||
|
||||
vi.mocked(assetApi.getAssetStatistics).mockResolvedValue({
|
||||
totalCount: 100,
|
||||
totalValue: 500000.00,
|
||||
statusDistribution: {
|
||||
in_stock: 30,
|
||||
in_use: 50,
|
||||
maintenance: 10,
|
||||
scrapped: 10
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
if (wrapper) {
|
||||
wrapper.unmount()
|
||||
}
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('应该正确渲染组件', () => {
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'el-pagination': true,
|
||||
'el-input': true,
|
||||
'el-button': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.find('.asset-list').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该在挂载时加载资产列表', async () => {
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'el-pagination': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(assetApi.getAssetList).toHaveBeenCalledWith({
|
||||
page: 1,
|
||||
page_size: 20
|
||||
})
|
||||
})
|
||||
|
||||
it('应该显示资产统计数据', async () => {
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'el-statistic': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.$nextTick()
|
||||
await wrapper.vm.$nextTick() // 等待统计数据加载
|
||||
|
||||
expect(assetApi.getAssetStatistics).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('应该支持搜索功能', async () => {
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'el-input': true,
|
||||
'el-button': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const searchKeyword = '联想'
|
||||
wrapper.vm.searchKeyword = searchKeyword
|
||||
await wrapper.vm.handleSearch()
|
||||
|
||||
expect(assetApi.getAssetList).toHaveBeenCalledWith({
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
keyword: searchKeyword
|
||||
})
|
||||
})
|
||||
|
||||
it('应该支持分页功能', async () => {
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'el-pagination': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
wrapper.vm.pagination.page = 2
|
||||
await wrapper.vm.fetchAssets()
|
||||
|
||||
expect(assetApi.getAssetList).toHaveBeenCalledWith({
|
||||
page: 2,
|
||||
page_size: 20
|
||||
})
|
||||
})
|
||||
|
||||
it('应该触发刷新事件', async () => {
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'el-button': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const refreshSpy = vi.spyOn(wrapper.vm, 'fetchAssets')
|
||||
await wrapper.vm.handleRefresh()
|
||||
|
||||
expect(refreshSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('应该打开创建对话框', async () => {
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'el-button': true,
|
||||
'asset-create-dialog': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.openCreateDialog()
|
||||
expect(wrapper.vm.createDialogVisible).toBe(true)
|
||||
})
|
||||
|
||||
it('应该打开编辑对话框', async () => {
|
||||
const mockAsset = {
|
||||
id: 1,
|
||||
assetCode: 'ASSET-20250124-0001',
|
||||
assetName: '联想台式机'
|
||||
}
|
||||
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'asset-edit-dialog': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.openEditDialog(mockAsset)
|
||||
expect(wrapper.vm.editDialogVisible).toBe(true)
|
||||
expect(wrapper.vm.currentAsset).toEqual(mockAsset)
|
||||
})
|
||||
|
||||
it('应该删除资产', async () => {
|
||||
vi.mocked(assetApi.deleteAsset).mockResolvedValue({})
|
||||
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'el-button': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Mock确认对话框
|
||||
vi.spyOn(wrapper.vm as any, '$confirm').mockResolvedValue('confirm')
|
||||
|
||||
await wrapper.vm.handleDelete(1)
|
||||
|
||||
expect(assetApi.deleteAsset).toHaveBeenCalledWith(1)
|
||||
})
|
||||
|
||||
it('应该在搜索时重置页码', async () => {
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'el-input': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
wrapper.vm.pagination.page = 5
|
||||
wrapper.vm.searchKeyword = '测试'
|
||||
await wrapper.vm.handleSearch()
|
||||
|
||||
expect(wrapper.vm.pagination.page).toBe(1)
|
||||
})
|
||||
|
||||
it('应该显示加载状态', async () => {
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
wrapper.vm.loading = true
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
expect(wrapper.find('.loading').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该处理API错误', async () => {
|
||||
vi.mocked(assetApi.getAssetList).mockRejectedValue(new Error('网络错误'))
|
||||
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
|
||||
|
||||
await wrapper.vm.fetchAssets()
|
||||
|
||||
expect(consoleSpy).toHaveBeenCalled()
|
||||
consoleSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('应该支持状态筛选', async () => {
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'el-select': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
wrapper.vm.filters.status = 'in_use'
|
||||
await wrapper.vm.handleFilter()
|
||||
|
||||
expect(assetApi.getAssetList).toHaveBeenCalledWith({
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
status: 'in_use'
|
||||
})
|
||||
})
|
||||
|
||||
it('应该支持设备类型筛选', async () => {
|
||||
wrapper = mount(AssetList, {
|
||||
global: {
|
||||
plugins: [pinia, ElementPlus],
|
||||
stubs: {
|
||||
'el-table': true,
|
||||
'el-select': true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
wrapper.vm.filters.deviceTypeId = 1
|
||||
await wrapper.vm.handleFilter()
|
||||
|
||||
expect(assetApi.getAssetList).toHaveBeenCalledWith({
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
device_type_id: 1
|
||||
})
|
||||
})
|
||||
})
|
||||
124
tests/unit/components/PieChart.test.ts
Normal file
124
tests/unit/components/PieChart.test.ts
Normal file
@@ -0,0 +1,124 @@
|
||||
/**
|
||||
* 图表组件单元测试示例
|
||||
* 测试 PieChart 组件
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import PieChart from '@/components/charts/PieChart.vue'
|
||||
|
||||
describe('PieChart.vue', () => {
|
||||
it('renders properly with data', () => {
|
||||
const wrapper = mount(PieChart, {
|
||||
props: {
|
||||
data: [
|
||||
{ name: '库存中', value: 200 },
|
||||
{ name: '在用', value: 750 },
|
||||
],
|
||||
title: '资产状态分布',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.find('.base-chart').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('emits click event when clicking on a slice', async () => {
|
||||
const wrapper = mount(PieChart, {
|
||||
props: {
|
||||
data: [
|
||||
{ name: '库存中', value: 200 },
|
||||
{ name: '在用', value: 750 },
|
||||
],
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟点击事件
|
||||
// 注意：实际测试需要等待图表渲染完成
|
||||
// 这里只是示例
|
||||
expect(wrapper.exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('renders doughnut chart when type is doughnut', () => {
|
||||
const wrapper = mount(PieChart, {
|
||||
props: {
|
||||
data: [{ name: '测试', value: 100 }],
|
||||
type: 'doughnut',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.props('type')).toBe('doughnut')
|
||||
})
|
||||
|
||||
it('renders pie chart when type is pie', () => {
|
||||
const wrapper = mount(PieChart, {
|
||||
props: {
|
||||
data: [{ name: '测试', value: 100 }],
|
||||
type: 'pie',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.props('type')).toBe('pie')
|
||||
})
|
||||
|
||||
it('shows legend when showLegend is true', () => {
|
||||
const wrapper = mount(PieChart, {
|
||||
props: {
|
||||
data: [{ name: '测试', value: 100 }],
|
||||
showLegend: true,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.props('showLegend')).toBe(true)
|
||||
})
|
||||
|
||||
it('hides legend when showLegend is false', () => {
|
||||
const wrapper = mount(PieChart, {
|
||||
props: {
|
||||
data: [{ name: '测试', value: 100 }],
|
||||
showLegend: false,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.props('showLegend')).toBe(false)
|
||||
})
|
||||
|
||||
it('uses custom color when customColor is true', () => {
|
||||
const wrapper = mount(PieChart, {
|
||||
props: {
|
||||
data: [
|
||||
{ name: '库存中', value: 200, status: 'in_stock' },
|
||||
{ name: '在用', value: 750, status: 'in_use' },
|
||||
],
|
||||
customColor: true,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.props('customColor')).toBe(true)
|
||||
})
|
||||
|
||||
it('applies custom height', () => {
|
||||
const wrapper = mount(PieChart, {
|
||||
props: {
|
||||
data: [{ name: '测试', value: 100 }],
|
||||
height: '500px',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.props('height')).toBe('500px')
|
||||
})
|
||||
|
||||
it('emits ready event when chart is ready', async () => {
|
||||
const wrapper = mount(PieChart, {
|
||||
props: {
|
||||
data: [{ name: '测试', value: 100 }],
|
||||
},
|
||||
})
|
||||
|
||||
// 等待组件挂载
|
||||
await wrapper.vm.$nextTick()
|
||||
|
||||
// 检查事件是否被触发
|
||||
// 注意：实际测试需要等待 ECharts 初始化完成
|
||||
expect(wrapper.exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
823
tests/unit/components/form/DynamicFieldRenderer.test.ts
Normal file
823
tests/unit/components/form/DynamicFieldRenderer.test.ts
Normal file
@@ -0,0 +1,823 @@
|
||||
/**
|
||||
* DynamicFieldRenderer 组件测试
|
||||
*
|
||||
* 测试范围:
|
||||
* - 基础渲染 (10+用例)
|
||||
* - 不同字段类型渲染 (15+用例)
|
||||
* - 数据绑定 (10+用例)
|
||||
* - 验证功能 (10+用例)
|
||||
* - 依赖处理 (5+用例)
|
||||
*
|
||||
* 总计: 40+ 用例
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { mount, VueWrapper } from '@vue/test-utils'
|
||||
import { nextTick } from 'vue'
|
||||
import DynamicFieldRenderer from '@/components/form/DynamicFieldRenderer.vue'
|
||||
import { FieldConfig, FieldType } from '@/types/form'
|
||||
|
||||
describe('DynamicFieldRenderer 组件测试', () => {
|
||||
// 测试数据
|
||||
const mockFieldConfig: FieldConfig = {
|
||||
field_id: 'test_field_1',
|
||||
field_name: '测试字段',
|
||||
field_type: FieldType.TEXT,
|
||||
is_required: true,
|
||||
placeholder: '请输入测试字段',
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'length',
|
||||
rule_value: { min: 1, max: 100 }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const mockModelValue = ref('')
|
||||
|
||||
// 基础渲染测试 (10+用例)
|
||||
describe('基础渲染', () => {
|
||||
it('应该正确渲染组件', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: mockModelValue.value
|
||||
}
|
||||
})
|
||||
expect(wrapper.exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该显示字段标签', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.text()).toContain('测试字段')
|
||||
})
|
||||
|
||||
it('应该显示必填标记', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.required-mark').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('不应该显示非必填字段的必填标记', () => {
|
||||
const config = { ...mockFieldConfig, is_required: false }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.required-mark').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('应该显示字段提示信息', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
help_text: '这是字段的帮助文本'
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.text()).toContain('这是字段的帮助文本')
|
||||
})
|
||||
|
||||
it('应该应用自定义CSS类', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: '',
|
||||
customClass: 'custom-field-class'
|
||||
}
|
||||
})
|
||||
expect(wrapper.classes()).toContain('custom-field-class')
|
||||
})
|
||||
|
||||
it('应该显示字段描述', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
description: '字段详细描述'
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.text()).toContain('字段详细描述')
|
||||
})
|
||||
|
||||
it('应该在禁用状态下渲染', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: '',
|
||||
disabled: true
|
||||
}
|
||||
})
|
||||
const input = wrapper.find('input')
|
||||
expect(input.attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('应该在只读状态下渲染', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'test value',
|
||||
readonly: true
|
||||
}
|
||||
})
|
||||
const input = wrapper.find('input')
|
||||
expect(input.attributes('readonly')).toBeDefined()
|
||||
})
|
||||
|
||||
it('应该响应字段配置变化', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.setProps({
|
||||
fieldConfig: {
|
||||
...mockFieldConfig,
|
||||
field_name: '更新后的字段名'
|
||||
}
|
||||
})
|
||||
|
||||
await nextTick()
|
||||
expect(wrapper.text()).toContain('更新后的字段名')
|
||||
})
|
||||
})
|
||||
|
||||
// 不同字段类型渲染测试 (15+用例)
|
||||
describe('不同字段类型渲染', () => {
|
||||
it('应该渲染文本输入框', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.TEXT }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('input[type="text"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染数字输入框', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.NUMBER }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 0
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('input[type="number"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染日期选择器', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.DATE }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.date-picker').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染下拉选择框', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.SELECT,
|
||||
options: [
|
||||
{ label: '选项1', value: 'option1' },
|
||||
{ label: '选项2', value: 'option2' }
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('select').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染多选框', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.MULTI_SELECT,
|
||||
options: [
|
||||
{ label: '选项1', value: 'option1' },
|
||||
{ label: '选项2', value: 'option2' }
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: []
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.multi-select').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染单选框组', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.RADIO,
|
||||
options: [
|
||||
{ label: '选项1', value: 'option1' },
|
||||
{ label: '选项2', value: 'option2' }
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.radio-group').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染复选框', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.CHECKBOX }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: false
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染文本域', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.TEXTAREA }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('textarea').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染富文本编辑器', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.RICH_TEXT }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.rich-text-editor').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染文件上传组件', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.FILE_UPLOAD }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: []
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.file-upload').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染日期时间选择器', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.DATETIME }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.datetime-picker').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染时间选择器', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.TIME }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.time-picker').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染滑块', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.SLIDER,
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'range',
|
||||
rule_value: { min: 0, max: 100 }
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 50
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.slider').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染开关', () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.SWITCH }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: false
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.switch').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('应该渲染级联选择器', () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.CASCADER,
|
||||
options: [
|
||||
{
|
||||
label: '级别1',
|
||||
value: '1',
|
||||
children: [
|
||||
{ label: '级别2-1', value: '1-1' },
|
||||
{ label: '级别2-2', value: '1-2' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: []
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.cascader').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
// 数据绑定测试 (10+用例)
|
||||
describe('数据绑定', () => {
|
||||
it('应该正确绑定modelValue', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'initial value'
|
||||
}
|
||||
})
|
||||
const input = wrapper.find('input')
|
||||
expect(input.element.value).toBe('initial value')
|
||||
})
|
||||
|
||||
it('应该在输入时触发update:modelValue事件', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
const input = wrapper.find('input')
|
||||
await input.setValue('new value')
|
||||
expect(wrapper.emitted('update:modelValue')).toBeTruthy()
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new value'])
|
||||
})
|
||||
|
||||
it('应该响应modelValue的变化', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'initial'
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.setProps({ modelValue: 'updated' })
|
||||
await nextTick()
|
||||
|
||||
const input = wrapper.find('input')
|
||||
expect(input.element.value).toBe('updated')
|
||||
})
|
||||
|
||||
it('应该正确处理数字类型的值', async () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.NUMBER }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 0
|
||||
}
|
||||
})
|
||||
|
||||
const input = wrapper.find('input')
|
||||
await input.setValue('123')
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual([123])
|
||||
})
|
||||
|
||||
it('应该正确处理布尔类型的值', async () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.CHECKBOX }
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: false
|
||||
}
|
||||
})
|
||||
|
||||
const checkbox = wrapper.find('input[type="checkbox"]')
|
||||
await checkbox.setChecked()
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual([true])
|
||||
})
|
||||
|
||||
it('应该正确处理数组类型的值', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.MULTI_SELECT,
|
||||
options: [
|
||||
{ label: '选项1', value: 'option1' },
|
||||
{ label: '选项2', value: 'option2' }
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: []
|
||||
}
|
||||
})
|
||||
|
||||
// 模拟选择操作
|
||||
wrapper.vm.handleSelect('option1')
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('应该正确处理日期类型的值', async () => {
|
||||
const config = { ...mockFieldConfig, field_type: FieldType.DATE }
|
||||
const dateValue = '2025-01-24'
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
|
||||
wrapper.vm.handleDateChange(dateValue)
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual([dateValue])
|
||||
})
|
||||
|
||||
it('应该在清空时触发正确的事件', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'test'
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.clearValue()
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual([''])
|
||||
})
|
||||
|
||||
it('应该正确处理空值', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: null
|
||||
}
|
||||
})
|
||||
|
||||
const input = wrapper.find('input')
|
||||
expect(input.element.value).toBe('')
|
||||
})
|
||||
|
||||
it('应该正确处理未定义的值', () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: undefined
|
||||
}
|
||||
})
|
||||
|
||||
const input = wrapper.find('input')
|
||||
expect(input.element.value).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
// 验证功能测试 (10+用例)
|
||||
describe('验证功能', () => {
|
||||
it('应该验证必填字段', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该通过必填字段的验证', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'test value'
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(true)
|
||||
})
|
||||
|
||||
it('应该验证最小长度', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'length',
|
||||
rule_value: { min: 5, max: 100 }
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 'abc'
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该验证最大长度', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'length',
|
||||
rule_value: { min: 1, max: 10 }
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 'a'.repeat(20)
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该验证数字范围', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
field_type: FieldType.NUMBER,
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'range',
|
||||
rule_value: { min: 1, max: 100 }
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 150
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该验证正则表达式', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
validation_rules: [
|
||||
{
|
||||
rule_type: 'regex',
|
||||
rule_value: '^[A-Z0-9]+$'
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: 'invalid-value'
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该显示验证错误信息', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.validate()
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.find('.error-message').exists()).toBe(true)
|
||||
expect(wrapper.text()).toContain('必填')
|
||||
})
|
||||
|
||||
it('应该支持自定义验证规则', async () => {
|
||||
const customValidator = vi.fn().mockResolvedValue(false)
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: 'test',
|
||||
customValidator
|
||||
}
|
||||
})
|
||||
|
||||
const isValid = await wrapper.vm.validate()
|
||||
expect(customValidator).toHaveBeenCalled()
|
||||
expect(isValid).toBe(false)
|
||||
})
|
||||
|
||||
it('应该在值变化时触发验证', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: '',
|
||||
validateOnBlur: true
|
||||
}
|
||||
})
|
||||
|
||||
const input = wrapper.find('input')
|
||||
await input.trigger('blur')
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.vm.error).toBeTruthy()
|
||||
})
|
||||
|
||||
it('应该清除验证错误', async () => {
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: mockFieldConfig,
|
||||
modelValue: ''
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.validate()
|
||||
expect(wrapper.vm.error).toBeTruthy()
|
||||
|
||||
await wrapper.vm.clearError()
|
||||
expect(wrapper.vm.error).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
// 依赖处理测试 (5+用例)
|
||||
describe('依赖处理', () => {
|
||||
it('应该根据依赖条件显示/隐藏字段', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
dependencies: [
|
||||
{
|
||||
field_id: 'parent_field',
|
||||
condition: 'equals',
|
||||
value: 'show'
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: '',
|
||||
formData: { parent_field: 'hide' }
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.vm.isVisible).toBe(false)
|
||||
|
||||
await wrapper.setProps({
|
||||
formData: { parent_field: 'show' }
|
||||
})
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.vm.isVisible).toBe(true)
|
||||
})
|
||||
|
||||
it('应该根据依赖条件启用/禁用字段', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
dependencies: [
|
||||
{
|
||||
field_id: 'parent_field',
|
||||
condition: 'equals',
|
||||
value: 'enable',
|
||||
action: 'disable'
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: '',
|
||||
formData: { parent_field: 'disable' }
|
||||
}
|
||||
})
|
||||
|
||||
const input = wrapper.find('input')
|
||||
expect(input.attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('应该根据依赖条件更新字段值', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
dependencies: [
|
||||
{
|
||||
field_id: 'parent_field',
|
||||
condition: 'equals',
|
||||
value: 'auto',
|
||||
action: 'set_value',
|
||||
target_value: 'automatic value'
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: '',
|
||||
formData: { parent_field: 'auto' }
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.vm.handleDependencies()
|
||||
expect(wrapper.emitted('update:modelValue')![0]).toEqual(['automatic value'])
|
||||
})
|
||||
|
||||
it('应该支持多个依赖条件', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
dependencies: [
|
||||
{
|
||||
field_id: 'field1',
|
||||
condition: 'equals',
|
||||
value: 'value1'
|
||||
},
|
||||
{
|
||||
field_id: 'field2',
|
||||
condition: 'equals',
|
||||
value: 'value2',
|
||||
operator: 'AND'
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: '',
|
||||
formData: { field1: 'value1', field2: 'value2' }
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.vm.isVisible).toBe(true)
|
||||
})
|
||||
|
||||
it('应该处理复杂的依赖逻辑', async () => {
|
||||
const config = {
|
||||
...mockFieldConfig,
|
||||
dependencies: [
|
||||
{
|
||||
field_id: 'parent_field',
|
||||
condition: 'in',
|
||||
value: ['option1', 'option2', 'option3']
|
||||
}
|
||||
]
|
||||
}
|
||||
const wrapper = mount(DynamicFieldRenderer, {
|
||||
props: {
|
||||
fieldConfig: config,
|
||||
modelValue: '',
|
||||
formData: { parent_field: 'option2' }
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.vm.isVisible).toBe(true)
|
||||
})
|
||||
})
|
||||
})
|
||||
303
tests/unit/composables/useAsset.test.ts
Normal file
303
tests/unit/composables/useAsset.test.ts
Normal file
@@ -0,0 +1,303 @@
|
||||
/**
|
||||
* useAsset Composable测试
|
||||
*
|
||||
* 测试内容:
|
||||
* - 资产列表获取
|
||||
* - 资产详情获取
|
||||
* - 资产创建
|
||||
* - 资产更新
|
||||
* - 资产删除
|
||||
* - 错误处理
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { useAsset } from '@/composables/useAsset'
|
||||
import * as assetApi from '@/api/assets'
|
||||
|
||||
// Mock API模块
|
||||
vi.mock('@/api/assets', () => ({
|
||||
getAssetList: vi.fn(),
|
||||
getAssetById: vi.fn(),
|
||||
createAsset: vi.fn(),
|
||||
updateAsset: vi.fn(),
|
||||
deleteAsset: vi.fn(),
|
||||
importAssets: vi.fn()
|
||||
}))
|
||||
|
||||
describe('useAsset Composable', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('fetchAssets', () => {
|
||||
it('应该成功获取资产列表', async () => {
|
||||
const mockData = {
|
||||
items: [
|
||||
{
|
||||
id: 1,
|
||||
assetCode: 'ASSET-20250124-0001',
|
||||
assetName: '联想台式机',
|
||||
status: 'in_use'
|
||||
}
|
||||
],
|
||||
total: 1,
|
||||
page: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
|
||||
vi.mocked(assetApi.getAssetList).mockResolvedValue(mockData)
|
||||
|
||||
const { fetchAssets, assets, loading } = useAsset()
|
||||
await fetchAssets({ page: 1, page_size: 20 })
|
||||
|
||||
expect(loading.value).toBe(false)
|
||||
expect(assets.value).toEqual(mockData.items)
|
||||
expect(assetApi.getAssetList).toHaveBeenCalledWith({ page: 1, page_size: 20 })
|
||||
})
|
||||
|
||||
it('应该处理获取资产列表失败', async () => {
|
||||
vi.mocked(assetApi.getAssetList).mockRejectedValue(new Error('网络错误'))
|
||||
|
||||
const { fetchAssets, loading } = useAsset()
|
||||
|
||||
await expect(fetchAssets({ page: 1 })).rejects.toThrow('网络错误')
|
||||
expect(loading.value).toBe(false)
|
||||
})
|
||||
|
||||
it('应该支持搜索参数', async () => {
|
||||
vi.mocked(assetApi.getAssetList).mockResolvedValue({ items: [], total: 0 })
|
||||
|
||||
const { fetchAssets } = useAsset()
|
||||
await fetchAssets({
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
keyword: '联想',
|
||||
status: 'in_use'
|
||||
})
|
||||
|
||||
expect(assetApi.getAssetList).toHaveBeenCalledWith({
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
keyword: '联想',
|
||||
status: 'in_use'
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('fetchAssetById', () => {
|
||||
it('应该成功获取资产详情', async () => {
|
||||
const mockAsset = {
|
||||
id: 1,
|
||||
assetCode: 'ASSET-20250124-0001',
|
||||
assetName: '联想台式机',
|
||||
status: 'in_use'
|
||||
}
|
||||
|
||||
vi.mocked(assetApi.getAssetById).mockResolvedValue(mockAsset)
|
||||
|
||||
const { fetchAssetById, loading } = useAsset()
|
||||
const result = await fetchAssetById(1)
|
||||
|
||||
expect(loading.value).toBe(false)
|
||||
expect(result).toEqual(mockAsset)
|
||||
expect(assetApi.getAssetById).toHaveBeenCalledWith(1)
|
||||
})
|
||||
|
||||
it('应该处理资产不存在的情况', async () => {
|
||||
vi.mocked(assetApi.getAssetById).mockRejectedValue(new Error('资产不存在'))
|
||||
|
||||
const { fetchAssetById } = useAsset()
|
||||
|
||||
await expect(fetchAssetById(999)).rejects.toThrow('资产不存在')
|
||||
})
|
||||
})
|
||||
|
||||
describe('createAsset', () => {
|
||||
it('应该成功创建资产', async () => {
|
||||
const newAsset = {
|
||||
assetName: '新资产',
|
||||
deviceTypeId: 1,
|
||||
organizationId: 1
|
||||
}
|
||||
|
||||
const createdAsset = {
|
||||
id: 1,
|
||||
assetCode: 'ASSET-20250124-0001',
|
||||
...newAsset
|
||||
}
|
||||
|
||||
vi.mocked(assetApi.createAsset).mockResolvedValue(createdAsset)
|
||||
|
||||
const { createAsset: create, loading } = useAsset()
|
||||
const result = await create(newAsset)
|
||||
|
||||
expect(loading.value).toBe(false)
|
||||
expect(result).toEqual(createdAsset)
|
||||
expect(assetApi.createAsset).toHaveBeenCalledWith(newAsset)
|
||||
})
|
||||
|
||||
it('应该处理创建失败', async () => {
|
||||
const newAsset = {
|
||||
assetName: '新资产',
|
||||
deviceTypeId: 1,
|
||||
organizationId: 1
|
||||
}
|
||||
|
||||
vi.mocked(assetApi.createAsset).mockRejectedValue(new Error('创建失败'))
|
||||
|
||||
const { createAsset: create } = useAsset()
|
||||
|
||||
await expect(create(newAsset)).rejects.toThrow('创建失败')
|
||||
})
|
||||
|
||||
it('应该验证必填字段', async () => {
|
||||
const invalidAsset = {
|
||||
assetName: '', // 空名称
|
||||
deviceTypeId: 0, // 无效ID
|
||||
organizationId: 1
|
||||
}
|
||||
|
||||
const { createAsset: create } = useAsset()
|
||||
|
||||
await expect(create(invalidAsset)).rejects.toThrow()
|
||||
})
|
||||
})
|
||||
|
||||
describe('updateAsset', () => {
|
||||
it('应该成功更新资产', async () => {
|
||||
const updateData = {
|
||||
assetName: '更新后的名称',
|
||||
location: '新位置'
|
||||
}
|
||||
|
||||
const updatedAsset = {
|
||||
id: 1,
|
||||
assetCode: 'ASSET-20250124-0001',
|
||||
...updateData
|
||||
}
|
||||
|
||||
vi.mocked(assetApi.updateAsset).mockResolvedValue(updatedAsset)
|
||||
|
||||
const { updateAsset: update, loading } = useAsset()
|
||||
const result = await update(1, updateData)
|
||||
|
||||
expect(loading.value).toBe(false)
|
||||
expect(result).toEqual(updatedAsset)
|
||||
expect(assetApi.updateAsset).toHaveBeenCalledWith(1, updateData)
|
||||
})
|
||||
|
||||
it('应该处理更新不存在的资产', async () => {
|
||||
vi.mocked(assetApi.updateAsset).mockRejectedValue(new Error('资产不存在'))
|
||||
|
||||
const { updateAsset: update } = useAsset()
|
||||
|
||||
await expect(update(999, { assetName: '新名称' })).rejects.toThrow('资产不存在')
|
||||
})
|
||||
})
|
||||
|
||||
describe('deleteAsset', () => {
|
||||
it('应该成功删除资产', async () => {
|
||||
vi.mocked(assetApi.deleteAsset).mockResolvedValue({})
|
||||
|
||||
const { deleteAsset: deleteFn, loading } = useAsset()
|
||||
await deleteFn(1)
|
||||
|
||||
expect(loading.value).toBe(false)
|
||||
expect(assetApi.deleteAsset).toHaveBeenCalledWith(1)
|
||||
})
|
||||
|
||||
it('应该处理删除失败', async () => {
|
||||
vi.mocked(assetApi.deleteAsset).mockRejectedValue(new Error('删除失败'))
|
||||
|
||||
const { deleteAsset: deleteFn } = useAsset()
|
||||
|
||||
await expect(deleteFn(1)).rejects.toThrow('删除失败')
|
||||
})
|
||||
|
||||
it('应该禁止删除使用中的资产', async () => {
|
||||
vi.mocked(assetApi.deleteAsset).mockRejectedValue(
|
||||
new Error('使用中的资产不能删除')
|
||||
)
|
||||
|
||||
const { deleteAsset: deleteFn } = useAsset()
|
||||
|
||||
await expect(deleteFn(1)).rejects.toThrow('使用中的资产不能删除')
|
||||
})
|
||||
})
|
||||
|
||||
describe('importAssets', () => {
|
||||
it('应该成功导入资产', async () => {
|
||||
const mockFile = new File([''], 'test.xlsx', {
|
||||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
})
|
||||
|
||||
const importResult = {
|
||||
total: 100,
|
||||
success: 98,
|
||||
failed: 2,
|
||||
errors: [
|
||||
{ row: 5, message: '设备类型不存在' },
|
||||
{ row: 12, message: '序列号重复' }
|
||||
]
|
||||
}
|
||||
|
||||
vi.mocked(assetApi.importAssets).mockResolvedValue(importResult)
|
||||
|
||||
const { importAssets: importFn, loading } = useAsset()
|
||||
const result = await importFn(mockFile)
|
||||
|
||||
expect(loading.value).toBe(false)
|
||||
expect(result).toEqual(importResult)
|
||||
expect(result.success).toBe(98)
|
||||
expect(result.failed).toBe(2)
|
||||
})
|
||||
|
||||
it('应该处理导入失败', async () => {
|
||||
const mockFile = new File([''], 'test.xlsx')
|
||||
|
||||
vi.mocked(assetApi.importAssets).mockRejectedValue(new Error('文件格式错误'))
|
||||
|
||||
const { importAssets: importFn } = useAsset()
|
||||
|
||||
await expect(importFn(mockFile)).rejects.toThrow('文件格式错误')
|
||||
})
|
||||
})
|
||||
|
||||
describe('状态管理', () => {
|
||||
it('应该正确设置loading状态', async () => {
|
||||
vi.mocked(assetApi.getAssetList).mockImplementation(() =>
|
||||
new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve({ items: [], total: 0 })
|
||||
}, 100)
|
||||
})
|
||||
)
|
||||
|
||||
const { fetchAssets, loading } = useAsset()
|
||||
|
||||
const promise = fetchAssets({ page: 1 })
|
||||
expect(loading.value).toBe(true)
|
||||
|
||||
await promise
|
||||
expect(loading.value).toBe(false)
|
||||
})
|
||||
|
||||
it('应该管理assets响应式数据', async () => {
|
||||
const mockData = {
|
||||
items: [
|
||||
{ id: 1, assetName: '资产1' },
|
||||
{ id: 2, assetName: '资产2' }
|
||||
],
|
||||
total: 2
|
||||
}
|
||||
|
||||
vi.mocked(assetApi.getAssetList).mockResolvedValue(mockData)
|
||||
|
||||
const { fetchAssets, assets } = useAsset()
|
||||
await fetchAssets({ page: 1 })
|
||||
|
||||
expect(assets.value.length).toBe(2)
|
||||
expect(assets.value[0].assetName).toBe('资产1')
|
||||
})
|
||||
})
|
||||
})
|
||||
141
tests/unit/composables/useECharts.test.ts
Normal file
141
tests/unit/composables/useECharts.test.ts
Normal file
@@ -0,0 +1,141 @@
|
||||
/**
|
||||
* useECharts Composable 测试
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
|
||||
import { ref } from 'vue'
|
||||
import { useECharts } from '@/composables/useECharts'
|
||||
|
||||
// Mock echarts
|
||||
vi.mock('echarts', () => ({
|
||||
default: {
|
||||
init: vi.fn(() => ({
|
||||
setOption: vi.fn(),
|
||||
resize: vi.fn(),
|
||||
dispose: vi.fn(),
|
||||
on: vi.fn(),
|
||||
off: vi.fn(),
|
||||
showLoading: vi.fn(),
|
||||
hideLoading: vi.fn(),
|
||||
clear: vi.fn(),
|
||||
getDataURL: vi.fn(),
|
||||
})),
|
||||
},
|
||||
}))
|
||||
|
||||
describe('useECharts', () => {
|
||||
let chartRef: Ref<HTMLElement | null>
|
||||
|
||||
beforeEach(() => {
|
||||
// 创建 mock DOM 元素
|
||||
const mockElement = document.createElement('div')
|
||||
chartRef = ref(mockElement)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('initializes chart correctly', () => {
|
||||
const { chart, isReady } = useECharts(chartRef)
|
||||
|
||||
// 检查图表实例是否创建
|
||||
expect(chart.value).toBeTruthy()
|
||||
})
|
||||
|
||||
it('sets chart option', () => {
|
||||
const { setOption } = useECharts(chartRef)
|
||||
|
||||
const option = {
|
||||
series: [{
|
||||
type: 'pie',
|
||||
data: [{ name: '测试', value: 100 }],
|
||||
}],
|
||||
}
|
||||
|
||||
setOption(option)
|
||||
|
||||
// 验证 setOption 被调用
|
||||
expect(chart.value?.setOption).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('shows loading', () => {
|
||||
const { showLoading, loading } = useECharts(chartRef)
|
||||
|
||||
showLoading({ text: '加载中...' })
|
||||
|
||||
expect(loading.value).toBe(true)
|
||||
expect(chart.value?.showLoading).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('hides loading', () => {
|
||||
const { hideLoading, loading } = useECharts(chartRef)
|
||||
|
||||
hideLoading()
|
||||
|
||||
expect(loading.value).toBe(false)
|
||||
expect(chart.value?.hideLoading).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('resizes chart', () => {
|
||||
const { resize } = useECharts(chartRef)
|
||||
|
||||
resize()
|
||||
|
||||
expect(chart.value?.resize).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('disposes chart', () => {
|
||||
const { dispose, chart } = useECharts(chartRef)
|
||||
|
||||
dispose()
|
||||
|
||||
expect(chart.value?.dispose).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('clears chart', () => {
|
||||
const { clear } = useECharts(chartRef)
|
||||
|
||||
clear()
|
||||
|
||||
expect(chart.value?.clear).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('binds event', () => {
|
||||
const { on } = useECharts(chartRef)
|
||||
|
||||
const handler = vi.fn()
|
||||
on('click', handler)
|
||||
|
||||
expect(chart.value?.on).toHaveBeenCalledWith('click', handler)
|
||||
})
|
||||
|
||||
it('unbinds event', () => {
|
||||
const { off } = useECharts(chartRef)
|
||||
|
||||
const handler = vi.fn()
|
||||
off('click', handler)
|
||||
|
||||
expect(chart.value?.off).toHaveBeenCalledWith('click', handler)
|
||||
})
|
||||
|
||||
it('gets data URL', () => {
|
||||
const { getDataURL } = useECharts(chartRef)
|
||||
|
||||
getDataURL({ type: 'png', pixelRatio: 2 })
|
||||
|
||||
expect(chart.value?.getDataURL).toHaveBeenCalledWith({
|
||||
type: 'png',
|
||||
pixelRatio: 2,
|
||||
backgroundColor: '#fff',
|
||||
})
|
||||
})
|
||||
|
||||
it('returns chart instance', () => {
|
||||
const { getInstance } = useECharts(chartRef)
|
||||
|
||||
const instance = getInstance()
|
||||
|
||||
expect(instance).toBeTruthy()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user