# MediaType Filter 功能测试指南

## 快速测试

### 1. 启动服务

```bash
# 启动后端（Mock 模式）
cd backend
make run-mock

# 启动前端（新终端）
cd frontend
npm run dev
```

### 2. API 测试

#### 测试默认行为（返回所有类型）

```bash
curl "http://localhost:8080/api/v1/registries/harbor-bwgdi-prod/repositories/charts%2Fvllm-serve/artifacts"
```

**预期结果**：返回所有 artifacts（Mock 数据中有 2 个 Helm Charts）

#### 测试 Chart 过滤

```bash
curl "http://localhost:8080/api/v1/registries/harbor-bwgdi-prod/repositories/charts%2Fvllm-serve/artifacts?media_type=chart"
```

**预期结果**：只返回 Helm Charts

#### 测试 Image 过滤

```bash
curl "http://localhost:8080/api/v1/registries/harbor-bwgdi-prod/repositories/library%2Falpine/artifacts?media_type=image"
```

**预期结果**：只返回 Docker/OCI 镜像（Mock 数据中有 2 个 Alpine 镜像）

#### 测试混合过滤

```bash
# 测试获取所有类型
curl "http://localhost:8080/api/v1/registries/harbor-bwgdi-prod/repositories/charts%2Fvllm-serve/artifacts?media_type=all"

# 测试只获取 image（应该返回空，因为这个 repo 只有 charts）
curl "http://localhost:8080/api/v1/registries/harbor-bwgdi-prod/repositories/charts%2Fvllm-serve/artifacts?media_type=image"

# 测试只获取 chart（应该返回数据）
curl "http://localhost:8080/api/v1/registries/harbor-bwgdi-prod/repositories/charts%2Fvllm-serve/artifacts?media_type=chart"
```

### 3. 前端功能测试

#### 浏览器测试流程

1. **打开浏览器**：http://localhost:5173

2. **登录系统**：
   - 用户名：`admin`
   - 密码：`admin123`

3. **导航到 Artifact Registries**：
   - 点击左侧菜单的 "Artifact Registries"

4. **测试类型过滤**：
   - 观察默认过滤器设置为 "Chart" 
   - 点击不同的过滤器按钮：Chart, Image, Other, All
   - 验证列表根据类型正确过滤

5. **测试部署功能**：
   - 展开一个 registry
   - 选择一个 chart repository（如 `charts/vllm-serve`）
   - 点击某个 tag 旁边的 "Launch" 按钮
   - 验证只有 chart 类型显示 Launch 按钮

#### 浏览器控制台验证

打开浏览器开发者工具（F12），在 Console 中查看：

```
[OCI API] Fetching tags for harbor-bwgdi-prod/charts/vllm-serve (mediaType: all)
[RESTful OCI] Got 2 tags for charts/vllm-serve (mediaType: all)
```

### 4. Mock 数据说明

Mock 实现包含以下测试数据：

#### Helm Charts
- `charts/vllm-serve:0.1.0` - ArtifactTypeHelm
- `charts/vllm-serve:0.2.0` - ArtifactTypeHelm
- `charts/nginx:1.0.0` - ArtifactTypeHelm
- `charts/redis:6.2.0` - ArtifactTypeHelm

#### Docker Images
- `library/alpine:3.18` - ArtifactTypeDocker
- `library/alpine:latest` - ArtifactTypeDocker

### 5. 验证检查点

#### ✅ 后端验证

- [ ] API 接受 `media_type` 查询参数
- [ ] 默认行为（无参数）返回所有类型
- [ ] `media_type=chart` 只返回 Helm Charts
- [ ] `media_type=image` 只返回容器镜像
- [ ] `media_type=other` 只返回未知类型
- [ ] `media_type=all` 返回所有类型

#### ✅ 前端验证

- [ ] 前端调用 API 时传递 `media_type` 参数
- [ ] 默认获取所有类型（支持客户端过滤切换）
- [ ] 浏览器界面显示正确的过滤结果
- [ ] Launch Modal 只处理 chart 类型
- [ ] 无需重新请求即可切换过滤器

### 6. 性能测试

#### 测试缓存机制

1. 打开浏览器开发者工具的 Network 标签
2. 展开一个 registry，观察网络请求
3. 切换过滤器（Chart → Image → All）
4. **验证**：切换过滤器时不应该有新的网络请求（使用缓存）

#### 测试并发加载

1. 清除缓存并刷新页面
2. 展开一个 registry
3. **观察**：repositories 的 tags 按批次加载（每批 3 个并发）
4. **验证**：Console 显示加载进度

### 7. 预期行为

#### 场景 1：查看 Helm Chart Repository

```
Request:  GET /api/v1/registries/harbor-prod/repositories/charts%2Fvllm-serve/artifacts?media_type=chart
Response: [
  {
    "repositoryName": "charts/vllm-serve",
    "tag": "0.1.0",
    "type": "helm",
    "size": 12345678
  },
  {
    "repositoryName": "charts/vllm-serve",
    "tag": "0.2.0",
    "type": "helm",
    "size": 13456789
  }
]
```

#### 场景 2：查看 Docker Image Repository

```
Request:  GET /api/v1/registries/harbor-prod/repositories/library%2Falpine/artifacts?media_type=image
Response: [
  {
    "repositoryName": "library/alpine",
    "tag": "3.18",
    "type": "docker",
    "size": 2345678
  },
  {
    "repositoryName": "library/alpine",
    "tag": "latest",
    "type": "docker",
    "size": 2456789
  }
]
```

#### 场景 3：错误的过滤器（应该过滤掉所有）

```
Request:  GET /api/v1/registries/harbor-prod/repositories/charts%2Fvllm-serve/artifacts?media_type=image
Response: []  # 空数组，因为这个 repo 只有 charts
```

## 故障排查

### 问题 1：后端返回所有类型而不是过滤后的

**检查**：
```bash
# 验证参数是否正确传递
curl -v "http://localhost:8080/api/v1/registries/harbor-prod/repositories/charts%2Fvllm-serve/artifacts?media_type=chart" | jq
```

**解决方案**：检查 `artifact_handler.go` 中的参数解析

### 问题 2：前端过滤器不工作

**检查**：
- 打开浏览器控制台查看错误
- 检查网络请求是否包含 `media_type` 参数
- 验证 `getTags()` 函数调用是否正确

### 问题 3：类型识别错误

**检查**：
- 查看 `entity/artifact.go` 中的 `SetType()` 方法
- 验证 mediaType 值是否匹配识别规则
- 添加日志输出 artifact 的 MediaType 值

## 完成标志

当以下所有测试通过时，功能实现完成：

- ✅ 后端 API 接受并正确处理 `media_type` 参数
- ✅ 不同类型的 artifacts 被正确过滤
- ✅ 前端可以成功调用带参数的 API
- ✅ 前端界面正确显示过滤结果
- ✅ 部署功能只处理 chart 类型
- ✅ 缓存机制正常工作
- ✅ 无 linter 错误
- ✅ 向后兼容（不带参数的请求正常工作）

