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

## 🎯 快速测试地址

```
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. **启动开发服务器**（如果还未启动）：
   ```bash
   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项
- [ ] 文本输入框可以输入
- [ ] 多行文本框可以输入多行
- [ ] "上一题"/"下一题"按钮正常
- [ ] 必填题未填写时提示

### 结果页测试
- [ ] 提交成功显示成功图标
- [ ] 能力画像正确显示
- [ ] "重新填写"按钮可以返回答题页
- [ ] "返回首页"按钮可点击

### 数据保存测试
- [ ] 每答一题后刷新页面，进度已保存
- [ ] 提交后刷新，显示结果页
- [ ] 浏览器控制台无错误

---

## 🔍 数据验证

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

```javascript
// 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. 恢复认证守卫**：

```typescript
// 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. **描述问题**：包括操作步骤、预期结果、实际结果

---

**祝测试顺利！** 🎉

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