# Story 13.8: 订单列表页完整验证

Status: backlog

<!-- Note: Validation is optional. Run validate-create-story for quality check before dev-story. -->

## Story

作为测试开发者，
我想要验证企业小程序订单列表页的完整功能，
以便确保用户能够正确查看、筛选和搜索订单信息，并且后台编辑后能正确同步。

## Acceptance Criteria

### AC1: 订单列表基础功能验证
**Given** 企业用户已登录小程序
**When** 进入订单列表页
**Then** 测试应验证以下功能：
- 验证订单列表按预期加载
- 验证订单卡片显示正确的订单名称
- 验证订单状态徽章显示正确（草稿、已确认、进行中、已完成）
- 验证工作状态徽章显示正确（未就业、待就业、已就业、已离职）
- 验证订单人数显示正确
- 验证订单日期显示正确

### AC2: 订单状态筛选功能验证
**Given** 订单列表页已加载
**When** 使用订单状态筛选器
**Then** 测试应验证以下场景：
- 验证可以按订单状态筛选（草稿、已确认、进行中、已完成）
- 验证筛选后列表只显示符合状态的订单
- 验证筛选器状态切换正确
- 验证重置筛选后显示所有订单
- 验证后台编辑订单状态后，小程序筛选结果正确

### AC3: 订单卡片所有字段显示验证
**Given** 订单列表显示多个订单
**When** 查看订单卡片
**Then** 测试应验证以下字段：
- 订单名称（orderName）正确显示
- 订单编号（orderNumber）正确显示
- 订单状态（orderStatus）正确显示
- 工作状态（workStatus）正确显示
- 关联人数（personCount）正确显示
- 预计开始日期（expectedStartDate）正确显示
- 企业名称（companyName）正确显示（如适用）
- 验证所有字段在后台编辑后正确同步

### AC4: 订单搜索功能验证
**Given** 订单列表页已加载
**When** 使用订单搜索功能
**Then** 测试应验证以下场景：
- 验证可以按订单名称搜索
- 验证搜索结果正确显示匹配的订单
- 验证搜索不区分大小写（如适用）
- 验证搜索后可以清除搜索条件
- 验证搜索 + 筛选组合使用正确

### AC5: 后台编辑后订单列表同步验证
**Given** 后台已创建订单
**When** 在后台编辑订单信息
**Then** 测试应验证以下场景：
- 后台修改订单名称后，小程序列表显示更新后的名称
- 后台修改订单状态后，小程序列表显示更新后的状态
- 后台修改工作状态后，小程序列表显示更新后的工作状态
- 后台添加人员后，小程序列表显示更新后的人数
- 后台修改日期后，小程序列表显示更新后的日期
- 验证所有更新在合理时间内同步（≤ 10 秒）

### AC6: 分页功能验证（如适用）
**Given** 订单列表包含多个订单
**When** 订单数量超过单页显示数量
**Then** 测试应验证以下功能：
- 验证分页控件显示正确
- 验证可以切换到下一页
- 验证可以切换到上一页
- 验证可以跳转到指定页
- 验证分页后订单列表正确更新

### AC7: 订单列表交互功能验证
**Given** 订单列表已加载
**When** 用户与订单列表交互
**Then** 测试应验证以下功能：
- 验证点击订单卡片跳转到订单详情页
- 验证详情页显示正确的订单信息
- 验证可以从详情页返回列表页
- 验证列表页保持原有筛选和搜索状态

### AC8: 代码质量标准
**Given** 遵循项目测试规范
**When** 编写测试代码
**Then** 代码应符合以下标准：
- 使用 TIMEOUTS 常量定义超时
- 使用 data-testid 选择器（优先级高于文本选择器）
- 测试文件命名：`order-list-validation.spec.ts`
- 完整的测试描述和注释
- TypeScript 类型安全
- 通过 `pnpm typecheck` 类型检查

## Tasks / Subtasks

### 阶段 1: EXPLORE - Playwright MCP 探索（RED 之前）

