okooooooo/outlookEmailPlus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0ab50db85ff486989e60035023696c26f25853df
outlookEmailPlus/docs/TD/TD-可调整布局系统.md
T
胡绍康andClaude Opus 4.6 0ab50db85f feat: 实现可调整布局系统 
- 新增布局管理器支持拖拽调整面板宽度
- 新增状态管理器实现布局持久化
- 重构前端页面结构优化四栏式布局
- 新增 Jest 测试框架和完整测试用例
- 完善项目文档（PRD/FD/TDD/TODO/LOG）
- 清理 Python 缓存文件并更新 .gitignore

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-27 14:49:36 +08:00

22 KiB
Raw Blame History

TD - 可调整布局系统

文档信息

  • 文档编号: TD-00001
  • 创建日期: 2026-02-26
  • 版本: v1.0
  • 状态: 草稿
  • 负责人: 测试团队
  • 关联文档:
    • PRD-00001: PRD - 可调整布局系统
    • FD-00001: FD - 可调整布局系统
    • TDD-00001: TDD - 可调整布局系统

目录

  1. 测试概述
  2. 测试范围
  3. 测试策略
  4. 测试用例设计
  5. 测试数据准备
  6. 测试环境配置
  7. 性能测试方案
  8. 兼容性测试方案
  9. 可访问性测试方案
  10. 回归测试策略
  11. 测试执行计划
  12. 缺陷管理流程
  13. 测试报告与度量

一、测试概述

1.1 测试目标

验证可调整布局系统的功能完整性、性能指标、兼容性和可访问性，确保满足 PRD 中定义的所有需求和验收标准。

1.2 测试原则

  1. 测试优先级：P0 功能 100% 通过，P1 功能 ≥ 95% 通过，P2 功能 ≥ 90% 通过
  2. 测试覆盖率：代码覆盖率 > 80%，功能覆盖率 100%
  3. 自动化优先：单元测试和集成测试 100% 自动化，系统测试 ≥ 70% 自动化
  4. 持续测试：每次代码提交触发自动化测试，每日执行完整回归测试

1.3 测试类型

测试类型 覆盖范围 执行方式 执行频率
单元测试 LayoutManager、StateManager 类方法 自动化（Jest） 每次提交
集成测试 拖动、折叠、状态保存流程 自动化（Playwright） 每次提交
系统测试 完整用户场景 自动化 + 手动 每日
性能测试 帧率、内存、加载时间 自动化（Lighthouse） 每周
兼容性测试 4 个浏览器 × 功能模块 自动化（BrowserStack） 每次发布前
可访问性测试 WCAG 2.1 AA 合规性 自动化（axe-core） + 手动 每次发布前
回归测试 现有功能不受影响 自动化 + 手动 每次变更后

1.4 验收标准

根据 PRD 定义的成功指标：

  • ✅ 用户可以在 3 秒内完成面板宽度调整
  • ✅ 用户可以在 1 秒内完成面板折叠/展开
  • ✅ 布局状态在页面刷新后 100% 恢复
  • ✅ 拖动调整时帧率保持在 60fps
  • ✅ 所有 P0 功能测试用例 100% 通过
  • ✅ 所有 P1 功能测试用例 ≥ 95% 通过
  • ✅ 无 P0/P1 级别缺陷遗留

二、测试范围

2.1 功能模块测试范围

根据 FD 文档，测试范围包括 6 个主要功能模块：

F1 - 拖动调整宽度（P0）

子功能 优先级 测试点
F1.1 - 鼠标拖动调整 P0 拖动流畅度、宽度实时更新、视觉反馈
F1.2 - 宽度限制 P0 最小/最大宽度限制、邮件详情面板 400px 保证
F1.3 - 视觉反馈 P1 hover 效果、拖动光标、高亮指示器
F1.4 - 性能优化 P0 requestAnimationFrame、60fps 保证

F2 - 面板折叠/展开（P0）

子功能 优先级 测试点
F2.1 - 折叠按钮 P0 点击折叠、点击展开、按钮状态更新
F2.2 - 折叠动画 P1 200ms 过渡、平滑动画、无卡顿
F2.3 - 折叠状态指示 P1 细条显示、竖排文字、点击展开
F2.4 - 折叠规则 P0 至少一个面板展开、邮件详情不可折叠
F2.5 - ARIA 属性更新 P1 aria-expanded 更新、aria-label 更新
F2.6 - 折叠时隐藏 resizer P0 resizer 不可见、不可交互

F3 - 恢复默认布局（P1）

