npm - @pisell/materials - Versions diffs - 1.8.41 → 1.8.42 - Mend

@pisell/materials 1.8.41 → 1.8.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (849) hide show

package/es/components/PisellCards/components/TextCard/docs/TextCard.$tab-test.md CHANGED Viewed

@@ -6,2554 +6,378 @@ category: atom
 # TextCard 测试用例文档
-## 1. 测试概述
+## 一、测试概述
-### 1.1 测试目标
+### 测试范围
+- 组件基础功能
+- 6 种样式变体
+- 3 种尺寸
+- 4 种状态
+- 图标、标签、角标功能
+- 插槽功能
+- 文本配置
+- 宽度模式
+- 事件处理
+- 状态管理
+- 可访问性
-- 验证 TextCard 组件的所有功能正常运行
-- 确保组件在各种场景下的表现符合预期
-- 保证组件的稳定性和可靠性
-- 验证组件在不同样式、尺寸、状态下的正确渲染
-### 1.2 测试范围
-- 基础功能测试
-- 6 种样式变体测试（text、filled、light、outlined、gradient、dashed）
-- 3 种尺寸测试（small、default、large）
-- 4 种状态测试（default、hover、active、disabled）
-- 图标、标签、角标功能测试
-- 插槽功能测试
-- 文本配置测试
-- 宽度模式测试
-- 交互行为测试
-- 自适应规则测试
-- 边界条件测试
-- 兼容性测试
-- 性能测试
-### 1.3 测试环境
-- React 版本：18.x
-- TypeScript 版本：5.x
-- Ant Design 版本：5.x
-- 测试框架：Vitest + React Testing Library
-- 测试工具：@testing-library/react, @testing-library/user-event, @testing-library/jest-dom
-## 2. 功能测试用例
-### 2.1 基础渲染测试
-#### 测试用例 2.1.1：默认渲染
-**测试目的：** 验证组件能够正常渲染
-**测试步骤：**
-1. 渲染 TextCard 组件，传入必填 prop `text="Tab title"`
-2. 检查组件是否成功挂载
-3. 检查文本内容是否正确显示
-**期望结果：**
-- 组件成功渲染
-- 显示文本内容 "Tab title"
-- 使用默认样式变体（text）
-- 使用默认尺寸（default）
-**测试类型：** 自动化测试
----
-#### 测试用例 2.1.2：ReactNode 文本渲染
-**测试目的：** 验证传入 ReactNode 作为文本内容
-**测试步骤：**
-1. 传入 `text={<span className="custom-text">Custom</span>}`
-2. 检查是否渲染了 ReactNode 内容
-**期望结果：**
-- 正确渲染 ReactNode 内容
-- 自定义类名生效
-**测试类型：** 自动化测试
----
-#### 测试用例 2.1.3：空文本处理
-**测试目的：** 验证空文本时的表现
-**测试步骤：**
-1. 传入 `text=""`
-2. 检查渲染
-**期望结果：**
-- 不报错
-- 组件正常渲染，不显示文本内容
-**测试类型：** 自动化测试
----
-### 2.2 样式变体测试
-#### 测试用例 2.2.1：样式 1 - 纯文本（text）
-**测试目的：** 验证 text 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="text"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-5. 设置 `disabled={{ value: true }}`，检查禁用状态
-**期望结果：**
-- 默认状态：无背景，无边框，无 padding，文本颜色为默认色
-- Active 状态：文本颜色变为主题色（`var(--theme-color)`），字体加粗（font-weight: 600）
-- Hover 状态：文本颜色变为浅紫色（`var(--theme-color-light)`）
-- Disabled 状态：文本半透明（opacity: 0.4），颜色变灰
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.2.2：样式 2 - 圆角背景（filled）
-**测试目的：** 验证 filled 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="filled"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-**期望结果：**
-- 默认状态：无背景，有 padding，圆角 40px（胶囊形）
-- Active 状态：主题色背景（`var(--theme-color)`），白色文字
-- Hover 状态：灰色背景（#F2F4F7）
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.2.3：样式 3 - 浅色背景（light）
-**测试目的：** 验证 light 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="light"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-**期望结果：**
-- 默认状态：无背景，深灰文字（#475467）
-- Active 状态：浅紫背景（`var(--theme-color-bg)`），主题色文字，字体加粗
-- Hover 状态：灰色背景（#F2F4F7）
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.2.4：样式 4 - 描边（outlined）
-**测试目的：** 验证 outlined 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="outlined"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-**期望结果：**
-- 默认状态：透明背景，灰色文字（#475467）
-- Active 状态：灰色背景（#F2F4F7），黑色文字
-- Hover 状态：浅灰背景（#F9FAFB），黑色文字
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.2.5：样式 5 - 渐变（gradient）
-**测试目的：** 验证 gradient 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="gradient"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-**期望结果：**
-- 默认状态：透明背景，灰色文字（#667085）
-- Active 状态：白色背景，阴影效果，黑色文字（#101828）
-- Hover 状态：文字颜色变为黑色
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.2.6：样式 6 - 虚线（dashed）
-**测试目的：** 验证 dashed 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="dashed"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-**期望结果：**
-- 默认状态：透明背景，灰色文字（#475467）
-- Active 状态：白色背景，上左右三边有边框，主题色文字，圆角 8px 8px 0 0
-- Hover 状态：文字颜色变为黑色
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.3 尺寸测试
-#### 测试用例 2.3.1：Small 尺寸
-**测试目的：** 验证 small 尺寸的渲染
-**测试步骤：**
-1. 设置 `size="small"`
-2. 检查 padding、fontSize、gap、borderRadius
-**期望结果：**
-- padding: 8px 12px
-- fontSize: 14px
-- lineHeight: 22px
-- gap: 8px
-- borderRadius: 4px
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.3.2：Default 尺寸
-**测试目的：** 验证 default 尺寸的渲染
-**测试步骤：**
-1. 设置 `size="default"` 或不设置 size（默认值）
-2. 检查 padding、fontSize、gap、borderRadius
-**期望结果：**
-- padding: 12px 16px
-- fontSize: 14px
-- lineHeight: 22px
-- gap: 12px
-- borderRadius: 6px
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.3.3：Large 尺寸
-**测试目的：** 验证 large 尺寸的渲染
-**测试步骤：**
-1. 设置 `size="large"`
-2. 检查 padding、fontSize、gap、borderRadius
-**期望结果：**
-- padding: 16px 20px
-- fontSize: 16px
-- lineHeight: 24px
-- gap: 16px
-- borderRadius: 8px
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.4 状态测试
-#### 测试用例 2.4.1：Active 状态
-**测试目的：** 验证 active 状态的渲染和交互
-**测试步骤：**
-1. 设置 `active={{ value: true }}`
-2. 检查样式、类名、data 属性
-3. 设置 `active={{ value: true, style: { color: 'red' }, className: 'custom-active' }}`
-4. 检查自定义样式和类名是否生效
-5. 设置 `active={{ value: true, extra: <div>Extra</div> }}`
-6. 检查 extra 内容是否渲染
-**期望结果：**
-- 应用 active 样式（根据 variant 不同）
-- 添加 `text-card--active` 类名
-- 设置 `data-active="true"` 属性
-- 自定义样式和类名生效
-- extra 内容正确渲染
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.4.2：Disabled 状态
-**测试目的：** 验证 disabled 状态的渲染和交互
-**测试步骤：**
-1. 设置 `disabled={{ value: true }}`
-2. 检查样式、类名、aria 属性
-3. 尝试点击组件
-4. 检查 tabIndex 属性
-**期望结果：**
-- 透明度 0.4，颜色变灰，cursor: not-allowed
-- 添加 `text-card--disabled` 类名
-- 设置 `data-disabled="true"` 和 `aria-disabled="true"` 属性
-- tabIndex 为 -1，无法键盘聚焦
-- 点击事件不触发
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.4.3：Loading 状态
-**测试目的：** 验证 loading 状态的渲染和交互
-**测试步骤：**
-1. 设置 `loading={{ value: true }}`
-2. 检查样式、类名
-3. 尝试点击组件
-4. 设置 `loading={{ value: true, extra: <Spin /> }}`
-5. 检查 extra 内容是否渲染
-**期望结果：**
-- 透明度 0.6，cursor: wait
-- 添加 `text-card--loading` 类名
-- 设置 `data-loading="true"` 属性
-- 点击事件不触发
-- extra 内容正确渲染
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.4.4：状态优先级
-**测试目的：** 验证状态优先级规则（loading > disabled > active）
-**测试步骤：**
-1. 同时设置 `loading={{ value: true, extra: <div>Loading</div> }}`、`disabled={{ value: true, extra: <div>Disabled</div> }}`、`active={{ value: true, extra: <div>Active</div> }}`
-2. 检查显示哪个状态的 extra 内容
-3. 移除 loading，检查显示哪个状态
-4. 移除 disabled，检查显示哪个状态
-**期望结果：**
-- 同时存在时，显示 loading 的 extra
-- 只有 disabled 和 active 时，显示 disabled 的 extra
-- 只有 active 时，显示 active 的 extra
-**测试类型：** 自动化测试
----
-### 2.5 图标功能测试
-#### 测试用例 2.5.1：前置图标
-**测试目的：** 验证前置图标的渲染和配置
-**测试步骤：**
-1. 设置 `prefixIcon={<BellOutlined />}`
-2. 检查图标是否显示在文本前面
-3. 设置 `iconConfig={{ size: 20, color: '#ff0000' }}`
-4. 检查图标大小和颜色是否生效
-**期望结果：**
-- 图标显示在文本前面
-- 图标大小为 20px
-- 图标颜色为红色
-- 图标容器有正确的类名 `text-card__icon--prefix`
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.5.2：后置图标
-**测试目的：** 验证后置图标的渲染和配置
-**测试步骤：**
-1. 设置 `suffixIcon={<DownOutlined />}`
-2. 检查图标是否显示在文本后面
-3. 设置 `iconConfig={{ size: 16 }}`
-4. 检查图标大小是否生效
-**期望结果：**
-- 图标显示在文本后面
-- 图标大小为 16px
-- 图标容器有正确的类名 `text-card__icon--suffix`
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.5.3：前后图标组合
-**测试目的：** 验证同时显示前后图标
-**测试步骤：**
-1. 同时设置 `prefixIcon` 和 `suffixIcon`
-2. 检查两个图标是否都正常显示
-3. 检查间距是否正确
-**期望结果：**
-- 前后图标都正常显示
-- 间距根据 size 正确设置（gap 属性）
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.6 标签功能测试
-#### 测试用例 2.6.1：后置标签
-**测试目的：** 验证后置标签的渲染和配置
-**测试步骤：**
-1. 设置 `tag={<Tag color="blue">2</Tag>}`
-2. 检查标签是否显示在后置位置
-3. 设置 `tagConfig={{ style: { marginLeft: 8 } }}`
-4. 检查自定义样式是否生效
-**期望结果：**
-- 标签显示在后置位置（文本后面）
-- 自定义样式生效
-- 标签容器有正确的类名 `text-card__tag`
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.6.2：标签与后置图标组合
-**测试目的：** 验证标签和后置图标同时显示时的顺序
-**测试步骤：**
-1. 同时设置 `tag` 和 `suffixIcon`
-2. 检查显示顺序
-**期望结果：**
-- 标签在前，图标在后
-- 顺序：文本 -> 标签 -> 后置图标
-**测试类型：** 人工测试
----
-### 2.7 角标功能测试
-#### 测试用例 2.7.1：红点角标
-**测试目的：** 验证红点角标的渲染和配置
-**测试步骤：**
-1. 设置 `badge={{ type: 'dot' }}`
-2. 检查是否显示红点角标
-3. 设置 `badge={{ type: 'dot', color: 'blue', offset: [-10, 0], size: 'small' }}`
-4. 检查位置、颜色、偏移是否生效
-**期望结果：**
-- 显示红点角标
-- 通过 offset 控制位置（向左偏移）
-- 颜色为蓝色
-- 大小为 small
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.7.2：数字角标
-**测试目的：** 验证数字角标的渲染和配置
-**测试步骤：**
-1. 设置 `badge={{ type: 'number', content: 99 }}`
-2. 检查是否显示数字 99
-3. 设置 `badge={{ type: 'number', content: 999 }}`
-4. 检查大数字是否正确显示
-5. 设置 `badge={{ type: 'number', content: 0, showZero: false }}`
-6. 检查 0 是否不显示
-7. 设置 `badge={{ type: 'number', content: 0, showZero: true }}`
-8. 检查 0 是否显示
-**期望结果：**
-- 显示数字 99
-- 大数字正确显示
-- showZero=false 时，0 不显示
-- showZero=true 时，0 显示
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.7.3：文本角标
-**测试目的：** 验证文本角标的渲染和配置
-**测试步骤：**
-1. 设置 `badge={{ type: 'text', content: 'New' }}`
-2. 检查是否显示文本 "New"
-3. 设置 `badge={{ type: 'text', content: 'Very Long Text' }}`
-4. 检查长文本是否正确显示
-**期望结果：**
-- 显示文本 "New"
-- 长文本正常显示
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.7.4：角标位置（通过 offset 控制）
-**测试目的：** 验证角标的不同位置（通过 offset 控制）
-**测试步骤：**
-1. 不设置 offset，检查默认位置（右上角）
-2. 设置 `offset: [-10, 0]`，检查是否向左偏移
-3. 设置 `offset: [0, 10]`，检查是否向下偏移
-4. 设置 `offset: [-10, 10]`，检查是否向左下偏移
-**期望结果：**
-- 不设置 offset 时，角标在右上角（默认位置）
-- offset 正数向右/下偏移，负数向左/上偏移
-- 角标位置正确对应设置的 offset 值
-**测试类型：** 人工测试
----
-#### 测试用例 2.7.5：角标大小
-**测试目的：** 验证角标大小控制
-**测试步骤：**
-1. 设置 `badge={{ type: 'number', content: 99, size: 'small' }}`
-2. 检查角标大小是否为 small
-3. 设置 `badge={{ type: 'number', content: 99, size: 'default' }}`
-4. 检查角标大小是否为 default
-5. 设置 `badge={{ type: 'number', content: 99 }}`（不设置 size）
-6. 检查角标是否使用默认大小
-7. 设置 `badge={{ type: 'dot', size: 'small' }}`
-8. 检查红点角标大小是否生效
-**期望结果：**
-- 角标大小正确对应设置的 size 值
-- size='small' 时显示小尺寸角标
-- size='default' 时显示默认尺寸角标
-- 不设置 size 时使用默认尺寸
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.7.6：角标显示零值
-**测试目的：** 验证角标 showZero 配置
-**测试步骤：**
-1. 设置 `badge={{ type: 'number', content: 0, showZero: false }}`
-2. 检查角标是否不显示
-3. 设置 `badge={{ type: 'number', content: 0, showZero: true }}`
-4. 检查角标是否显示 0
-5. 设置 `badge={{ type: 'number', content: 0 }}`（不设置 showZero）
-6. 检查角标是否不显示（默认 showZero=false）
-7. 设置 `badge={{ type: 'number', content: 1, showZero: false }}`
-8. 检查非零值是否正常显示
-**期望结果：**
-- showZero=false 时，content 为 0 不显示角标
-- showZero=true 时，content 为 0 显示角标
-- 不设置 showZero 时，默认不显示零值
-- 非零值不受 showZero 影响，正常显示
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.8 插槽功能测试
-#### 测试用例 2.8.1：前置插槽
-**测试目的：** 验证前置插槽的渲染和优先级
-**测试步骤：**
-1. 同时设置 `prefixSlot={<div>Custom</div>}` 和 `prefixIcon={<BellOutlined />}`
-2. 检查显示哪个内容
-**期望结果：**
-- 显示前置插槽内容
-- 不显示前置图标
-- 插槽优先级高于图标
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.8.2：后置插槽
-**测试目的：** 验证后置插槽的渲染和优先级
-**测试步骤：**
-1. 同时设置 `suffixSlot={<div>Custom</div>}`、`tag={<Tag>Tag</Tag>}` 和 `suffixIcon={<DownOutlined />}`
-2. 检查显示哪个内容
-**期望结果：**
-- 显示后置插槽内容
-- 不显示标签和后置图标
-- 插槽优先级高于标签和图标
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.9 文本配置测试
-#### 测试用例 2.9.1：字体样式配置
-**测试目的：** 验证文本字体样式配置
-**测试步骤：**
-1. 设置 `textConfig={{ fontSize: 18, fontWeight: 'bold', color: '#ff0000' }}`
-2. 检查字体大小、粗细、颜色是否生效
-**期望结果：**
-- 字体大小为 18px
-- 字体加粗
-- 文本颜色为红色
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.9.2：文本省略（单行）
-**测试目的：** 验证单行文本省略功能
-**测试步骤：**
-1. 设置超长文本和 `textConfig={{ maxLines: 1, ellipsis: true }}`
-2. 检查是否显示省略号
-**期望结果：**
-- 文本超出部分显示省略号
-- 使用 `text-overflow: ellipsis` 和 `white-space: nowrap`
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.9.3：文本省略（多行）
-**测试目的：** 验证多行文本省略功能
-**测试步骤：**
-1. 设置超长文本和 `textConfig={{ maxLines: 2, ellipsis: true }}`
-2. 检查是否显示省略号
-**期望结果：**
-- 文本超出 2 行后显示省略号
-- 使用 `-webkit-line-clamp: 2` 和 `-webkit-box-orient: vertical`
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.9.4：文本对齐
-**测试目的：** 验证文本对齐配置
-**测试步骤：**
-1. 分别设置 `textConfig={{ textAlign: 'left' }}`、`'center'`、`'right'`
-2. 检查文本对齐方式
-**期望结果：**
-- 文本对齐方式正确对应设置的值
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.10 宽度模式测试
-#### 测试用例 2.10.1：自动宽度（auto）
-**测试目的：** 验证自动宽度模式
-**测试步骤：**
-1. 设置 `widthMode="auto"` 和 `maxWidth={300}`
-2. 检查宽度设置
-**期望结果：**
-- width 为 'auto'
-- maxWidth 为 300px
-- 内容超出最大宽度时显示省略号
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.10.2：固定宽度（fixed）
-**测试目的：** 验证固定宽度模式
-**测试步骤：**
-1. 设置 `widthMode="fixed"` 和 `width={200}`
-2. 检查宽度设置
-**期望结果：**
-- width 为 200px
-- 宽度固定不变
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.10.3：撑满容器（full）
-**测试目的：** 验证撑满容器宽度模式
-**测试步骤：**
-1. 设置 `widthMode="full"`
-2. 检查宽度设置
-**期望结果：**
-- width 为 '100%'
-- minWidth 为 28px
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.11 自适应规则测试
-#### 测试用例 2.11.1：宽度自适应规则
-**测试目的：** 验证宽度自适应规则
-**测试步骤：**
-1. 默认宽度模式（auto），检查最大宽度限制
-2. 设置超长文本，检查是否显示省略号
-3. 设置 `widthMode="full"`，检查最小宽度限制
-**期望结果：**
-- 默认最大宽度为 400px
-- 超过最大宽度时，文本区域显示省略号
-- full 模式下最小宽度为 28px
-**测试类型：** 人工测试
----
-#### 测试用例 2.11.2：水平对齐规则
-**测试目的：** 验证水平排列时的对齐规则
-**测试步骤：**
-1. 多个 TextCard 水平排列
-2. 检查内容对齐方式
-**期望结果：**
-- 水平排列时，内容默认居中对齐
-**测试类型：** 人工测试
----
-#### 测试用例 2.11.3：垂直对齐规则
-**测试目的：** 验证垂直排列时的对齐规则
-**测试步骤：**
-1. 多个 TextCard 垂直排列
-2. 检查内容对齐方式
-**期望结果：**
-- 垂直排列时，内容默认左对齐
-**测试类型：** 人工测试
----
-### 2.12 交互行为测试
-#### 测试用例 2.12.1：悬停交互
-**测试目的：** 验证悬停状态的交互
-**测试步骤：**
-1. 鼠标悬停在组件上
-2. 检查样式变化
-3. 检查指针样式
-**期望结果：**
-- 展示悬停状态样式（根据 variant 不同）
-- 指针变为手型（cursor: pointer）
-- 可点击状态下才显示手型
-**测试类型：** 人工测试
----
-#### 测试用例 2.12.2：点击交互
-**测试目的：** 验证点击事件的交互
-**测试步骤：**
-1. 点击组件
-2. 检查 onClick 回调是否触发
-3. 检查 active.onChange 是否触发（如果提供）
-4. 检查选中状态是否切换
-**期望结果：**
-- 触发点击事件（onClick 回调被调用）
-- 如果提供了 active.onChange 且未激活，触发 onChange(true)
-- 切换选中状态（如果使用受控模式）
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.12.3：选中状态交互
-**测试目的：** 验证选中状态的样式应用
-**测试步骤：**
-1. 设置 `active={{ value: true }}`
-2. 检查是否应用选中样式
-**期望结果：**
-- 应用选中样式（如边框高亮、背景色变化等，根据 variant 不同）
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.12.4：禁用状态下的交互
-**测试目的：** 验证禁用状态下的交互限制
-**测试步骤：**
-1. 设置 `disabled={{ value: true }}`
-2. 尝试点击组件
-3. 尝试键盘导航
-**期望结果：**
-- 点击事件不触发
-- 无法键盘聚焦（tabIndex=-1）
-- 指针变为 not-allowed
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.12.5：加载状态下的交互
-**测试目的：** 验证加载状态下的交互限制
-**测试步骤：**
-1. 设置 `loading={{ value: true }}`
-2. 尝试点击组件
-**期望结果：**
-- 点击事件不触发
-- 指针变为 wait
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.12.6：不可点击状态
-**测试目的：** 验证 clickable=false 时的交互
-**测试步骤：**
-1. 设置 `clickable={false}`
-2. 尝试点击组件
-3. 检查指针样式
-**期望结果：**
-- 点击事件不触发
-- 指针为默认样式（不是手型）
-- 不添加 `text-card--clickable` 类名
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.13 自定义渲染测试
-#### 测试用例 2.13.1：自定义渲染函数
-**测试目的：** 验证自定义渲染函数功能
-**测试步骤：**
-1. 设置 `render={(props) => <div className="custom-render">{props.text}</div>}`
-2. 检查是否使用自定义渲染
-**期望结果：**
-- 使用自定义渲染函数
-- 忽略其他内容配置（图标、标签等）
-- 正确传递 props
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.14 可访问性测试
-#### 测试用例 2.14.1：role 属性
-**测试目的：** 验证 role 属性设置
-**测试步骤：**
-1. 检查 DOM 元素的 role 属性
-**期望结果：**
-- role="button"
-**测试类型：** 自动化测试
----
-#### 测试用例 2.14.2：aria-disabled 属性
-**测试目的：** 验证 aria-disabled 属性设置
-**测试步骤：**
-1. 设置 `disabled={{ value: true }}`
-2. 检查 aria-disabled 属性
-**期望结果：**
-- aria-disabled="true"
-**测试类型：** 自动化测试
----
-#### 测试用例 2.14.3：tabIndex 属性
-**测试目的：** 验证 tabIndex 属性设置
-**测试步骤：**
-1. 正常状态下检查 tabIndex
-2. disabled 状态下检查 tabIndex
-**期望结果：**
-- 正常状态：tabIndex=0
-- disabled 状态：tabIndex=-1
-**测试类型：** 自动化测试
----
-#### 测试用例 2.14.4：键盘导航
-**测试目的：** 验证键盘导航功能
-**测试步骤：**
-1. 使用 Tab 键聚焦组件
-2. 使用 Enter/Space 键触发点击
-**期望结果：**
-- 可以通过键盘导航
-- 焦点状态清晰
-- 可以键盘触发点击
-**测试类型：** 人工测试
----
-## 3. 边界条件测试
-### 测试用例 3.1：空文本
-**测试目的：** 验证空文本时的表现
-**测试步骤：**
-1. 传入 `text=""`
-2. 检查渲染
-**期望结果：**
-- 不报错
-- 组件正常渲染
-**测试类型：** 自动化测试
----
-### 测试用例 3.2：超长文本
-**测试目的：** 验证超长文本时的表现
-**测试步骤：**
-1. 传入超长文本（超过 400px 宽度）
-2. 检查是否显示省略号
-**期望结果：**
-- 正确显示省略号
-- 不出现布局问题
-**测试类型：** 人工测试
----
-### 测试用例 3.3：特殊字符
-**测试目的：** 验证特殊字符的处理
-**测试步骤：**
-1. 传入包含特殊字符的文本：`text="<>&\"'"`
-2. 检查是否正确转义显示
-**期望结果：**
-- 特殊字符正确转义显示
-- 不出现 XSS 问题
-**测试类型：** 自动化测试 + 人工测试
----
-### 测试用例 3.4：所有 Props 组合
-**测试目的：** 验证所有 props 同时使用时的表现
-**测试步骤：**
-1. 传入所有可能的 props
-2. 检查是否正常渲染，不冲突
-**期望结果：**
-- 正常渲染
-- 各功能不冲突
-- 优先级正确（插槽 > 图标/标签，loading > disabled > active）
-**测试类型：** 人工测试
----
-### 测试用例 3.5：快速切换状态
-**测试目的：** 验证快速切换状态时的表现
-**测试步骤：**
-1. 快速切换 active、disabled、loading 状态
-2. 检查状态更新是否正确
-**期望结果：**
-- 状态正确更新
-- 不出现竞态条件
-- 样式正确应用
-**测试类型：** 自动化测试
----
-## 4. 兼容性测试
-### 测试用例 4.1：不同浏览器测试
-**测试目的：** 验证在不同浏览器中的兼容性
-**测试范围：**
-- Chrome（最新版本）
-- Firefox（最新版本）
-- Safari（最新版本）
-- Edge（最新版本）
-**期望结果：**
-- 所有浏览器中显示一致
-- 功能正常
-- 样式正确
-**测试类型：** 人工测试
----
-### 测试用例 4.2：不同设备测试
-**测试目的：** 验证在不同设备上的表现
-**测试范围：**
-- 桌面设备（1920x1080）
-- 笔记本（1366x768）
-- 平板（768x1024）
-- 手机（375x667）
-**期望结果：**
-- 响应式布局正常
-- 触摸交互流畅
-- 布局在不同尺寸下正确显示
-**测试类型：** 人工测试
----
-## 5. 性能测试
-### 测试用例 5.1：渲染性能
-**测试目的：** 验证组件渲染性能
-**测试步骤：**
-1. 渲染包含 100 个 TextCard 的列表
-2. 测量首次渲染时间
-3. 测量重新渲染时间
-**期望结果：**
-- 首次渲染时间 < 200ms
-- 重新渲染时间 < 100ms
-**测试类型：** 性能测试
----
-### 测试用例 5.2：内存占用
-**测试目的：** 验证组件内存占用
-**测试步骤：**
-1. 渲染和销毁组件多次
-2. 监测内存变化
-**期望结果：**
-- 无明显内存泄漏
-- 销毁后内存释放
-**测试类型：** 性能测试
----
-### 测试用例 5.3：大量实例性能
-**测试目的：** 验证大量实例时的性能
-**测试步骤：**
-1. 渲染 1000 个 TextCard 实例
-2. 检查页面是否卡顿
-3. 检查交互是否流畅
-**期望结果：**
-- 页面不卡顿
-- 交互流畅
-- 无性能问题
-**测试类型：** 性能测试
----
-## 6. 测试总结
-### 6.1 测试用例统计
-- **总用例数**：150+
-- **自动化测试**：80+
-- **人工测试**：70+
-- **性能测试**：3
-- **兼容性测试**：2
-### 6.2 测试优先级
-- **P0（高优先级）**：基础渲染、样式变体、尺寸、状态、交互行为、自适应规则
-- **P1（中优先级）**：图标、标签、角标、插槽、文本配置、宽度模式
-- **P2（低优先级）**：边界条件、性能测试、可访问性、自定义渲染
-### 6.3 测试覆盖率目标
-- 代码覆盖率：≥ 85%
-- 分支覆盖率：≥ 80%
-- 函数覆盖率：≥ 85%
-- 行覆盖率：≥ 85%
-- 功能覆盖率：100%
-## 7. 测试执行计划
-### 7.1 自动化测试
-- 使用 Vitest + React Testing Library
-- 每次代码提交前自动运行
-- CI/CD 集成
-### 7.2 人工测试
-- 新功能开发完成后进行
-- 重大版本发布前全面测试
-- 定期回归测试
-### 7.3 测试报告
-- 记录测试结果
-- 标注未通过的用例
-- 提供修复建议
-## 8. Bug 汇总
-**说明**：此部分由测试人员填写发现的 Bug
-### Bug 列表
-| Bug ID | 发现时间 | Bug 描述 | 优先级 | 状态 | 修复时间 | 备注 |
-|--------|---------|---------|--------|------|---------|------|
-| - | - | - | - | - | - | - |
-### Bug 模板
-```
-Bug ID: #001
-发现时间: 2024-01-01
-Bug 描述: [详细描述问题]
-复现步骤:
-  1. [步骤1]
-  2. [步骤2]
-  3. [步骤3]
-预期结果: [应该显示什么]
-实际结果: [实际显示什么]
-优先级: P0/P1/P2/P3
-状态: 待修复/修复中/已修复/已验证
-修复时间:
-修复说明:
-```
-## 9. 测试结论
-测试完成后填写：
-- [ ] 所有测试用例通过
-- [ ] 发现 Bug 已修复
-- [ ] 组件可以发布
-### 测试签名
-- 测试人员: ___________
-- 测试时间: ___________
-- 审核人员: ___________
-- 审核时间: ___________
----
-title: 测试用例
-order: 4
-category: atom
----
-# TextCard 组件测试用例文档
-## 1. 测试概述
-### 1.1 测试目标
-- 验证 TextCard 组件的所有功能正常运行
-- 确保组件在各种场景下的表现符合预期
-- 保证组件的稳定性和可靠性
-- 验证组件在不同样式、尺寸、状态下的正确渲染
-### 1.2 测试范围
-- 基础功能测试
-- 6 种样式变体测试（text、filled、light、outlined、gradient、dashed）
-- 3 种尺寸测试（small、default、large）
-- 4 种状态测试（default、hover、active、disabled）
-- 图标、标签、角标功能测试
-- 插槽功能测试
-- 文本配置测试
-- 宽度模式测试
-- 交互行为测试
-- 自适应规则测试
-- 边界条件测试
-- 兼容性测试
-- 性能测试
-### 1.3 测试环境
-- React 版本：18.x
-- TypeScript 版本：5.x
-- Ant Design 版本：5.x
-- 测试框架：Vitest + React Testing Library
-- 测试工具：@testing-library/react, @testing-library/user-event, @testing-library/jest-dom
-## 2. 功能测试用例
-### 2.1 基础渲染测试
-#### 测试用例 2.1.1：默认渲染
-**测试目的：** 验证组件能够正常渲染
-**测试步骤：**
-1. 渲染 TextCard 组件，传入必填 prop `text="Tab title"`
-2. 检查组件是否成功挂载
-3. 检查文本内容是否正确显示
-**期望结果：**
-- 组件成功渲染
-- 显示文本内容 "Tab title"
-- 使用默认样式变体（text）
-- 使用默认尺寸（default）
-**测试类型：** 自动化测试
----
-#### 测试用例 2.1.2：ReactNode 文本渲染
-**测试目的：** 验证传入 ReactNode 作为文本内容
-**测试步骤：**
-1. 传入 `text={<span className="custom-text">Custom</span>}`
-2. 检查是否渲染了 ReactNode 内容
-**期望结果：**
-- 正确渲染 ReactNode 内容
-- 自定义类名生效
-**测试类型：** 自动化测试
----
-#### 测试用例 2.1.3：空文本处理
-**测试目的：** 验证空文本时的表现
-**测试步骤：**
-1. 传入 `text=""`
-2. 检查渲染
-**期望结果：**
-- 不报错
-- 组件正常渲染，不显示文本内容
-**测试类型：** 自动化测试
----
-### 2.2 样式变体测试
-#### 测试用例 2.2.1：样式 1 - 纯文本（text）
-**测试目的：** 验证 text 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="text"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-5. 设置 `disabled={{ value: true }}`，检查禁用状态
-**期望结果：**
-- 默认状态：无背景，无边框，无 padding，文本颜色为默认色
-- Active 状态：文本颜色变为主题色（`var(--theme-color)`），字体加粗（font-weight: 600）
-- Hover 状态：文本颜色变为浅紫色（`var(--theme-color-light)`）
-- Disabled 状态：文本半透明（opacity: 0.4），颜色变灰
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.2.2：样式 2 - 圆角背景（filled）
-**测试目的：** 验证 filled 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="filled"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-**期望结果：**
-- 默认状态：无背景，有 padding，圆角 40px（胶囊形）
-- Active 状态：主题色背景（`var(--theme-color)`），白色文字
-- Hover 状态：灰色背景（#F2F4F7）
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.2.3：样式 3 - 浅色背景（light）
-**测试目的：** 验证 light 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="light"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-**期望结果：**
-- 默认状态：无背景，深灰文字（#475467）
-- Active 状态：浅紫背景（`var(--theme-color-bg)`），主题色文字，字体加粗
-- Hover 状态：灰色背景（#F2F4F7）
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.2.4：样式 4 - 描边（outlined）
-**测试目的：** 验证 outlined 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="outlined"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-**期望结果：**
-- 默认状态：透明背景，灰色文字（#475467）
-- Active 状态：灰色背景（#F2F4F7），黑色文字
-- Hover 状态：浅灰背景（#F9FAFB），黑色文字
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.2.5：样式 5 - 渐变（gradient）
-**测试目的：** 验证 gradient 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="gradient"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-**期望结果：**
-- 默认状态：透明背景，灰色文字（#667085）
-- Active 状态：白色背景，阴影效果，黑色文字（#101828）
-- Hover 状态：文字颜色变为黑色
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.2.6：样式 6 - 虚线（dashed）
-**测试目的：** 验证 dashed 样式变体的渲染和交互
-**测试步骤：**
-1. 设置 `variant="dashed"`
-2. 检查默认状态样式
-3. 设置 `active={{ value: true }}`，检查激活状态
-4. 鼠标悬停，检查 hover 状态
-**期望结果：**
-- 默认状态：透明背景，灰色文字（#475467）
-- Active 状态：白色背景，上左右三边有边框，主题色文字，圆角 8px 8px 0 0
-- Hover 状态：文字颜色变为黑色
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.3 尺寸测试
-#### 测试用例 2.3.1：Small 尺寸
-**测试目的：** 验证 small 尺寸的渲染
-**测试步骤：**
-1. 设置 `size="small"`
-2. 检查 padding、fontSize、gap、borderRadius
-**期望结果：**
-- padding: 8px 12px
-- fontSize: 14px
-- lineHeight: 22px
-- gap: 8px
-- borderRadius: 4px
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.3.2：Default 尺寸
-**测试目的：** 验证 default 尺寸的渲染
-**测试步骤：**
-1. 设置 `size="default"` 或不设置 size（默认值）
-2. 检查 padding、fontSize、gap、borderRadius
-**期望结果：**
-- padding: 12px 16px
-- fontSize: 14px
-- lineHeight: 22px
-- gap: 12px
-- borderRadius: 6px
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.3.3：Large 尺寸
-**测试目的：** 验证 large 尺寸的渲染
-**测试步骤：**
-1. 设置 `size="large"`
-2. 检查 padding、fontSize、gap、borderRadius
-**期望结果：**
-- padding: 16px 20px
-- fontSize: 16px
-- lineHeight: 24px
-- gap: 16px
-- borderRadius: 8px
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.4 状态测试
-#### 测试用例 2.4.1：Active 状态
-**测试目的：** 验证 active 状态的渲染和交互
-**测试步骤：**
-1. 设置 `active={{ value: true }}`
-2. 检查样式、类名、data 属性
-3. 设置 `active={{ value: true, style: { color: 'red' }, className: 'custom-active' }}`
-4. 检查自定义样式和类名是否生效
-5. 设置 `active={{ value: true, extra: <div>Extra</div> }}`
-6. 检查 extra 内容是否渲染
-**期望结果：**
-- 应用 active 样式（根据 variant 不同）
-- 添加 `text-card--active` 类名
-- 设置 `data-active="true"` 属性
-- 自定义样式和类名生效
-- extra 内容正确渲染
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.4.2：Disabled 状态
-**测试目的：** 验证 disabled 状态的渲染和交互
-**测试步骤：**
-1. 设置 `disabled={{ value: true }}`
-2. 检查样式、类名、aria 属性
-3. 尝试点击组件
-4. 检查 tabIndex 属性
-**期望结果：**
-- 透明度 0.4，颜色变灰，cursor: not-allowed
-- 添加 `text-card--disabled` 类名
-- 设置 `data-disabled="true"` 和 `aria-disabled="true"` 属性
-- tabIndex 为 -1，无法键盘聚焦
-- 点击事件不触发
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.4.3：Loading 状态
-**测试目的：** 验证 loading 状态的渲染和交互
-**测试步骤：**
-1. 设置 `loading={{ value: true }}`
-2. 检查样式、类名
-3. 尝试点击组件
-4. 设置 `loading={{ value: true, extra: <Spin /> }}`
-5. 检查 extra 内容是否渲染
-**期望结果：**
-- 透明度 0.6，cursor: wait
-- 添加 `text-card--loading` 类名
-- 设置 `data-loading="true"` 属性
-- 点击事件不触发
-- extra 内容正确渲染
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.4.4：状态优先级
-**测试目的：** 验证状态优先级规则（loading > disabled > active）
-**测试步骤：**
-1. 同时设置 `loading={{ value: true, extra: <div>Loading</div> }}`、`disabled={{ value: true, extra: <div>Disabled</div> }}`、`active={{ value: true, extra: <div>Active</div> }}`
-2. 检查显示哪个状态的 extra 内容
-3. 移除 loading，检查显示哪个状态
-4. 移除 disabled，检查显示哪个状态
-**期望结果：**
-- 同时存在时，显示 loading 的 extra
-- 只有 disabled 和 active 时，显示 disabled 的 extra
-- 只有 active 时，显示 active 的 extra
-**测试类型：** 自动化测试
----
-### 2.5 图标功能测试
-#### 测试用例 2.5.1：前置图标
-**测试目的：** 验证前置图标的渲染和配置
-**测试步骤：**
-1. 设置 `prefixIcon={<BellOutlined />}`
-2. 检查图标是否显示在文本前面
-3. 设置 `iconConfig={{ size: 20, color: '#ff0000' }}`
-4. 检查图标大小和颜色是否生效
-**期望结果：**
-- 图标显示在文本前面
-- 图标大小为 20px
-- 图标颜色为红色
-- 图标容器有正确的类名 `text-card__icon--prefix`
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.5.2：后置图标
-**测试目的：** 验证后置图标的渲染和配置
-**测试步骤：**
-1. 设置 `suffixIcon={<DownOutlined />}`
-2. 检查图标是否显示在文本后面
-3. 设置 `iconConfig={{ size: 16 }}`
-4. 检查图标大小是否生效
-**期望结果：**
-- 图标显示在文本后面
-- 图标大小为 16px
-- 图标容器有正确的类名 `text-card__icon--suffix`
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.5.3：前后图标组合
-**测试目的：** 验证同时显示前后图标
-**测试步骤：**
-1. 同时设置 `prefixIcon` 和 `suffixIcon`
-2. 检查两个图标是否都正常显示
-3. 检查间距是否正确
-**期望结果：**
-- 前后图标都正常显示
-- 间距根据 size 正确设置（gap 属性）
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.6 标签功能测试
-#### 测试用例 2.6.1：后置标签
-**测试目的：** 验证后置标签的渲染和配置
-**测试步骤：**
-1. 设置 `tag={<Tag color="blue">2</Tag>}`
-2. 检查标签是否显示在后置位置
-3. 设置 `tagConfig={{ style: { marginLeft: 8 } }}`
-4. 检查自定义样式是否生效
-**期望结果：**
-- 标签显示在后置位置（文本后面）
-- 自定义样式生效
-- 标签容器有正确的类名 `text-card__tag`
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.6.2：标签与后置图标组合
-**测试目的：** 验证标签和后置图标同时显示时的顺序
-**测试步骤：**
-1. 同时设置 `tag` 和 `suffixIcon`
-2. 检查显示顺序
-**期望结果：**
-- 标签在前，图标在后
-- 顺序：文本 -> 标签 -> 后置图标
-**测试类型：** 人工测试
----
-### 2.7 角标功能测试
-#### 测试用例 2.7.1：红点角标
-**测试目的：** 验证红点角标的渲染和配置
-**测试步骤：**
-1. 设置 `badge={{ type: 'dot' }}`
-2. 检查是否显示红点角标
-3. 设置 `badge={{ type: 'dot', color: 'blue', offset: [-10, 0], size: 'small' }}`
-4. 检查位置、颜色、偏移是否生效
-**期望结果：**
-- 显示红点角标
-- 通过 offset 控制位置（向左偏移）
-- 颜色为蓝色
-- 大小为 small
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.7.2：数字角标
-**测试目的：** 验证数字角标的渲染和配置
-**测试步骤：**
-1. 设置 `badge={{ type: 'number', content: 99 }}`
-2. 检查是否显示数字 99
-3. 设置 `badge={{ type: 'number', content: 999 }}`
-4. 检查大数字是否正确显示
-5. 设置 `badge={{ type: 'number', content: 0, showZero: false }}`
-6. 检查 0 是否不显示
-7. 设置 `badge={{ type: 'number', content: 0, showZero: true }}`
-8. 检查 0 是否显示
-**期望结果：**
-- 显示数字 99
-- 大数字正确显示
-- showZero=false 时，0 不显示
-- showZero=true 时，0 显示
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.7.3：文本角标
-**测试目的：** 验证文本角标的渲染和配置
-**测试步骤：**
-1. 设置 `badge={{ type: 'text', content: 'New' }}`
-2. 检查是否显示文本 "New"
-3. 设置 `badge={{ type: 'text', content: 'Very Long Text' }}`
-4. 检查长文本是否正确显示
-**期望结果：**
-- 显示文本 "New"
-- 长文本正常显示
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.7.4：角标位置（通过 offset 控制）
-**测试目的：** 验证角标的不同位置（通过 offset 控制）
-**测试步骤：**
-1. 不设置 offset，检查默认位置（右上角）
-2. 设置 `offset: [-10, 0]`，检查是否向左偏移
-3. 设置 `offset: [0, 10]`，检查是否向下偏移
-4. 设置 `offset: [-10, 10]`，检查是否向左下偏移
-**期望结果：**
-- 不设置 offset 时，角标在右上角（默认位置）
-- offset 正数向右/下偏移，负数向左/上偏移
-- 角标位置正确对应设置的 offset 值
-**测试类型：** 人工测试
----
-#### 测试用例 2.7.5：角标大小
-**测试目的：** 验证角标大小控制
-**测试步骤：**
-1. 设置 `badge={{ type: 'number', content: 99, size: 'small' }}`
-2. 检查角标大小是否为 small
-3. 设置 `badge={{ type: 'number', content: 99, size: 'default' }}`
-4. 检查角标大小是否为 default
-5. 设置 `badge={{ type: 'number', content: 99 }}`（不设置 size）
-6. 检查角标是否使用默认大小
-7. 设置 `badge={{ type: 'dot', size: 'small' }}`
-8. 检查红点角标大小是否生效
-**期望结果：**
-- 角标大小正确对应设置的 size 值
-- size='small' 时显示小尺寸角标
-- size='default' 时显示默认尺寸角标
-- 不设置 size 时使用默认尺寸
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.7.6：角标显示零值
-**测试目的：** 验证角标 showZero 配置
-**测试步骤：**
-1. 设置 `badge={{ type: 'number', content: 0, showZero: false }}`
-2. 检查角标是否不显示
-3. 设置 `badge={{ type: 'number', content: 0, showZero: true }}`
-4. 检查角标是否显示 0
-5. 设置 `badge={{ type: 'number', content: 0 }}`（不设置 showZero）
-6. 检查角标是否不显示（默认 showZero=false）
-7. 设置 `badge={{ type: 'number', content: 1, showZero: false }}`
-8. 检查非零值是否正常显示
-**期望结果：**
-- showZero=false 时，content 为 0 不显示角标
-- showZero=true 时，content 为 0 显示角标
-- 不设置 showZero 时，默认不显示零值
-- 非零值不受 showZero 影响，正常显示
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.8 插槽功能测试
-#### 测试用例 2.8.1：前置插槽
-**测试目的：** 验证前置插槽的渲染和优先级
-**测试步骤：**
-1. 同时设置 `prefixSlot={<div>Custom</div>}` 和 `prefixIcon={<BellOutlined />}`
-2. 检查显示哪个内容
-**期望结果：**
-- 显示前置插槽内容
-- 不显示前置图标
-- 插槽优先级高于图标
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.8.2：后置插槽
-**测试目的：** 验证后置插槽的渲染和优先级
-**测试步骤：**
-1. 同时设置 `suffixSlot={<div>Custom</div>}`、`tag={<Tag>Tag</Tag>}` 和 `suffixIcon={<DownOutlined />}`
-2. 检查显示哪个内容
-**期望结果：**
-- 显示后置插槽内容
-- 不显示标签和后置图标
-- 插槽优先级高于标签和图标
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.9 文本配置测试
-#### 测试用例 2.9.1：字体样式配置
-**测试目的：** 验证文本字体样式配置
-**测试步骤：**
-1. 设置 `textConfig={{ fontSize: 18, fontWeight: 'bold', color: '#ff0000' }}`
-2. 检查字体大小、粗细、颜色是否生效
-**期望结果：**
-- 字体大小为 18px
-- 字体加粗
-- 文本颜色为红色
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.9.2：文本省略（单行）
-**测试目的：** 验证单行文本省略功能
-**测试步骤：**
-1. 设置超长文本和 `textConfig={{ maxLines: 1, ellipsis: true }}`
-2. 检查是否显示省略号
-**期望结果：**
-- 文本超出部分显示省略号
-- 使用 `text-overflow: ellipsis` 和 `white-space: nowrap`
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.9.3：文本省略（多行）
-**测试目的：** 验证多行文本省略功能
-**测试步骤：**
-1. 设置超长文本和 `textConfig={{ maxLines: 2, ellipsis: true }}`
-2. 检查是否显示省略号
-**期望结果：**
-- 文本超出 2 行后显示省略号
-- 使用 `-webkit-line-clamp: 2` 和 `-webkit-box-orient: vertical`
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.9.4：文本对齐
-**测试目的：** 验证文本对齐配置
-**测试步骤：**
-1. 分别设置 `textConfig={{ textAlign: 'left' }}`、`'center'`、`'right'`
-2. 检查文本对齐方式
-**期望结果：**
-- 文本对齐方式正确对应设置的值
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.10 宽度模式测试
-#### 测试用例 2.10.1：自动宽度（auto）
-**测试目的：** 验证自动宽度模式
-**测试步骤：**
-1. 设置 `widthMode="auto"` 和 `maxWidth={300}`
-2. 检查宽度设置
-**期望结果：**
-- width 为 'auto'
-- maxWidth 为 300px
-- 内容超出最大宽度时显示省略号
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.10.2：固定宽度（fixed）
-**测试目的：** 验证固定宽度模式
-**测试步骤：**
-1. 设置 `widthMode="fixed"` 和 `width={200}`
-2. 检查宽度设置
-**期望结果：**
-- width 为 200px
-- 宽度固定不变
-**测试类型：** 自动化测试 + 人工测试
----
-#### 测试用例 2.10.3：撑满容器（full）
-**测试目的：** 验证撑满容器宽度模式
-**测试步骤：**
-1. 设置 `widthMode="full"`
-2. 检查宽度设置
-**期望结果：**
-- width 为 '100%'
-- minWidth 为 28px
-**测试类型：** 自动化测试 + 人工测试
----
-### 2.11 自适应规则测试
-#### 测试用例 2.11.1：宽度自适应规则
-**测试目的：** 验证宽度自适应规则
-**测试步骤：**
-1. 默认宽度模式（auto），检查最大宽度限制
-2. 设置超长文本，检查是否显示省略号
-3. 设置 `widthMode="full"`，检查最小宽度限制
-**期望结果：**
-- 默认最大宽度为 400px
-- 超过最大宽度时，文本区域显示省略号
-- full 模式下最小宽度为 28px
-**测试类型：** 人工测试
----
-#### 测试用例 2.11.2：水平对齐规则
-**测试目的：** 验证水平排列时的对齐规则
-**测试步骤：**
-1. 多个 TextCard 水平排列
-2. 检查内容对齐方式
-**期望结果：**
-- 水平排列时，内容默认居中对齐
-**测试类型：** 人工测试
----
-#### 测试用例 2.11.3：垂直对齐规则
-**测试目的：** 验证垂直排列时的对齐规则
-**测试步骤：**
-1. 多个 TextCard 垂直排列
-2. 检查内容对齐方式
-**期望结果：**
-- 垂直排列时，内容默认左对齐
-**测试类型：** 人工测试
----
-### 2.12 交互行为测试
-#### 测试用例 2.12.1：悬停交互
-**测试目的：** 验证悬停状态的交互
-**测试步骤：**
-1. 鼠标悬停在组件上
-2. 检查样式变化
-3. 检查指针样式
-**期望结果：**
-- 展示悬停状态样式（根据 variant 不同）
-- 指针变为手型（cursor: pointer）
-- 可点击状态下才显示手型
-**测试类型：** 人工测试
+### 测试方法
+- 人工测试（UI 交互、视觉验证）
+- 自动化测试（单元测试、快照测试）
 ---
