测试方案 — 2026-04-17-09-36-07
测试目标
验证 TemplateManage 中插入智能字段后的空格消除、Backspace 删除保护、异常换行修复,以及默认模板预置字段控件的正确性。
测试环境
- 浏览器:Chrome / Edge
- 前置条件:已登录系统(建议使用
admin 超级管理员账号)
- 测试页面:
/template-manage
测试用例设计
用例 1:插入字段后无多余空格
| 步骤 |
操作 |
预期结果 |
| 1.1 |
进入 /template-manage |
默认模板加载,第一行已预置姓名/性别/年龄等智能字段方格 |
| 1.2 |
将光标定位到编辑器任意位置,点击字段库中的「手术名称」按钮 |
编辑器中插入一个蓝色边框的方格,方格与后方文字之间没有明显的大片空白 |
| 1.3 |
右键检查插入元素的 DOM |
HTML 中没有 ,smart-field-wrapper 与前后文本节点紧密相连 |
用例 2:行尾插入字段不异常换行
| 步骤 |
操作 |
预期结果 |
| 2.1 |
在第一行"住院号:"的方格后点击,使光标位于行尾 |
— |
| 2.2 |
点击字段库插入「手术日期」 |
新插入的方格紧跟在住院号方格后面,不会跳到下一行(只要一行空间足够) |
用例 3:Backspace 删除字段不误删整行
| 步骤 |
操作 |
预期结果 |
| 3.1 |
在编辑器中插入一个「手术名称」字段 |
方格正常插入 |
| 3.2 |
将光标定位到该方格的紧右侧(点击方格后方的文字前) |
光标闪烁在方格之后 |
| 3.3 |
按下键盘 Backspace 键 |
仅删除该「手术名称」方格,方格前方的文字(如"手术名称:")和整行 <p> 完好保留 |
| 3.4 |
再次按 Backspace |
正常删除方格前方的文字字符(如冒号或文字),不会删行 |
用例 4:Delete 键同样受保护
| 步骤 |
操作 |
预期结果 |
| 4.1 |
将光标定位到「手术名称」方格的紧左侧(点击方格前方的文字后) |
光标闪烁在方格之前 |
| 4.2 |
按下键盘 Delete 键 |
仅删除该「手术名称」方格,整行内容保留 |
用例 5:默认模板预置字段验证
| 步骤 |
操作 |
预期结果 |
| 5.1 |
进入 /template-manage,观察默认模板第一行 |
姓名、性别、年龄、科别、床号、住院号后面直接就是可填写的蓝色边框方格,没有红色 *姓名* 纯文本占位符 |
| 5.2 |
新建一个模板 |
新模板内容中也包含第一行的预置智能字段 |
用例 6:类型检查
| 步骤 |
操作 |
预期结果 |
| 6.1 |
在项目根目录执行 npm run lint |
无 TypeScript 编译错误 |
验收标准
测试方式
手工浏览器验证,结合 DevTools 观察 DOM 结构和键盘事件响应。
⚠️ 请审核以上测试方案,确认无误后回复「确认」或提出修改意见,我将进入最终执行阶段。