cleverqin · Unizzr · Apr 19, 2026
diff --git a/FRONTEND-TESTING.md b/FRONTEND-TESTING.md
@@ -0,0 +1,367 @@
+# 前端测试指南
+
+## 概述
+
+本指南介绍如何对 Node WebSocket Chatroom 项目的前端进行测试，包括：
+- 消息发送测试
+- 消息接收测试
+- 消息渲染测试
+- 在线列表更新测试
+- 样式展示测试
+
+## 测试环境准备
+
+### 1. 安装依赖
+
+```bash
+npm install
+```
+
+### 2. 启动开发服务器
+
+```bash
+npm run serve
+```
+
+### 3. 启动后端服务器
+
+```bash
+npm run prod
+```
+
+## 手动测试流程
+
+### 测试一：消息发送功能
+
+**测试步骤：**
+1. 打开浏览器访问 http://localhost:8080
+2. 在登录页面输入用户名（如 "TestUser"）
+3. 选择一个头像
+4. 点击"登录"按钮
+5. 在左侧会话列表选择"群聊天室"
+6. 在底部输入框输入消息内容（如 "Hello, World!"）
+7. 点击发送按钮或按回车键
+
+**预期结果：**
+- [ ] 消息立即显示在聊天区域右侧
+- [ ] 消息包含发送者头像和昵称
+- [ ] 消息时间戳正确显示
+- [ ] 输入框清空
+
+**测试用例：**
+| 测试项 | 输入 | 预期结果 | 实际结果 |
+|--------|------|----------|----------|
+| 普通文本 | "Hello World" | 正常发送并显示 | |
+| 空消息 | "" | 不发送 | |
+| 长文本（1000字） | 超长文本 | 正常发送，自动换行 | |
+| 特殊字符 | "!@#$%^&*()" | 正常显示 | |
+| 表情符号 | "😊👍🎉" | 正常显示 | |
+
+---
+
+### 测试二：消息接收功能
+
+**测试步骤：**
+1. 打开两个浏览器窗口（或使用不同浏览器）
+2. 在第一个窗口以 "User1" 登录
+3. 在第二个窗口以 "User2" 登录
+4. 在 User1 的窗口发送消息到群聊天室
+5. 观察 User2 的窗口
+
+**预期结果：**
+- [ ] User2 的聊天区域左侧显示 User1 发送的消息
+- [ ] 消息包含 User1 的头像和昵称
+- [ ] 消息时间戳正确
+- [ ] 如果 User2 不在当前会话，收到消息时应该有提示
+- [ ] 系统通知音播放（如果开启）
+
+**测试用例：**
+| 测试场景 | 操作 | 预期结果 | 实际结果 |
+|----------|------|----------|----------|
+| 同时在线接收 | User1发送，User2在线 | User2实时收到 | |
+| 离线后上线 | User1发送，User2上线后 | User2收到历史消息 | |
+| 不同会话接收 | User1发送到群聊，User2在私聊 | User2收到群聊消息提示 | |
+
+---
+
+### 测试三：消息渲染功能
+
+**测试步骤：**
+1. 登录系统
+2. 发送不同类型的消息
+3. 观察消息的渲染效果
+
+**预期结果：**
+
+#### 文本消息
+- [ ] 文本正常显示
+- [ ] 换行符正确解析
+- [ ] 长文本自动换行
+- [ ] 表情符号正确渲染
+
+#### 图片消息
+- [ ] 图片正确显示
+- [ ] 图片大小自适应
+- [ ] 点击图片可以查看大图（如果有此功能）
+
+#### 时间显示
+- [ ] 3分钟内显示"刚刚"
+- [ ] 3分钟到1小时显示"X分钟前"
+- [ ] 1小时到24小时显示"X小时前"
+- [ ] 1天到3天显示"X天前"
+- [ ] 超过3天显示具体日期
+
+#### 气泡样式
+- [ ] 自己发送的消息气泡在右侧
+- [ ] 他人发送的消息气泡在左侧
+- [ ] 群聊消息显示发送者昵称
+- [ ] 私聊消息不显示昵称（如果设置关闭）
+
+---
+
+### 测试四：在线列表更新
+
+**测试步骤：**
+1. 以 User1 登录
+2. 观察左侧用户列表
+3. 打开新窗口以 User2 登录
+4. 回到 User1 的窗口
+5. 在新窗口中 User2 退出登录
+6. 再次观察 User1 的窗口
+
+**预期结果：**
+- [ ] User1 登录后，列表中只有 User1 和群聊天室
+- [ ] User2 登录后，User1 的列表中实时添加 User2
+- [ ] 系统消息显示 "User2 加入了聊天室"
+- [ ] User2 退出后，User1 的列表中移除 User2
+- [ ] 系统消息显示 "User2 离开了聊天室"
+
+**测试用例：**
+| 操作 | 事件 | 列表变化 | 系统消息 |
+|------|------|----------|----------|
+| 用户登录 | join | 添加用户 | "XXX 加入了聊天室" |
+| 用户退出 | logout | 移除用户 | "XXX 离开了聊天室" |
+| 重复昵称 | loginFail | 无变化 | "登录失败，昵称已存在" |
+
+---
+
+### 测试五：样式展示测试
+
+**测试步骤：**
+1. 在不同浏览器中打开应用
+2. 测试不同屏幕尺寸
+3. 测试深色/浅色主题（如果支持）
+
+**预期结果：**
+
+#### 响应式布局
+- [ ] PC端正常显示三栏布局
+- [ ] 移动端正常显示底部导航
+- [ ] 窗口大小变化时布局自适应
+- [ ] 滚动条样式统一
+
+#### 颜色和样式
+- [ ] 主色调一致
+- [ ] 按钮 hover 效果正常
+- [ ] 输入框聚焦效果正常
+- [ ] 选中状态高亮正确
+
+#### 字体和间距
+- [ ] 字体大小合适
+- [ ] 行间距合适
+- [ ] 内边距外边距一致
+- [ ] 对齐方式正确
+
+---
+
+### 测试六：特殊场景测试
+
+**测试步骤：**
+1. 测试网络波动情况
+2. 测试服务端重启
+3. 测试多标签页登录
+
+**预期结果：**
+
+#### 断线重连
+- [ ] 网络断开时显示断线提示
+- [ ] 网络恢复后自动重连
+- [ ] 重连后保持登录状态
+- [ ] 重连后消息不丢失
+
+#### 多标签页
+- [ ] 同一用户在多个标签页登录
+- [ ] 一个标签页发送消息，其他标签页能收到
+- [ ] 一个标签页退出，其他标签页也退出
+
+---
+
+## 自动化测试建议
+
+### 使用 Cypress 进行端到端测试
+
+```javascript
+// cypress/e2e/chat-app.cy.js
+describe('Chat App E2E Tests', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8080');
+  });
+
+  it('should login successfully', () => {
+    cy.get('.input-text').type('TestUser');
+    cy.get('.form-btn').click();
+    cy.contains('TestUser').should('be.visible');
+  });
+
+  it('should send and receive messages', () => {
+    cy.get('.input-text').type('User1');
+    cy.get('.form-btn').click();
+
+    cy.contains('群聊天室').click();
+    cy.get('.message-input').type('Hello from Cypress');
+    cy.get('.send-btn').click();
+
+    cy.contains('Hello from Cypress').should('be.visible');
+  });
+
+  it('should show online users', () => {
+    cy.get('.input-text').type('OnlineTestUser');
+    cy.get('.form-btn').click();
+
+    cy.contains('群聊天室').should('be.visible');
+    cy.contains('OnlineTestUser').should('be.visible');
+  });
+});
+```
+
+### 使用 Vue Test Utils 进行组件测试
+
+```javascript
+// tests/unit/components/ChatApp.test.js
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import ChatApp from '@/components/ChatApp.vue';
+import { friendlyTime, formatTime } from '@/components/filters';
+
+describe('ChatApp.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(ChatApp);
+  });
+
+  describe('Filters', () => {
+    it('should format time correctly', () => {
+      const timestamp = new Date(2023, 5, 15, 14, 30, 45).getTime();
+      expect(formatTime(timestamp)).toBe('2023.6.15 14:30:45');
+    });
+
+    it('should show friendly time', () => {
+      const now = Date.now();
+      const twoMinutesAgo = now - 2 * 60 * 1000;
+      expect(friendlyTime(twoMinutesAgo)).toBe('刚刚');
+    });
+  });
+
+  describe('Methods', () => {
+    it('should add message to session', () => {
+      const message = {
+        from: { id: '1', name: 'Test' },
+        to: { id: 'group_001', type: 'group' },
+        content: 'Test message',
+        time: Date.now(),
+        type: 'text'
+      };
+
+      wrapper.vm.addSessionMessage(message, 'group_001');
+
+      const messages = wrapper.vm.getMessages('group_001');
+      expect(messages.length).toBe(1);
+      expect(messages[0].content).toBe('Test message');
+    });
+
+    it('should search users correctly', () => {
+      wrapper.setData({
+        users: [
+          { id: '1', name: 'Alice', type: 'user' },
+          { id: '2', name: 'Bob', type: 'user' },
+          { id: '3', name: 'Charlie', type: 'user' }
+        ]
+      });
+
+      const results = wrapper.vm.searchUser('Al');
+      expect(results.length).toBe(1);
+      expect(results[0].name).toBe('Alice');
+    });
+  });
+});
+```
+
+---
+
+## 测试报告模板
+
+### 测试执行日期：____年____月____日
+
+### 测试人员：____________
+
+### 测试环境：
+- 浏览器：
+  - Chrome 版本：
+  - Firefox 版本：
+  - Safari 版本：
+  - Edge 版本：
+- 操作系统：
+- Node.js 版本：
+- npm 版本：
+
+### 测试结果汇总：
+
+| 测试类别 | 用例总数 | 通过 | 失败 | 阻塞 | 通过率 |
+|----------|----------|------|------|------|--------|
+| 消息发送 | | | | | |
+| 消息接收 | | | | | |
+| 消息渲染 | | | | | |
+| 在线列表 | | | | | |
+| 样式展示 | | | | | |
+| 异常场景 | | | | | |
+| **合计** | | | | | |
+
+### 发现的问题：
+
+| 问题编号 | 问题描述 | 严重程度 | 状态 |
+|----------|----------|----------|------|
+| | | 高/中/低 | 待修复/已修复 |
+| | | | |
+
+### 测试结论：
+
+□ 测试通过，可发布
+□ 存在阻塞问题，暂缓发布
+□ 需要进一步测试
+
+---
+
+## 运行命令汇总
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run serve
+
+# 启动后端服务器
+npm run prod
+
+# 运行所有后端测试
+npm run test:all
+
+# 只运行单元测试
+npm run test:quick
+
+# 运行覆盖率测试
+npm run test:coverage
+
+# 运行压力测试
+npm run test:performance
+```