子功能 优先级 测试点
F3.1 - 恢复按钮 P1 按钮位置、tooltip 显示
F3.2 - 确认对话框 P1 对话框内容、取消/确定按钮
F3.3 - 恢复逻辑 P1 宽度恢复、折叠状态恢复、localStorage 清除
F3.4 - 恢复动画 P2 300ms 过渡、平滑动画

F4 - 状态持久化（P0）

子功能 优先级 测试点
F4.1 - 保存面板宽度 P0 拖动后保存、防抖 500ms
F4.2 - 保存折叠状态 P0 折叠后立即保存
F4.3 - 加载状态 P0 页面加载时恢复、数据验证
F4.4 - 多用户隔离 P1 不同 userId 独立存储
F4.5 - 页面卸载强制保存 P0 beforeunload 触发保存

F5 - 窗口尺寸适配（P1）

子功能 优先级 测试点
F5.1 - 断点自动折叠 P1 <1200px、<900px、<700px 自动折叠
F5.2 - 窗口放大恢复 P1 自动折叠的面板自动恢复
F5.3 - 防抖优化 P2 200ms 防抖、避免频繁触发

F6 - 键盘可访问性（P1）

子功能 优先级 测试点
F6.1 - Tab 聚焦 P1 resizer 可聚焦、折叠按钮可聚焦
F6.2 - 方向键调整宽度 P1 ←/→ 调整、Shift+←/→ 快速调整
F6.3 - Enter/Sp发 P1 折叠按钮触发
F6.4 - ARIA 属性 P1 role、aria-label、aria-valuenow 等

2.2 非功能测试范围

性能测试

  • 拖动帧率 ≥ 60fps
  • 折叠/展开动画流畅度
  • localStorage 数据 ≤ 1KB
  • 页面加载时间增加 ≤ 50ms

兼容性测试

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

可访问性测试

  • WCAG 2.1 AA 级别合规
  • 键盘导航完整性
  • 屏幕阅读器支持

安全性测试

  • localStorage 数据不包含敏感信息
  • XSS 防护验证

2.3 不在测试范围内

  • 移动端适配（后续版本）
  • 拖动排序功能（后续版本）
  • 多套布局方案（后续版本）
  • 布局分享功能（后续版本）

三、测试策略

3.1 单元测试策略

测试框架: Jest

覆盖目标: 代码覆盖率 > 80%

测试对象:

  • LayoutManager 类的所有公共方法
  • StateManager 类的所有公共方法
  • 核心算法（拖动宽度计算、防抖、状态序列化）

测试方法:

  • 正向测试：正常输入，验证正确输出
  • 负向测试：异常输入，验证错误处理
  • 边界测试：临界值输入，验证边界处理

Mock 策略:

  • Mock localStorage API
  • Mock DOM 元素
  • Mock 事件对象

3.2 集成测试策略

测试框架: Playwright

测试对象:

  • 拖动调整宽度的完整流程
  • 折叠/展开的完整流程
  • 状态保存和加载的完整流程
  • 窗口调整的完整流程

测试方法:

  • 端到端测试：模拟真实用户操作
  • 流程测试：验证多个功能的协作
  • 数据驱动测试：使用不同的测试数据

3.3 系统测试策略

测试方法: 自动化 + 手动

测试场景:

  • 用户首次访问（默认布局）
  • 用户调整布局后刷新（状态恢复）
  • 用户在不同设备间切换（多用户隔离）
  • 用户调整窗口大小（自动适配）
  • 用户使用键盘操作（可访问性）

3.4 探索性测试策略

测试时间: 每个功能模块 2 小时

测试重点:

  • 异常操作路径
  • 极端场景
  • 用户体验问题
  • 未预期的交互

四、测试用例设计

4.1 测试用例编号规则

格式: TC-[模块]-[序号]-[类型]

  • 模块: F1~F6（对应功能模块）
  • 序号: 001~999（三位数字）
  • 类型: P（正向）、N（负向）、B（边界）、PF（性能）

示例: TC-F1-001-P（F1 模块第 1 个正向用例）

4.2 F1 - 拖动调整宽度测试用例

TC-F1-001-P: 拖动分组面板到中间宽度

项目 内容
优先级 P0
前置条件 页面已加载，分组面板宽度为默认 200px
测试步骤 1. 鼠标悬停在分组面板右侧 resizer
2. 按下鼠标左键
3. 向右拖动 50px
4. 释放鼠标
预期结果 1. resizer 显示 hover 效果（背景色变化）
2. 光标变为 col-resize
3. 面板宽度实时更新为 250px
4. 拖动流畅，无卡顿
关联需求 F1.1, F1.3

