Skip to content

TEST_REPORT_v0.3.0_M_N.md

Latest commit

 

History

History
388 lines (275 loc) · 8.74 KB

TEST_REPORT_v0.3.0_M_N.md

File metadata and controls

388 lines (275 loc) · 8.74 KB
Raw

测试报告 — v0.3.0 任务 M & N

测试时间: 2026-05-25
测试人员: DeepSeek V4 Pro
测试环境: macOS, Node.js 22.22.3

测试概览

任务 状态 测试项 通过 失败
M: 双语模式 ✅ 6 6 0
N: 日志刷新 ✅ 5 5 0
回归测试 ✅ 118 118 0

任务 M：双语模式测试

1. 语言切换器存在性 ✅

测试方法:

curl -s http://127.0.0.1:3457/web | grep -c "lang-switcher"

结果: 找到语言切换器 HTML 结构

验证点:

  • ✅ 右上角有 English/中文 按钮
  • ✅ 按钮有 onclick="switchLang('en')" 和 onclick="switchLang('zh')" 事件
  • ✅ 按钮有 aria-label 无障碍标签

2. 双语文本标记 ✅

测试方法:

curl -s http://127.0.0.1:3457/web | grep -c "data-lang"

结果: 51 个 data-lang 标记

验证点:

  • ✅ 所有静态文本都有 data-lang="en" 和 data-lang="zh" 双份
  • ✅ 包括标题、按钮、表头、状态信息等

3. CSS 显示规则 ✅

测试方法: 检查 CSS 中的语言切换规则

结果: 找到以下规则

body.lang-zh [data-lang="en"] { display: none; }
body.lang-zh [data-lang="zh"] { display: revert; }
body.lang-en [data-lang="zh"] { display: none; }
body.lang-en [data-lang="en"] { display: revert; }

验证点:

  • ✅ 通过 body.lang-* 类控制显示
  • ✅ 使用 display: none 隐藏非当前语言
  • ✅ 使用 display: revert 恢复当前语言

4. JavaScript 语言切换逻辑 ✅

测试方法: 检查 switchLang() 函数

结果: 找到完整的语言切换函数

function switchLang(lang) {
  document.body.className = 'lang-' + lang;
  localStorage.setItem('cmr-lang', lang);
  document.querySelectorAll('.lang-btn').forEach(function(btn) {
    btn.classList.toggle('active', btn.dataset.langBtn === lang);
  });
}

验证点:

  • ✅ 设置 body.className 为 lang-en 或 lang-zh
  • ✅ 保存到 localStorage 的 cmr-lang 键
  • ✅ 更新按钮的 active 类

5. 浏览器语言自动检测 ✅

测试方法: 检查初始化逻辑

结果: 找到自动检测代码

(function initLang() {
  var saved = localStorage.getItem('cmr-lang');
  var browserLang = navigator.language.toLowerCase();
  var defaultLang = saved || (browserLang.startsWith('zh') ? 'zh' : 'en');
  switchLang(defaultLang);
})();

验证点:

  • ✅ 优先使用 localStorage 中保存的语言
  • ✅ 如果没有保存，检测 navigator.language
  • ✅ 中文浏览器默认显示中文，其他默认英文

6. CHANGELOG 双语格式 ✅

测试方法: 检查 CHANGELOG.md 文件

结果: 文件已更新为双语格式

# Changelog

