---
title: 测试文档
order: 4
category: pro
---

﻿# PisellLongText 组件测试用例文档

## 1 测试概述

### 1.1 测试目标

确保 PisellLongText 组件的功能完整性、稳定性和用户体验，特别是多行文本特有功能（展开/折叠、自动高度等）。

### 1.2 测试范围

- 三种状态模式（只读、编辑、禁用）
- 受控/非受控模式
- 多行文本特有功能（展开/折叠、自动高度、行数控制）
- 校验功能（复用 SingleLineText）
- 事件回调
- 边界情况处理

### 1.3 测试方法

- 使用 Storybook 进行可视化测试
- 人工测试：UI 交互、展开折叠、视觉效果验证

## 2 核心功能测试点

### 2.1 基础功能测试

#### 测试点 1：组件正常渲染

- **测试描述**：组件应该能够正常渲染
- **预期结果**：组件渲染成功，无报错
- **测试状态**：待测试 ⏳

#### 测试点 2：默认为编辑态

- **测试描述**：不传 mode 时，默认应为编辑态，渲染 TextArea
- **预期结果**：渲染多行输入框
- **测试状态**：待测试 ⏳

### 2.2 状态模式测试

#### 测试点 3：只读态渲染

- **测试步骤**：
  1. 设置 mode="read"，value="第一行\n第二行\n第三行"
  2. 观察文本展示
- **预期结果**：
  - 不显示输入框
  - 文本以多行形式展示
  - 保留换行符
- **测试状态**：待测试 ⏳

#### 测试点 4：编辑态渲染

- **测试步骤**：
  1. 设置 mode="edit"
  2. 观察输入框
- **预期结果**：
  - 渲染 TextArea 组件
  - 可以输入多行文本
- **测试状态**：待测试 ⏳

#### 测试点 5：禁用态渲染

- **测试步骤**：
  1. 设置 disabled=true
  2. 观察组件状态
- **预期结果**：
  - 组件禁用，透明度 40%
  - 无法输入
- **测试状态**：待测试 ⏳

### 2.3 多行文本特有功能测试

#### 测试点 6：展开/折叠功能（核心）

- **测试步骤**：
  1. 设置 mode="read"
  2. 设置 value="第1行\n第2行\n第3行\n第4行\n第5行"
  3. 设置 maxLines=3
  4. 观察初始状态
  5. 点击"展开"按钮
  6. 点击"收起"按钮
- **预期结果**：
  - 初始显示3行 + "..."
  - 显示"展开"按钮
  - 点击"展开"后显示全部内容
  - 按钮文字变为"收起"
  - 点击"收起"后恢复3行显示
- **测试状态**：待测试 ⏳

#### 测试点 7：不超出不显示展开按钮

- **测试步骤**：
  1. 设置 mode="read"
  2. 设置 value="第1行\n第2行"（只有2行）
  3. 设置 maxLines=3
- **预期结果**：
  - 显示全部内容
  - 不显示展开按钮
- **测试状态**：待测试 ⏳

#### 测试点 8：禁用展开功能

- **测试步骤**：
  1. 设置 mode="read"
  2. 设置 value="多行内容..."（超过 maxLines）
  3. 设置 enableExpand=false
- **预期结果**：
  - 内容被截断
  - 不显示展开按钮
- **测试状态**：待测试 ⏳

#### 测试点 9：自定义展开/收起文案

- **测试步骤**：
  1. 设置 expandText="查看更多"
  2. 设置 collapseText="收起内容"
  3. 测试展开/收起
- **预期结果**：
  - 按钮文案为自定义内容
- **测试状态**：待测试 ⏳

#### 测试点 10：字数统计（只读态）

- **测试步骤**：
  1. 设置 mode="read"
  2. 设置 showWordCount=true
  3. 设置 value="测试内容"
- **预期结果**：
  - 显示 "4 字"
  - 位于文本下方右对齐