TC-F1-002-B: 拖动分组面板到最小宽度

项目 内容
优先级 P0
前置条件 页面已加载，分组面板宽度为默认 200px
测试步骤 1. 鼠标按下 resizer
2. 向左拖动 100px（超过最小宽度限制）
3. 释放鼠标
预期结果 面板宽度停止在最小宽度 150px，不会继续缩小
关联需求 F1.2

TC-F1-003-B: 拖动分组面板到最大宽度

项目 内容
优先级 P0
前置条件 页面已加载，分组面板宽度为默认 200px
测试步骤 1. 鼠标按下 resizer
2. 向右拖动 300px（超过最大宽度限制）
3. 释放鼠标
预期结果 面板宽度停止在最大宽度 400px，不会继续增大
关联需求 F1.2

TC-F1-004-B: 拖动时确保邮件详情面板至少 400px

项目 内容
优先级 P0
前置条件 窗口宽度 1200px，所有面板展开
测试步骤 1. 拖动分组面板到最大宽度 400px
2. 拖动账号面板到最大宽度 500px
3. 尝试拖动邮件列表面板到最大宽度 600px
预期结果 邮件列表面板宽度被限制，确保邮件详情面板至少保持 400px
关联需求 F1.2

TC-F1-005-N: 快速拖动导致鼠标移出窗口

项目 内容
优先级 P1
前置条件 页面已加载
测试步骤 1. 鼠标按下 resizer
2. 快速向右拖动，鼠标移出浏览器窗口
3. 在窗口外释放鼠标
4. 鼠标移回窗口
预期结果 1. 拖动正常结束
2. 光标恢复正常
3. 状态已保存
关联需求 F1.1

TC-F1-006-PF: 拖动帧率测试

项目 内容
优先级 P0
前置条件 页面已加载
测试步骤 1. 使用 Performance API 监听帧率
2. 连续拖动 1 秒
3. 计算平均帧率
预期结果 平均帧率 ≥ 60fps（允许 5fps 误差）
关联需求 F1.4

4.3 F2 - 面板折叠/展开测试用例

TC-F2-001-P: 点击折叠按钮折叠面板

项目 内容
优先级 P0
前置条件 分组面板处于展开状态
测试步骤 1. 点击分组面板右上角的折叠按钮
预期结果 1. 面板宽度变为 0
2. 面板内容不可见
3. 显示折叠指示条（48px 宽）
4. 折叠动画流畅（200ms）
5. 按钮图标变为 →
6. aria-expanded 更新为 false
关联需求 F2.1, F2.2, F2.3, F2.5

TC-F2-002-P: 点击折叠指示条展开面板

项目 内容
优先级 P0
前置条件 分组面板处于折叠状态
测试步骤 1. 点击折叠指示条
预期结果 1. 面板恢复到折叠前的宽度
2. 面板内容可见
3. 折叠指示条消失
4. 展开动画流畅（200ms）
5. 按钮图标变为 ←
6. aria-expanded 更新为 true
关联需求 F2.1, F2.2, F2.3, F2.5

TC-F2-003-N: 尝试折叠所有面板

项目 内容
优先级 P0
前置条件 只有分组面板展开，其他面板已折叠
测试步骤 1. 点击分组面板的折叠按钮
预期结果 1. 显示提示信息："至少需要保持一个面板展开"
2. 分组面板保持展开状态
关联需求 F2.4

TC-F2-004-P: 折叠后 resizer 不可见

项目 内容
优先级 P0
前置条件 分组面板处于展开状态
测试步骤 1. 折叠分组面板
2. 检查 resizer 元素
预期结果 1. resizer 不可见（display: none）
2. resizer 不可交互（pointer-events: none）
关联需求 F2.6

TC-F2-005-N: 折叠状态下尝试拖动

项目 内容
优先级 P1
前置条件 分组面板处于折叠状态
测试步骤 1. 尝试在折叠指示条位置拖动
预期结果 无法拖动，必须先展开面板
关联需求 F2.6

4.4 F3 - 恢复默认布局测试用例

TC-F3-001-P: 恢复默认布局

项目 内容
优先级 P1
前置条件 用户已调整布局（宽度和折叠状态）
测试步骤 1. 点击顶部导航栏的"恢复默认布局"按钮
2. 在确认对话框中点击"确定"
预期结果 1. 分组面板宽度恢复为 200px
2. 账号面板宽度恢复为 260px
3. 邮件列表面板宽度恢复为 380px
4. 所有面板展开
5. localStorage 中的状态被清除
6. 恢复动画流畅（300ms）
关联需求 F3.1, F3.2, F3.3, F3.4