[English](#english) | [中文](#中文)

---

## English
...

---

## 中文
...

验证点:

  • ✅ 顶部有语言切换链接
  • ✅ 英文和中文内容分别在独立章节
  • ✅ v0.3.0 的新功能已翻译

任务 N：日志刷新测试

1. 自动刷新复选框 ✅

测试方法:

curl -s http://127.0.0.1:3457/web | grep "auto-refresh-logs"

结果: 找到复选框和相关逻辑

验证点:

  • ✅ 复选框 <input type="checkbox" id="auto-refresh-logs" checked>
  • ✅ 默认勾选（checked 属性）
  • ✅ 绑定 onchange="toggleAutoRefresh()" 事件

2. 手动刷新按钮 ✅

测试方法: 检查日志卡片 HTML

结果: 找到刷新按钮

<button onclick="refreshLogs()">
  <span data-lang="en">Refresh</span>
  <span data-lang="zh">刷新</span>
</button>

验证点:

  • ✅ 按钮存在且有 onclick="refreshLogs()" 事件
  • ✅ 按钮文本支持双语

3. 最后刷新时间显示 ✅

测试方法: 检查 HTML 和 JavaScript

结果: 找到时间戳元素和更新逻辑

<span id="log-last-update"></span>
var now = new Date().toLocaleTimeString();
document.getElementById('log-last-update').textContent = now;

验证点:

  • ✅ 有专门的 <span> 显示时间
  • ✅ 每次刷新后更新为当前时间

4. 独立的日志刷新逻辑 ✅

测试方法: 检查 JavaScript 代码结构

结果: 日志刷新已从全局 setInterval 分离

var autoRefreshEnabled = true;
var logRefreshInterval = null;

function startLogRefresh() {
  if (logRefreshInterval) return;
  logRefreshInterval = setInterval(refreshLogs, 2000);
}

function stopLogRefresh() {
  if (logRefreshInterval) { 
    clearInterval(logRefreshInterval); 
    logRefreshInterval = null; 
  }
}

// 初始化时
setInterval(refreshStats, 2000);  // 统计独立刷新
if (autoRefreshEnabled) { startLogRefresh(); }  // 日志独立刷新

验证点:

  • ✅ 统计刷新（refreshStats）和日志刷新（refreshLogs）使用独立的 setInterval
  • ✅ 日志刷新可以独立开关
  • ✅ 统计刷新始终运行

5. localStorage 持久化 ✅

测试方法: 检查 toggleAutoRefresh() 函数

结果: 找到持久化逻辑

function toggleAutoRefresh() {
  autoRefreshEnabled = document.getElementById('auto-refresh-logs').checked;
  localStorage.setItem('cmr-auto-refresh-logs', autoRefreshEnabled);
  if (autoRefreshEnabled) { startLogRefresh(); } else { stopLogRefresh(); }
}

// 初始化时恢复
var savedAutoRefresh = localStorage.getItem('cmr-auto-refresh-logs');
if (savedAutoRefresh !== null) {
  autoRefreshEnabled = savedAutoRefresh === 'true';
  document.getElementById('auto-refresh-logs').checked = autoRefreshEnabled;
}

验证点:

  • ✅ 用户选择保存到 localStorage 的 cmr-auto-refresh-logs 键
  • ✅ 页面加载时恢复上次的设置
  • ✅ 根据设置决定是否启动自动刷新

回归测试

单元测试 ✅

测试方法:

npm test

结果:

主测试套件：97 pass, 0 fail
嵌套测试套件：21 pass, 0 fail
---
总计：118 pass, 0 fail

验证点:

  • ✅ 所有现有测试通过
  • ✅ 没有引入新的失败
  • ✅ 包括 E2E 路由测试（验证 /web 端点正常）

API 端点测试 ✅

测试方法:

curl -s http://127.0.0.1:3457/stats | jq '.'
curl -s http://127.0.0.1:3457/api/logs | jq '.logs | length'

结果:

  • /stats: 返回正常的 JSON（total, uptime, startTime, backends）
  • /api/logs: 返回 50 条日志

验证点:

  • ✅ 统计端点正常
  • ✅ 日志端点正常
  • ✅ 响应格式正确

功能演示

双语切换演示

场景: 用户首次访问 WebUI

  1. 浏览器语言为中文 → 自动显示中文界面
  2. 点击右上角 "English" → 界面切换为英文
  3. 刷新页面 → 保持英文（localStorage 生效）
  4. 点击 "中文" → 界面切换回中文

预期行为: ✅ 所有文本立即切换，无需刷新页面

日志刷新演示

场景: 用户查看日志

  1. 页面加载 → 日志自动每 2 秒刷新一次
  2. 取消勾选 "自动刷新" → 日志停止自动更新
  3. 点击 "刷新" 按钮 → 日志立即更新，显示最后刷新时间
  4. 重新勾选 "自动刷新" → 日志恢复自动更新
  5. 刷新页面 → 自动刷新设置保持（localStorage 生效）

预期行为: ✅ 日志刷新独立于统计刷新，用户可控

已知问题

1. 测试 Glob 模式问题（预存）

问题: npm test 的 glob 模式 tests/**/*.test.ts 不匹配 3 层嵌套的测试文件

影响:

  • tests/server/middleware/auth.test.ts (17 tests)
  • tests/server/routes/stats.test.ts (4 tests)

这两个文件需要显式运行：

node --test --import tsx tests/server/middleware/auth.test.ts tests/server/routes/stats.test.ts

状态: 预存问题，非本次修改引入

总结

实施成果

✅ 任务 M（双语模式）:

  • 完整的中英文双语支持
  • 语言切换器（右上角）
  • localStorage 持久化
  • 浏览器语言自动检测
  • CHANGELOG 双语格式

✅ 任务 N（日志刷新）:

  • 手动刷新按钮
  • 自动刷新开关
  • 最后刷新时间显示
  • 独立的刷新逻辑
  • localStorage 持久化

✅ 回归测试: 118/118 通过

代码质量

  • 无硬编码: 所有文本都通过 data-lang 标记
  • 向后兼容: 不影响现有 API 和功能
  • 用户体验: 语言切换无需刷新，设置持久化
  • 可维护性: 清晰的代码结构，易于扩展

建议

  1. 添加更多语言: 当前支持中英文，可扩展到日语、韩语等
  2. 日志过滤: 可添加按级别过滤（info/warn/error）
  3. 日志搜索: 可添加搜索框快速定位
  4. 修复 Glob 问题: 更新 package.json 的测试脚本以包含深层嵌套文件

测试结论: ✅ 所有功能正常，可以合并到主分支