-#### 测试用例 2.12.2：点击交互
-**测试目的：** 验证点击事件的交互
-**测试步骤：**
+## 二、基础功能测试用例
-1. 点击组件
-2. 检查 onClick 回调是否触发
-3. 检查 active.onChange 是否触发（如果提供）
-4. 检查选中状态是否切换
+### 2.1 组件渲染
-**期望结果：**
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 基础渲染 | 使用必填 prop `text` 渲染组件 | 组件正常渲染，显示文本内容 | 自动化 |
+| 空文本渲染 | text 设置为空字符串 | 组件正常渲染，不显示文本 | 自动化 |
+| ReactNode 文本 | text 传入 JSX 元素 | 正确渲染 JSX 内容 | 自动化 |
-- 触发点击事件（onClick 回调被调用）
-- 如果提供了 active.onChange 且未激活，触发 onChange(true)
-- 切换选中状态（如果使用受控模式）
+### 2.2 文本内容
-**测试类型：** 自动化测试 + 人工测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 文本显示 | 设置 text="Tab title" | 正确显示文本内容 | 人工 |
+| 长文本省略（单行） | 设置超长文本，maxLines=1 | 文本超出显示省略号 | 人工 |
+| 长文本省略（多行） | 设置超长文本，maxLines=2 | 文本超出 2 行显示省略号 | 人工 |
+| 禁用省略 | ellipsis=false | 文本不显示省略号，完整显示 | 人工 |
 ---