TC-F3-002-N: 取消恢复默认布局

项目 内容
优先级 P1
前置条件 用户已调整布局
测试步骤 1. 点击"恢复默认布局"按钮
2. 在确认对话框中点击"取消"
预期结果 1. 对话框关闭
2. 布局保持当前状态不变
关联需求 F3.2

4.5 F4 - 状态持久化测试用例

TC-F4-001-P: 拖动后保存状态

项目 内容
优先级 P0
前置条件 页面已加载
测试步骤 1. 拖动分组面板到 250px
2. 等待 500ms（防抖时间）
3. 检查 localStorage
预期结果 localStorage 中保值 "250px"
关联需求 F4.1

TC-F4-002-P: 折叠后立即保存状态

项目 内容
优先级 P0
前置条件 页面已加载
测试步骤 1. 折叠分组面板
2. 立即检查 localStorage（无需等待）
预期结果 localStorage 中保存了折叠状态 collapsed: true
关联需求 F4.2

TC-F4-003-P: 页面刷新后恢复状态

项目 内容
优先级 P0
前置条件 用户已调整布局并保存
测试步骤 1. 刷新页面（F5）
2. 等待页面加载完成
预期结果 1. 面板宽度恢复到调整后的值
2. 折叠状态恢复
3. 恢复过程无闪烁
关联需求 F4.3

TC-F4-004-P: 多用户布局隔离

项目 内容
优先级 P1
前置条件 系统支持多用户
测试步骤 1. 用户 A 登录，调整布局
2. 用户 A 退出
3. 用户 B 登录
4. 检查布局状态
预期结果 用户 B 看到的是默认布局，不受用户 A 的影响
关联需求 F4.4

TC-F4-005-P: 页面卸载时强制保存

项目 内容
优先级 P0
前置条件 页面已加载
测试步骤 1. 拖动面板
2. 立即关闭浏览器标签页（不等待防抖）
3. 重新打开页面
预期结果 布局状态已保存，最后一次调整未丢失
关联需求 F4.5

TC-F4-006-N: localStorage 不可用

项目 内容
优先级 P1
前置条件 浏览器禁用 localStorage 或隐私模式
测试步骤 1. 加载页面
2. 调整布局
3. 刷新页面
预期结果 1. 页面正常加载，使用默认布局
2. 调整布局功能正常
3. 刷新后恢复默认布局（无法持久化）
4. 控制台显示警告n

TC-F4-007-N: localStorage 数据损坏

项目 内容
优先级 P1
前置条件 localStorage 中存在损坏的数据
测试步骤 1. 手动修改 localStorage 数据为无效 JSON
2. 刷新页面
预期结果 1. 页面正常加载
2. 使用默认布局
3. 损坏的数据被清除
4. 控制台显示错误信息
关联需求 F4.3

4.6 F5 - 窗口尺寸适配测试用例

TC-F5-001-P: 窗口宽度 < 1200px 自动折叠分组面板

项目 内容
优先级 P1
前置条件 窗口宽度 > 1200px，所有面板展开
测试步骤 1. 调整浏览器窗口宽度到 1100px
2. 等待 200ms（防抖时间）
预期结果 1. 分组面板自动折叠
2. 面板标记为 autoCollapsed
3. 其他面板保持展开
关联需求 F5.1

TC-F5-002-P: 窗口宽度 < 900px 自动折叠账号面板

项目 内容
优先级 P1
前置条件 窗口宽度 > 900px
测试步骤 1. 调整浏览器窗口宽度到 800px
2. 等待 200ms
预期结果 1. 分组面板和账号面板自动折叠
2. 邮件列表和详情面板保持展开
关联需求 F5.1

TC-F5-003-P: 窗口宽度 < 700px 自动折叠邮件列表面板

项目 内容
优先级 P1
前置条件 窗口宽度 > 700px
测试步骤 1. 调整浏览器窗口宽度到 600px
2. 等待 200ms
预期结果 1. 所有侧边栏面板自动折叠
2. 只显示邮件详情面板
关联需求 F5.1

TC-F5-004-P: 窗口放大后自动恢复面板

项目 内容
优先级 P1
前置条件 窗口宽度 < 1200px，分组面板自动折叠
测试步骤 1. 调整浏览器窗口宽度到 1300px
2. 等待 200ms
预期结果 1. 分组面板自动展开
2. autoCd 标记被移除
关联需求 F5.2

TC-F5-005-N: 用户手动折叠的面板不自动恢复

