d8d-vite-starter/docs/stories/001.004.story.md

Story 001.004: Admin管理界面集成测试和E2E测试覆盖

父史诗: docs/prd/epic-001-test-infrastructure.md

Status

Ready for Development

Story

As a 质量保证工程师 I want 为admin管理界面的所有页面添加完整的集成测试和E2E测试 so that 我可以确保管理功能的稳定性和用户体验质量

Acceptance Criteria

1. Dashboard页面：添加集成测试验证核心指标显示和导航功能
2. Users管理页面：完整的CRUD操作集成测试和E2E工作流测试
3. Login页面：认证流程的集成测试和E2E测试
4. 所有测试通过且覆盖率达标
5. 测试与现有CI/CD流程集成

Tasks / Subtasks

• 分析现有admin页面结构和功能 (AC: 1,2,3)
• 创建Dashboard页面集成测试 (AC: 1)
  • 核心指标显示验证
  • 导航菜单功能测试
  • 响应式布局测试
• 创建Users页面集成测试 (AC: 2)
  • 用户列表加载和显示测试
  • 用户创建表单测试
  • 用户编辑和删除操作测试
  • 搜索和过滤功能测试
• 创建Login页面集成测试 (AC: 3)
  • 登录表单验证测试
  • 认证成功/失败场景测试
  • 路由保护和重定向测试
• 创建E2E测试套件 (AC: 4)
  • 完整用户管理流程E2E测试
  • 登录到Dashboard完整流程测试
  • 错误场景和边界条件测试
• 集成到CI/CD流程 (AC: 5)
  • 配置测试执行脚本
  • 设置测试报告生成
  • 验证CI流水线集成

Dev Notes

现有页面分析

基于目录结构分析 [Source: src/client/admin/]:

• Dashboard.tsx: 管理控制台主页，显示核心指标 [路径: src/client/admin/pages/Dashboard.tsx]
• Users.tsx: 用户管理页面，CRUD操作界面 [路径: src/client/admin/pages/Users.tsx]
• Login.tsx: 登录认证页面 [路径: src/client/admin/pages/Login.tsx]
• 布局组件: MainLayout [路径: src/client/admin/layouts/MainLayout.tsx], ProtectedRoute [路径: src/client/admin/components/ProtectedRoute.tsx]
• 其他组件: DataTablePagination [路径: src/client/admin/components/DataTablePagination.tsx], AuthProvider [路径: src/client/admin/hooks/AuthProvider.tsx]

测试策略

集成测试重点:

• 组件交互和状态管理测试
• API调用和数据处理验证 [API端点: /api/users/*, /api/auth/login]
• 用户界面行为测试
• 表单验证和错误处理测试

E2E测试重点:

• 完整用户工作流测试 (登录 → Dashboard → 用户管理)
• 跨页面导航验证
• 真实浏览器环境测试
• 数据持久化和状态管理测试

技术约束

• 测试框架: Vitest + Testing Library (集成测试), Playwright (E2E测试)
• 兼容性: 保持现有功能不变
• 性能: 测试执行时间合理
• 测试数据: 使用现有测试数据工厂模式 [参考: 现有测试文件中的mock数据模式]
• 环境要求: 需要配置测试数据库连接和认证token

集成点

• 现有Vitest配置
• CI/CD流水线
• 测试覆盖率报告

安全考虑

• 认证数据保护: 测试中使用的认证token需要安全处理，避免泄露
• 测试数据隔离: 使用独立的测试数据库或mock数据，避免影响生产数据
• 敏感信息: 测试配置中不包含真实凭据，使用环境变量或mock数据
• 访问控制: 验证权限控制逻辑在测试中得到正确验证

Testing

测试覆盖目标

• 集成测试覆盖率: > 80% (每个页面组件的核心功能)
• E2E测试场景: 覆盖主要用户工作流 (登录→仪表板→用户管理完整流程)
• 关键路径: 100%覆盖 (认证流程、核心CRUD操作、导航功能)
• 文件级覆盖率:
  • Dashboard.tsx: >85%
  • Users.tsx: >90%
  • Login.tsx: >95%
  • 相关组件: >70%

测试环境

• 集成测试: jsdom环境
• E2E测试: Chromium浏览器
• 测试数据: mock API响应

Change Log

Date	Version	Description	Author
2025-09-18	1.0	初始故事创建	Product Owner

Dev Agent Record

Agent Model Used

Debug Log References

Completion Notes List

File List

QA Results