Home Explore Help
Register Sign In
nkkj
/
yss-project
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 32e0d0b965
Branches Tags
yss-project
/
docs
/
员工问卷组件测试指南.md

员工问卷组件测试指南.md 11 KB
History Raw

员工问卷组件测试指南

一、组件概述

员工问卷组件（ProfileSurveyComponent）是一个完整的员工能力调研问卷系统，包含以下特性：

核心功能

  • ✅ 企业微信身份认证：自动识别登录员工身份
  • ✅ 三状态设计：欢迎页 → 答题页 → 结果页
  • ✅ 17道调研题目：覆盖技术能力、项目经验、承接偏好、协作习惯等6大模块
  • ✅ 多种题型支持：单选、多选、文本、数字、多行文本
  • ✅ 自动保存进度：每答一题自动保存，支持中途退出恢复
  • ✅ 能力画像生成：自动生成员工能力摘要卡片
  • ✅ 蓝色/橙色主题：区别于客户问卷的紫色主题

技术实现

  • 文件路径：
    • src/modules/profile/pages/profile-survey/profile-survey.component.ts
    • src/modules/profile/pages/profile-survey/profile-survey.component.html
    • src/modules/profile/pages/profile-survey/profile-survey.component.scss
  • 路由地址：/wxwork/:cid/survey/profile
  • 数据存储：SurveyLog 表，type='survey-profile'

二、访问测试

方式1：直接URL访问（推荐测试方式）

http://localhost:4200/wxwork/{公司ID}/survey/profile

示例：

http://localhost:4200/wxwork/abc123/survey/profile

注意：需要先在企业微信中完成员工身份认证，或在测试环境中模拟员工登录。

方式2：从企业微信端访问

  1. 在企微工作台增加"员工问卷"入口
  2. 点击后跳转到问卷页面
  3. 自动识别当前员工身份

三、测试用例

3.1 基本流程测试

测试用例1：首次填写问卷

步骤：

  1. 访问问卷URL
  2. 查看欢迎页是否正确显示员工头像和姓名
  3. 点击"开始填写"按钮
  4. 依次回答17道题目
  5. 查看最后一题是否显示"提交"按钮
  6. 点击"提交"
  7. 查看是否跳转到结果页并显示能力画像

预期结果：

  • ✓ 欢迎页显示员工信息
  • ✓ 进度条正确显示进度
  • ✓ 题目按顺序展示
  • ✓ 提交成功，显示结果页
  • ✓ 能力画像正确生成

测试用例2：中途退出恢复进度

步骤：

  1. 开始填写问卷
  2. 回答前5道题
  3. 关闭页面或刷新
  4. 重新访问问卷URL
  5. 查看是否恢复到第6题

预期结果：

  • ✓ 自动恢复进度
  • ✓ 前5题答案已保存
  • ✓ 从第6题继续

测试用例3：重新填写问卷

步骤：

  1. 完成问卷提交后
  2. 重新访问问卷URL
  3. 查看欢迎页是否有"已填写过问卷"提示
  4. 点击"开始填写"
  5. 查看是否可以修改答案

预期结果：

  • ✓ 显示已填写提示
  • ✓ 可以重新填写
  • ✓ 提交后更新数据

3.2 题型交互测试

测试用例4：单选题

测试题目：第5题、第8题、第10题等

步骤：

  1. 点击某个选项
  2. 查看是否自动跳转到下一题
  3. 点击"上一题"返回
  4. 查看之前的选择是否保留

预期结果：

  • ✓ 选中后自动跳转
  • ✓ 单选按钮状态正确
  • ✓ 选择被正确保存

测试用例5：多选题（有选择上限）

测试题目：第1题（最多选3项）、第3题（最多选2项）

步骤：

  1. 依次选择4个选项
  2. 查看是否弹出"最多只能选择X项"提示
  3. 取消一个选项
  4. 再选择另一个选项
  5. 查看选择进度是否正确显示（如"已选 3/3 项"）

预期结果：

  • ✓ 达到上限时提示
  • ✓ 复选框状态正确
  • ✓ 选择进度显示正确

