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

Status: backlog

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：

/**
 * 获取订单列表
 */
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> {
  // 实现获取订单卡片信息的逻辑
}

订单卡片字段定义

订单卡片数据结构：

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 |

测试数据准备策略

前置条件：

需要企业用户数据（使用 Story 12.2 创建的企业用户）
需要测试订单数据（使用 Story 13.1 创建的订单）

测试数据准备：

// 创建不同状态的订单用于筛选测试
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()}` }),
};

后台编辑同步验证策略

后台编辑后验证小程序同步：

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

13-8-order-list-validation.md 15 KB История Исходник