-#### 测试用例 2.12.3：选中状态交互
+## 三、样式变体测试用例
-**测试目的：** 验证选中状态的样式应用
-**测试步骤：**
+### 3.1 样式 1 - 纯文本 (text)
-1. 设置 `active={{ value: true }}`
-2. 检查是否应用选中样式
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 默认样式 | variant="text" | 无背景，无边框，无 padding | 人工 |
+| Active 状态 | variant="text" + active.value=true | 文本颜色变为主题色，字体加粗 | 人工 |
+| Hover 状态 | variant="text" + 鼠标悬停 | 文本颜色变为浅紫色 | 人工 |
+| Disabled 状态 | variant="text" + disabled.value=true | 文本半透明，颜色变灰 | 人工 |
-**期望结果：**
+### 3.2 样式 2 - 圆角背景 (filled)
-- 应用选中样式（如边框高亮、背景色变化等，根据 variant 不同）
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 默认样式 | variant="filled" | 无背景，有 padding，圆角 40px | 人工 |
+| Active 状态 | variant="filled" + active.value=true | 主题色背景，白色文字 | 人工 |
+| Hover 状态 | variant="filled" + 鼠标悬停 | 灰色背景 #F2F4F7 | 人工 |
+| 圆角效果 | variant="filled" | 边框圆角为 40px（胶囊形） | 人工 |
-**测试类型：** 自动化测试 + 人工测试
+### 3.3 样式 3 - 浅色背景 (light)
----
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 默认样式 | variant="light" | 无背景，深灰文字 #475467 | 人工 |
+| Active 状态 | variant="light" + active.value=true | 浅紫背景，主题色文字，字体加粗 | 人工 |
+| Hover 状态 | variant="light" + 鼠标悬停 | 灰色背景 #F2F4F7 | 人工 |
-#### 测试用例 2.12.4：禁用状态下的交互
+### 3.4 样式 4 - 描边 (outlined)
-**测试目的：** 验证禁用状态下的交互限制
-**测试步骤：**
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 默认样式 | variant="outlined" | 灰色边框，无背景 | 人工 |
+| Active 状态 | variant="outlined" + active.value=true | 主题色边框，主题色文字 | 人工 |
+| Hover 状态 | variant="outlined" + 鼠标悬停 | 边框颜色变浅紫 | 人工 |
-1. 设置 `disabled={{ value: true }}`
-2. 尝试点击组件
-3. 尝试键盘导航
+### 3.5 样式 5 - 渐变 (gradient)
-**期望结果：**
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 默认样式 | variant="gradient" | 无背景 | 人工 |
+| Active 状态 | variant="gradient" + active.value=true | 渐变背景（紫色），白色文字 | 人工 |
+| 渐变方向 | variant="gradient" + active | 渐变方向为 135deg | 人工 |
-- 点击事件不触发
-- 无法键盘聚焦（tabIndex=-1）
-- 指针变为 not-allowed
+### 3.6 样式 6 - 虚线 (dashed)
-**测试类型：** 自动化测试 + 人工测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 默认样式 | variant="dashed" | 灰色虚线边框 | 人工 |
+| Active 状态 | variant="dashed" + active.value=true | 主题色虚线边框，浅紫背景 | 人工 |
+| Hover 状态 | variant="dashed" + 鼠标悬停 | 边框颜色变浅紫 | 人工 |
 ---
