13-6-dashboard-sync.md 36 KB

Story 13.6: 首页看板人才数据同步测试

Status: ready-for-dev

Story

作为测试开发者, 我想要验证后台添加人员到订单后企业小程序首页看板的人才数据同步, 以便确保用户在小程序首页能看到最新的分配人才数据和核心统计数字。

Acceptance Criteria

AC1: 后台添加人员 → 首页分配人才列表显示

Given 后台已创建订单并添加残疾人 When 测试者在管理后台将残疾人分配到订单 Then 测试应验证以下功能:

  • 使用 OrderManagementPage 添加残疾人到订单
  • 刷新企业小程序首页看板
  • 验证新分配的人才卡片显示在首页
  • 验证人才信息完整(姓名、残疾类型、等级)

AC2: 核心统计数字同步

Given 后台添加人员到订单 When 刷新企业小程序首页看板 Then 测试应验证以下功能:

  • 验证"在职人员"统计数字增加
  • 或验证"待入职"统计数字增加(根据订单状态)
  • 验证统计数字与后台实际分配人数一致

AC3: 分配人才列表数据完整性

Given 首页显示分配人才列表 When 查看人才卡片信息 Then 测试应验证以下功能:

  • 卡片显示人才姓名
  • 卡片显示残疾类型
  • 卡片显示残疾等级
  • 卡片数据与后台人员详情一致

AC4: 数据刷新时效性

Given 后台操作已完成 When 刷新小程序首页看板 Then 测试应验证以下场景:

  • 在正常情况下,数据应在 3 秒内同步
  • 支持轮询等待机制(最多等待 10 秒)
  • 验证下拉刷新功能触发数据更新

AC5: 与 Story 13.3 的区别

Given 本 Story 与 Story 13.3 测试范围不同 When 执行本 Story 测试 Then 测试范围应明确区分:

  • Story 13.3: 验证后台添加人员 → 人才小程序端的数据同步
  • Story 13.6: 验证后台添加人员 → 企业小程序首页的人才数据
  • 两个 Story 测试不同的端和页面

AC6: 代码质量标准

Given 遵循项目测试规范 When 编写测试代码 Then 代码应符合以下标准:

  • 使用 TIMEOUTS 常量定义超时
  • 使用 data-testid 选择器(优先级高于文本选择器)
  • 测试文件命名:dashboard-sync.spec.ts
  • 完整的测试描述和注释
  • TypeScript 类型安全
  • 通过 pnpm typecheck 类型检查

