assistant-storefront/WIDGET_TESTS_GUIDE.md

# /widget_tests 页面使用指南

## 📋 功能说明

测试页面用于模拟 Chatwoot Widget 的用户登录/退出流程。

## 🔄 新的行为逻辑

### 1. 页面初始加载（游客模式）

**无论 cookie 中是否有 token，都以游客模式启动：**
- ✅ 不清除任何数据
- ✅ 不设置 userIdentifier
- ✅ 保留现有会话

**原因：** 让用户通过手动点击登录按钮来测试登录流程。

### 2. 点击"模拟用户登录"（不刷新页面）

**执行步骤：**
1. 设置 token cookie
2. 调用 `window.$chatwoot.reset()` 清除之前的聊天内容
3. 调用 `window.$chatwoot.setUser()` 设置用户信息
4. ✅ **不刷新页面**

**优点：**
- 用户体验更好，无页面闪烁
- 切换快速

**注意：**
- SDK 仍然以游客模式初始化（没有 userIdentifier）
- 但通过 `setUser()` 设置了用户身份

### 3. 点击"用户退出"（刷新页面）

**执行步骤：**
1. 删除 token cookie
2. 调用 `window.$chatwoot.reset()` 清除所有数据
3. 清除 localStorage
4. ✅ **刷新页面（2秒倒计时）**

**原因：**
- 确保完全清除用户状态
- 让 SDK 重新以游客模式初始化

## 🎯 完整流程示例

### 场景 1：游客 → 登录 → 退出

```
1. 访问页面
   → 游客模式启动
   → 可以发送游客消息

2. 点击"模拟用户登录"
   → reset() 清除聊天
   → setUser() 设置用户 211845
   → 不刷新页面
   → 可以发送已登录用户消息

3. 点击"用户退出"
   → reset() 清除数据
   → 刷新页面
   → 回到游客模式
```

### 场景 2：刷新页面（有 token）

```
1. 已登录状态（token 存在）
2. 刷新页面
3. → 仍然以游客模式启动
4. → 需要重新点击登录按钮
```

**重要：** 页面加载时不会自动检查 token 并设置用户，必须手动点击登录按钮。

## 🔍 关键代码

### 登录函数（不刷新）

```javascript
function simulateLogin() {
  // 1. 设置 token
  setCookie('token', TEST_TOKEN);

  // 2. 清除之前的聊天
  window.$chatwoot.reset();

  // 3. 设置用户信息
  setTimeout(() => {
    window.$chatwoot.setUser('211845', {
      identifier_hash: userHash,
      email: '211845@example.com',
      name: '测试用户 211845',
      custom_attributes: {
        jwt_token: token,
        login_status: 'logged_in'
      }
    });
  }, 500);
}
```

### 退出函数（刷新页面）

```javascript
function simulateLogout() {
  // 1. 删除 token
  deleteCookie('token');

  // 2. 清除数据
  window.$chatwoot.reset();

  // 3. 清除 localStorage

  // 4. 刷新页面（2秒倒计时）
  location.reload();
}
```

## 🎨 界面说明

### 状态卡片

- **游客模式**：黄色边框
- **已登录**：绿色边框

显示内容：
- User ID
- Token 状态
- 登录状态

### 操作按钮

- **🔐 模拟用户登录**：设置用户并清除聊天
- **🚪 用户退出**：清除数据并刷新页面
- **🔄 刷新页面**：手动刷新
- **💬 打开聊天**：打开 Widget 聊天窗口
- **🗑️ 清除所有数据**：完全重置并刷新页面

### 日志输出

实时显示所有操作日志，包括：
- SDK 加载状态
- Token 设置/删除
- 用户信息设置
- 会话清除操作

## ⚠️ 注意事项

1. **页面加载不自动登录**：即使有 token，也需要手动点击登录按钮
2. **登录不刷新页面**：使用 `reset()` + `setUser()` 实现
3. **退出会刷新页面**：确保完全清除状态
4. **会话数据**：`reset()` 会清除 `cw_conversation` cookie，退出后会创建新会话

## 🧪 测试建议

### 测试 1：游客模式

1. 访问页面
2. 发送一条消息
3. 验证：消息以游客身份发送

### 测试 2：登录流程

1. 点击"模拟用户登录"
2. 观察日志：reset() → setUser()
3. 发送一条消息
4. 验证：消息以用户 211845 身份发送

### 测试 3：退出流程

1. 在已登录状态
2. 点击"用户退出"
3. 观察倒计时和刷新
4. 验证：回到游客模式

### 测试 4：会话隔离

1. 游客模式发送消息
2. 登录（reset 清除）
3. 发送消息
4. 退出（刷新）
5. 验证：之前的消息已被清除

## 📊 与之前实现的对比

| 操作 | 之前的行为 | 现在的行为 |
|------|----------|----------|
| 页面加载（有 token） | 自动设置 userIdentifier | 游客模式，不做处理 |
| 点击登录 | 刷新页面（2秒倒计时） | reset() + setUser()（不刷新） |
| 点击退出 | reset()（不刷新） | reset() + 刷新页面（2秒倒计时） |

## 🎯 设计理念

**新实现的目标：**
- 更好的用户体验（登录不刷新）
- 更清晰的状态管理（退出刷新确保清理）
- 手动控制登录流程（便于测试）