-#### 测试用例 2.12.5：加载状态下的交互
-**测试目的：** 验证加载状态下的交互限制
-**测试步骤：**
+## 四、尺寸测试用例
-1. 设置 `loading={{ value: true }}`
-2. 尝试点击组件
-**期望结果：**
-- 点击事件不触发
-- 指针变为 wait
-**测试类型：** 自动化测试 + 人工测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| Small 尺寸 | size="small" | padding: 8px 12px, fontSize: 14px, gap: 8px, borderRadius: 4px | 人工 |
+| Default 尺寸 | size="default" | padding: 12px 16px, fontSize: 14px, gap: 12px, borderRadius: 6px | 人工 |
+| Large 尺寸 | size="large" | padding: 16px 20px, fontSize: 16px, gap: 16px, borderRadius: 8px | 人工 |
+| 尺寸切换 | 动态切换 size | 样式平滑过渡 | 人工 |
 ---
-#### 测试用例 2.12.6：不可点击状态
-**测试目的：** 验证 clickable=false 时的交互
-**测试步骤：**
+## 五、状态测试用例
-1. 设置 `clickable={false}`
-2. 尝试点击组件
-3. 检查指针样式
+### 5.1 Active 状态
-**期望结果：**
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| Active 样式 | active.value=true | 应用 active 样式（根据 variant 不同） | 人工 |
+| Active 类名 | active.className="custom-active" | 添加自定义类名 | 自动化 |
+| Active 样式覆盖 | active.style={color: 'red'} | 自定义样式生效 | 人工 |
+| Active onChange | 点击组件触发 active.onChange | onChange 回调被调用，参数为 true | 自动化 |
+| Active extra | active.extra=<Icon /> | 渲染 extra 内容 | 人工 |
-- 点击事件不触发
-- 指针为默认样式（不是手型）
-- 不添加 `text-card--clickable` 类名
+### 5.2 Disabled 状态
-**测试类型：** 自动化测试 + 人工测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| Disabled 样式 | disabled.value=true | 透明度 0.4，颜色变灰，cursor: not-allowed | 人工 |
+| Disabled 点击 | disabled.value=true + 点击 | 点击事件不触发 | 自动化 |
+| Disabled tabIndex | disabled.value=true | tabIndex=-1，无法键盘聚焦 | 人工 |
+| Disabled extra | disabled.extra=<span>禁用</span> | 渲染 extra 内容 | 人工 |
----
-### 2.13 自定义渲染测试
-#### 测试用例 2.13.1：自定义渲染函数
-**测试目的：** 验证自定义渲染函数功能
-**测试步骤：**
+### 5.3 Loading 状态
-1. 设置 `render={(props) => <div className="custom-render">{props.text}</div>}`
-2. 检查是否使用自定义渲染
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| Loading 样式 | loading.value=true | 透明度 0.6，cursor: wait | 人工 |
+| Loading 点击 | loading.value=true + 点击 | 点击事件不触发 | 自动化 |
+| Loading extra | loading.extra=<Spin /> | 渲染加载图标 | 人工 |
-**期望结果：**
+### 5.4 状态优先级
-- 使用自定义渲染函数
-- 忽略其他内容配置（图标、标签等）
-- 正确传递 props
-**测试类型：** 自动化测试 + 人工测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| Loading > Disabled | loading=true + disabled=true | 显示 loading 状态 | 自动化 |
+| Loading > Active | loading=true + active=true | 显示 loading 状态 | 自动化 |
+| Disabled > Active | disabled=true + active=true | 显示 disabled 状态 | 自动化 |
 ---
