身份激活测试指南.md 8.8 KB

企微身份激活与问卷整合 - 测试指南

🚀 快速开始

1. 启动开发服务器

npm run dev

等待服务器启动完成(通常需要 10-30 秒)


📍 测试URL

方式1: 测试模式(无需企微环境)

http://localhost:4200/wxwork/test/activation

说明:

  • test 是特殊的测试公司ID
  • 会使用 mock 数据模拟企微用户
  • 不需要真实的企微授权

方式2: 通过工作台自动跳转

http://localhost:4200/wxwork/test/designer/dashboard

说明:

  • 如果未激活,会自动跳转到激活页面
  • 激活后会回到工作台

🧪 测试场景

场景1: 首次激活流程

步骤:

  1. 访问激活页面

    http://localhost:4200/wxwork/test/activation
    
  2. 检查显示内容

    • 显示"用户身份确认"标题
    • 显示用户头像(默认头像)
    • 显示姓名(测试员工)
    • 显示角色(组员)
    • 显示员工ID
    • 显示部门信息
    • "确认身份"按钮可见
  3. 点击"确认身份"

    • 按钮显示"激活中..."
    • 2-3秒后跳转到"已激活"视图
  4. 检查激活后界面

    • 显示绿色成功图标 ✓
    • 显示"身份激活成功"
    • 显示"欢迎,XXX!"
    • 显示用户信息摘要卡片
    • 显示紫色问卷卡片
    • 显示"待完成"状态
    • "开始填写问卷"按钮可见
    • "稍后填写,先进入工作台"按钮可见

场景2: 填写问卷

步骤:

  1. 在激活页面点击"开始填写问卷"

  2. 跳转到问卷页面

    URL: /wxwork/test/survey/profile
    
  3. 填写问卷

    • 显示21道问题
    • 可以选择答案
    • 进度条正确显示
    • "上一题"/"下一题"按钮正常
    • 最后一题显示"提交问卷"
  4. 提交问卷

    • 显示"提交中..."
    • 提交成功后显示结果页
    • 显示"您的能力调研已完成"
  5. 返回激活页面

    • 手动访问:

      http://localhost:4200/wxwork/test/activation
      

场景3: 刷新问卷状态

步骤:

  1. 在激活页面点击"已完成?刷新状态"

  2. 检查状态更新

    • 按钮显示加载状态
    • 1-2秒后状态变为"已完成"
    • "查看问卷结果"按钮出现

场景4: 查看问卷结果

步骤:

  1. 点击"查看问卷结果"

  2. 检查结果页面

    • 显示"问卷结果"标题
    • 显示用户头像和姓名
    • 显示所有21道问题的答案
    • 单选题显示为标签
    • 多选题显示为多个标签
    • 评分题显示为进度条
    • 文本题显示完整文本
  3. 返回激活页面

    • 点击左上角返回按钮
    • 返回到"已激活"视图

场景5: 进入工作台

步骤:

  1. 点击"进入工作台"

  2. 根据角色跳转

    • 组员 → /wxwork/test/designer/dashboard
    • 组长/管理员 → /wxwork/test/team-leader/dashboard
  3. 检查访问权限

    • 成功进入工作台
    • 不再跳转到激活页面

场景6: 已激活用户再次访问

步骤:

  1. 清除浏览器缓存

    按 Ctrl + Shift + Delete
    选择"Cookie 和其他网站数据"
    点击"清除数据"
    
  2. 再次访问激活页面

    http://localhost:4200/wxwork/test/activation
    
  3. 检查行为

    • 如果 Profile.isActivated = true,直接显示"已激活"视图
    • 如果 Profile.surveyCompleted = true,显示"查看问卷结果"按钮
    • 可以查看之前的问卷结果

🐛 调试技巧

1. 查看控制台日志

打开浏览器开发者工具(F12),查看 Console 标签:

期望看到的日志:
🔐 初始化企微认证...
✅ 用户信息获取成功: 测试员工
📋 激活状态: false
⚡ 开始激活...
✅ 激活成功!

2. 手动修改数据库

重置激活状态(模拟首次访问)

// 在浏览器控制台执行
const Parse = FmodeParse.with('nova');
const query = new Parse.Query('Profile');
query.equalTo('userid', 'test_user_001'); // 替换为实际 userid
const profile = await query.first();

if (profile) {
  profile.set('isActivated', false);
  profile.set('surveyCompleted', false);
  await profile.save();
  console.log('✅ 已重置激活状态');
  location.reload();
}

模拟问卷已完成

const Parse = FmodeParse.with('nova');
const query = new Parse.Query('Profile');
query.equalTo('userid', 'test_user_001');
const profile = await query.first();

