# 员工问卷组件测试指南

## 一、组件概述

**员工问卷组件**（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表**：

```javascript
// 在浏览器控制台执行
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：

```typescript
// 在 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 员工列表状态显示
在员工列表中增加问卷状态标识：

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

### 7.3 首次登录引导
在企微端工作台增加问卷状态检测和引导弹窗：

```typescript
// 检查问卷状态
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. 截图（如有）

---

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