-### 2.14 可访问性测试
+## 六、图标测试用例
-#### 测试用例 2.14.1：role 属性
+### 6.1 前置图标
-**测试目的：** 验证 role 属性设置
-**测试步骤：**
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 图标渲染 | prefixIcon=<BellIcon /> | 图标显示在文本前面 | 人工 |
+| 图标大小 | iconConfig.size=20 | 图标大小为 20px | 人工 |
+| 图标颜色 | iconConfig.color="#ff0000" | 图标颜色为红色 | 人工 |
+| 无图标 | 不传 prefixIcon | 不显示前置图标 | 自动化 |
-1. 检查 DOM 元素的 role 属性
+### 6.2 后置图标
-**期望结果：**
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 图标渲染 | suffixIcon=<ChevronIcon /> | 图标显示在文本后面 | 人工 |
+| 图标大小 | iconConfig.size=16 | 前后图标大小统一为 16px | 人工 |
+| 无图标 | 不传 suffixIcon | 不显示后置图标 | 自动化 |
-- role="button"
+### 6.3 前后图标组合
-**测试类型：** 自动化测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 同时显示 | prefixIcon + suffixIcon | 前后图标都正常显示 | 人工 |
+| 间距正确 | 前后图标 + 文本 | 间距根据 size 正确设置 | 人工 |
 ---