if (profile) {
  profile.set('surveyCompleted', true);
  profile.set('surveyCompletedAt', new Date());
  await profile.save();
  console.log('✅ 已标记问卷完成');
  location.reload();
}

3. 检查网络请求

在开发者工具 → Network 标签:

期望看到的请求:
1. GET /classes/Profile?where={"userid":"test_user_001"}
2. PUT /classes/Profile/{objectId}  (激活时)
3. GET /classes/SurveyLog?where={"type":"survey-profile"}  (查看结果时)

📊 测试数据

Mock Profile 数据

{
  id: 'mock_profile_001',
  userid: 'test_user_001',
  name: '测试员工',
  realname: '张设计师',
  roleName: '组员',
  avatar: '/assets/images/default-avatar.svg',
  isActivated: false,      // 初始未激活
  surveyCompleted: false   // 初始未完成问卷
}

Mock UserInfo 数据

{
  userid: 'test_user_001',
  name: '测试员工',
  mobile: '13800138000',
  department: [1, 2],
  avatar: '/assets/images/default-avatar.svg'
}

✅ 验收标准

功能完整性

  • 首次访问显示身份确认界面
  • 激活后显示问卷按钮
  • 可以跳转到问卷页面
  • 可以刷新问卷状态
  • 可以查看问卷结果
  • 可以进入工作台
  • 已激活用户不再显示确认界面

UI/UX 质量

  • 界面美观,渐变背景
  • 动画流畅(滑入、缩放)
  • 按钮有悬停效果
  • 加载状态清晰
  • 错误提示友好
  • 移动端适配

性能指标

  • 页面加载时间 < 2秒
  • 激活操作响应 < 3秒
  • 状态刷新响应 < 2秒
  • 无明显卡顿

错误处理

  • 网络错误有提示
  • 缺少 cid 参数有错误信息
  • 认证失败有重试按钮
  • 数据加载失败可重新加载

🔧 常见问题排查

Q1: 激活页面一直加载

检查:

// 1. 检查 localStorage 中的 company
console.log(localStorage.getItem('company'));

// 2. 检查路由参数
console.log(window.location.href);

// 3. 检查网络请求
// 打开 Network 标签,看是否有失败的请求

Q2: 点击"确认身份"没反应

检查:

// 1. 查看控制台是否有错误
// 2. 检查 WxworkAuth 初始化是否成功
// 3. 检查 Parse 连接是否正常

// 手动测试 Parse 连接
const Parse = FmodeParse.with('nova');
const TestObject = Parse.Object.extend('_User');
const query = new Parse.Query(TestObject);
query.limit(1);
const result = await query.find();
console.log('Parse 连接正常:', result);

Q3: 问卷状态不更新

检查:

// 1. 确认 Profile 的 surveyCompleted 字段
const Parse = FmodeParse.with('nova');
const query = new Parse.Query('Profile');
query.equalTo('userid', 'test_user_001');
const profile = await query.first();
console.log('surveyCompleted:', profile?.get('surveyCompleted'));

// 2. 确认 SurveyLog 是否存在
const surveyQuery = new Parse.Query('SurveyLog');
surveyQuery.equalTo('type', 'survey-profile');
surveyQuery.equalTo('profile', profile.toPointer());
const surveyLog = await surveyQuery.first();
console.log('SurveyLog:', surveyLog);

📝 测试报告模板

## 测试结果

**测试日期**: 2025-01-01
**测试人员**: XXX
**测试环境**: 本地开发环境

### 场景1: 首次激活
- [ ] 通过
- [ ] 失败
- 问题描述: ___________

### 场景2: 填写问卷
- [ ] 通过
- [ ] 失败
- 问题描述: ___________

### 场景3: 刷新状态
- [ ] 通过
- [ ] 失败
- 问题描述: ___________

### 场景4: 查看结果
- [ ] 通过
- [ ] 失败
- 问题描述: ___________

### 场景5: 进入工作台
- [ ] 通过
- [ ] 失败
- 问题描述: ___________

### 场景6: 已激活用户
- [ ] 通过
- [ ] 失败
- 问题描述: ___________

### 总体评价
___________

### 建议改进
___________

🎯 下一步

测试完成后:

  1. 部署到测试环境

    npm run build
    # 部署到测试服务器
    
  2. 真实企微环境测试

    • 配置企微应用主页
    • 使用真实用户测试
    • 验证OAuth流程
  3. 性能优化

    • 检查打包体积
    • 优化图片资源
    • 启用懒加载
  4. 生产发布

    • 备份数据库
    • 灰度发布
    • 监控错误日志