测试用例6：多选题（无上限）

测试题目：第2题、第9题、第11题等

步骤：

  1. 选择多个选项
  2. 点击"下一题"
  3. 查看是否保存所有选择

预期结果：

  • ✓ 可选择任意数量
  • ✓ 所有选择被保存

测试用例7："其他"选项

测试题目：第1题、第6题

步骤：

  1. 点击"其他"选项
  2. 查看是否显示输入框
  3. 输入自定义内容
  4. 点击"下一题"
  5. 返回查看是否保存

预期结果：

  • ✓ 显示输入框
  • ✓ 自定义内容被保存

测试用例8：文本输入

测试题目：第4题、第6题

步骤：

  1. 在输入框中输入文本
  2. 按Enter键或点击"下一题"
  3. 返回查看是否保存

预期结果：

  • ✓ 文本正确保存
  • ✓ Enter键触发下一题

测试用例9：多行文本输入

测试题目：第5题、第7题、第16题、第17题

步骤：

  1. 输入多行文本（包含换行）
  2. 点击"下一题"
  3. 返回查看是否保存

预期结果：

  • ✓ 多行文本正确保存
  • ✓ 换行符保留

测试用例10：数字输入

测试题目：第8题紧急订单上限

步骤：

  1. 输入数字
  2. 输入非数字字符
  3. 查看输入限制

预期结果：

  • ✓ 只能输入数字
  • ✓ 数字正确保存

3.3 必填验证测试

测试用例11：必填题验证

步骤：

  1. 来到必填题（带*号）
  2. 不填写，直接点击"下一题"
  3. 查看是否弹出提示

预期结果：

  • ✓ 弹出"请完成当前题目"提示
  • ✓ 不允许跳过

测试用例12：选填题跳过

步骤：

  1. 来到选填题（第6题、第7题等）
  2. 不填写，直接点击"下一题"
  3. 查看是否可以跳过

预期结果：

  • ✓ 可以直接跳过
  • ✓ 不影响后续答题

3.4 导航测试

测试用例13：上一题/下一题

步骤：

  1. 答到第5题
  2. 点击"上一题"
  3. 查看是否回到第4题
  4. 在第1题点击"上一题"
  5. 查看按钮是否禁用

预期结果：

  • ✓ 导航正确
  • ✓ 第1题的"上一题"按钮禁用

测试用例14：进度条

步骤：

  1. 观察进度条
  2. 每答一题查看进度是否增加

预期结果：

  • ✓ 进度条正确显示
  • ✓ 数字显示"当前题号/总题数"

3.5 结果页测试

测试用例15：能力画像显示

步骤：

  1. 完成全部问卷
  2. 查看结果页的能力画像摘要
  3. 对比填写的答案是否正确显示

预期结果：

  • ✓ 擅长风格正确显示
  • ✓ 技术优势正确显示
  • ✓ 周承接量正确显示
  • ✓ 其他信息完整

测试用例16：重新填写

步骤：

  1. 在结果页点击"重新填写"
  2. 查看是否跳转到答题页第1题

预期结果：

  • ✓ 正确跳转
  • ✓ 可以修改答案

测试用例17：返回首页

步骤：

  1. 在结果页点击"返回首页"
  2. 查看是否跳转到工作台

预期结果：

  • ✓ 正确跳转

四、数据验证

4.1 数据库检查

查询SurveyLog表：

// 在浏览器控制台执行
const Parse = window.Parse;
const query = new Parse.Query('SurveyLog');
query.equalTo('type', 'survey-profile');
query.include('profile');
query.descending('createdAt');
const results = await query.find();
console.log('员工问卷记录：', results.map(r => ({
  id: r.id,
  profile: r.get('profile')?.get('name'),
  isCompleted: r.get('isCompleted'),
  completedAt: r.get('completedAt'),
  data: r.get('data')
})));

预期结果：

  • ✓ type = 'survey-profile'
  • ✓ profile 指向员工Profile对象
  • ✓ data 包含所有答案
  • ✓ isCompleted = true（已完成）
  • ✓ completedAt 有完成时间