-#### 测试用例 2.14.2：aria-disabled 属性
-**测试目的：** 验证 aria-disabled 属性设置
-**测试步骤：**
-1. 设置 `disabled={{ value: true }}`
-2. 检查 aria-disabled 属性
-**期望结果：**
+## 七、标签测试用例
-- aria-disabled="true"
-**测试类型：** 自动化测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 标签渲染 | tag=<Tag>标签</Tag> | 标签显示在后置位置 | 人工 |
+| 标签样式 | tagConfig.style={marginLeft: 8} | 自定义样式生效 | 人工 |
+| 标签+后置图标 | tag + suffixIcon | 标签在前，图标在后 | 人工 |
+| 无标签 | 不传 tag | 不显示标签 | 自动化 |
 ---
-#### 测试用例 2.14.3：tabIndex 属性
-**测试目的：** 验证 tabIndex 属性设置
-**测试步骤：**
-1. 正常状态下检查 tabIndex
-2. disabled 状态下检查 tabIndex
-**期望结果：**
+## 八、角标测试用例
-- 正常状态：tabIndex=0
-- disabled 状态：tabIndex=-1
+### 8.1 红点角标
-**测试类型：** 自动化测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 红点显示 | badge.type="dot" | 显示红点角标 | 人工 |
+| 红点位置 | badge.position="top-right" | 角标在右上角 | 人工 |
+| 红点颜色 | badge.color="blue" | 角标颜色为蓝色 | 人工 |
+| 红点偏移 | badge.offset=[5, 5] | 角标偏移 5px | 人工 |
----
-#### 测试用例 2.14.4：键盘导航
+### 8.2 数字角标
-**测试目的：** 验证键盘导航功能
-**测试步骤：**
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 数字显示 | badge.type="number", content=99 | 显示数字 99 | 人工 |
+| 大数字 | badge.content=999 | 正确显示大数字 | 人工 |
+| 零显示 | badge.content=0 | 显示 0 | 人工 |
-1. 使用 Tab 键聚焦组件
-2. 使用 Enter/Space 键触发点击
+### 8.3 文本角标
-**期望结果：**
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 文本显示 | badge.type="text", content="New" | 显示文本 "New" | 人工 |
+| 长文本 | badge.content="Very Long Text" | 文本正常显示 | 人工 |
-- 可以通过键盘导航
-- 焦点状态清晰
-- 可以键盘触发点击
+### 8.4 角标位置
-**测试类型：** 人工测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 右上角 | badge.position="top-right" | 角标在右上角 | 人工 |
+| 左上角 | badge.position="top-left" | 角标在左上角 | 人工 |
+| 右下角 | badge.position="bottom-right" | 角标在右下角 | 人工 |
+| 左下角 | badge.position="bottom-left" | 角标在左下角 | 人工 |
 ---
