资源状态条测试指南¶
测试前准备¶
1. 启动开发环境¶
# 启动 Hugo 开发服务器
make server
# 或使用基础服务器
hugo server
2. 访问测试页面¶
访问任意包含 GitHub 仓库链接的 AI 资源详情页，例如：
http://localhost:1313/zh/ai/kubernetes/http://localhost:1313/en/ai/tensorflow/
功能测试清单¶
✅ 基础渲染测试¶
测试项 1: 容器加载
- 页面加载时显示 loading 动画
- 数据加载完成后 loading 消失
- 三行内容正确展示（桌面端）
测试项 2: 综合状态行
- 显示"综合状态"标签（中文）或"Overall Status"（英文）
- 状态标签正确映射（优秀/良好/一般/风险）
- 评分数值正确显示（整数）
- Info 图标显示在最右侧
测试项 3: 子评分行
- 四个子评分按顺序展示：活跃度、社区、影响力、持续性
- 使用
·分隔符 - 所有子评分在同一行（不换行）
- 字号和颜色统一
测试项 4: 更新时间行
- 显示相对时间（今天/昨天/X 天前/X 周前/X 个月前/X 年前）
- 时间格式中英文正确
- 字号最小，视觉权重最低
✅ 状态映射测试¶
创建或找到不同评分的项目进行测试：
| 综合评分 | 预期状态标签 | 标签颜色 |
|---|---|---|
| 85 | 优秀 / Excellent | 绿色系 |
| 72 | 良好 / Good | 蓝色系 |
| 55 | 一般 / Fair | 黄色系 |
| 35 | 风险 / Poor | 红色系 |
测试步骤:
- 查看不同项目的综合评分
- 确认状态标签与评分区间匹配
- 验证标签颜色符合设计规范
✅ 交互测试¶
测试项 5: Info 图标 Tooltip
- Hover info 图标时显示 tooltip
- Tooltip 包含评分维度说明
- Tooltip 不影响布局高度
- Tooltip 位置合理（不遮挡内容）
- 点击图标触发全局说明弹窗
测试项 6: 数据错误处理
- 网络错误时显示"Data unavailable"
- 错误提示样式正确
- 不影响页面其他内容展示
✅ 响应式测试¶
桌面端 (≥ 1024px)¶
- 三行完整展示
- 子评分不换行
- 更新时间显示
- 高度 ≤ 96px
平板端 (768px - 1023px)¶
- 综合状态行正常
- 子评分行正常
- 更新时间隐藏
移动端 (380px - 767px)¶
- 综合状态行正常
- 子评分行正常
- 更新时间隐藏
小屏幕 (< 380px)¶
- 仅显示综合状态行
- 子评分行和更新时间行隐藏
- 布局不破坏
测试工具:
- Chrome DevTools 设备模拟器
- 实际移动设备测试
✅ 视觉规范测试¶
禁止元素检查:
- ✅ 无卡片背景
- ✅ 无阴影效果
- ✅ 无圆角容器
- ✅ 无大号数字展示
- ✅ 无 Emoji（除 info 图标外）
- ✅ 无雷达图
- ✅ 无进度条
- ✅ 无仪表盘
样式一致性检查:
- 状态标签使用淡色背景
- 字号层级清晰（状态 > 子评分 > 更新）
- 颜色符合浅色/深色模式适配
- 分隔符样式统一
✅ 双语测试¶
中文环境 (/zh/ai/...)¶
- 综合状态标签显示中文
- 子评分名称显示中文
- 更新时间显示中文格式
- Tooltip 内容为中文
英文环境 (/en/ai/...)¶
- 综合状态标签显示英文
- 子评分名称显示英文
- 更新时间显示英文格式
- Tooltip 内容为英文
✅ 性能测试¶
测试项 7: 加载性能
- 首屏渲染时间 < 2 秒
- 数据加载完成后渲染流畅
- 无布局抖动（layout shift）
测试项 8: 缓存机制
- 相同项目数据使用缓存（30 分钟内）
- 缓存过期后重新请求
- LocalStorage 中有缓存记录
性能指标:
// 在浏览器控制台执行
performance.mark('resource-status-start');
// 等待渲染完成
performance.mark('resource-status-end');
performance.measure('resource-status', 'resource-status-start', 'resource-status-end');
console.table(performance.getEntriesByType('measure'));
✅ 无障碍测试¶
测试项 9: 键盘导航
- Tab 键可聚焦 info 图标
- Enter/Space 键可触发 tooltip
- Esc 键可关闭 tooltip
测试项 10: 屏幕阅读器
- Info 图标有 aria-label
- 状态标签语义清晰
- 评分数值可被正确朗读
测试工具:
- macOS VoiceOver
- Chrome Lighthouse Accessibility 审计
边界测试¶
数据异常场景¶
| 场景 | 预期行为 |
|---|---|
scores.health 为 null | 显示"Data unavailable" |
scores.health 为 0 | 显示"风险 0" |
scores.health 为 100 | 显示"优秀 100" |
daysSinceLastCommit 为 null | 显示"最近更新：?" |
daysSinceLastCommit 为 0 | 显示"最近更新：今天" |
daysSinceLastCommit > 365 | 显示"最近更新：X 年前" |
极端情况¶
测试项 11: 超长文本
- 项目名称超长时不影响布局
- 子评分行溢出时整体隐藏
- 不出现横向滚动条
测试项 12: 网络环境
- 慢速网络下 loading 提示正常
- 网络断开时错误提示清晰
- 重新连接后可正常加载
回归测试¶
确保其他功能不受影响：
- Smart badges 正常显示
- 相关资源推荐正常
- 页面其他健康指标展示不变（列表页等）
- 原有的
data-ai-health-bars仍可正常工作 - JavaScript 缓存机制正常
- 深色模式切换正常
浏览器兼容性测试¶
| 浏览器 | 版本 | 状态 |
|---|---|---|
| Chrome | Latest | ⬜ 待测试 |
| Firefox | Latest | ⬜ 待测试 |
| Safari | Latest | ⬜ 待测试 |
| Edge | Latest | ⬜ 待测试 |
| Mobile Safari | iOS 15+ | ⬜ 待测试 |
| Chrome Mobile | Android | ⬜ 待测试 |
问题记录模板¶
发现问题时请记录：
**问题标题**: [简短描述]
**复现步骤**:
1. 访问页面 [URL]
2. 执行操作 [具体步骤]
3. 观察结果
**预期结果**: [应该显示什么]
**实际结果**: [实际显示什么]
**环境信息**:
- 浏览器：[Chrome 120 / Safari 17.2]
- 设备：[Desktop / iPhone 14]
- 屏幕尺寸：[1920x1080 / 390x844]
- 语言：[zh / en]
**截图**: [如有必要]
**严重程度**: [高 / 中 / 低]
验收标准¶
所有测试项通过后，确认：
✅ 功能完整性
- 所有三行内容正确展示
- 状态映射准确无误
- 交互功能正常
✅ 视觉规范
- 无禁止元素
- 样式符合设计规格
- 响应式布局完美
✅ 性能指标
- 页面首屏可同时看到标题、简介、综合状态
- 资源信息模块高度 ≤ 原实现的 30%
- 用户在 1 秒内可判断项目健康状态
✅ 用户体验
- 信息层级清晰
- 决策效率提升
- 无学习成本
测试报告模板¶
# 资源状态条测试报告
**测试日期**: YYYY-MM-DD
**测试人**: [姓名]
**测试环境**: [环境描述]
## 测试摘要
- 总测试项：X
- 通过：Y
- 失败：Z
- 阻塞：0
## 详细结果
[按测试清单逐项填写]
## 问题汇总
[列出所有发现的问题]
## 结论
[通过 / 需要修复后重测]
## 建议
[可选的改进建议]
测试完成后: 请将测试报告提交至项目管理系统或与开发团队分享。