Ver Fonte

docs(e2e): 创建 Story 10.2 - 订单列表查看测试

创建 Story 10.2,为订单管理功能编写订单列表查看的 E2E 测试。

主要内容包括:
- 验证订单列表按预期加载
- 验证订单数据的正确展示(订单名称、平台、公司、渠道、状态等)
- 验证订单状态徽章显示正确(草稿、已确认、进行中等)
- 验证工作状态徽章显示正确(未就业、待就业、已就业、已离职)
- 验证分页功能

测试文件: web/tests/e2e/specs/admin/order-list.spec.ts

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname há 6 dias atrás
pai
commit
9867b5537f

+ 317 - 0
_bmad-output/implementation-artifacts/10-2-order-list-tests.md

@@ -0,0 +1,317 @@
+# Story 10.2: 编写订单列表查看测试
+
+Status: ready-for-dev
+
+<!-- Note: Validation is optional. Run validate-create-story for quality check before dev-story. -->
+
+## Story
+
+作为测试开发者,
+我想要编写订单列表查看的 E2E 测试,
+以便验证订单列表的基本功能和数据展示。
+
+## Acceptance Criteria
+
+**Given** 订单管理 Page Object 已创建
+**When** 编写订单列表查看测试用例
+**Then** 验证订单列表按预期加载
+**And** 验证订单数据的正确展示(订单名称、平台、公司、渠道、状态等)
+**And** 验证订单状态徽章显示正确(草稿、已确认、进行中等)
+**And** 验证工作状态徽章显示正确(未就业、待就业、已就业、已离职)
+**And** 验证分页功能
+**And** 测试在真实浏览器中通过
+
+**测试文件:** `web/tests/e2e/specs/admin/order-list.spec.ts`
+
+## Tasks / Subtasks
+
+- [ ] 创建订单列表测试文件 (AC: When)
+  - [ ] 创建 `web/tests/e2e/specs/admin/order-list.spec.ts`
+  - [ ] 导入必要的测试依赖(Playwright fixtures、OrderManagementPage)
+  - [ ] 配置测试文件的基本结构
+- [ ] 编写订单列表加载验证测试 (AC: Then)
+  - [ ] 测试页面标题正确显示
+  - [ ] 测试新增订单按钮可见
+  - [ ] 测试订单列表表格存在
+  - [ ] 测试搜索框和筛选按钮可见
+- [ ] 编写订单数据展示验证测试 (AC: And)
+  - [ ] 验证订单名称列显示正确
+  - [ ] 验证平台列显示正确
+  - [ ] 验证公司列显示正确
+  - [ ] 验证渠道列显示正确
+  - [ ] 验证预计开始日期列显示正确
+- [ ] 编写订单状态徽章验证测试 (AC: And)
+  - [ ] 验证草稿状态徽章显示
+  - [ ] 验证已确认状态徽章显示
+  - [ ] 验证进行中状态徽章显示
+  - [ ] 验证已完成状态徽章显示
+  - [ ] 验证徽章样式/颜色正确(如有)
+- [ ] 编写工作状态徽章验证测试 (AC: And)
+  - [ ] 验证未就业状态徽章显示
+  - [ ] 验证待就业状态徽章显示
+  - [ ] 验证已就业状态徽章显示
+  - [ ] 验证已离职状态徽章显示
+- [ ] 编写分页功能验证测试 (AC: And)
+  - [ ] 验证分页控件存在(如适用)
+  - [ ] 验证分页信息显示(如"共 X 条记录")
+  - [ ] 验证可以切换页码(如适用)
+  - [ ] 验证每页显示数量选择器(如适用)
+- [ ] 确保所有测试通过 (AC: And)
+
+## Dev Notes
+
+### Epic Context
+
+**Epic 10: 订单管理 E2E 测试 (Epic C - 业务测试 Epic)**
+
+- **目标**: 测试开发者可以为订单管理功能编写完整的 E2E 测试,验证订单的 CRUD、状态流转、人员关联和附件管理功能
+- **业务分组**: Epic C(业务测试 Epic)
+- **背景**: 订单管理是招聘系统的核心业务功能,涉及复杂表单(多选择器联动)、状态流转、人员关联等场景
+- **模式**: 业务测试为主,工具包支持为辅(遵循 Epic A 成功模式)
+
+**依赖:**
+- Epic 1: ✅ 已完成(Select 工具基础框架)
+- Epic 2: ✅ 已完成(Select 工具在真实 E2E 测试中验证)
+- Story 10.1: ✅ 已完成(订单管理 Page Object)
+
+### 订单管理功能概述
+
+根据 epics.md,订单管理涉及以下核心功能:
+
+1. **订单列表**: 查看、搜索、筛选、分页
+2. **订单状态流转**: 草稿 → 已确认 → 进行中 → 已完成
+3. **工作状态**: 未就业 → 待就业 → 已就业 → 已离职
+4. **订单数据字段**: 订单名称、平台、公司、渠道、预计开始日期、订单状态、工作状态
+
+### 前序 Story 情报 (Story 10.1)
+
+**已创建的 Page Object 功能:**
+
+`web/tests/e2e/pages/admin/order-management.page.ts` 包含以下功能:
+
+1. **页面基础功能**:
+   - `goto()` - 导航到订单管理页面
+   - `expectToBeVisible()` - 验证关键元素可见
+   - 页面选择器:`pageTitle`、`addOrderButton`、`orderTable`、`searchInput`、`searchButton`
+
+2. **订单列表选择器**:
+   - `pageTitle` - 页面标题("订单管理")
+   - `addOrderButton` - 新增订单按钮
+   - `orderTable` - 订单列表表格
+   - `searchInput` - 搜索输入框
+   - `searchButton` - 搜索按钮
+
+3. **类型定义**:
+   - `ORDER_STATUS` - 订单状态常量(draft、confirmed、in_progress、completed)
+   - `ORDER_STATUS_LABELS` - 订单状态显示名称映射
+   - `WORK_STATUS` - 工作状态常量(not_employed、pending、employed、resigned)
+   - `WORK_STATUS_LABELS` - 工作状态显示名称映射
+
+**订单状态和工作状态映射:**
+
+```typescript
+// 订单状态
+ORDER_STATUS_LABELS = {
+  draft: '草稿',
+  confirmed: '已确认',
+  in_progress: '进行中',
+  completed: '已完成',
+}
+
+// 工作状态
+WORK_STATUS_LABELS = {
+  not_employed: '未就业',
+  pending: '待就业',
+  employed: '已就业',
+  resigned: '已离职',
+}
+```
+
+### 测试文件结构参考
+
+参考 Story 8.2(区域列表查看测试)和 Story 9.x(残疾人管理测试)的测试结构:
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { OrderManagementPage } from '../../pages/admin/order-management.page';
+
+test.describe('订单列表查看', () => {
+  let orderPage: OrderManagementPage;
+
+  test.beforeEach(async ({ page }) => {
+    orderPage = new OrderManagementPage(page);
+    await orderPage.goto();
+  });
+
+  test('应该显示订单管理页面标题', async () => {
+    // 测试实现
+  });
+
+  test('应该显示订单列表表格', async () => {
+    // 测试实现
+  });
+
+  // 更多测试...
+});
+```
+
+### 订单列表页面元素(基于 Story 10.1)
+
+**订单列表页面结构:**
+- 页面路径: `/admin/orders`
+- 页面标题: "订单管理"
+- 新增订单按钮: "新增订单"
+- 搜索输入框: placeholder="搜索订单名称"
+- 搜索按钮: "搜索"
+- 订单列表表格: 显示订单数据
+
+**订单列表表格列(预期):**
+- 订单名称
+- 平台
+- 公司
+- 渠道
+- 预计开始日期
+- 订单状态(徽章显示)
+- 工作状态(徽章显示)
+- 操作按钮(编辑、删除、详情、人员等)
+
+### 技术要求
+
+**导入依赖:**
+```typescript
+import { test, expect } from '@playwright/test';
+import { OrderManagementPage } from '../../pages/admin/order-management.page';
+```
+
+**测试 Fixtures:**
+- 使用 Playwright 的 `test.describe()` 组织相关测试
+- 使用 `test.beforeEach()` 进行测试前置准备
+- 确保每个测试独立运行,不依赖其他测试的状态
+
+**断言策略:**
+- 使用 Playwright 的 `expect()` API 进行断言
+- 验证元素可见性:`expect(locator).toBeVisible()`
+- 验证文本内容:`expect(locator).toHaveText()`
+- 验证数量:`expect(locator).toHaveCount()`
+
+**状态徽章验证:**
+- 状态徽章可能使用特定的 CSS 类或 data 属性
+- 验证徽章的文本内容和样式(如适用)
+- 参考残疾人管理测试中的状态徽章验证模式
+
+### 测试标准参考
+
+遵循以下测试标准文档:
+- `docs/standards/testing-standards.md` - 测试规范
+- `docs/standards/web-ui-testing-standards.md` - Web UI 测试规范
+- `docs/standards/e2e-radix-testing.md` - Radix UI E2E 测试标准
+
+**选择器优先级:**
+1. `data-testid` - 最高优先级
+2. `aria-label + role`
+3. `text content + role` - 兜底
+
+### Project Structure Notes
+
+**文件位置:**
+- 测试文件: `web/tests/e2e/specs/admin/order-list.spec.ts`
+- Page Object: `web/tests/e2e/pages/admin/order-management.page.ts`
+- Fixtures 目录: `web/tests/e2e/fixtures/`
+
+**对齐统一项目结构:**
+- 遵循 `project-context.md` 中的 TypeScript 严格模式规则
+- 函数参数、返回值必须有明确类型注解
+- 禁止使用 `any` 类型
+- 公共 API 必须包含完整 JSDoc 注释
+
+### 测试运行命令
+
+```bash
+# 在 web 目录下运行单个测试文件
+cd web
+pnpm test:e2e:chromium order-list
+
+# 快速失败模式(推荐调试时使用)
+timeout 60 pnpm test:e2e:chromium order-list
+```
+
+### 测试注意事项
+
+**数据隔离:**
+- 测试应使用现有的订单数据进行验证
+- 不需要在测试中创建新订单(创建测试由 Story 10.4 负责)
+- 如果需要测试特定状态的订单,应假设数据库中存在测试数据
+
+**分页功能:**
+- 分页功能可能在 UI 上有不同实现方式
+- 需要实际验证页面后再编写相应测试
+- 如果没有分页功能,可以跳过相关测试
+
+**状态徽章样式:**
+- 徽章可能使用不同的颜色表示不同状态
+- 验证时首先确保文本正确,样式验证为可选
+
+### 调试技巧
+
+**E2E 测试失败调试:**
+- 查看 `test-results/**/error-context.md`
+- 使用 `timeout` 命令限制运行时间
+- `timeout 60 pnpm test:e2e:chromium order-list`
+
+**截图和录制:**
+- Playwright 默认在测试失败时截图
+- 可以使用 `--headed` 参数查看浏览器执行过程
+- 使用 `--debug` 参数进入调试模式
+
+### 测试覆盖场景清单
+
+**基础功能验证:**
+- [ ] 页面标题显示
+- [ ] 新增订单按钮可见
+- [ ] 订单列表表格存在
+- [ ] 搜索框和搜索按钮可见
+- [ ] 筛选按钮可见(如有)
+
+**数据展示验证:**
+- [ ] 订单名称列显示
+- [ ] 平台列显示
+- [ ] 公司列显示
+- [ ] 渠道列显示
+- [ ] 预计开始日期列显示
+
+**订单状态徽章验证:**
+- [ ] 草稿状态徽章
+- [ ] 已确认状态徽章
+- [ ] 进行中状态徽章
+- [ ] 已完成状态徽章
+
+**工作状态徽章验证:**
+- [ ] 未就业状态徽章
+- [ ] 待就业状态徽章
+- [ ] 已就业状态徽章
+- [ ] 已离职状态徽章
+
+**分页功能验证:**
+- [ ] 分页控件存在
+- [ ] 分页信息显示
+- [ ] 页码切换功能(如有)
+
+### References
+
+- [Source: _bmad-output/planning-artifacts/epics.md#Story 10.2](../planning-artifacts/epics.md)
+- [Source: _bmad-output/planning-artifacts/prd.md](../planning-artifacts/prd.md)
+- [Source: _bmad-output/planning-artifacts/architecture.md](../planning-artifacts/architecture.md)
+- [Source: web/tests/e2e/pages/admin/order-management.page.ts](../../web/tests/e2e/pages/admin/order-management.page.ts)
+- [Source: _bmad-output/implementation-artifacts/10-1-order-page-object.md](10-1-order-page-object.md)
+
+## Dev Agent Record
+
+### Agent Model Used
+
+claude-opus-4-5-20251101
+
+### Debug Log References
+
+### Completion Notes List
+
+### File List

+ 1 - 1
_bmad-output/implementation-artifacts/sprint-status.yaml

@@ -147,7 +147,7 @@ development_status:
   # 详情参见: _bmad-output/planning-artifacts/epics.md (Epic 10)
   epic-10: in-progress
   10-1-order-page-object: done                  # 创建订单管理 Page Object
-  10-2-order-list-tests: backlog           # 编写订单列表查看测试
+  10-2-order-list-tests: ready-for-dev         # 编写订单列表查看测试
   10-3-order-filter-tests: backlog         # 编写订单搜索和筛选测试
   10-4-order-create-tests: backlog         # 编写创建订单测试
   10-5-order-edit-tests: backlog           # 编写编辑订单测试