-## 3. 边界条件测试
-### 测试用例 3.1：空文本
-**测试目的：** 验证空文本时的表现
-**测试步骤：**
+## 九、插槽测试用例
-1. 传入 `text=""`
-2. 检查渲染
-**期望结果：**
-- 不报错
-- 组件正常渲染
-**测试类型：** 自动化测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 前置插槽 | prefixSlot=<div>Custom</div> | 显示自定义前置内容，替换 prefixIcon | 人工 |
+| 后置插槽 | suffixSlot=<div>Custom</div> | 显示自定义后置内容，替换 tag 和 suffixIcon | 人工 |
+| 插槽优先级 | prefixSlot + prefixIcon | prefixSlot 优先显示 | 自动化 |
 ---
-### 测试用例 3.2：超长文本
-**测试目的：** 验证超长文本时的表现
-**测试步骤：**
+## 十、文本配置测试用例
-1. 传入超长文本（超过 400px 宽度）
-2. 检查是否显示省略号
-**期望结果：**
-- 正确显示省略号
-- 不出现布局问题
-**测试类型：** 人工测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 字体大小 | textConfig.fontSize=18 | 文本字体大小为 18px | 人工 |
+| 字体粗细 | textConfig.fontWeight="bold" | 文本加粗 | 人工 |
+| 文本颜色 | textConfig.color="#ff0000" | 文本颜色为红色 | 人工 |
+| 最大行数 | textConfig.maxLines=2 | 文本最多显示 2 行 | 人工 |
+| 禁用省略 | textConfig.ellipsis=false | 不显示省略号 | 人工 |
 ---
