# ✅ 测试完成 - 如何使用

## 🎉 好消息！

所有服务已启动并测试通过：

| 服务 | 地址 | 状态 |
|-----|------|------|
| **后端 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 完美工作！**