- [ ] **任务 0: Playwright MCP 探索验证**
  - [ ] 0.1 启动子代理使用 Playwright MCP 手动验证订单列表页功能
  - [ ] 0.2 记录验证的选择器（优先 data-testid，避免文本选择器）
  - [ ] 0.3 记录订单卡片的所有字段（订单名、状态、人数、日期等）
  - [ ] 0.4 验证筛选和搜索功能的交互模式
  - [ ] 0.5 记录数据同步时间（后台编辑后小程序更新时间）
  - [ ] 0.6 生成测试代码骨架
  - [ ] 0.7 将探索结果更新到本文档 Dev Notes

### 阶段 2: RED - 编写测试（基于任务 0 的探索结果）

- [ ] 任务 1: 创建订单列表验证测试文件 (AC: #8)
  - [ ] 1.1 基于任务 0 的探索结果创建 `web/tests/e2e/specs/cross-platform/order-list-validation.spec.ts`
  - [ ] 1.2 配置测试 fixtures（enterpriseMiniPage）
  - [ ] 1.3 添加测试前置条件（企业用户登录、测试订单数据）

- [ ] 任务 2: 实现订单列表基础功能测试 (AC: #1, #7)
  - [ ] 2.1 编写"订单列表加载并显示订单卡片"测试
  - [ ] 2.2 编写"订单卡片显示所有字段"测试
  - [ ] 2.3 编写"点击订单卡片跳转到详情页"测试
  - [ ] 2.4 编写"从详情页返回列表页"测试

- [ ] 任务 3: 实现订单状态筛选测试 (AC: #2)
  - [ ] 3.1 编写"按订单状态筛选 - 草稿"测试
  - [ ] 3.2 编写"按订单状态筛选 - 已确认"测试
  - [ ] 3.3 编写"按订单状态筛选 - 进行中"测试
  - [ ] 3.4 编写"按订单状态筛选 - 已完成"测试
  - [ ] 3.5 编写"重置筛选显示所有订单"测试

- [ ] 任务 4: 实现订单搜索测试 (AC: #4)
  - [ ] 4.1 编写"按订单名称搜索"测试
  - [ ] 4.2 编写"搜索结果正确显示"测试
  - [ ] 4.3 编写"清除搜索条件"测试
  - [ ] 4.4 编写"搜索 + 筛选组合使用"测试

### 阶段 3: GREEN - 实现代码（让测试通过）

- [ ] 任务 5: 实现后台编辑后订单列表同步测试 (AC: #3, #5)
  - [ ] 5.1 编写"后台修改订单名称后小程序同步"测试
  - [ ] 5.2 编写"后台修改订单状态后小程序同步"测试
  - [ ] 5.3 编写"后台修改工作状态后小程序同步"测试
  - [ ] 5.4 编写"后台添加人员后小程序人数同步"测试
  - [ ] 5.5 编写"后台修改日期后小程序同步"测试
  - [ ] 5.6 验证数据同步时间（≤ 10 秒）

- [ ] 任务 6: 实现分页功能测试 (AC: #6)（如适用）
  - [ ] 6.1 编写"分页控件显示正确"测试
  - [ ] 6.2 编写"切换到下一页"测试
  - [ ] 6.3 编写"切换到上一页"测试
  - [ ] 6.4 编写"跳转到指定页"测试

### 阶段 4: REFACTOR - 优化代码质量

- [ ] 任务 7: 验证代码质量 (AC: #8)
  - [ ] 7.1 运行 `pnpm typecheck` 验证类型检查
  - [ ] 7.2 运行测试确保所有测试通过
  - [ ] 7.3 验证选择器使用 data-testid
  - [ ] 7.4 优化测试执行时间

## Dev Notes

### Epic 13 背景和依赖

**Epic 13: 跨端数据同步测试 (Epic E)**

- **目标**: 验证后台操作后小程序端的数据同步，覆盖完整的业务流程
- **业务分组**: Epic E（跨端数据同步测试）
- **背景**: 真实用户旅程跨越管理后台和小程序，需要验证数据同步的正确性和时效性
- **依赖**:
  - Epic 10: ✅ 已完成（订单管理 E2E 测试）
  - Epic 12: ✅ 已完成（小程序登录测试）
  - Story 13.1: ✅ 已完成（后台创建订单 → 企业小程序验证）

**Epic 13 Story 依赖关系：**
```
Story 13.1: 后台创建订单 → 企业小程序**订单列表**验证 ✅
Story 13.2: 后台编辑订单 → 企业小程序验证
Story 13.3: 后台添加人员 → 人才小程序验证
Story 13.4: 后台更新状态 → 双小程序验证
Story 13.5: 跨端测试稳定性验证
Story 13.6: 后台添加人员 → 企业小程序**首页 dashboard** 人才数据验证 ✅
Story 13.7: 企业小程序首页 **导航和交互**测试
Story 13.8: 企业小程序**订单列表页**完整验证 ← 当前 Story
Story 13.9: 人才小程序**人才列表页**完整验证
```

### 与 Story 13.1 和 13.2 的关系

| Story | 验证目标 | 测试场景 |
|-------|---------|---------|
| Story 13.1 | 后台创建订单 → 企业小程序订单列表验证 | 验证新订单出现在列表中 |
| Story 13.2 | 后台编辑订单 → 企业小程序订单列表验证 | 验证编辑后订单信息更新 |
| Story 13.8 | 订单列表页完整功能验证 | 验证列表页所有功能：筛选、搜索、分页、字段显示、交互 |

**Story 13.8 是 Story 13.1 和 13.2 的扩展和深化**：
- 13.1 和 13.2 只验证了基本的数据同步
- 13.8 验证订单列表页的所有功能点

### 企业小程序订单列表页结构

**订单列表页结构（待验证）：**
```
┌─────────────────────────────────┐
│  订单列表 (mini-order-list)      │
├─────────────────────────────────┤
│  筛选区域:                       │
│  ┌─────────┬─────────┬─────────┐│
│  │状态筛选 │搜索框   │重置按钮 ││
│  └─────────┴─────────┴─────────┘│
├─────────────────────────────────┤
│  订单列表:                       │
│  ┌─────────────────────────────┐│
│  │ 订单卡片 1                  ││
│  │ - 订单名称                  ││
│  │ - 订单状态徽章              ││
│  │ - 工作状态徽章              ││
│  │ - 人数 / 日期               ││
│  └─────────────────────────────┘│
│  ┌─────────────────────────────┐│
│  │ 订单卡片 2                  ││
│  │ - ...                       ││
│  └─────────────────────────────┘│
├─────────────────────────────────┤
│  分页控件（如适用）             │
│  ┌────┬────┬────┬────┬────┐    │
│  │< 1 │ 2 │ 3 │... │ > │    │
│  └────┴────┴────┴────┴────┘    │
└─────────────────────────────────┘
```

### EnterpriseMiniPage 扩展方法

需要添加以下方法到 `enterprise-mini.page.ts`：

```typescript
/**
 * 获取订单列表
 */
async getOrderList(): Promise<OrderListItem[]> {
  // 实现获取订单列表的逻辑
}

/**
 * 按状态筛选订单
 * @param status 订单状态
 */
async filterByOrderStatus(status: string): Promise<void> {
  // 实现状态筛选逻辑
}

/**
 * 搜索订单
 * @param keyword 搜索关键词
 */
async searchOrders(keyword: string): Promise<void> {
  // 实现搜索逻辑
}

/**
 * 重置筛选和搜索
 */
async resetFilters(): Promise<void> {
  // 实现重置逻辑
}

/**
 * 获取订单卡片详细信息
 * @param orderName 订单名称
 */
async getOrderCardInfo(orderName: string): Promise<OrderCardInfo> {
  // 实现获取订单卡片信息的逻辑
}
```

### 订单卡片字段定义

**订单卡片数据结构：**
```typescript
interface OrderCardInfo {
  /** 订单 ID */
  orderId: string;
  /** 订单名称 */
  orderName: string;
  /** 订单编号 */
  orderNumber: string;
  /** 订单状态 */
  orderStatus: '草稿' | '已确认' | '进行中' | '已完成';
  /** 工作状态 */
  workStatus: '未就业' | '待就业' | '已就业' | '已离职';
  /** 关联人数 */
  personCount: number;
  /** 预计开始日期 */
  expectedStartDate: string;
  /** 企业名称 */
  companyName?: string;
}
```

### 选择器策略（待验证）

**订单列表页选择器（待 Playwright MCP 验证）：**
| 功能 | data-testid |
|------|-------------|
| 订单列表容器 | `mini-order-list` |
| 订单卡片 | `mini-order-card` |
| 订单名称 | `mini-order-name` |
| 订单编号 | `mini-order-number` |
| 订单状态 | `mini-order-status` |
| 工作状态 | `mini-work-status` |
| 人数 | `mini-person-count` |
| 日期 | `mini-order-date` |
| 状态筛选器 | `mini-order-status-filter` |
| 搜索框 | `mini-order-search` |
| 重置按钮 | `mini-filter-reset` |

### 测试数据准备策略

**前置条件：**
1. 需要企业用户数据（使用 Story 12.2 创建的企业用户）
2. 需要测试订单数据（使用 Story 13.1 创建的订单）

**测试数据准备：**
```typescript
// 创建不同状态的订单用于筛选测试
const orders = {
  draft: await createOrder({ status: '草稿', name: `草稿订单_${Date.now()}` }),
  confirmed: await createOrder({ status: '已确认', name: `已确认订单_${Date.now()}` }),
  inProgress: await createOrder({ status: '进行中', name: `进行中订单_${Date.now()}` }),
  completed: await createOrder({ status: '已完成', name: `已完成订单_${Date.now()}` }),
};
```

### 后台编辑同步验证策略

**后台编辑后验证小程序同步：**
```typescript
test('后台修改订单名称后小程序同步', async ({ orderManagementPage, enterpriseMiniPage }) => {
  // 1. 后台创建订单
  const originalName = `测试订单_${Date.now()}`;
  await orderManagementPage.createOrder({ name: originalName });

  // 2. 小程序验证订单显示
  await enterpriseMiniPage.goto();
  await enterpriseMiniPage.login(TEST_USER.phone, TEST_USER.password);
  await enterpriseMiniPage.gotoOrderList();
  let orderInfo = await enterpriseMiniPage.getOrderCardInfo(originalName);
  expect(orderInfo.orderName).toBe(originalName);

  // 3. 后台修改订单名称
  const updatedName = `${originalName}_更新`;
  await orderManagementPage.editOrder(originalName, { name: updatedName });

  // 4. 小程序验证订单名称更新
  await enterpriseMiniPage.waitForOrderUpdate(originalName, TIMEOUTS.SYNC);
  orderInfo = await enterpriseMiniPage.getOrderCardInfo(updatedName);
  expect(orderInfo.orderName).toBe(updatedName);
});
```

### 参考文档

**架构文档：**
- `_bmad-output/planning-artifacts/epics.md#Epic 13`
- `_bmad-output/project-context.md`
- `docs/standards/e2e-radix-testing.md`

**相关 Story 文档：**
- `10-2-order-list-tests.md` (后台订单列表测试)
- `12-4-enterprise-mini-page-object.md` (企业小程序 Page Object)
- `12-5-enterprise-mini-login.md` (企业小程序登录测试)
- `13-1-order-create-sync.md` (订单创建同步测试)
- `13-2-order-edit-sync.md` (订单编辑同步测试)

## Dev Agent Record

### Agent Model Used

_Created by create-story workflow_

### Debug Log References

_Story 13.8 created - not yet started_

### Completion Notes List

_Story 13.8 创建完成，状态：backlog_

### File List

_Created files:_
- `/mnt/code/188-179-template-6/_bmad-output/implementation-artifacts/13-8-order-list-validation.md`

## Change Log

- 2026-01-14: Story 13.8 创建完成
  - 订单列表页完整验证需求
  - 订单列表基础功能验证
  - 订单状态筛选功能验证
  - 订单卡片所有字段显示验证
  - 订单搜索功能验证
  - 后台编辑后订单列表同步验证
  - 分页功能验证（如适用）
  - 订单列表交互功能验证
  - 状态：backlog