TESTING-GUIDE.md 10.0 KB
售后模块测试指南
🎯 功能验证清单
前置准备
启动项目
cd yss-project npm run start访问项目详情页
- 导航到设计师工作台
- 选择任意项目进入详情页
- 或直接访问：
http://localhost:4200/designer/project-detail/{projectId}
切换到售后板块
- 点击顶部四个圆圈导航中的"售后"（第4个圆圈）
- 或直接点击页面右侧的售后模块
✅ 模块功能测试
1. 💰 尾款结算模块测试
测试步骤：
查看自动化功能介绍
- ✅ 确认显示4个功能特性卡片（自动触发流程、自动解密发送、凭证智能识别、自动通知）
查看结算记录
- ✅ 确认显示示例结算记录（定金、进度款）
- ✅ 查看结算状态、金额、时间等信息
启动自动化结算（技术人员视图）
- ✅ 点击"🚀 启动自动化结算"按钮
- ✅ 系统显示权限检查提示
- ✅ 确认弹出启动成功提示
- ✅ 查看控制台日志确认流程执行
验证自动化流程
- ✅ 查看控制台确认以下日志：
- "启动自动化结算流程..."
- "📝 已创建尾款结算记录"
- "📢 正在通知客服跟进尾款..."
- "✅ 客服通知已发送成功"
- ✅ 查看控制台确认以下日志：
上传支付凭证（可选）
- ✅ 点击"📎 上传支付凭证"按钮
- ✅ 选择支付截图文件
预期结果：
- ✅ 所有按钮可正常点击
- ✅ 权限控制正常工作
- ✅ 提示信息清晰明确
- ✅ 控制台日志完整
2. 🖼️ 全景图合成模块测试
测试步骤：
查看功能介绍
- ✅ 确认显示3个功能特性卡片（KR Panel集成、智能空间标注、自动生成链接）
查看合成记录
- ✅ 确认显示示例全景图记录
- ✅ 查看合成状态、空间数量等信息
启动全景图合成
- ✅ 点击"开始合成"按钮
- ✅ 选择多张图片文件（建议命名为"客厅-角度1.jpg"等）
- ✅ 观察上传进度条
- ✅ 等待合成完成提示
验证合成结果
- ✅ 查看新增的合成记录
- ✅ 确认显示合成进度 100%
- ✅ 确认显示"已完成"状态
- ✅ 查看控制台日志
查看全景图库
- ✅ 点击"查看全景图库"按钮
- ✅ 确认显示全景图列表
预期结果：
- ✅ 文件上传流畅
- ✅ 进度显示正常
- ✅ 合成记录正确创建
- ✅ 链接已生成
3. ⭐ 客户评价模块测试
测试步骤：
查看评价表单
- ✅ 确认显示客户评价表单组件
- ✅ 表单包含多维度评分项
查看评价记录
- ✅ 确认显示示例评价记录
- ✅ 显示评分、内容、时间等信息
生成评价链接
- ✅ 点击"🔗 生成评价链接"按钮
- ✅ 确认弹出链接已复制提示
- ✅ 提示中包含链接和有效期信息
验证链接生成
- ✅ 查看控制台日志
- ✅ 确认显示评价令牌
- ✅ 确认显示客服通知
确认评价完成
- ✅ 点击"✅ 确认评价完成"按钮
- ✅ 确认弹出完成提示
预期结果：
- ✅ 评价链接格式正确
- ✅ 包含唯一token
- ✅ 有效期设置为30天
- ✅ 通知发送成功
4. 📋 投诉处理模块测试
测试步骤：
查看功能介绍
- ✅ 确认显示4个功能特性卡片
查看投诉记录
- ✅ 确认显示投诉记录组件
- ✅ 初始状态应为空或显示示例数据
人工创建投诉
- ✅ 点击"📝 人工创建投诉"按钮
- ✅ 在弹出的输入框中输入投诉原因
- ✅ 输入投诉环节
- ✅ 确认创建成功提示
- ✅ 查看新增的投诉记录
验证智能标注
- ✅ 查看创建的投诉记录
- ✅ 确认显示智能标注的核心问题标签
- ✅ 不同关键词应产生不同标签
设置关键词监控
- ✅ 点击"⚙️ 设置关键词监测"按钮
- ✅ 查看当前监控关键词列表
- ✅ 添加新的监控关键词
- ✅ 确认监控激活提示
测试关键词检测
✅ 在浏览器控制台手动触发：
// 假设已在项目详情页 // 在控制台执行 component.onKeywordDetected('客户说不满意，要求退款', '不满意');✅ 查看自动创建的投诉记录
✅ 确认严重程度评估正确
✅ 确认环节识别正确
确认投诉处理完成
- ✅ 点击"✅ 确认投诉处理完成"按钮
- ✅ 如有未处理投诉，应弹出确认提示
预期结果：
- ✅ 投诉创建成功
- ✅ 智能标注准确
- ✅ 关键词监控正常
- ✅ 自动检测工作正常
5. 📊 项目复盘模块测试
测试步骤：
查看复盘模块布局
- ✅ 确认复盘模块位于4个售后模块下方
- ✅ 横向布局，覆盖整个宽度
- ✅ 显示模块标题和副标题
查看Tab导航
- ✅ 确认显示3个Tab：SOP执行数据、经验复盘、优化建议
- ✅ 默认选中"SOP执行数据"
测试SOP执行数据Tab
- ✅ 切换到"SOP执行数据"Tab
- ✅ 查看4个关键指标卡片：
- 需求沟通次数
- 改图次数
- 交付周期
- 客户满意度
- ✅ 查看各阶段执行详情时间线
- ✅ 查看数据图表（柱状图、雷达图）
测试经验复盘Tab
- ✅ 切换到"经验复盘"Tab
- ✅ 查看4个经验卡片：
- 客户需求
- 客户顾虑
- 投诉点
- 项目亮点
- ✅ 查看关键沟通记录时间线
- ✅ 确认内容可滚动查看
测试优化建议Tab
- ✅ 切换到"优化建议"Tab
- ✅ 查看优化建议列表
- ✅ 每个建议包含：
- 优先级标识
- 问题分析
- 优化建议
- 行动计划
- ✅ 查看建议统计数据
测试生成复盘报告
- ✅ 点击"📊 生成复盘报告"按钮
- ✅ 观察按钮loading状态
- ✅ 等待生成完成
- ✅ 查看控制台日志
测试导出报告
- ✅ 生成报告后，"📤 导出报告"按钮应显示
- ✅ 点击导出按钮
- ✅ 查看控制台确认导出流程
预期结果：
- ✅ Tab切换流畅
- ✅ 数据展示完整
- ✅ 图表渲染正常
- ✅ 内容可滚动
- ✅ 报告生成成功
🔍 常见问题排查
问题1：按钮点击无反应
排查步骤：
- 打开浏览器开发者工具（F12）
- 查看Console标签页是否有错误
- 检查Network标签页查看API请求
- 确认Angular应用已正确编译
问题2：数据不显示
排查步骤：
- 检查控制台是否有TypeScript错误
- 确认
initializeAftercareData()方法已执行 在控制台执行：
// 查看组件数据 ng.getComponent(document.querySelector('app-project-detail'))检查数据绑定是否正确
问题3：样式显示异常
排查步骤：
- 确认SCSS文件已正确导入
检查
project-detail.scss中是否包含：@import './project-review-styles.scss'; @import './project-review-experience-suggestions-styles.scss';清除浏览器缓存并刷新
检查CSS是否被其他样式覆盖
问题4：权限控制异常
排查步骤：
- 检查AuthService是否正确注入
在控制台执行：
// 查看当前用户角色 component.isTechnicalView()确认角色判断逻辑
📊 性能测试
加载性能
- ✅ 页面首次加载时间 < 3秒
- ✅ Tab切换响应时间 < 100ms
- ✅ 按钮点击响应时间 < 50ms
内存使用
- ✅ 正常运行内存占用 < 100MB
- ✅ 无明显内存泄漏
- ✅ 长时间运行稳定
🎨 UI/UX 测试
视觉检查
- ✅ 卡片间距均匀
- ✅ 文字清晰可读
- ✅ 图标显示正确
- ✅ 颜色搭配协调
交互检查
- ✅ 按钮hover效果
- ✅ 点击反馈明显
- ✅ Loading状态显示
- ✅ 错误提示友好
响应式检查
- ✅ 在1920x1080分辨率下正常显示
- ✅ 在1366x768分辨率下正常显示
- ✅ 内容可滚动查看
- ✅ 横向布局适应
📝 测试报告模板
测试日期：____年__月__日
测试人员：__________
浏览器：Chrome / Firefox / Edge (选择一个)
版本号：v1.0.0
测试结果：
□ 尾款结算模块 - 通过 / 失败
□ 全景图合成模块 - 通过 / 失败
□ 客户评价模块 - 通过 / 失败
□ 投诉处理模块 - 通过 / 失败
□ 项目复盘模块 - 通过 / 失败
发现的问题：
1. ___________________________
2. ___________________________
3. ___________________________
备注：
_________________________________
🚀 快速验证命令
在浏览器控制台执行以下命令快速验证功能：
// 1. 获取组件实例
const component = ng.getComponent(document.querySelector('app-project-detail'));
// 2. 查看售后数据
console.log('全景图合成记录:', component.panoramicSyntheses);
console.log('结算记录:', component.settlements);
console.log('客户反馈:', component.feedbacks);
console.log('投诉记录:', component.exceptionHistories);
// 3. 测试功能方法
component.initiateAutoSettlement(); // 启动自动结算
component.startPanoramicSynthesis(); // 启动全景图合成
component.generateReviewLink(); // 生成评价链接
component.createComplaintManually(); // 创建投诉
component.generateReviewReport(); // 生成复盘报告
// 4. 查看日志
// 所有操作都会在控制台输出详细日志
✅ 验收标准
功能完整性
- ✅ 所有5个模块可正常访问
- ✅ 所有按钮可正常点击
- ✅ 所有功能正常执行
- ✅ 数据显示完整
用户体验
- ✅ 界面美观专业
- ✅ 操作流程顺畅
- ✅ 提示信息清晰
- ✅ 无明显bug
代码质量
- ✅ 无编译错误
- ✅ 无运行时错误
- ✅ 无控制台警告
- ✅ 代码规范统一
测试完成后，所有功能应能正常运行！ 🎉