五、样式检查

5.1 主题色检查

  • ✓ 主色调为蓝色（#3B82F6）
  • ✓ 强调色为橙色（#F59E0B）
  • ✓ 与客户问卷的紫色主题有明显区分

5.2 响应式检查

测试步骤：

  1. 在手机端打开问卷
  2. 在平板端打开问卷
  3. 在桌面端打开问卷

预期结果：

  • ✓ 移动端优先设计
  • ✓ 各尺寸下布局正常
  • ✓ 按钮和输入框易于点击

5.3 动画效果

  • ✓ 页面切换有淡入动画
  • ✓ 题目卡片有滑入动画
  • ✓ 成功图标有缩放动画
  • ✓ 按钮点击有反馈效果

六、常见问题排查

问题1：无法识别员工身份

症状：显示"无法识别您的身份"错误

排查步骤：

  1. 检查是否通过企业微信登录
  2. 检查localStorage中是否有company信息
  3. 检查WxworkAuth是否正常工作

解决方案：

  • 确保通过企微端访问或模拟登录

问题2：问卷无法保存

症状：答题后刷新，进度未保存

排查步骤：

  1. 打开浏览器控制台查看报错
  2. 检查Parse数据库连接
  3. 检查SurveyLog表权限

解决方案：

  • 确认数据库连接正常
  • 检查表的读写权限

问题3：样式显示异常

症状：布局错乱或样式缺失

排查步骤：

  1. 检查SCSS文件是否正确加载
  2. 清除浏览器缓存
  3. 检查CSS变量是否正确

解决方案：

  • 重新编译项目
  • 清除缓存后刷新

七、下一步集成

7.1 后台员工详情弹窗集成

参考PRD文档第四章，在员工详情弹窗中增加"能力问卷"Tab：

// 在 employee-detail-modal.component.ts 中
async loadEmployeeSurvey() {
  const query = new Parse.Query('SurveyLog');
  query.equalTo('profile', this.employee.toPointer());
  query.equalTo('type', 'survey-profile');
  query.equalTo('isCompleted', true);
  const surveyLog = await query.first();
  
  if (surveyLog) {
    this.surveyData = surveyLog.get('data');
  }
}

7.2 员工列表状态显示

在员工列表中增加问卷状态标识：

<td>
  <span class="survey-badge" [class.completed]="employee.surveyCompleted">
    {{ employee.surveyCompleted ? '✓ 已填写' : '未填写' }}
  </span>
</td>

7.3 首次登录引导

在企微端工作台增加问卷状态检测和引导弹窗：

// 检查问卷状态
async checkSurveyStatus() {
  const query = new Parse.Query('SurveyLog');
  query.equalTo('profile', this.currentProfile.toPointer());
  query.equalTo('type', 'survey-profile');
  query.equalTo('isCompleted', true);
  
  const surveyLog = await query.first();
  if (!surveyLog) {
    this.showSurveyGuide = true; // 显示引导弹窗
  }
}

八、测试清单

功能测试

  • 欢迎页正确显示
  • 企微身份认证成功
  • 答题页题目加载正确
  • 单选题交互正常
  • 多选题交互正常
  • 文本输入正常
  • 必填验证正常
  • 进度自动保存
  • 中途退出恢复
  • 提交成功
  • 结果页显示正确
  • 能力画像生成正确

样式测试

  • 蓝色/橙色主题正确
  • 移动端布局正常
  • 平板端布局正常
  • 桌面端布局正常
  • 动画效果流畅

数据测试

  • SurveyLog表数据正确
  • profile指针正确
  • data字段完整
  • isCompleted标记正确

九、联系与反馈

如在测试过程中遇到问题，请记录：

  1. 问题描述
  2. 复现步骤
  3. 浏览器控制台错误信息
  4. 截图（如有）

测试完成时间：_____________
测试人员：_____________
测试结果：□ 通过 □ 部分通过 □ 未通过
备注：_____________