268 lines
6.1 KiB
Markdown
268 lines
6.1 KiB
Markdown
# ✅ 测试完成 - 如何使用
|
||
|
||
## 🎉 好消息！
|
||
|
||
所有服务已启动并测试通过：
|
||
|
||
| 服务 | 地址 | 状态 |
|
||
|-----|------|------|
|
||
| **后端 API** | http://localhost:8080 | ✅ 运行中 |
|
||
| **前端应用** | http://localhost:5175 | ✅ 运行中 |
|
||
| **健康检查** | http://localhost:8080/health | ✅ 正常 |
|
||
|
||
## 🧪 测试方法（3 种方式）
|
||
|
||
### 方法 1: 独立 HTML 测试页面（最简单⭐）
|
||
|
||
**直接在浏览器打开：**
|
||
|
||
```
|
||
http://localhost:5175/api-test.html
|
||
```
|
||
|
||
**功能：**
|
||
- ✅ 无需登录前端应用
|
||
- ✅ 直接测试所有 API
|
||
- ✅ 实时查看 JSON 响应
|
||
- ✅ 验证 camelCase 字段
|
||
- ✅ 一键完整测试
|
||
|
||
**使用步骤：**
|
||
1. 打开上面的URL
|
||
2. 点击 "🚀 完整测试" 按钮
|
||
3. 观察测试结果和日志
|
||
4. 验证所有字段都是 camelCase
|
||
|
||
### 方法 2: React 应用内测试
|
||
|
||
**访问主应用：**
|
||
|
||
```
|
||
http://localhost:5175
|
||
```
|
||
|
||
**步骤：**
|
||
1. 登录应用（用户名: admin, 密码: admin123）
|
||
2. 访问 http://localhost:5175/api-test (React 组件)
|
||
3. 点击测试按钮
|
||
|
||
### 方法 3: cURL 命令行测试
|
||
|
||
**快速验证：**
|
||
|
||
```bash
|
||
# 1. 健康检查
|
||
curl http://localhost:8080/health
|
||
|
||
# 2. 登录
|
||
curl -X POST http://localhost:8080/api/v1/auth/login \
|
||
-H "Content-Type: application/json" \
|
||
-d '{"username":"admin","password":"admin123"}'
|
||
|
||
# 3. 获取集群列表（需要替换 TOKEN）
|
||
curl http://localhost:8080/api/v1/clusters \
|
||
-H "Authorization: Bearer YOUR_TOKEN"
|
||
```
|
||
|
||
**或运行测试脚本：**
|
||
|
||
```bash
|
||
cd /home/mango/workspace/ocdp-go
|
||
|
||
# API 测试
|
||
./scripts/test-api-camelcase.sh
|
||
|
||
# 前端集成测试
|
||
./scripts/test-frontend-integration.sh
|
||
```
|
||
|
||
## 📋 测试清单
|
||
|
||
### 1. API 响应验证
|
||
|
||
打开 http://localhost:5175/api-test.html 并验证：
|
||
|
||
**登录响应应该包含：**
|
||
- [ ] `accessToken` (不是 access_token)
|
||
- [ ] `refreshToken` (不是 refresh_token)
|
||
- [ ] `userId` (不是 user_id)
|
||
|
||
**集群响应应该包含：**
|
||
- [ ] `createdAt` (不是 created_at)
|
||
- [ ] `updatedAt` (不是 updated_at)
|
||
- [ ] `hasCaData` (不是 has_ca_data)
|
||
- [ ] `hasCertData` (不是 has_cert_data)
|
||
|
||
**创建集群请求应该发送：**
|
||
- [ ] `caData` (不是 ca_data)
|
||
- [ ] `certData` (不是 cert_data)
|
||
- [ ] `keyData` (不是 key_data)
|
||
|
||
### 2. 前端功能验证
|
||
|
||
访问 http://localhost:5175：
|
||
|
||
- [ ] 登录页面可以正常访问
|
||
- [ ] 可以成功登录
|
||
- [ ] 可以看到集群列表
|
||
- [ ] 可以创建新集群
|
||
- [ ] 所有操作无错误
|
||
|
||
## 📸 预期结果示例
|
||
|
||
### 登录响应（camelCase ✅）
|
||
|
||
```json
|
||
{
|
||
"accessToken": "eyJhbGci...",
|
||
"refreshToken": "eyJhbGci...",
|
||
"userId": "e0b632e8-...",
|
||
"username": "admin"
|
||
}
|
||
```
|
||
|
||
### 集群列表响应（camelCase ✅）
|
||
|
||
```json
|
||
[
|
||
{
|
||
"id": "cluster-123",
|
||
"name": "Production Cluster",
|
||
"host": "https://k8s.example.com:6443",
|
||
"hasCaData": true,
|
||
"hasCertData": true,
|
||
"hasKeyData": true,
|
||
"hasToken": false,
|
||
"caData": "••••••••",
|
||
"certData": "••••••••",
|
||
"keyData": "••••••••",
|
||
"createdAt": "2025-11-10T10:00:00Z",
|
||
"updatedAt": "2025-11-10T10:00:00Z"
|
||
}
|
||
]
|
||
```
|
||
|
||
## 🎯 快速测试（推荐）
|
||
|
||
**一行命令测试所有功能：**
|
||
|
||
```bash
|
||
cd /home/mango/workspace/ocdp-go && \
|
||
./scripts/test-api-camelcase.sh && \
|
||
./scripts/test-frontend-integration.sh && \
|
||
echo -e "\n✅ 所有测试通过！\n访问: http://localhost:5175/api-test.html"
|
||
```
|
||
|
||
## 🔧 如果遇到问题
|
||
|
||
### 问题：页面无法打开
|
||
|
||
**检查服务是否运行：**
|
||
|
||
```bash
|
||
# 检查后端
|
||
curl http://localhost:8080/health
|
||
|
||
# 检查前端
|
||
curl http://localhost:5175
|
||
|
||
# 如果没有运行，启动服务：
|
||
# 后端: cd backend && make run-0
|
||
# 前端: cd frontend && npm run dev
|
||
```
|
||
|
||
### 问题：看到 snake_case 字段
|
||
|
||
**这不应该发生！如果看到，请：**
|
||
|
||
1. 检查 Go DTO JSON tags：
|
||
```bash
|
||
grep -r "json:\"ca_data\"" backend/internal/adapter/input/http/dto/
|
||
# 应该没有结果，如果有结果说明没有正确更新
|
||
```
|
||
|
||
2. 检查 OpenAPI 规范：
|
||
```bash
|
||
grep "ca_data:" backend/docs/openapi.yaml
|
||
# 应该没有结果，如果有结果说明规范没有更新
|
||
```
|
||
|
||
3. 重新生成前端代码：
|
||
```bash
|
||
cd frontend && npm run openapi-gen
|
||
```
|
||
|
||
4. 重启服务
|
||
|
||
### 问题：CORS 错误
|
||
|
||
HTML 测试页面直接访问 API 可能遇到 CORS，这是正常的。请：
|
||
|
||
1. 使用 React 应用内的测试页面
|
||
2. 或检查后端是否允许跨域请求
|
||
|
||
## 📚 相关文档
|
||
|
||
| 文档 | 用途 |
|
||
|------|------|
|
||
| [QUICK-TEST.md](./QUICK-TEST.md) | 快速测试指南 |
|
||
| [TEST-GUIDE.md](./TEST-GUIDE.md) | 完整测试指南 |
|
||
| [TEST-RESULTS.md](./TEST-RESULTS.md) | 详细测试结果 |
|
||
| [IMPLEMENTATION-COMPLETE.md](./IMPLEMENTATION-COMPLETE.md) | 实施总结 |
|
||
| [frontend/src/api/README.md](./frontend/src/api/README.md) | API 使用文档 |
|
||
|
||
## 🎊 成功标志
|
||
|
||
当你看到以下结果时，说明一切正常：
|
||
|
||
✅ **HTML 测试页面** - 所有测试通过，显示绿色 ✓
|
||
✅ **JSON 响应** - 所有字段使用 camelCase
|
||
✅ **前端应用** - 无错误，功能正常
|
||
✅ **浏览器控制台** - 无错误信息
|
||
✅ **TypeScript** - 类型提示正常工作
|
||
|
||
---
|
||
|
||
## 🚀 现在就测试！
|
||
|
||
**最简单的方式：**
|
||
|
||
1. 打开浏览器
|
||
2. 访问: **http://localhost:5175/api-test.html**
|
||
3. 点击 **"🚀 完整测试"**
|
||
4. 查看结果！
|
||
|
||
**预期看到：**
|
||
```
|
||
🧪 开始完整测试流程...
|
||
|
||
🔐 开始测试登录...
|
||
✅ 登录成功!
|
||
✓ accessToken 字段存在 (camelCase)
|
||
✓ refreshToken 字段存在 (camelCase)
|
||
✓ userId 字段存在 (camelCase)
|
||
|
||
📋 开始获取集群列表...
|
||
✅ 获取集群列表成功!
|
||
✓ createdAt 字段存在 (camelCase)
|
||
✓ hasCaData 字段存在 (camelCase)
|
||
|
||
🚀 开始创建集群 (使用 camelCase)...
|
||
✅ 创建集群成功!
|
||
✓ hasCaData 字段存在 (camelCase)
|
||
✓ createdAt 字段存在 (camelCase)
|
||
|
||
🎉 完整测试流程完成!
|
||
所有 API 调用成功，camelCase 工作正常！
|
||
```
|
||
|
||
---
|
||
|
||
**当前服务：**
|
||
- 🌐 前端: http://localhost:5175
|
||
- 🔌 后端: http://localhost:8080
|
||
- 🧪 HTML 测试: http://localhost:5175/api-test.html
|
||
|
||
🎉 **测试愉快！camelCase API 完美工作！**
|
||
|