项目 内容
优先级 P1
前置条件 窗口宽度 > 1200px
测试步骤 1. 用户手动折叠分组面板
2. 调整窗口宽度到 1100px 再恢复到 1300px
预期结果 分组面板保持折叠状态（因为是用户手动折叠）
关联需求 F5.2

4.7 F6 - 键盘可访问性测试用例

TC-F6-001-P: Tab 键聚焦到 resizer

项目 内容
优先级 P1
前置条件 页面已加载
测试步骤 1. 按 Tab 键多次，直到聚焦到分组面板的 resizer
预期结果 1. resizer 获得焦点
2. 显示明显的视觉反馈（outline 或高亮边框）
关联需求 F6.1

TC-F6-002-P: 方向键调整宽度

| 项目 | 内容 | |---------| | 优先级 | P1 | | 前置条件 | resizer 已聚焦，面板宽度 200px | | 测试步骤 | 1. 按右箭头键 5 次
2. 按左箭头键 3 次 | | 预期结果 | 1. 每次按右箭头，宽度增加 10px（最终 250px）
2. 每次按左箭头，宽度减少 10px（最终 220px）
3. aria-valuenow 实时更新 | | 关联需求 | F6.2, F6.4 |

TC-F6-003-P: Shift + 方向键快速调整

项目 内容
优先级 P1
前置条件 resizer 已聚焦，面板宽度 200px
测试步骤 1. 按 Shift + 右箭头键 2 次
预期结果 每次按键宽度增加 50px（最终 300px）
关联需求 F6.2

TC-F6-004-P: Enter/Space 触发折叠按钮

项目 内容
优先级 P1
前置条件 折叠按钮已聚焦
测试步骤 1. 按 Enter 键
预期结果 面板折叠
关联需求 ### TC-F6-005-P: ARIA 属性完整性
项目 内容
优先级 P1
前置条件 页面已加载
测试步骤 1. 检查 resizer 元素的 ARIA 属性
预期结果 1. role="separator"
2. aria-orientation="vertical"
3. aria-label="调整[面板名称]宽度"
4. aria-valuenow、aria-valuemin、aria-valuemax 正确设置
关联需求 F6.4

九、可访问性测试方案

9.1 WCAG 2.1 AA 合规性测试

使用 axe-core 自动检测可访问性问题。

9.2 键盘导航测试

  • Tab 键可以聚焦到所有交互元素
  • 方向键可以调整面板宽度
  • Enter/Space 可以触发折叠按钮
  • 所有操作可通过键盘完成

9.3 屏幕阅读器测试

使用 NVDA/JAWS 测试 ARIA 属性是否正确朗读。

十、回归测试策略

10.1 回归测试范围

确保布局系统不影响现有功能：

  • 邮件列表显示和滚动
  • 邮件详情查看
  • 账号切换
  • 分组管理
  • Token 刷新
  • 临时邮箱

10.2 回归测试执行

每次代码变更后执行完整回归测试。

十一、测试执行计划

11.1 测试阶段

  1. 阶段 1 - 单元测试（开发完成后）
  2. 阶段 2 - 集成测试（功能集成后）
  3. 阶段 3 - 系统测试（所有功能完成后）
  4. 阶段 4 - 验收测试（测试环境部署后）

11.2 测试时间安排

  • 单元测试：2 天
  • 集成测试：3 天
  • 系统测试：3 天
  • 性能测试：1 天
  • 兼容性测试：2 天
  • 可访问性测试：1 天
  • 回归测试：2 天
  • 总计：14 天

十二、缺陷管理流程

12.1 缺陷优先级

  • P0（阻塞）：核心功能无法使用，必须立即修复
  • P1（严重）：重要功能异常，当天修复
  • P2（一般）：次要功能问题，3 天内修复
  • P3（轻微）：UI 问题或优化建议，可延后

12.2 缺陷跟踪

使用 GitHub Issues 跟踪所有缺陷。

十三、测试报告与度量

13.1 测试报告内容

  1. 测试执行摘要
  2. 功能模块测试结果
  3. 缺陷分布统计
  4. 性能测试结果
  5. 兼容性测试结果
  6. 可访问性测试结果
  7. 风险评估和建议

13.2 度量指标

  • 测试覆盖率：代码覆盖率 > 80%，功能覆盖率 100%
  • 缺陷密度：< 5 个/KLOC
  • 缺陷修复率：P0/P1 100%，P2 > 95%
  • 回归通过率：> 98%

文档结束

Reference in new issue View Git Blame Copy Permalink