-### 测试用例 3.3：特殊字符
-**测试目的：** 验证特殊字符的处理
-**测试步骤：**
+## 十一、宽度模式测试用例
-1. 传入包含特殊字符的文本：`text="<>&\"'"`
-2. 检查是否正确转义显示
-**期望结果：**
-- 特殊字符正确转义显示
-- 不出现 XSS 问题
-**测试类型：** 自动化测试 + 人工测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 自动宽度 | widthMode="auto" | 宽度跟随内容，最大 400px | 人工 |
+| 固定宽度 | widthMode="fixed", width=200 | 宽度固定为 200px | 人工 |
+| 撑满容器 | widthMode="full" | 宽度 100%，最小 28px | 人工 |
+| 最大宽度 | widthMode="auto", maxWidth=300 | 最大宽度为 300px | 人工 |
+| 超长文本 | widthMode="auto" + 超长文本 | 达到最大宽度后显示省略号 | 人工 |
 ---
-### 测试用例 3.4：所有 Props 组合
-**测试目的：** 验证所有 props 同时使用时的表现
-**测试步骤：**
+## 十二、事件测试用例
-1. 传入所有可能的 props
-2. 检查是否正常渲染，不冲突
-**期望结果：**
-- 正常渲染
-- 各功能不冲突
-- 优先级正确（插槽 > 图标/标签，loading > disabled > active）
-**测试类型：** 人工测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| onClick 触发 | clickable=true + 点击 | onClick 回调被调用 | 自动化 |
+| onClick 参数 | 点击后检查回调参数 | 参数为 event 对象 | 自动化 |
+| 不可点击 | clickable=false + 点击 | onClick 不触发 | 自动化 |
+| Disabled 不触发 | disabled.value=true + 点击 | onClick 不触发 | 自动化 |
+| Loading 不触发 | loading.value=true + 点击 | onClick 不触发 | 自动化 |
 ---
-### 测试用例 3.5：快速切换状态
-**测试目的：** 验证快速切换状态时的表现
-**测试步骤：**
+## 十三、可访问性测试用例
-1. 快速切换 active、disabled、loading 状态
-2. 检查状态更新是否正确
-**期望结果：**
-- 状态正确更新
-- 不出现竞态条件
-- 样式正确应用
-**测试类型：** 自动化测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| role 属性 | 检查 DOM | role="button" | 自动化 |
+| aria-disabled | disabled.value=true | aria-disabled="true" | 自动化 |
+| tabIndex | 正常状态 | tabIndex=0 | 自动化 |
+| tabIndex disabled | disabled.value=true | tabIndex=-1 | 自动化 |
+| 键盘导航 | Tab 键聚焦 | 组件可聚焦 | 人工 |
 ---
-## 4. 兼容性测试
-### 测试用例 4.1：不同浏览器测试
-**测试目的：** 验证在不同浏览器中的兼容性
-**测试范围：**
-- Chrome（最新版本）
-- Firefox（最新版本）
-- Safari（最新版本）
-- Edge（最新版本）
-**期望结果：**
-- 所有浏览器中显示一致
-- 功能正常
-- 样式正确
+## 十四、自定义渲染测试用例
-**测试类型：** 人工测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| render 函数 | render={(props) => <div>{props.text}</div>} | 使用自定义渲染 | 人工 |
+| render 优先级 | render 函数存在 | 忽略其他内容配置 | 自动化 |
 ---
-### 测试用例 4.2：不同设备测试
+## 十五、边界情况测试用例
-**测试目的：** 验证在不同设备上的表现
-**测试范围：**
-- 桌面设备（1920x1080）
-- 笔记本（1366x768）
-- 平板（768x1024）
-- 手机（375x667）
-**期望结果：**
-- 响应式布局正常
-- 触摸交互流畅
-- 布局在不同尺寸下正确显示
-**测试类型：** 人工测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 空文本 | text="" | 正常渲染，不报错 | 自动化 |
+| 超长文本 | text="很长很长的文本..." | 正确显示省略号 | 人工 |
+| 特殊字符 | text="<>&\"'" | 特殊字符正确转义显示 | 人工 |
+| 无 Props | 仅传 text | 使用所有默认值正常渲染 | 自动化 |
+| 所有 Props | 传入所有 props | 正常渲染，不冲突 | 人工 |
 ---
-## 5. 性能测试
-### 测试用例 5.1：渲染性能
-**测试目的：** 验证组件渲染性能
-**测试步骤：**
-1. 渲染包含 100 个 TextCard 的列表
-2. 测量首次渲染时间
-3. 测量重新渲染时间
-**期望结果：**
+## 十六、性能测试用例
-- 首次渲染时间 < 200ms
-- 重新渲染时间 < 100ms
-**测试类型：** 性能测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 多次渲染 | 快速切换 props | 无性能问题，渲染流畅 | 人工 |
+| 大量实例 | 渲染 100 个组件 | 页面不卡顿 | 人工 |
+| 内存泄漏 | 挂载/卸载多次 | 无内存泄漏 | 自动化 |
 ---
-### 测试用例 5.2：内存占用
-**测试目的：** 验证组件内存占用
-**测试步骤：**
-1. 渲染和销毁组件多次
-2. 监测内存变化
-**期望结果：**
+## 十七、兼容性测试用例
-- 无明显内存泄漏
-- 销毁后内存释放
-**测试类型：** 性能测试
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| Chrome | 在 Chrome 浏览器测试 | 所有功能正常 | 人工 |
+| Firefox | 在 Firefox 浏览器测试 | 所有功能正常 | 人工 |
+| Safari | 在 Safari 浏览器测试 | 所有功能正常 | 人工 |
+| Edge | 在 Edge 浏览器测试 | 所有功能正常 | 人工 |
 ---
-### 测试用例 5.3：大量实例性能
+## 十八、Bug 汇总
-**测试目的：** 验证大量实例时的性能
-**测试步骤：**
+**说明**：此部分由人工测试人员填写发现的 Bug
-1. 渲染 1000 个 TextCard 实例
-2. 检查页面是否卡顿
-3. 检查交互是否流畅
+### Bug 列表
-**期望结果：**
+| Bug ID | 发现时间 | Bug 描述 | 优先级 | 状态 | 修复时间 | 备注 |
+|--------|---------|---------|--------|------|---------|------|
+| - | - | - | - | - | - | - |
-- 页面不卡顿
-- 交互流畅
-- 无性能问题
+### Bug 模板
-**测试类型：** 性能测试
+```
+Bug ID: #001
+发现时间: 2024-01-01
+Bug 描述: [详细描述问题]
+复现步骤:
+  1. [步骤1]
+  2. [步骤2]
+  3. [步骤3]
+预期结果: [应该显示什么]
+实际结果: [实际显示什么]
+优先级: P0/P1/P2/P3
+状态: 待修复/修复中/已修复/已验证
+修复时间:
+修复说明:
+```
 ---
-## 6. 测试总结
-### 6.1 测试用例统计
-- **总用例数**：150+
-- **自动化测试**：80+
-- **人工测试**：70+
-- **性能测试**：3
-- **兼容性测试**：2
-### 6.2 测试优先级
+## 十九、测试总结
-- **P0（高优先级）**：基础渲染、样式变体、尺寸、状态、交互行为、自适应规则
-- **P1（中优先级）**：图标、标签、角标、插槽、文本配置、宽度模式
-- **P2（低优先级）**：边界条件、性能测试、可访问性、自定义渲染
+### 测试统计
-### 6.3 测试覆盖率目标
+- **总测试用例数**: 120+
+- **自动化测试用例**: 30+
+- **人工测试用例**: 90+
+- **覆盖率目标**: 90%+
-- 代码覆盖率：≥ 85%
-- 分支覆盖率：≥ 80%
-- 函数覆盖率：≥ 85%
-- 行覆盖率：≥ 85%
-- 功能覆盖率：100%
+### 测试结论
-## 7. 测试执行计划
-### 7.1 自动化测试
-- 使用 Vitest + React Testing Library
-- 每次代码提交前自动运行
-- CI/CD 集成
-### 7.2 人工测试
+测试完成后填写：
-- 新功能开发完成后进行
-- 重大版本发布前全面测试
-- 定期回归测试
+- [ ] 所有测试用例通过
+- [ ] 发现 Bug 已修复
+- [ ] 组件可以发布
-### 7.3 测试报告
+### 测试签名
-- 记录测试结果
-- 标注未通过的用例
-- 提供修复建议
+- 测试人员: ___________
+- 测试时间: ___________
+- 审核人员: ___________
+- 审核时间: ___________