- **测试状态**：待测试 ⏳

### 2.4 编辑态特有功能测试

#### 测试点 11：默认行数

- **测试步骤**：
  1. 设置 rows=5
  2. 观察输入框高度
- **预期结果**：
  - 输入框默认显示5行高度
- **测试状态**：待测试 ⏳

#### 测试点 12：自动高度（boolean）

- **测试步骤**：
  1. 设置 autoSize=true
  2. 输入多行文本
  3. 观察高度变化
- **预期结果**：
  - 输入框高度随内容自动调整
- **测试状态**：待测试 ⏳

#### 测试点 13：自动高度（对象配置）

- **测试步骤**：
  1. 设置 autoSize={{ minRows: 3, maxRows: 8 }}
  2. 输入1-2行文本
  3. 输入5行文本
  4. 输入10行文本
- **预期结果**：
  - 最少显示3行
  - 内容5行时显示5行
  - 内容10行时最多显示8行，出现滚动条
- **测试状态**：待测试 ⏳

#### 测试点 14：minRows 和 maxRows

- **测试步骤**：
  1. 设置 minRows=3, maxRows=6（不设置 autoSize）
  2. 观察是否自动生效
- **预期结果**：
  - 自动应用 autoSize 配置
  - 高度在3-6行之间自动调整
- **测试状态**：待测试 ⏳

#### 测试点 15：字数统计（编辑态）

- **测试步骤**：
  1. 设置 showCount=true, maxLength=100
  2. 输入文字
- **预期结果**：
  - 显示 "x / 100" 字数统计
  - 实时更新
- **测试状态**：待测试 ⏳

#### 测试点 16：清空按钮

- **测试步骤**：
  1. 设置 allowClear=true
  2. 输入多行文字
  3. 点击清空按钮
- **预期结果**：
  - 显示清空图标
  - 点击后内容被清空
- **测试状态**：待测试 ⏳

### 2.5 校验功能测试（复用 SingleLineText）

#### 测试点 17：必填校验

- **测试步骤**：
  1. 设置 required=true
  2. 输入框为空时失焦
- **预期结果**：
  - 输入框边框变红
  - 显示 "此字段为必填项"
- **测试状态**：待测试 ⏳

#### 测试点 18：最小长度校验

- **测试步骤**：
  1. 设置 minLength=10
  2. 输入5个字符
  3. 失焦
- **预期结果**：
  - 显示 "最少需要 10 个字符"
- **测试状态**：待测试 ⏳

#### 测试点 19：自定义校验（段落数量限制）

- **测试步骤**：
  1. 设置 validator 检查段落数
  2. 输入超过限制的段落
- **预期结果**：
  - 显示自定义错误信息
- **测试状态**：待测试 ⏳

### 2.6 事件回调测试

#### 测试点 20：onChange 回调

- **测试步骤**：
  1. 输入文字
  2. 检查回调是否触发
- **预期结果**：
  - 回调被调用，参数为新值
- **测试状态**：待测试 ⏳

#### 测试点 21：onExpand 回调

- **测试步骤**：
  1. 设置 onExpand 回调
  2. 点击展开按钮
  3. 点击收起按钮
- **预期结果**：
  - 展开时回调参数为 true
  - 收起时回调参数为 false
- **测试状态**：待测试 ⏳

#### 测试点 22：onPressEnter 回调

- **测试步骤**：
  1. 设置 onPressEnter 回调
  2. 按下 Enter 键
  3. 按下 Ctrl+Enter 键
- **预期结果**：
  - 两种情况都触发回调
  - 回调参数为事件对象
  - 可以通过 e.ctrlKey 判断
- **测试状态**：待测试 ⏳

### 2.7 边界情况测试

#### 测试点 23：空值处理

- **测试步骤**：
  1. value 设置为空字符串
  2. 观察显示
- **预期结果**：
  - 不报错，显示为空
  - 不显示展开按钮
