339 lines
7.4 KiB
Markdown
339 lines
7.4 KiB
Markdown
# 崩溃修复测试指南
|
||
|
||
> 测试时间：2025-10-14
|
||
> 测试范围：SignInIllustration.js + SignUpIllustration.js
|
||
> 服务器地址：http://localhost:3000
|
||
|
||
---
|
||
|
||
## 🎯 测试目标
|
||
|
||
验证以下修复是否有效：
|
||
- ✅ 响应对象崩溃（6处）
|
||
- ✅ 组件卸载后 setState（6处）
|
||
- ✅ 定时器内存泄漏（2处）
|
||
|
||
---
|
||
|
||
## 📋 测试清单
|
||
|
||
### ✅ 关键测试（必做）
|
||
|
||
#### 1. **网络异常测试** - 验证响应对象修复
|
||
|
||
**登录页面 - 发送验证码**
|
||
```
|
||
测试步骤：
|
||
1. 打开 http://localhost:3000/auth/sign-in
|
||
2. 切换到"验证码登录"模式
|
||
3. 输入手机号：13800138000
|
||
4. 打开浏览器开发者工具 (F12) → Network 标签
|
||
5. 点击 Offline 模拟断网
|
||
6. 点击"发送验证码"按钮
|
||
|
||
预期结果：
|
||
✅ 显示错误提示："发送验证码失败 - 网络请求失败，请检查网络连接"
|
||
✅ 页面不崩溃
|
||
✅ 无 JavaScript 错误
|
||
|
||
修复前：
|
||
❌ 页面白屏崩溃
|
||
❌ Console 报错：Cannot read property 'json' of null
|
||
```
|
||
|
||
**登录页面 - 微信登录**
|
||
```
|
||
测试步骤：
|
||
1. 在登录页面，保持断网状态
|
||
2. 点击"扫码登录"按钮
|
||
|
||
预期结果：
|
||
✅ 显示错误提示："获取微信授权失败 - 网络请求失败，请检查网络连接"
|
||
✅ 页面不崩溃
|
||
✅ 无 JavaScript 错误
|
||
```
|
||
|
||
**注册页面 - 发送验证码**
|
||
```
|
||
测试步骤：
|
||
1. 打开 http://localhost:3000/auth/sign-up
|
||
2. 切换到"验证码注册"模式
|
||
3. 输入手机号：13800138000
|
||
4. 保持断网状态
|
||
5. 点击"发送验证码"按钮
|
||
|
||
预期结果：
|
||
✅ 显示错误提示："发送失败 - 网络请求失败..."
|
||
✅ 页面不崩溃
|
||
```
|
||
|
||
---
|
||
|
||
#### 2. **组件卸载测试** - 验证内存泄漏修复
|
||
|
||
**倒计时中离开页面**
|
||
```
|
||
测试步骤：
|
||
1. 恢复网络连接
|
||
2. 在登录页面输入手机号并发送验证码
|
||
3. 等待倒计时开始（60秒倒计时）
|
||
4. 立即点击浏览器后退按钮或切换到其他页面
|
||
5. 打开 Console 查看是否有警告
|
||
|
||
预期结果：
|
||
✅ 无警告："Can't perform a React state update on an unmounted component"
|
||
✅ 倒计时定时器正确清理
|
||
✅ 无内存泄漏
|
||
|
||
修复前：
|
||
❌ Console 警告：Memory leak warning
|
||
❌ setState 在组件卸载后仍被调用
|
||
```
|
||
|
||
**请求进行中离开页面**
|
||
```
|
||
测试步骤：
|
||
1. 在注册页面填写完整信息
|
||
2. 点击"注册"按钮
|
||
3. 在请求响应前（loading 状态）快速刷新页面或关闭标签页
|
||
4. 打开新标签页查看 Console
|
||
|
||
预期结果：
|
||
✅ 无崩溃
|
||
✅ 无警告信息
|
||
✅ 请求被正确取消或忽略
|
||
```
|
||
|
||
**注册成功跳转前离开**
|
||
```
|
||
测试步骤：
|
||
1. 完成注册提交
|
||
2. 在显示"注册成功"提示后
|
||
3. 立即关闭标签页（不等待2秒自动跳转）
|
||
|
||
预期结果：
|
||
✅ 无警告
|
||
✅ navigate 不会在组件卸载后执行
|
||
```
|
||
|
||
---
|
||
|
||
#### 3. **边界情况测试** - 验证数据完整性检查
|
||
|
||
**后端返回空响应**
|
||
```
|
||
测试步骤（需要模拟后端）：
|
||
1. 使用 Chrome DevTools → Network → 右键请求 → Edit and Resend
|
||
2. 修改响应为空对象 {}
|
||
3. 观察页面反应
|
||
|
||
预期结果：
|
||
✅ 显示错误："服务器响应为空"
|
||
✅ 不会尝试访问 undefined 属性
|
||
✅ 页面不崩溃
|
||
```
|
||
|
||
**后端返回 500 错误**
|
||
```
|
||
测试步骤：
|
||
1. 在登录页面点击"扫码登录"
|
||
2. 如果后端返回 500 错误
|
||
|
||
预期结果：
|
||
✅ 显示错误："获取二维码失败：HTTP 500"
|
||
✅ 页面不崩溃
|
||
```
|
||
|
||
---
|
||
|
||
### 🧪 进阶测试（推荐）
|
||
|
||
#### 4. **弱网环境测试**
|
||
|
||
**慢速网络模拟**
|
||
```
|
||
测试步骤：
|
||
1. Chrome DevTools → Network → Throttling → Slow 3G
|
||
2. 尝试发送验证码
|
||
3. 等待 10 秒（超时时间）
|
||
|
||
预期结果：
|
||
✅ 10秒后显示超时错误
|
||
✅ 不会无限等待
|
||
✅ 用户可以重试
|
||
```
|
||
|
||
**丢包模拟**
|
||
```
|
||
测试步骤：
|
||
1. 使用 Chrome DevTools 模拟丢包
|
||
2. 连续点击"发送验证码"多次
|
||
|
||
预期结果：
|
||
✅ 每次请求都有适当的错误提示
|
||
✅ 不会因为并发请求而崩溃
|
||
✅ 按钮在请求期间正确禁用
|
||
```
|
||
|
||
---
|
||
|
||
#### 5. **定时器清理测试**
|
||
|
||
**倒计时清理验证**
|
||
```
|
||
测试步骤：
|
||
1. 在登录页面发送验证码
|
||
2. 等待倒计时到 50 秒
|
||
3. 快速切换到注册页面
|
||
4. 再切换回登录页面
|
||
5. 观察倒计时是否重置
|
||
|
||
预期结果：
|
||
✅ 定时器在页面切换时正确清理
|
||
✅ 返回登录页面时倒计时重新开始（如果再次发送）
|
||
✅ 没有多个定时器同时运行
|
||
```
|
||
|
||
---
|
||
|
||
#### 6. **并发请求测试**
|
||
|
||
**快速连续点击**
|
||
```
|
||
测试步骤：
|
||
1. 在登录页面输入手机号
|
||
2. 快速连续点击"发送验证码"按钮 5 次
|
||
|
||
预期结果：
|
||
✅ 只发送一次请求（按钮在请求期间禁用）
|
||
✅ 不会因为并发而崩溃
|
||
✅ 正确显示 loading 状态
|
||
```
|
||
|
||
---
|
||
|
||
## 🔍 监控指标
|
||
|
||
### Console 检查清单
|
||
|
||
在测试过程中，打开 Console (F12) 监控以下内容：
|
||
|
||
```
|
||
✅ 无红色错误（Error）
|
||
✅ 无内存泄漏警告（Memory leak warning）
|
||
✅ 无 setState 警告（Can't perform a React state update...）
|
||
✅ 无 undefined 访问错误（Cannot read property of undefined）
|
||
```
|
||
|
||
### Network 检查清单
|
||
|
||
打开 Network 标签监控：
|
||
|
||
```
|
||
✅ 请求超时时间：10秒
|
||
✅ 失败请求有正确的错误处理
|
||
✅ 没有重复的请求
|
||
✅ 请求被正确取消（如果页面卸载）
|
||
```
|
||
|
||
### Performance 检查清单
|
||
|
||
打开 Performance 标签（可选）：
|
||
|
||
```
|
||
✅ 无内存泄漏（Memory 不会持续增长）
|
||
✅ 定时器正确清理（Timer count 正确）
|
||
✅ EventListener 正确清理
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 测试记录表
|
||
|
||
请在测试时填写以下表格：
|
||
|
||
| 测试项 | 状态 | 问题描述 | 截图 |
|
||
|--------|------|---------|------|
|
||
| 登录页 - 断网发送验证码 | ⬜ 通过 / ⬜ 失败 | | |
|
||
| 登录页 - 断网微信登录 | ⬜ 通过 / ⬜ 失败 | | |
|
||
| 注册页 - 断网发送验证码 | ⬜ 通过 / ⬜ 失败 | | |
|
||
| 倒计时中离开页面 | ⬜ 通过 / ⬜ 失败 | | |
|
||
| 请求进行中离开页面 | ⬜ 通过 / ⬜ 失败 | | |
|
||
| 注册成功跳转前离开 | ⬜ 通过 / ⬜ 失败 | | |
|
||
| 后端返回空响应 | ⬜ 通过 / ⬜ 失败 | | |
|
||
| 慢速网络超时 | ⬜ 通过 / ⬜ 失败 | | |
|
||
| 定时器清理 | ⬜ 通过 / ⬜ 失败 | | |
|
||
| 并发请求 | ⬜ 通过 / ⬜ 失败 | | |
|
||
|
||
---
|
||
|
||
## 🐛 如何报告问题
|
||
|
||
如果发现问题，请提供：
|
||
|
||
1. **测试场景**：具体的测试步骤
|
||
2. **预期结果**：应该发生什么
|
||
3. **实际结果**：实际发生了什么
|
||
4. **Console 错误**：完整的错误信息
|
||
5. **截图/录屏**：问题的视觉证明
|
||
6. **环境信息**：
|
||
- 浏览器版本
|
||
- 操作系统
|
||
- 网络状态
|
||
|
||
---
|
||
|
||
## ✅ 测试完成检查
|
||
|
||
测试完成后，确认以下内容：
|
||
|
||
```
|
||
□ 所有关键测试通过
|
||
□ Console 无错误
|
||
□ Network 请求正常
|
||
□ 无内存泄漏警告
|
||
□ 用户体验流畅
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 快速测试命令
|
||
|
||
```bash
|
||
# 1. 确认服务器运行
|
||
curl http://localhost:3000
|
||
|
||
# 2. 打开浏览器测试
|
||
open http://localhost:3000/auth/sign-in
|
||
|
||
# 3. 查看编译日志
|
||
tail -f /tmp/react-build.log
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 测试页面链接
|
||
|
||
- **登录页面**: http://localhost:3000/auth/sign-in
|
||
- **注册页面**: http://localhost:3000/auth/sign-up
|
||
- **首页**: http://localhost:3000/home
|
||
|
||
---
|
||
|
||
## 🔧 开发者工具快捷键
|
||
|
||
```
|
||
F12 - 打开开发者工具
|
||
Ctrl/Cmd+R - 刷新页面
|
||
Ctrl/Cmd+Shift+R - 强制刷新（清除缓存）
|
||
Ctrl/Cmd+Shift+C - 元素选择器
|
||
```
|
||
|
||
---
|
||
|
||
**测试时间**：2025-10-14
|
||
**预计测试时长**：15-30 分钟
|
||
**建议测试人员**：开发者 + QA
|
||
|
||
祝测试顺利！如发现问题请及时反馈。
|