# 🚀 快速测试指南

## ✅ 当前状态

- ✅ **后端服务**: http://localhost:8080 (运行中)
- ✅ **前端服务**: http://localhost:5175 (运行中)
- ✅ **API 通信**: camelCase 正常工作
- ✅ **测试通过**: 所有 API 测试通过

## 📝 测试结果

### 后端 API 测试

| 测试项 | 状态 | 说明 |
|-------|------|------|
| 健康检查 | ✅ | `/health` 返回 healthy |
| 登录 API | ✅ | `accessToken` (camelCase) ✓ |
| 获取集群 | ✅ | `createdAt`, `hasCaData` (camelCase) ✓ |
| 创建集群 | ✅ | 请求和响应都是 camelCase ✓ |

### 前端服务

| 项目 | URL | 状态 |
|-----|-----|------|
| 主应用 | http://localhost:5175 | ✅ 可访问 |
| API 测试页面 | http://localhost:5175/api-test | ⚠️ 需要在浏览器中访问 |

## 🧪 测试方法

### 方法 1: 浏览器测试（推荐）

1. **打开主应用**
   ```
   http://localhost:5175
   ```
   - 查看登录页面
   - 测试认证功能

2. **打开 API 测试页面**
   ```
   http://localhost:5175/api-test
   ```
   - 点击 "🚀 完整测试" 按钮
   - 观察所有 API 调用是否成功
   - 验证 camelCase 字段

### 方法 2: cURL 测试（快速验证）

```bash
# 1. 健康检查
curl http://localhost:8080/health

# 2. 登录（获取 Token）
curl -X POST http://localhost:8080/api/v1/auth/login \
  -H "Content-Type: application/json" \
  -d '{"username":"admin","password":"admin123"}'

# 3. 创建集群（使用 camelCase）
TOKEN="你的token"
curl -X POST http://localhost:8080/api/v1/clusters \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $TOKEN" \
  -d '{
    "name": "test-cluster",
    "host": "https://k8s.example.com:6443",
    "caData": "LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t",
    "certData": "LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t",
    "keyData": "LS0tLS1CRUdJTiBSU0EgUFJJVkFURSBLRVkt"
  }'
```

### 方法 3: 自动化测试脚本

```bash
# 运行完整测试
cd /home/mango/workspace/ocdp-go
./scripts/test-api-camelcase.sh

# 运行前端集成测试
./scripts/test-frontend-integration.sh
```

## 📖 前端 API 使用示例

### 在浏览器控制台测试

打开 http://localhost:5175，按 F12 打开控制台，运行：

```javascript
// 1. 导入 API 函数（如果已经在页面中加载）
// 或者在组件中使用

// 2. 登录示例
const response = await fetch('http://localhost:8080/api/v1/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    username: 'admin',
    password: 'admin123'
  })
});

const data = await response.json();
console.log('登录响应 (camelCase):', data);
// 应该看到: { accessToken: "...", refreshToken: "...", userId: "..." }

// 3. 获取集群列表
const token = data.accessToken;
const clustersResponse = await fetch('http://localhost:8080/api/v1/clusters', {
  headers: { 'Authorization': `Bearer ${token}` }
});

const clusters = await clustersResponse.json();
console.log('集群列表 (camelCase):', clusters);
// 应该看到 camelCase 字段: createdAt, hasCaData, etc.
```

## ✨ camelCase 验证清单

验证以下字段都是 camelCase 格式：

### Auth API
- [ ] `accessToken`
- [ ] `refreshToken`
- [ ] `userId`

### Cluster API
- [ ] `caData`
- [ ] `certData`
- [ ] `keyData`
- [ ] `hasCaData`
- [ ] `hasCertData`
- [ ] `hasKeyData`
- [ ] `hasToken`
- [ ] `createdAt`
- [ ] `updatedAt`

### Registry API  
- [ ] `registryId`
- [ ] `hasPassword`
- [ ] `createdAt`
- [ ] `updatedAt`

## 🎯 预期结果

### API 响应示例（camelCase ✅）

**登录响应：**
```json
{
  "accessToken": "eyJhbGci...",
  "refreshToken": "eyJhbGci...",
  "userId": "e0b632e8-...",
  "username": "admin"
}
```

**集群响应：**
```json
{
  "id": "ed37e2b2-...",
  "name": "test-cluster",
  "host": "https://k8s.example.com:6443",
  "hasCaData": true,
  "hasCertData": true,
  "hasKeyData": true,
  "hasToken": false,
  "caData": "••••••••",
  "certData": "••••••••",
  "keyData": "••••••••",
  "createdAt": "2025-11-10T10:03:04Z",
  "updatedAt": "2025-11-10T10:03:04Z"
}
```

## 🔧 故障排查

### 问题：前端无法连接后端

**检查：**
```bash
# 检查后端是否运行
curl http://localhost:8080/health

# 如果没有运行
cd backend
make run-0
```

### 问题：前端服务未启动

**检查：**
```bash
# 检查前端是否运行
curl http://localhost:5175

# 如果没有运行
cd frontend
npm run dev
```

### 问题：API 返回 401 Unauthorized

**原因**: Token 过期或未设置

**解决**:
1. 重新登录获取新 Token
2. 确保 Authorization header 正确设置

### 问题：看到 snake_case 而不是 camelCase

**检查**:
1. 确认 Go DTO JSON tags 已更新
2. 确认 OpenAPI 规范已更新
3. 确认前端代码已重新生成：`npm run openapi-gen`
4. 重启后端和前端服务

## 📚 相关文档

- **完整文档**: [IMPLEMENTATION-COMPLETE.md](./IMPLEMENTATION-COMPLETE.md)
- **测试指南**: [TEST-GUIDE.md](./TEST-GUIDE.md)
- **测试结果**: [TEST-RESULTS.md](./TEST-RESULTS.md)
- **API 文档**: [frontend/src/api/README.md](./frontend/src/api/README.md)

## 🎊 成功标志

当你看到以下内容时，说明一切正常：

✅ 后端返回 JSON 使用 camelCase  
✅ 前端可以正常解析响应  
✅ 所有 API 调用成功  
✅ TypeScript 类型提示正常  
✅ 浏览器控制台无错误  

---

**当前服务地址：**
- 🌐 前端: http://localhost:5175
- 🔌 后端: http://localhost:8080
- 🧪 测试: http://localhost:5175/api-test

**快速测试命令：**
```bash
# 一键运行所有测试
cd /home/mango/workspace/ocdp-go
./scripts/test-frontend-integration.sh
```

🎉 **测试成功！camelCase API 完全正常工作！**