员工问卷测试访问指南.md 6.1 KB
员工问卷组件 - 测试访问指南
🎯 快速测试地址
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. 测试步骤
启动开发服务器（如果还未启动）：
ng serve等待编译完成，看到类似信息：
✔ Browser application bundle generation complete. ** Angular Live Development Server is listening on localhost:4200 **打开浏览器，访问测试地址：
http://localhost:4200/wxwork/test/survey/profile查看控制台，应该看到：
🧪 测试模式：使用模拟员工数据 🧪 测试模式：设置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：页面空白或无限加载
可能原因：
- 开发服务器未启动
- 编译出错
解决方法：
- 检查终端是否有错误信息
- 重启开发服务器：
ng serve - 清除浏览器缓存后刷新
问题2：显示"无法识别您的身份"
可能原因：
- cid不是 'test' 或 'demo'
- 测试模式未生效
解决方法：
- 确认URL中的cid是 'test' 或 'demo'
- 打开浏览器控制台，查看是否有 "🧪 测试模式" 的日志
- 检查代码修改是否保存
问题3：提交失败或数据未保存
可能原因：
- Parse数据库连接问题
- SurveyLog表不存在或权限不足
解决方法：
- 检查浏览器控制台的错误信息
- 确认Parse服务器正常运行
- 检查SurveyLog表的读写权限
问题4：样式显示异常
可能原因：
- SCSS文件编译失败
- 浏览器缓存
解决方法：
- 检查SCSS文件是否存在错误
- 清除浏览器缓存（Ctrl+Shift+Delete）
- 硬刷新页面（Ctrl+F5）
🚀 测试完成后
恢复生产配置
测试完成后，如需恢复企微认证：
1. 恢复认证守卫：
// src/app/app.routes.ts
{
path: 'wxwork/:cid',
canActivate: [WxworkAuthGuard], // 取消注释
children: [...]
}
2. 移除测试模式代码（可选）：
如果不需要测试模式，可以移除组件中的 createMockProfile() 方法和相关判断。
📊 测试报告模板
员工问卷组件测试报告
测试时间：____年____月____日
测试人员：____________
测试环境：Chrome/Firefox/Safari (版本：____)
功能测试：
□ 欢迎页显示正常
□ 答题页功能正常
□ 结果页显示正常
□ 数据保存成功
□ 进度恢复正常
UI测试：
□ 蓝色/橙色主题正确
□ 响应式布局正常
□ 动画效果流畅
数据验证：
□ SurveyLog记录正确
□ profile指针正确
□ 答案数据完整
问题记录：
1. ____________________
2. ____________________
测试结论：□ 通过 □ 未通过
备注：____________________
📞 需要帮助？
如果测试过程中遇到问题：
- 查看浏览器控制台：按F12打开，查看Console和Network标签
- 查看终端输出：检查Angular编译和运行时错误
- 截图记录：截取错误信息和页面状态
- 描述问题：包括操作步骤、预期结果、实际结果
祝测试顺利！ 🎉
如有任何问题，随时反馈！