docs(e2e): 创建 Story 10.8 - 订单详情查看测试

- 创建订单详情查看测试的完整 Story 文档
- 包含 3 个测试场景：基本信息、人员列表、附件
- 需要补充 3 个 Page Object 方法
- 16 个验证点覆盖订单详情完整展示
- 更新 sprint-status.yaml 标记为 ready-for-dev

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>

_bmad-output/implementation-artifacts/10-8-order-detail-tests.md

@@ -0,0 +1,312 @@
+# Story 10.8: 编写订单详情查看测试
+
+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** 包含以下测试场景：
+
+1. **查看基本订单详情**
+   - 打开订单详情
+   - 验证订单名称、平台、公司、渠道显示正确
+   - 验证订单状态、工作状态显示正确
+   - 验证预计开始日期显示正确
+
+2. **查看订单人员列表**
+   - 在详情中查看关联人员
+   - 验证人员列表显示正确
+   - 验证人员工作状态显示正确
+
+3. **查看订单附件**
+   - 在详情中查看附件列表
+   - 验证附件显示正确
+
+**测试文件:** `web/tests/e2e/specs/admin/order-detail.spec.ts`
+
+## Tasks / Subtasks
+
+- [ ] 补充 Page Object 订单详情方法 (AC: When)
+  - [ ] 在 `OrderManagementPage` 中添加 `getPersonListFromDetail()` 方法
+  - [ ] 在 `OrderManagementPage` 中添加 `getAttachmentListFromDetail()` 方法
+  - [ ] 在 `OrderManagementPage` 中添加 `closeDetailDialog()` 方法
+- [ ] 创建订单详情测试文件 (AC: When)
+  - [ ] 创建 `web/tests/e2e/specs/admin/order-detail.spec.ts`
+  - [ ] 导入必要的测试依赖和 Page Object
+- [ ] 编写基本订单详情测试 (AC: Then #1)
+  - [ ] 测试打开订单详情对话框
+  - [ ] 测试验证订单名称显示正确
+  - [ ] 测试验证平台、公司、渠道显示正确
+  - [ ] 测试验证订单状态和工作状态显示正确
+  - [ ] 测试验证预计开始日期显示正确
+- [ ] 编写订单人员列表测试 (AC: Then #2)
+  - [ ] 测试在详情中查看关联人员列表
+  - [ ] 测试验证人员姓名显示正确
+  - [ ] 测试验证人员工作状态显示正确
+  - [ ] 测试验证入职日期显示正确（如有）
+- [ ] 编写订单附件测试 (AC: Then #3)
+  - [ ] 测试在详情中查看附件列表
+  - [ ] 测试验证附件名称显示正确
+  - [ ] 测试验证附件上传日期显示（如有）
+- [ ] 确保所有测试通过 (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）
+- Story 10.2: ✅ 已完成（订单列表查看测试）
+- Story 10.3: ✅ 已完成（订单搜索和筛选测试）
+- Story 10.4: ✅ 已完成（创建订单测试）
+- Story 10.5: ✅ 已完成（编辑订单测试）
+- Story 10.6: ✅ 已完成（删除订单测试）
+- Story 10.7: ✅ 已完成（订单状态流转测试）
+
+### 前序 Story 情报 (Story 10.7)
+
+**从 Story 10.7 学到的经验:**
+
+1. **状态流转操作模式**：
+   - 激活/关闭订单操作都通过"打开菜单"按钮进入
+   - 确认对话框使用 `role="alertdialog"` 定位
+   - 按钮名称使用正则表达式匹配多种可能性
+
+2. **状态常量使用**：
+   - 使用 `ORDER_STATUS` 和 `ORDER_STATUS_LABELS` 常量
+   - 使用 `WORK_STATUS` 和 `WORK_STATUS_LABELS` 常量
+   - 状态类型使用 `OrderStatus` 和 `WorkStatus` 类型别名
+
+3. **Toast 消息验证**：
+   - 使用 `data-sonner-toast` 选择器
+   - 区分 `data-type="error"` 和 `data-type="success"`
+   - 使用正则表达式匹配关键词而非精确匹配
+
+### Page Object 已有功能
+
+**订单详情相关方法** (`web/tests/e2e/pages/admin/order-management.page.ts`):
+
+| 方法 | 说明 | 详情测试用途 |
+|------|------|-------------|
+| `openDetailDialog(orderName)` | 打开订单详情对话框 | 打开详情进行查看 |
+| `getOrderDetailInfo()` | 获取订单详情中的基本信息 | 验证订单基本信息显示 |
+| `openPersonManagementDialog(orderName?)` | 打开人员管理对话框 | 可从详情页打开 |
+| `openAddAttachmentDialog()` | 打开添加附件对话框 | 可从详情页打开 |
+
+**已有的订单数据接口:**
+```typescript
+export interface OrderData {
+  name: string;
+  expectedStartDate?: string;
+  platformId?: number;
+  platformName?: string;
+  companyId?: number;
+  companyName?: string;
+  channelId?: number;
+  channelName?: string;
+  status?: OrderStatus;
+  workStatus?: WorkStatus;
+}
+```
+
+**已有的订单人员数据接口:**
+```typescript
+export interface OrderPersonData {
+  disabledPersonId: number;
+  disabledPersonName?: string;
+  hireDate?: string;
+  salary?: number;
+  workStatus?: WorkStatus;
+  actualHireDate?: string;
+  resignDate?: string;
+}
+```
+
+### 需要补充的 Page Object 方法
+
+**订单详情查看方法（需要添加）:**
+
+1. **获取人员列表方法:**
+   ```typescript
+   /**
+    * 从订单详情对话框中获取关联人员列表
+    * @returns 人员信息列表
+    */
+   async getPersonListFromDetail(): Promise<Array<{
+     name?: string;
+     workStatus?: string;
+     hireDate?: string;
+     salary?: string;
+   }>>
+   ```
+
+2. **获取附件列表方法:**
+   ```typescript
+   /**
+    * 从订单详情对话框中获取附件列表
+    * @returns 附件信息列表
+    */
+   async getAttachmentListFromDetail(): Promise<Array<{
+     fileName?: string;
+     uploadDate?: string;
+     uploader?: string;
+   }>>
+   ```
+
+3. **关闭详情对话框方法:**
+   ```typescript
+   /**
+    * 关闭订单详情对话框
+    */
+   async closeDetailDialog(): Promise<void>
+   ```
+
+### 测试覆盖场景清单
+
+**基本订单详情查看:**
+- [ ] 打开订单详情对话框
+- [ ] 验证订单名称显示正确
+- [ ] 验证平台名称显示正确
+- [ ] 验证公司名称显示正确
+- [ ] 验证渠道名称显示正确
+- [ ] 验证订单状态徽章显示正确
+- [ ] 验证工作状态徽章显示正确
+- [ ] 验证预计开始日期显示正确
+
+**订单人员列表查看:**
+- [ ] 在详情中定位人员列表区域
+- [ ] 验证人员姓名显示正确
+- [ ] 验证人员工作状态显示正确
+- [ ] 验证入职日期显示（如有该字段）
+- [ ] 验证薪资信息显示（如有该字段）
+- [ ] 验证无人员时显示占位文本
+
+**订单附件查看:**
+- [ ] 在详情中定位附件列表区域
+- [ ] 验证附件文件名显示正确
+- [ ] 验证附件上传日期显示（如有该字段）
+- [ ] 验证上传者信息显示（如有该字段）
+- [ ] 验证无附件时显示占位文本
+
+### UI 结构探索要点
+
+**订单详情对话框结构假设（需要验证）:**
+
+1. **基本信息区域**:
+   - 使用标签-值对布局（如: `text-muted-foreground` 标签 + 值）
+   - 订单名称、状态、日期等字段
+   - 可能使用 Tabs 或分组布局
+
+2. **人员列表区域**:
+   - 可能使用表格展示
+   - 每行显示人员姓名、工作状态等
+   - 可能有"添加人员"按钮
+
+3. **附件列表区域**:
+   - 可能使用列表或卡片展示
+   - 每项显示文件名、上传信息
+   - 可能有"添加附件"按钮
+
+4. **关闭按钮**:
+   - 右上角 X 按钮
+   - 底部取消/关闭按钮
+
+**测试时优先探索的顺序:**
+1. 先使用已有方法 `openDetailDialog()` 打开详情
+2. 检查详情对话框的整体结构（Tabs、分组等）
+3. 定位基本信息区域的元素选择器
+4. 定位人员列表区域的元素选择器
+5. 定位附件列表区域的元素选择器
+6. 确定关闭详情对话框的方式
+
+### 项目结构对齐
+
+**遵循 Epic 9.6 并行执行决策:**
+- ✅ 不使用 `test.describe.serial`
+- ✅ 每个测试创建独立的测试数据
+- ✅ 使用时间戳确保订单名称唯一
+
+**遵循项目的类型规范:**
+- ✅ 使用 TypeScript 严格模式
+- ✅ 使用 `ORDER_STATUS` 和 `ORDER_STATUS_LABELS` 常量
+- ✅ 使用 `WORK_STATUS` 和 `WORK_STATUS_LABELS` 常量
+- ✅ 状态类型使用 `OrderStatus` 和 `WorkStatus` 类型别名
+
+**遵循项目的测试模式:**
+- ✅ 使用 Playwright fixtures
+- ✅ 使用 Page Object 模式
+- ✅ Toast 消息使用 `data-sonner-toast` 选择器
+- ✅ 对话框使用 `role="dialog"` 或 `role="alertdialog"`
+
+### Project Structure Notes
+
+**测试文件位置:**
+```
+web/tests/e2e/
+├── pages/admin/
+│   └── order-management.page.ts  (需要补充详情查看方法)
+└── specs/admin/
+    └── order-detail.spec.ts      (新建)
+```
+
+**与其他测试的关系:**
+- `order-list.spec.ts`: 验证列表中信息显示（详情是更完整的信息）
+- `order-create.spec.ts`: 创建测试订单作为详情查看的数据源
+- `order-edit.spec.ts`: 编辑后验证详情中的更新
+- `order-status.spec.ts`: 状态流转后验证详情中的状态变更
+- `order-person.spec.ts` (后续 Story): 人员管理功能
+- `order-attachment.spec.ts` (后续 Story): 附件管理功能
+
+**潜在冲突:**
+- 订单详情测试可能依赖先创建订单数据
+- 建议使用唯一的订单名称前缀：`详情查看测试_${timestamp}`
+
+### References
+
+**Epic 需求来源:**
+- [Source: _bmad-output/planning-artifacts/epics.md](epics.md) - Story 10.8 详细需求（行 2111-2138）
+
+**Page Object 现有实现:**
+- [Source: web/tests/e2e/pages/admin/order-management.page.ts](web/tests/e2e/pages/admin/order-management.page.ts) - 订单详情方法、订单数据接口
+
+**前序 Story 学习:**
+- [Source: _bmad-output/implementation-artifacts/10-7-order-status-tests.md](10-7-order-status-tests.md) - 状态流转操作模式、常量使用
+
+**项目上下文:**
+- [Source: _bmad-output/project-context.md](project-context.md) - 技术栈、测试规范、类型系统
+
+## Dev Agent Record
+
+### Agent Model Used
+
+claude-opus-4-5-20251101
+
+### Debug Log References
+
+无
+
+### Completion Notes List
+
+_（开发完成后填写）_
+
+### File List
+
+_（开发完成后填写）_

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

@@ -153,7 +153,7 @@ development_status:
   10-5-order-edit-tests: done         # 编写编辑订单测试（代码审查完成，所有HIGH和MEDIUM问题已修复）
   10-6-order-delete-tests: done         # 编写删除订单测试 - 代码审查完成，所有HIGH和MEDIUM问题已修复
   10-7-order-status-tests: done                # 编写订单状态流转测试 - 代码审查完成，所有HIGH和MEDIUM问题已修复
-  10-8-order-detail-tests: backlog         # 编写订单详情查看测试
+  10-8-order-detail-tests: ready-for-dev         # 编写订单详情查看测试
   10-9-order-person-tests: backlog         # 编写人员关联功能测试
   10-10-order-attachment-tests: backlog    # 编写附件管理测试
   10-11-order-complete-tests: backlog      # 编写订单完整流程测试