Tasks / Subtasks

  • [ ] 任务 1: 扩展 EnterpriseMiniPage 支持首页看板人才数据 (AC: #1, #2, #3, #4)

    • 1.1 添加首页看板选择器(分配人才列表、核心统计卡片等)
    • 1.2 实现 getAssignedTalentCards() 方法
    • 1.3 实现 getCoreStatistics() 方法
    • 1.4 实现下拉刷新方法 refreshDashboard()
    • 1.5 实现 waitForTalentCard() 方法
  • [ ] 任务 2: 创建跨端首页看板人才同步测试文件 (AC: #1, #5, #6)

    • 2.1 创建 web/tests/e2e/specs/cross-platform/dashboard-sync.spec.ts
    • 2.2 配置测试 fixtures(adminLoginPage, orderManagementPage, enterpriseMiniPage)
    • 2.3 添加测试前置条件(需要测试平台、公司、企业用户、残疾人数据)
  • [ ] 任务 3: 实现分配人才列表同步验证测试 (AC: #1, #3)

    • 3.1 编写"后台添加人员 → 首页显示人才卡片"测试
    • 3.2 验证人才卡片信息完整性(姓名、残疾类型、等级)
    • 3.3 验证人才数据与后台人员详情一致
  • [ ] 任务 4: 实现核心统计数字同步测试 (AC: #2)

    • 4.1 编写"在职人员统计数字增加"测试
    • 4.2 编写"待入职统计数字增加"测试
    • 4.3 验证统计数字与后台实际分配人数一致
  • [ ] 任务 5: 实现数据刷新时效性测试 (AC: #4)

    • 5.1 实现轮询等待机制
    • 5.2 验证正常同步时间(≤ 3 秒)
    • 5.3 验证下拉刷新功能
  • [ ] 任务 6: 实现测试数据清理策略 (AC: #1)

    • 6.1 添加 afterEach 钩子清理分配关系数据
    • 6.2 验证清理后首页看板不再显示该人才
  • [ ] 任务 7: 后端实现 - 获取分配人才列表 API (AC: #1, #3)

    • 7.1 创建获取企业分配人才列表的 API 端点
    • 7.2 实现查询逻辑:根据企业 ID 查询所有分配到该企业订单的人员
    • 7.3 返回人才信息:姓名、残疾类型、残疾等级
    • 7.4 添加企业用户认证和权限验证
    • 7.5 编写 API 单元测试
  • [ ] 任务 8: 后端实现 - 核心统计 API (AC: #2)

    • 8.1 创建获取企业核心统计数据的 API 端点
    • 8.2 实现统计逻辑:
    • 在职人员:已入职状态的人员数量
    • 待入职:已分配但未入职状态的人员数量
    • 本月新增:当前月份新分配的人员数量
    • 8.3 添加企业用户认证和权限验证
    • 8.4 编写 API 单元测试
  • [ ] 任务 9: 前端实现 - dashboard 数据获取和渲染 (AC: #1, #2, #3, #4)

    • 9.1 企业小程序首页调用分配人才列表 API
    • 9.2 企业小程序首页调用核心统计 API
    • 9.3 渲染分配人才卡片列表
    • 9.4 更新核心统计数字显示
    • 9.5 实现下拉刷新功能触发数据重新获取
    • 9.6 添加加载状态和错误处理
  • [ ] 任务 10: 验证代码质量 (AC: #6)

    • 10.1 运行 pnpm typecheck 验证类型检查
    • 10.2 运行测试确保所有测试通过
    • 10.3 验证选择器使用 data-testid

Dev Notes

实现阻塞说明

重要发现(基于 Playwright MCP 探索):

根据 2026-01-14 的 Playwright MCP 探索结果,发现以下实现阻塞

  1. 后端功能正常

    • 后台成功添加人员到订单
    • 订单 ID: 1230, 姓名: 测试残疾人_1768345943264_1_810
    • 人员分配关系已正确存储到数据库
  2. 企业小程序首页 dashboard 未实现

    • 首页显示"暂无分配人才"
    • 核心统计数字都是 0(在职人员、待入职、本月新增)
    • 根本原因:小程序首页没有调用后端 API 获取分配人才数据
  3. 需要先实现的功能(在执行测试任务之前):

    • 任务 7:后端实现 - 获取分配人才列表 API
    • 任务 8:后端实现 - 核心统计 API
    • 任务 9:前端实现 - dashboard 数据获取和渲染
  4. 实现顺序建议

    任务 7 (后端 API) → 任务 8 (后端 API) → 任务 9 (前端实现) → 任务 1-6 (测试开发)
    
  5. 当前状态

    • 任务 1-6 测试相关任务被阻塞
    • 必须先完成后端 API 和前端实现,测试才能验证功能

Epic 13 背景和依赖

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

  • 目标: 验证后台操作后小程序端的数据同步,覆盖完整的业务流程
  • 业务分组: Epic E(跨端数据同步测试)
  • 背景: 真实用户旅程跨越管理后台和小程序,需要验证数据同步的正确性和时效性
  • 依赖:
    • Epic 10: ✅ 已完成(订单管理 E2E 测试)
    • Epic 12: 🔄 进行中(小程序登录测试)

Epic 13 Story 依赖关系:

Story 13.1: 后台创建订单 → 企业小程序**订单列表**验证 ✅
Story 13.2: 后台编辑订单 → 企业小程序验证
Story 13.3: 后台添加人员 → 人才小程序验证
Story 13.4: 后台更新状态 → 双小程序验证
Story 13.5: 跨端测试稳定性验证
Story 13.6: 后台添加人员 → 企业小程序**首页 dashboard** 人才数据验证 ← 当前 Story

与 Story 13.3 的区别

维度 Story 13.3 Story 13.6
验证目标 人才小程序 企业小程序首页
验证内容 人才个人信息、订单列表、待入职状态 分配人才列表、核心统计数字
测试场景 后台添加人员 → 人才小程序登录 → 验证数据 后台添加人员 → 企业小程序首页 → 验证人才卡片
测试方法 TalentMiniPage.getOrders(), getPersonInfo() EnterpriseMiniPage.getAssignedTalentCards(), getCoreStatistics()
测试端 人才小程序(残疾人端) 企业小程序(企业端)

企业小程序首页看板结构(基于 Playwright MCP 探索)

实际首页看板结构:

┌─────────────────────────────────┐
│  企业仪表板 (mini-dashboard)     │
├─────────────────────────────────┤
│  欢迎区域:                       │
│  - 欢迎回来                      │
│  - 企业名称                      │
├─────────────────────────────────┤
│  统计卡片:                       │
│  ┌─────────┬─────────┬─────────┐│
│  │ X       │ Y       │ Z       ││
│  │ 在职人员 │ 待入职  │ 本月新增 ││
│  └─────────┴─────────┴─────────┘│
├─────────────────────────────────┤
│  快捷操作:                       │
│  - 人才库                       │
│  - 数据统计                     │
│  - 订单管理                     │
│  - 设置                         │
├─────────────────────────────────┤
│  分配人才区域:                   │
│  - 暂无分配人才 / 人才卡片列表   │
├─────────────────────────────────┤
│  数据统计区域:                   │
│  - 在职率: --                   │
│  - 平均薪资: ¥0                 │
├─────────────────────────────────┤
│  底部导航:                       │
│  - 首页 (当前)                   │
│  - 人才                         │
│  - 订单                         │
│  - 数据                         │
│  - 设置                         │
└─────────────────────────────────┘

实际 data-testid(基于探索结果):

const DASHBOARD_SELECTORS = {
  dashboard: 'mini-dashboard',
  welcomeSection: 'mini-welcome',
  statsCards: 'mini-stats-cards',
  employedCount: 'mini-employed-count',
  pendingCount: 'mini-pending-count',
  newHiresCount: 'mini-new-hires-count',
  quickActions: 'mini-quick-actions',
  assignedTalentSection: 'mini-assigned-talent-section',
  assignedTalentCard: 'mini-assigned-talent-card',
  talentName: 'mini-talent-name',
  talentDisabilityType: 'mini-talent-disability-type',
  talentDisabilityLevel: 'mini-talent-disability-level',
  noTalentMessage: 'mini-no-talent-message',
  dataStatsSection: 'mini-data-stats-section',
  employmentRate: 'mini-employment-rate',
  averageSalary: 'mini-average-salary',
};

Epic 10 关键经验(订单管理)

从已完成的 Epic 10 中学习到的订单管理模式:

OrderManagementPage 可用方法:

// 页面导航
async goto(): Promise<void>
async expectToBeVisible(): Promise<void>

// 订单 CRUD
async createOrder(data: OrderData): Promise<FormSubmitResult>
async editOrder(orderId: string, data: OrderData): Promise<FormSubmitResult>
async deleteOrder(orderId: string): Promise<FormSubmitResult>
async activateOrder(orderName: string): Promise<FormSubmitResult>
async closeOrder(orderName: string): Promise<FormSubmitResult>

// 订单状态
async getOrderStatus(orderName: string): Promise<string>

订单状态流转:

// 订单状态
enum OrderStatus {
  DRAFT = '草稿',
  CONFIRMED = '已确认',
  IN_PROGRESS = '进行中',
  COMPLETED = '已完成',
  CANCELLED = '已取消',
}

// 激活订单(草稿 → 进行中)
await orderManagementPage.activateOrder(orderName);

// 关闭订单(进行中 → 已完成)
await orderManagementPage.closeOrder(orderName);

Epic 12 关键经验(小程序登录)

从已完成的 Epic 12 中学习到的小程序模式:

EnterpriseMiniPage 已有方法:

// 页面导航
async goto(): Promise<void>
async expectToBeVisible(): Promise<void>

// 登录方法
async login(phone: string, password: string): Promise<void>
async expectLoginSuccess(): Promise<void>

// Token 管理
async getToken(): Promise<string | null>
async clearAuth(): Promise<void>

企业小程序登录流程:

await enterpriseMiniPage.goto();
await enterpriseMiniPage.login(
  '13800138000',  // 企业用户手机号
  'password123'
);
await enterpriseMiniPage.expectLoginSuccess();

多 Page 对象管理策略

使用与 Story 13.1 相同的多 Context 策略:

type CrossPlatformFixtures = {
  adminPage: Page;
  miniPage: Page;
  orderManagementPage: OrderManagementPage;
  enterpriseMiniPage: EnterpriseMiniPage;
};

export const test = base.extend<CrossPlatformFixtures>({
  adminPage: async ({ browser }, use) => {
    const context = await browser.newContext();
    const page = await context.newPage();
    await use(page);
    await context.close();
  },
  miniPage: async ({ browser }, use) => {
    const context = await browser.newContext();
    const page = await context.newPage();
    await use(page);
    await context.close();
  },
  // ...
});

EnterpriseMiniPage 扩展方法

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

/**
 * 获取首页看板的分配人才列表
 */
async getAssignedTalentCards(): Promise<AssignedTalentCard[]> {
  const cards: AssignedTalentCard[] = [];
  const cardElements = this.page.getByTestId('mini-assigned-talent-card');
  const count = await cardElements.count();

  for (let i = 0; i < count; i++) {
    const card = cardElements.nth(i);
    const name = await card.getByTestId('mini-talent-name').textContent();
    const disabilityType = await card.getByTestId('mini-talent-disability-type').textContent();
    const disabilityLevel = await card.getByTestId('mini-talent-disability-level').textContent();

    cards.push({
      name: name || '',
      disabilityType: disabilityType || '',
      disabilityLevel: disabilityLevel || '',
    });
  }

  return cards;
}

/**
 * 获取首页核心统计数据
 */
async getCoreStatistics(): Promise<CoreStatistics> {
  const employedCountText = await this.page.getByTestId('mini-employed-count').textContent();
  const pendingCountText = await this.page.getByTestId('mini-pending-count').textContent();
  const newHiresCountText = await this.page.getByTestId('mini-new-hires-count').textContent();

  return {
    employedCount: employedCountText ? parseInt(employedCountText) : 0,
    pendingCount: pendingCountText ? parseInt(pendingCountText) : 0,
    newHiresCount: newHiresCountText ? parseInt(newHiresCountText) : 0,
  };
}

/**
 * 刷新首页看板数据
 */
async refreshDashboard(): Promise<void> {
  // 下拉刷新或点击刷新按钮
  await this.page.reload();
  await this.page.waitForTimeout(2000);
}

/**
 * 等待人才卡片出现在首页看板
 */
async waitForTalentCard(talentName: string, timeout: number = 10000): Promise<boolean> {
  const startTime = Date.now();
  while (Date.now() - startTime < timeout) {
    const cards = await this.getAssignedTalentCards();
    if (cards.some(c => c.name === talentName)) {
      return true;
    }
    await this.page.waitForTimeout(500);
  }
  return false;
}

类型定义:

interface AssignedTalentCard {
  name: string;
  disabilityType: string;
  disabilityLevel: string;
}

interface CoreStatistics {
  employedCount: number;
  pendingCount: number;
  newHiresCount: number;
}

数据同步等待策略

与 Story 13.1 和 13.3 类似的轮询等待模式:

async waitForTalentCard(
  talentName: string,
  timeout: number = 10000
): Promise<boolean> {
  const startTime = Date.now();
  while (Date.now() - startTime < timeout) {
    const cards = await this.getAssignedTalentCards();
    if (cards.some(c => c.name === talentName)) {
      return true;
    }
    await this.page.waitForTimeout(500);
  }
  return false;
}

async waitForStatisticsChange(
  initialStats: CoreStatistics,
  timeout: number = 10000
): Promise<boolean> {
  const startTime = Date.now();
  while (Date.now() - startTime < timeout) {
    const currentStats = await this.getCoreStatistics();
    if (currentStats.employedCount !== initialStats.employedCount ||
        currentStats.pendingCount !== initialStats.pendingCount) {
      return true;
    }
    await this.page.waitForTimeout(500);
  }
  return false;
}

测试数据准备策略

前置条件:

  1. 需要测试平台数据(使用 Story 11.2 创建的平台)
  2. 需要测试公司数据(使用 Story 11.5 创建的公司)
  3. 需要企业用户数据(使用 Story 12.2 创建的企业用户)
  4. 需要残疾人数据(使用 Story 11.4 创建的残疾人)

测试数据唯一性:

const timestamp = Date.now();
// 1. 创建订单(如果需要)
const orderData = {
  name: `人才同步测试订单_${timestamp}`,
  expectedStartDate: '2026-01-15',
  platformId: 1,
  companyId: 1,
};

// 2. 使用现有残疾人或创建新的残疾人
// 使用已存在的残疾人数据,如:测试残疾人_1768346782426_12_8219

测试数据清理策略

test.afterEach(async ({ orderManagementPage, orderName }) => {
  // 在后台删除测试订单
  await orderManagementPage.goto();
  await orderManagementPage.deleteOrder(orderName);
});

项目结构

新建文件:

  • web/tests/e2e/specs/cross-platform/dashboard-sync.spec.ts
  • 扩展 web/tests/e2e/pages/mini/enterprise-mini.page.ts(添加首页看板方法)

相关参考文件:

  • web/tests/e2e/pages/admin/order-management.page.ts (Epic 10)
  • web/tests/e2e/pages/mini/enterprise-mini.page.ts (Epic 12)
  • web/tests/e2e/specs/cross-platform/order-create-sync.spec.ts (Story 13.1)
  • web/tests/e2e/specs/admin/dashboard.spec.ts (管理后台 dashboard 测试)

选择器策略

优先级(遵循项目标准):

  1. data-testid 属性(最高优先级)
  2. ARIA 属性 + role
  3. 文本内容(最低优先级,避免使用)

企业小程序首页看板需要验证的 data-testid:

  • mini-dashboard - 首页看板容器
  • mini-stats-cards - 统计卡片容器
  • mini-employed-count - 在职人员数量
  • mini-pending-count - 待入职数量
  • mini-new-hires-count - 本月新增数量
  • mini-assigned-talent-section - 分配人才区域
  • mini-assigned-talent-card - 人才卡片
  • mini-talent-name - 人才姓名
  • mini-talent-disability-type - 残疾类型
  • mini-talent-disability-level - 残疾等级
  • mini-no-talent-message - 无人才提示信息

TypeScript 类型定义

首页看板人才数据类型:

interface AssignedTalentCard {
  /** 人才姓名 */
  name: string;
  /** 残疾类型 */
  disabilityType: string;
  /** 残疾等级 */
  disabilityLevel: string;
}

interface CoreStatistics {
  /** 在职人员数量 */
  employedCount: number;
  /** 待入职人员数量 */
  pendingCount: number;
  /** 本月新增人员数量 */
  newHiresCount: number;
}

interface DashboardTalentSyncResult {
  /** 同步是否成功 */
  synced: boolean;
  /** 同步耗时(毫秒) */
  syncTime: number;
  /** 后台分配的人才数据 */
  adminTalent: TalentData;
  /** 首页看板人才卡片 */
  talentCard?: AssignedTalentCard;
  /** 核心统计数据 */
  statistics?: CoreStatistics;
}

测试超时配置

使用 TIMEOUTS 常量:

import { TIMEOUTS } from '../../utils/timeouts';

// 首页看板数据同步等待时间
const SYNC_TIMEOUT = TIMEOUTS.networkIdle; // 10000ms

// 首页数据刷新等待时间
const REFRESH_TIMEOUT = TIMEOUTS.PAGE_LOAD; // 30000ms

// 轮询检查间隔
const POLL_INTERVAL = 500;

下拉刷新实现

小程序通常支持下拉刷新功能:

/**
 * 下拉刷新首页看板数据
 */
async refreshDashboard(): Promise<void> {
  // 方案 1: 使用 Playwright 模拟下拉手势
  await this.page.touchstart(0, 0);
  await this.page.touchmove(0, 200);
  await this.page.touchend();

  // 等待刷新完成
  await this.page.waitForTimeout(2000);

  // 方案 2: 如果有刷新按钮,点击刷新按钮
  // await this.refreshButton.click();
}

调试技巧

首页看板调试:

  1. 使用 page.screenshot() 在关键步骤截图
  2. 使用 console.debug() 输出订单卡片和统计信息
  3. 分别记录后台操作和小程序刷新的时间

同步问题调试:

  • 检查网络请求(使用 Playwright 的 network 监听)
  • 检查首页看板 API 响应
  • 验证下拉刷新触发的请求

参考文档

架构文档:

  • _bmad-output/planning-artifacts/epics.md#Epic 13
  • _bmad-output/project-context.md
  • docs/standards/e2e-radix-testing.md

相关 Story 文档:

  • 10-1-order-page-object.md (订单管理 Page Object)
  • 10-7-order-status-tests.md (订单状态测试)
  • 12-4-enterprise-mini-page-object.md (企业小程序 Page Object)
  • 12-5-enterprise-mini-login.md (企业小程序登录测试)
  • 13-1-order-create-sync.md (订单列表同步测试)

测试场景示例

场景 1: 后台添加人员 → 首页显示人才卡片

test('后台添加人员到订单后首页显示人才卡片', async ({
  adminPage, miniPage, orderManagementPage, enterpriseMiniPage
}) => {
  // 1. 后台创建订单并添加残疾人
  const orderName = `人才同步测试_${Date.now()}`;
  await orderManagementPage.goto();
  await orderManagementPage.createOrder({
    name: orderName,
    expectedStartDate: '2026-01-15',
  });

  // 2. 添加残疾人到订单
  const talentName = '测试残疾人_1768346782426_12_8219';
  await orderManagementPage.addTalentToOrder(orderName, talentName);

  // 3. 小程序登录并刷新首页
  await enterpriseMiniPage.goto();
  await enterpriseMiniPage.login('13800138000', 'password123');
  await enterpriseMiniPage.expectLoginSuccess();
  await enterpriseMiniPage.refreshDashboard();

  // 4. 验证首页显示人才卡片
  const cards = await enterpriseMiniPage.getAssignedTalentCards();
  expect(cards.some(c => c.name === talentName)).toBe(true);

  // 5. 验证人才信息完整性
  const card = cards.find(c => c.name === talentName);
  expect(card?.disabilityType).toBeTruthy();
  expect(card?.disabilityLevel).toBeTruthy();
});

场景 2: 后台添加人员 → 核心统计数字同步

test('后台添加人员后核心统计数字同步', async ({
  adminPage, miniPage, orderManagementPage, enterpriseMiniPage
}) => {
  // 1. 小程序登录并获取初始统计数据
  await enterpriseMiniPage.goto();
  await enterpriseMiniPage.login('13800138000', 'password123');
  await enterpriseMiniPage.expectLoginSuccess();
  const initialStats = await enterpriseMiniPage.getCoreStatistics();

  // 2. 后台添加残疾人到订单
  const orderName = `统计测试_${Date.now()}`;
  await orderManagementPage.goto();
  await orderManagementPage.createOrder({
    name: orderName,
    expectedStartDate: '2026-01-15',
  });
  const talentName = '测试残疾人_1768346782426_12_8219';
  await orderManagementPage.addTalentToOrder(orderName, talentName);

  // 3. 刷新首页并等待统计数字变化
  await enterpriseMiniPage.refreshDashboard();
  const statsChanged = await enterpriseMiniPage.waitForStatisticsChange(initialStats);
  expect(statsChanged).toBe(true);

  // 4. 验证统计数字增加
  const newStats = await enterpriseMiniPage.getCoreStatistics();
  expect(newStats.employedCount + newStats.pendingCount)
    .toBeGreaterThan(initialStats.employedCount + initialStats.pendingCount);
});

场景 3: 数据刷新时效性验证

test('首页人才数据在3秒内同步', async ({
  adminPage, miniPage, orderManagementPage, enterpriseMiniPage
}) => {
  // 1. 小程序登录
  await enterpriseMiniPage.goto();
  await enterpriseMiniPage.login('13800138000', 'password123');
  await enterpriseMiniPage.expectLoginSuccess();

  // 2. 后台添加残疾人到订单
  const orderName = `时效性测试_${Date.now()}`;
  await orderManagementPage.goto();
  await orderManagementPage.createOrder({
    name: orderName,
    expectedStartDate: '2026-01-15',
  });
  const talentName = '测试残疾人_1768346782426_12_8219';
  const startTime = Date.now();
  await orderManagementPage.addTalentToOrder(orderName, talentName);

  // 3. 刷新首页并验证同步时间
  await enterpriseMiniPage.refreshDashboard();
  const synced = await enterpriseMiniPage.waitForTalentCard(talentName, 3000);
  const syncTime = Date.now() - startTime;

  expect(synced).toBe(true);
  expect(syncTime).toBeLessThanOrEqual(3000);
});

Dev Agent Record

Agent Model Used

Created by create-story workflow

Debug Log References

Implementation phase - no debug yet

Completion Notes List

Ready for development - Status: ready-for-dev

File List

Artifact file: /mnt/code/188-179-template-6/_bmad-output/implementation-artifacts/13-6-dashboard-sync.md

Change Log

  • 2026-01-14: Story 13.6 创建完成

    • 首页看板数据联动专项测试需求
    • 与 Story 13.1 的区别说明
    • EnterpriseMiniPage 扩展方法定义
    • 状态:ready-for-dev
  • 2026-01-14: Story 13.6 重新定义

    • 从"首页看板订单卡片同步测试"改为"首页看板人才数据同步测试"
    • 更新验收标准为人才数据相关(分配人才列表、核心统计数字)
    • 更新与 Story 13.3 的区别说明(而非 Story 13.1)
    • 更新首页看板结构为实际探索结果
    • 更新 EnterpriseMiniPage 扩展方法为人才相关
    • 状态:ready-for-dev
  • 2026-01-14: Story 13.6 更新 - 基于 Playwright MCP 探索结果

    • 关键发现:企业小程序首页 dashboard 未实现数据获取
    • 后台功能正常(成功添加人员到订单)
    • 添加任务 7:后端实现 - 获取分配人才列表 API
    • 添加任务 8:后端实现 - 核心统计 API
    • 添加任务 9:前端实现 - dashboard 数据获取和渲染
    • 更新任务 10:验证代码质量(原任务 7)
    • 添加实现阻塞说明到 Dev Notes
    • 更新功能实现状态表(AC1-AC4 标记为需要实现)
    • 状态:blocked(等待功能实现)

Playwright MCP 探索结果记录

探索日期

2026-01-14

探索流程

  1. 后台登录 → 成功
  2. 后台创建订单
    • 订单名称:首页看板测试_1768373950000
    • 平台:测试平台_1768346782302
    • 公司:测试公司_1768372131675
    • 残疾人:测试残疾人_1768346782426_12_8219
    • Toast 消息:"订单创建成功"
    • 订单列表验证:✅ 订单出现在列表中
  3. 企业小程序登录 → 成功
  4. 首页 dashboard 结构探索

重要发现

1. 企业小程序首页 dashboard 当前结构

┌─────────────────────────────────┐
│  企业仪表板 (mini-dashboard)     │
├─────────────────────────────────┤
│  欢迎区域:                       │
│  - 欢迎回来                      │
│  - 企业名称                      │
├─────────────────────────────────┤
│  统计卡片:                       │
│  ┌─────────┬─────────┬─────────┐│
│  │ 0       │ 0       │ 0       ││
│  │ 在职人员 │ 待入职  │ 本月新增 ││
│  └─────────┴─────────┴─────────┘│
├─────────────────────────────────┤
│  快捷操作:                       │
│  - 人才库                       │
│  - 数据统计                     │
│  - 订单管理                     │
│  - 设置                         │
├─────────────────────────────────┤
│  分配人才区域:                   │
│  - 暂无分配人才                  │
├─────────────────────────────────┤
│  数据统计区域:                   │
│  - 在职率: --                   │
│  - 平均薪资: ¥0                 │
├─────────────────────────────────┤
│  底部导航:                       │
│  - 首页 (当前)                   │
│  - 人才                         │
│  - 订单                         │
│  - 数据                         │
│  - 设置                         │
└─────────────────────────────────┘

2. 关键发现:首页 dashboard 有"分配人才"和"核心统计"区域

当前首页 dashboard 包含:

  • 欢迎信息区域
  • 统计卡片(在职人员、待入职、本月新增)
  • 快捷操作按钮
  • 分配人才区域
  • 数据统计区域(在职率、平均薪资)
  • 底部导航栏

核心功能区域:

  • ✅ 统计卡片(在职人员、待入职、本月新增)
  • ✅ 分配人才区域
  • ✅ 数据统计区域(在职率、平均薪资)
  • ✅ 快捷操作按钮

3. 与 Story 13.3 的区别验证

维度 Story 13.3 Story 13.6
验证目标 人才小程序 企业小程序首页
验证内容 人才个人信息、订单列表、待入职状态 分配人才列表、核心统计数字
测试页面 人才小程序首页 企业小程序首页 dashboard
测试方法 TalentMiniPage 验证 EnterpriseMiniPage 验证

验证确认:两个 Story 测试的是不同的端和功能。

功能实现状态

AC 描述 状态 备注
AC1 后台添加人员 → 首页分配人才列表显示 🔴 需要实现 需要后端 API + 前端数据获取(任务 7、9)
AC2 核心统计数字同步 🔴 需要实现 需要后端 API + 前端数据获取(任务 8、9)
AC3 分配人才列表数据完整性 🔴 需要实现 依赖 AC1 实现
AC4 数据刷新时效性 🔴 需要实现 依赖 AC1、AC2 实现
AC5 与 Story 13.3 的区别 已验证 确认是不同的端和页面
AC6 代码质量标准 🔴 待实现 等待功能实现后编写测试

阻塞说明:

  • 后台功能正常(人员分配成功)
  • 企业小程序首页 dashboard 未实现数据获取
  • 必须先完成任务 7、8、9 后才能进行测试开发

建议的实现方案

1. 首页 dashboard 人才数据验证策略

// 验证首页 dashboard 人才数据结构
async verifyDashboardTalentData(): Promise<void> {
  // 1. 验证首页看板容器存在
  await expect(this.page.getByTestId('mini-dashboard')).toBeVisible();

  // 2. 验证核心统计卡片存在
  await expect(this.page.getByTestId('mini-stats-cards')).toBeVisible();
  await expect(this.page.getByTestId('mini-employed-count')).toBeVisible();
  await expect(this.page.getByTestId('mini-pending-count')).toBeVisible();
  await expect(this.page.getByTestId('mini-new-hires-count')).toBeVisible();

  // 3. 验证分配人才区域存在
  await expect(this.page.getByTestId('mini-assigned-talent-section')).toBeVisible();

  // 4. 如果有分配人才,验证人才卡片
  const talentCards = this.page.getByTestId('mini-assigned-talent-card');
  const count = await talentCards.count();

  if (count > 0) {
    // 验证第一个人才卡片的信息完整性
    const firstCard = talentCards.first();
    await expect(firstCard.getByTestId('mini-talent-name')).toBeVisible();
    await expect(firstCard.getByTestId('mini-talent-disability-type')).toBeVisible();
    await expect(firstCard.getByTestId('mini-talent-disability-level')).toBeVisible();
  } else {
    // 验证无人才提示信息
    await expect(this.page.getByTestId('mini-no-talent-message')).toBeVisible();
  }
}

2. EnterpriseMiniPage 需要扩展的方法

/**
 * 获取首页看板的分配人才列表
 */
async getAssignedTalentCards(): Promise<AssignedTalentCard[]> {
  const cards: AssignedTalentCard[] = [];
  const cardElements = this.page.getByTestId('mini-assigned-talent-card');
  const count = await cardElements.count();

  for (let i = 0; i < count; i++) {
    const card = cardElements.nth(i);
    const name = await card.getByTestId('mini-talent-name').textContent();
    const disabilityType = await card.getByTestId('mini-talent-disability-type').textContent();
    const disabilityLevel = await card.getByTestId('mini-talent-disability-level').textContent();

    cards.push({
      name: name || '',
      disabilityType: disabilityType || '',
      disabilityLevel: disabilityLevel || '',
    });
  }

  return cards;
}

/**
 * 获取首页核心统计数据
 */
async getCoreStatistics(): Promise<CoreStatistics> {
  const employedCountText = await this.page.getByTestId('mini-employed-count').textContent();
  const pendingCountText = await this.page.getByTestId('mini-pending-count').textContent();
  const newHiresCountText = await this.page.getByTestId('mini-new-hires-count').textContent();

  return {
    employedCount: employedCountText ? parseInt(employedCountText) : 0,
    pendingCount: pendingCountText ? parseInt(pendingCountText) : 0,
    newHiresCount: newHiresCountText ? parseInt(newHiresCountText) : 0,
  };
}

/**
 * 刷新首页看板数据
 */
async refreshDashboard(): Promise<void> {
  // 使用页面刷新
  await this.page.reload();
  await this.page.waitForTimeout(2000);
}

/**
 * 等待人才卡片出现在首页看板
 */
async waitForTalentCard(talentName: string, timeout: number = 10000): Promise<boolean> {
  const startTime = Date.now();
  while (Date.now() - startTime < timeout) {
    const cards = await this.getAssignedTalentCards();
    if (cards.some(c => c.name === talentName)) {
      return true;
    }
    await this.page.waitForTimeout(500);
  }
  return false;
}

/**
 * 等待统计数据变化
 */
async waitForStatisticsChange(
  initialStats: CoreStatistics,
  timeout: number = 10000
): Promise<boolean> {
  const startTime = Date.now();
  while (Date.now() - startTime < timeout) {
    const currentStats = await this.getCoreStatistics();
    if (currentStats.employedCount !== initialStats.employedCount ||
        currentStats.pendingCount !== initialStats.pendingCount) {
      return true;
    }
    await this.page.waitForTimeout(500);
  }
  return false;
}

测试文件

已创建测试文件:

  • web/tests/e2e/specs/cross-platform/dashboard-sync.spec.ts

测试文件应包含:

  1. 后台添加人员到订单测试用例
  2. 小程序首页 dashboard 分配人才数据同步验证
  3. 核心统计数字同步验证
  4. 与 Story 13.3 的区别验证
  5. 详细的探索结果注释

截图记录

探索过程中保存的截图:

  • web/test-results/dashboard-sync-01-initial.png - 首页 dashboard 初始状态
  • web/test-results/dashboard-sync-02-final.png - 首页 dashboard 最终状态

下一步行动

  1. 测试开发:完善测试用例,验证后台添加人员 → 首页显示人才卡片
  2. 测试开发:添加核心统计数字同步测试
  3. 测试开发:添加数据刷新时效性测试
  4. Page Object 扩展:在 EnterpriseMiniPage 中实现人才数据相关方法
  5. 运行测试:使用 Playwright MCP 验证测试流程
  6. 代码提交:完成测试后提交代码