- **测试状态**：待测试 ⏳

#### 测试点 24：只有空行的处理

- **测试步骤**：
  1. value 设置为 "\n\n\n\n"（只有换行符）
  2. 观察是否需要展开
- **预期结果**：
  - 正确计算行数
  - 超过 maxLines 时显示展开按钮
- **测试状态**：待测试 ⏳

#### 测试点 25：超长单行文本

- **测试步骤**：
  1. 输入一行很长的文本（无换行符）
  2. 观察显示
- **预期结果**：
  - 文本正常显示
  - 不显示展开按钮（只有1行）
- **测试状态**：待测试 ⏳

#### 测试点 26：特殊字符处理

- **测试步骤**：
  1. 输入包含 emoji、特殊符号的内容
  2. 观察显示和换行
- **预期结果**：
  - 正常显示和处理
- **测试状态**：待测试 ⏳

### 2.8 样式和布局测试

#### 测试点 27：保留换行和空格

- **测试步骤**：
  1. 设置 mode="read"
  2. value="行1 空格 \n 行2前有空格"
  3. 观察显示
- **预期结果**：
  - 换行保留
  - 空格保留
  - whiteSpace: 'pre-wrap' 生效
- **测试状态**：待测试 ⏳

#### 测试点 28：自定义样式（只读态）

- **测试步骤**：
  1. 设置 fontSize, fontWeight, color, lineHeight
  2. 观察文本样式
- **预期结果**：
  - 样式正确应用
- **测试状态**：待测试 ⏳

### 2.9 组合使用测试

#### 测试点 29：自动高度 + 字数统计

- **测试步骤**：
  1. 同时设置 autoSize=true, showCount=true, maxLength=200
  2. 输入多行文本
- **预期结果**：
  - 高度自动调整
  - 显示字数统计
  - 功能不冲突
- **测试状态**：待测试 ⏳

#### 测试点 30：展开/折叠 + 字数统计

- **测试步骤**：
  1. 设置 mode="read"
  2. 设置 enableExpand=true, showWordCount=true
  3. 测试展开/收起
- **预期结果**：
  - 展开按钮和字数统计都显示
  - 布局合理
- **测试状态**：待测试 ⏳

## 3 重点测试场景

### 3.1 展开/折叠交互（核心功能）

#### 场景 1：基础展开/折叠

```
<PisellLongText
  mode="read"
  value="第1行\n第2行\n第3行\n第4行\n第5行"
  maxLines={3}
  enableExpand
/>
```

- 初始显示3行
- 点击"展开"查看全部
- 点击"收起"恢复3行

#### 场景 2：自定义按钮文案

```
<PisellLongText
  mode="read"
  value="长文本..."
  maxLines={2}
  expandText="查看更多"
  collapseText="收起"
/>
```

- 按钮文案为自定义内容

#### 场景 3：禁用展开功能

```
<PisellLongText
  mode="read"
  value="长文本..."
  maxLines={3}
  enableExpand={false}
/>
```

- 内容被截断
- 不显示展开按钮

### 3.2 自动高度场景

#### 场景 4：基础自动高度

```
<PisellLongText
  autoSize
  placeholder="输入内容，自动调整高度"
/>
```

- 根据内容动态调整高度

#### 场景 5：限定范围自动高度

```
<PisellLongText
  autoSize={{ minRows: 3, maxRows: 8 }}
  placeholder="3-8行之间自动调整"
/>
```

- 最少3行，最多8行
- 超过8行出现滚动条

### 3.3 校验场景

#### 场景 6：必填 + 最小长度

```
<PisellLongText
  required
  minLength={20}
  placeholder="请输入至少20个字符"
  validateTrigger="onBlur"
/>
```

- 空值提示必填
- 少于20字符提示最小长度

#### 场景 7：自定义校验（段落限制）

