whale-town-front/tests/auth/README.md

# 认证UI测试

这个文件夹包含了登录和注册界面的UI响应测试，具有美观优雅的反馈系统。

## 文件说明

- `auth_ui_test.tscn` - 测试场景文件
- `auth_ui_test.gd` - 测试脚本
- `README.md` - 本说明文件

## 如何运行测试

### 方法1：在Godot编辑器中运行
1. 在Godot编辑器中打开 `tests/auth/auth_ui_test.tscn` 文件
2. 点击编辑器右上角的"播放场景"按钮（或按F6键）
3. 如果仍然跳转到主场景，请尝试以下步骤：
   - 确保当前打开的是测试场景文件
   - 在场景面板中右键点击根节点，选择"Change Scene"
   - 或者在项目设置中临时更改主场景为测试场景

### 方法2：通过代码运行
在任何脚本中添加以下代码来切换到测试场景：
```gdscript
get_tree().change_scene_to_file("res://tests/auth/auth_ui_test.tscn")
```

## 界面布局

### 左侧：认证界面
- 完整的登录和注册界面
- 实时表单验证
- Toast消息显示
- 字段错误提示

### 右侧：测试控制面板
#### 🧪 UI响应测试标题
#### 📋 测试反馈面板
- **智能反馈系统**：实时显示测试执行状态
- **颜色编码**：
  - 🔵 蓝色：信息提示
  - 🟢 绿色：成功响应
  - 🔴 红色：错误响应
- **详细信息**：
  - 测试名称和类型
  - HTTP状态码
  - 响应消息和错误代码
  - 预期的UI反馈效果
- **自动滚动**：新消息自动滚动到可见区域

#### 🎯 测试用例按钮
16个精美设计的测试按钮，按功能分组：

## 测试功能

### 登录测试（4个）
- ✅ **登录成功**（状态码200）
  - 预期：绿色Toast "登录成功！正在进入鲸鱼镇..."，跳转到主场景
- ❌ **用户名或密码错误**（状态码401）
  - 预期：红色Toast "用户名或密码错误，请检查后重试"
- ❌ **用户不存在**（状态码404）
  - 预期：红色Toast "用户不存在，请先注册"
- ❌ **参数错误**（状态码400）
  - 预期：红色Toast，根据具体错误显示

### 发送验证码测试（5个）
- ✅ **发送成功**（状态码200）
  - 预期：绿色Toast "验证码已发送到您的邮箱"
- ❌ **邮箱格式错误**（状态码400）
  - 预期：红色Toast "请输入有效的邮箱地址"
- ❌ **请求过频**（状态码429）
  - 预期：红色Toast "请求过于频繁，请稍后再试"
- ❌ **服务器错误**（状态码500）
  - 预期：红色Toast "服务器繁忙，请稍后再试"
- ❌ **网络错误**（状态码0）
  - 预期：红色Toast "网络连接失败，请检查网络连接"

### 邮箱验证测试（3个）
- ✅ **验证成功**（状态码200）
  - 预期：绿色Toast "邮箱验证成功，正在注册..."
- ❌ **验证码错误**（状态码400）
  - 预期：红色Toast "验证码错误或已过期"
- ❌ **验证码不存在**（状态码404）
  - 预期：红色Toast "请先获取验证码"

### 注册测试（6个）
- ✅ **注册成功**（状态码201）
  - 预期：绿色Toast "注册成功！欢迎加入鲸鱼镇"，切换到登录界面
- ❌ **参数错误**（状态码400）
  - 预期：红色Toast，根据具体错误显示
- ❌ **缺少验证码**（状态码400）
  - 预期：红色Toast "请先获取并输入邮箱验证码"
- ❌ **用户已存在**（状态码409）
  - 预期：红色Toast "用户名或邮箱已被使用，请换一个"
- ❌ **请求过频**（状态码429）
  - 预期：红色Toast "注册请求过于频繁，请稍后再试"
- ❌ **服务器错误**（状态码500）
  - 预期：红色Toast "注册失败，请稍后再试"

## 测试步骤

1. **启动测试场景**
   - 运行测试场景后，右侧反馈面板会显示欢迎信息和使用说明

2. **准备测试数据**
   - 在左侧认证界面切换到注册界面
   - 填写测试数据：
     - 用户名：testuser
     - 邮箱：test@example.com
     - 密码：password123
     - 确认密码：password123
     - 验证码：123456

3. **执行测试**
   - 点击右侧对应的测试按钮
   - 观察反馈面板中的详细信息：
     - 🚀 测试开始提示
     - 📡 请求类型和状态码
     - ⚡ HTTP响应模拟
     - 🎯 预期UI反馈说明
     - ✅/❌ 测试完成状态

4. **观察UI反馈**
   - 左侧界面的实际反馈效果
   - Toast消息的颜色和内容
   - 字段错误提示的显示
   - 按钮状态的变化

## 反馈系统特色

### 🎨 美观设计
- 使用Emoji图标增强视觉效果
- 颜色编码区分不同状态
- 圆角边框和阴影效果
- 按钮分组和分隔符

### 📊 详细分析
- 实时显示测试执行过程
- 预期vs实际效果对比
- HTTP响应详细解析
- 错误代码和消息说明

### 🔄 交互体验
- 自动滚动到最新消息
- 按钮悬停效果
- 平滑的颜色过渡
- 响应式布局

## 注意事项

- 测试场景会自动断开`login_success`信号，避免跳转到主场景
- 按ESC键可以优雅退出测试（显示退出提示）
- 所有测试都是模拟的，不会发送真实的网络请求
- 反馈面板会保留测试历史，便于对比分析
- 测试按钮按功能分组，每组之间有分隔符

## 预期行为验证

这个测试系统不仅模拟后端响应，还会告诉你每种情况下应该看到什么UI反馈，帮助你验证：

1. **Toast消息系统**是否正常工作
2. **字段验证错误**是否正确显示
3. **按钮状态管理**是否符合预期
4. **用户体验流程**是否顺畅

通过对比预期效果和实际效果，可以快速发现UI反馈系统中的问题并进行修复。