yss-project/docs/员工问卷测试访问指南.md

员工问卷组件 - 测试访问指南

🎯 快速测试地址

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

或

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

说明：使用 test 或 demo 作为公司ID时，会自动启用测试模式，使用模拟员工数据。

---

✅ 测试准备

1. 已完成的配置

我已经为您配置好测试模式：

• ✅ 临时移除认证守卫：注释掉 WxworkAuthGuard，允许直接访问
• ✅ 模拟员工数据：当 cid 为 test 或 demo 时，自动使用模拟员工"张设计师"
• ✅ 自动设置company：测试模式下自动设置localStorage中的company信息

2. 测试步骤

1. 启动开发服务器（如果还未启动）：

   ng serve
   

2. 等待编译完成，看到类似信息：

   ✔ Browser application bundle generation complete.
   ** Angular Live Development Server is listening on localhost:4200 **
   

3. 打开浏览器，访问测试地址：

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

4. 查看控制台，应该看到：

   🧪 测试模式：使用模拟员工数据
   🧪 测试模式：设置company ID
   当前员工: [Mock Profile Object]
   

---

📋 测试内容

欢迎页测试

• 显示员工头像和姓名（张设计师）
• 显示"技术组员偏好及状况调研"标题
• 显示"8-10分钟"、"21道题"、"选择为主"标签
• "开始填写"按钮可点击

答题页测试

• 进度条显示正确（1/21）
• 题目按顺序显示
• 单选题点击后自动跳转
• 多选题可选择多个
• 第1题（擅长风格）最多选3项
• 第3题（技术优势）最多选2项
• 文本输入框可以输入
• 多行文本框可以输入多行
• "上一题"/"下一题"按钮正常
• 必填题未填写时提示

结果页测试

• 提交成功显示成功图标
• 能力画像正确显示
• "重新填写"按钮可以返回答题页
• "返回首页"按钮可点击

数据保存测试

• 每答一题后刷新页面，进度已保存
• 提交后刷新，显示结果页
• 浏览器控制台无错误

---

🔍 数据验证

在浏览器控制台查询保存的数据

// 1. 打开浏览器开发者工具（F12）
// 2. 切换到Console标签
// 3. 执行以下代码

// 查询员工问卷
const Parse = window.Parse;
const query = new Parse.Query('SurveyLog');
query.equalTo('type', 'survey-profile');
query.descending('createdAt');
const results = await query.find();

console.table(results.map(r => ({
  'ID': r.id,
  '员工': r.get('profile')?.id,
  '已完成': r.get('isCompleted'),
  '完成时间': r.get('completedAt')?.toLocaleString(),
  '题目数': Object.keys(r.get('data') || {}).length
})));

// 查看第一条记录的详细答案
if (results.length > 0) {
  console.log('详细答案:', results[0].get('data'));
}

预期结果：

• type = 'survey-profile'
• profile.objectId = 'mock_profile_001'
• data 包含所有答案
• isCompleted = true（完成后）

---

🎨 UI检查清单

主题色

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

响应式

• 手机端布局正常（宽度<768px）
• 平板端布局正常（宽度768-1024px）
• 桌面端布局正常（宽度>1024px）

动画

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

---

🐛 常见问题

问题1：页面空白或无限加载

可能原因：

• 开发服务器未启动
• 编译出错

解决方法：

1. 检查终端是否有错误信息
2. 重启开发服务器：ng serve
3. 清除浏览器缓存后刷新

---

问题2：显示"无法识别您的身份"

可能原因：

• cid不是 'test' 或 'demo'
• 测试模式未生效

解决方法：

1. 确认URL中的cid是 'test' 或 'demo'
2. 打开浏览器控制台，查看是否有 "🧪 测试模式" 的日志
3. 检查代码修改是否保存

---

问题3：提交失败或数据未保存

可能原因：

• Parse数据库连接问题
• SurveyLog表不存在或权限不足

解决方法：

1. 检查浏览器控制台的错误信息
2. 确认Parse服务器正常运行
3. 检查SurveyLog表的读写权限

---

问题4：样式显示异常

可能原因：

• SCSS文件编译失败
• 浏览器缓存

解决方法：

1. 检查SCSS文件是否存在错误
2. 清除浏览器缓存（Ctrl+Shift+Delete）
3. 硬刷新页面（Ctrl+F5）

---

🚀 测试完成后

恢复生产配置

测试完成后，如需恢复企微认证：

1. 恢复认证守卫：

// src/app/app.routes.ts
{
  path: 'wxwork/:cid',
  canActivate: [WxworkAuthGuard], // 取消注释
  children: [...]
}

2. 移除测试模式代码（可选）：

如果不需要测试模式，可以移除组件中的 createMockProfile() 方法和相关判断。

---

📊 测试报告模板

员工问卷组件测试报告

测试时间：____年____月____日
测试人员：____________
测试环境：Chrome/Firefox/Safari (版本：____)

功能测试：
□ 欢迎页显示正常
□ 答题页功能正常
□ 结果页显示正常
□ 数据保存成功
□ 进度恢复正常

UI测试：
□ 蓝色/橙色主题正确
□ 响应式布局正常
□ 动画效果流畅

数据验证：
□ SurveyLog记录正确
□ profile指针正确
□ 答案数据完整

问题记录：
1. ____________________
2. ____________________

测试结论：□ 通过  □ 未通过
备注：____________________

---

📞 需要帮助？

如果测试过程中遇到问题：

1. 查看浏览器控制台：按F12打开，查看Console和Network标签
2. 查看终端输出：检查Angular编译和运行时错误
3. 截图记录：截取错误信息和页面状态
4. 描述问题：包括操作步骤、预期结果、实际结果

---

祝测试顺利！ 🎉

如有任何问题，随时反馈！