```
<PisellLongText
  validator={(value) => {
    const lines = value.split('\n').filter(l => l.trim());
    if (lines.length > 10) {
      return '内容不能超过10段';
    }
    return true;
  }}
  validateTrigger="onChange"
/>
```

- 超过10段时显示错误

## 4 性能测试

### 4.1 渲染性能

#### 测试点 31：大量文本渲染

- **测试方法**：输入1000行文本
- **性能指标**：渲染流畅，不卡顿
- **测试状态**：待测试 ⏳

#### 测试点 32：展开/收起性能

- **测试方法**：频繁点击展开/收起按钮
- **性能指标**：切换流畅
- **测试状态**：待测试 ⏳

## 5 兼容性测试

### 5.1 浏览器兼容性

#### 测试点 33：主流浏览器

- **测试浏览器**：Chrome、Firefox、Safari、Edge
- **预期结果**：所有功能正常
- **测试状态**：待测试 ⏳

### 5.2 响应式测试

#### 测试点 34：移动端显示

- **测试步骤**：在移动端设备测试
- **预期结果**：正常显示和交互
- **测试状态**：待测试 ⏳

## 6 与 SingleLineText 的对比测试

### 6.1 功能对比验证

#### 测试点 35：校验功能一致性

- **测试描述**：验证 LongText 和 SingleLineText 的校验行为一致
- **测试步骤**：
  1. 使用相同的校验配置
  2. 对比两个组件的校验行为
- **预期结果**：
  - 校验逻辑完全一致
  - 错误提示样式一致
- **测试状态**：待测试 ⏳

#### 测试点 36：状态切换一致性

- **测试描述**：验证状态切换行为一致
- **预期结果**：
  - disabled 优先级一致
  - 状态切换逻辑一致
- **测试状态**：待测试 ⏳

## 7 测试覆盖率要求

### 7.1 代码覆盖率

- **语句覆盖率**：≥ 85%
- **分支覆盖率**：≥ 80%
- **函数覆盖率**：≥ 90%
- **行覆盖率**：≥ 85%

### 7.2 功能覆盖率

- **状态模式**：100%（3/3）
- **展开/折叠**：100%（启用/禁用/不需要展开）
- **自动高度**：100%（boolean/对象/minRows+maxRows）
- **校验规则**：100%（5/5）
- **事件回调**：100%（6/6）

## 8 测试总结

### 8.1 测试统计

- **总测试用例数**：36 个
- **核心功能**：30 个
- **性能测试**：2 个
- **兼容性测试**：2 个
- **对比测试**：2 个
- **已完成**：0 个
- **待测试**：36 个

### 8.2 重点测试项

以下为核心功能，必须重点测试：

1. ✅ **展开/折叠功能**：LongText 的核心特性
2. ✅ **自动高度调整**：编辑态的重要功能
3. ✅ **保留换行**：多行文本的基本要求
4. ✅ **字数统计**：编辑态和只读态都支持
5. ✅ **校验功能**：与 SingleLineText 保持一致

---

## 9 Bug 汇总模块

此模块用于记录人工测试过程中发现的 Bug。

### Bug 格式说明

**Bug ID**: BUG-001  
**发现时间**: 2026-01-24  
**严重程度**: 高/中/低  
**Bug 描述**: 详细描述 Bug 现象  
**复现步骤**:

1. 步骤1
2. 步骤2
3. ...

**预期结果**: 应该如何表现  
**实际结果**: 实际如何表现  
**修复状态**: 待修复 / 修复中 / 已修复  
**修复时间**: -

---

### 已发现的 Bug 列表

> 暂无 Bug

---

### 已修复的 Bug 列表

> 暂无已修复 Bug

---

**说明**：

- 人工测试时发现的 Bug 请按照上述格式记录在此模块
- Bug 修复后请更新状态和修复时间
- 已修复的 Bug 移动到 "已修复的 Bug 列表" 中
