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

# PisellDateTimeDisplay 组件测试用例文档

## 测试概览

本文档列出 PisellDateTimeDisplay 组件的所有测试用例点，包括布局、格式化、国际化、自动刷新等功能测试。

**测试范围**：

- 基础渲染和布局
- 时间/日期/星期格式化
- 字段显隐和排序
- 自定义格式化
- 自动刷新机制
- 国际化支持
- 样式配置
- 事件回调

---

## 一、基础渲染测试

### 1.1 组件渲染

| 测试项  | 测试步骤                        | 预期结果         | 测试类型 |
|------|-----------------------------|--------------|------|
| 默认渲染 | `<PisellDateTimeDisplay />` | 显示当前时间、日期、星期 | 自动化  |
| 组件挂载 | 渲染组件                        | 无报错，正常显示     | 自动化  |
| 组件卸载 | 卸载组件                        | 定时器被清除，无内存泄漏 | 自动化  |

### 1.2 字段显示

| 测试项      | 测试步骤 | 预期结果           | 测试类型 |
|----------|------|----------------|------|
| 显示时间字段   | 默认配置 | 显示时间（如：13:45）  | 自动化  |
| 显示日期字段   | 默认配置 | 显示日期（如：Mar 21） | 自动化  |
| 显示星期字段   | 默认配置 | 显示星期（如：Sat）    | 自动化  |
| 三个字段同时显示 | 默认配置 | 时间、日期、星期都显示    | 自动化  |

---

## 二、布局配置测试

### 2.1 布局方向

| 测试项      | 测试步骤                  | 预期结果             | 测试类型 |
|----------|-----------------------|------------------|------|
| 水平布局（默认） | `layout="horizontal"` | 垂直排列，时间在上，日期星期在下 | 人工   |
| 垂直布局     | `layout="vertical"`   | 垂直排列，三个字段各占一行    | 人工   |
| 单行布局     | `layout="inline"`     | 水平排列，字段用分隔符连接    | 人工   |

### 2.2 对齐方式

| 测试项     | 测试步骤                 | 预期结果   | 测试类型 |
|---------|----------------------|--------|------|
| 左对齐（默认） | `textAlign="left"`   | 内容左对齐  | 人工   |
| 居中对齐    | `textAlign="center"` | 内容居中对齐 | 人工   |
| 右对齐     | `textAlign="right"`  | 内容右对齐  | 人工   |

### 2.3 单行分隔符

| 测试项    | 测试步骤                                        | 预期结果         | 测试类型 |
|--------|---------------------------------------------|--------------|------|
| 默认分隔符  | `layout="inline"`                           | 使用 " · " 分隔  | 人工   |
| 自定义分隔符 | `layout="inline"`, `inlineSeparator=" \| "` | 使用 " \| " 分隔 | 人工   |
| 空格分隔符  | `layout="inline"`, `inlineSeparator=" "`    | 使用空格分隔       | 人工   |

---

## 三、时间格式测试

### 3.1 24小时制（默认）

| 测试项     | 测试步骤                                  | 预期结果         | 测试类型 |
|---------|---------------------------------------|--------------|------|
| 默认24小时制 | 不设置 use12Hour                         | 显示 13:45     | 自动化  |
| 不显示秒    | `timeFormat={{ showSeconds: false }}` | 显示 13:45     | 自动化  |
| 显示秒     | `timeFormat={{ showSeconds: true }}`  | 显示 13:45:30  | 自动化  |
| 不补零     | `timeFormat={{ padHour: false }}`     | 上午1点显示 1:45  | 人工   |
| 补零      | `timeFormat={{ padHour: true }}`      | 上午1点显示 01:45 | 人工   |

### 3.2 12小时制

| 测试项       | 测试步骤                                   | 预期结果          | 测试类型 |
|-----------|----------------------------------------|---------------|------|
| 12小时制     | `timeFormat={{ use12Hour: true }}`     | 显示 1:45 PM    | 人工   |
| 12小时制+显示秒 | `use12Hour: true`, `showSeconds: true` | 显示 1:45:30 PM | 人工   |
| 12小时制+补零  | `use12Hour: true`, `padHour: true`     | 显示 01:45 PM   | 人工   |
| 上午时间      | 上午9点，12小时制                             | 显示 9:00 AM    | 人工   |
| 下午时间      | 下午3点，12小时制                             | 显示 3:00 PM    | 人工   |
| 正午12点     | 12点，12小时制                              | 显示 12:00 PM   | 人工   |
| 午夜12点     | 0点，12小时制                               | 显示 12:00 AM   | 人工   |

### 3.3 特殊显示

| 测试项      | 测试步骤                                  | 预期结果  | 测试类型 |
|----------|---------------------------------------|-------|------|
| 只显示小时    | `timeFormat={{ onlyShowHour: true }}` | 显示 13 | 人工   |
| 只显示小时+补零 | `onlyShowHour: true`, `padHour: true` | 显示 01 | 人工   |

---

## 四、日期格式测试

### 4.1 日期顺序

| 测试项          | 测试步骤                            | 预期结果            | 测试类型 |
|--------------|---------------------------------|-----------------|------|
| Y-M-D 顺序（默认） | `dateFormat={{ order: 'YMD' }}` | 显示 2026-03-21   | 人工   |
| M-D-Y 顺序     | `dateFormat={{ order: 'MDY' }}` | 显示 Mar 21, 2026 | 人工   |
| D-M-Y 顺序     | `dateFormat={{ order: 'DMY' }}` | 显示 21 Mar 2026  | 人工   |

### 4.2 字段显隐

| 测试项   | 测试步骤                                                  | 预期结果              | 测试类型 |
|-------|-------------------------------------------------------|-------------------|------|
| 显示年月日 | `showYear: true`, `showMonth: true`, `showDay: true`  | 显示 2026-03-21     | 人工   |
| 不显示年  | `showYear: false`                                     | 显示 03-21 或 Mar 21 | 人工   |
| 只显示月日 | `showYear: false`, `showMonth: true`, `showDay: true` | 显示月日              | 人工   |
| 只显示年月 | `showYear: true`, `showMonth: true`, `showDay: false` | 显示年月              | 人工   |
| 全部隐藏  | 三个字段都设为 false                                         | 不显示日期             | 人工   |

### 4.3 月份格式（英文环境）

| 测试项      | 测试步骤                 | 预期结果     | 测试类型 |
|----------|----------------------|----------|------|
| 简写月份（默认） | `shortMonth: true`   | 显示 Mar   | 人工   |
| 完整月份     | `shortMonth: false`  | 显示 March | 人工   |
| 数字月份     | `numericMonth: true` | 显示 03    | 人工   |

### 4.4 中文格式

| 测试项    | 测试步骤                                      | 预期结果          | 测试类型 |
|--------|-------------------------------------------|---------------|------|
| 中文不带单位 | locale="zh-cn", `showChineseUnit: false`  | 显示 3-21       | 人工   |
| 中文带单位  | locale="zh-cn", `showChineseUnit: true`   | 显示 3月21日      | 人工   |
| 中文完整日期 | `showYear: true`, `showChineseUnit: true` | 显示 2026年3月21日 | 人工   |

### 4.5 分隔符

| 测试项      | 测试步骤                    | 预期结果                | 测试类型 |
|----------|-------------------------|---------------------|------|
| 默认分隔符    | 不设置 separator           | 显示 2026-03-21       | 人工   |
| 斜杠分隔符    | `separator: '/'`        | 显示 2026/03/21       | 人工   |
| 点分隔符     | `separator: '.'`        | 显示 2026.03.21       | 人工   |
| 中文单位无分隔符 | `showChineseUnit: true` | 显示 2026年3月21日（无分隔符） | 人工   |

---

## 五、星期格式测试

### 5.1 英文星期

| 测试项    | 测试步骤                                     | 预期结果        | 测试类型 |
|--------|------------------------------------------|-------------|------|
| 默认（缩写） | locale="en"                              | 显示 Sat      | 人工   |
| 完整展示   | `weekdayFormat={{ full: true }}`         | 显示 Saturday | 人工   |
| 单字母展示  | `weekdayFormat={{ singleLetter: true }}` | 显示 S        | 人工   |

### 5.2 中文星期

| 测试项    | 测试步骤                                 | 预期结果   | 测试类型 |
|--------|--------------------------------------|--------|------|
| 默认（缩写） | locale="zh-cn"                       | 显示 周六  | 人工   |
| 完整展示   | locale="zh-cn", `full: true`         | 显示 星期六 | 人工   |
| 单字母展示  | locale="zh-cn", `singleLetter: true` | 显示 六   | 人工   |

### 5.3 不同星期

| 测试项 | 测试步骤   | 预期结果    | 测试类型 |
|-----|--------|---------|------|
| 星期一 | 时间为星期一 | 正确显示星期一 | 人工   |
| 星期日 | 时间为星期日 | 正确显示星期日 | 人工   |

---

## 六、字段控制测试

### 6.1 字段显隐

| 测试项   | 测试步骤                              | 预期结果           | 测试类型 |
|-------|-----------------------------------|----------------|------|
| 隐藏时间  | `fields={{ showTime: false }}`    | 不显示时间字段        | 自动化  |
| 隐藏日期  | `fields={{ showDate: false }}`    | 不显示日期字段        | 自动化  |
| 隐藏星期  | `fields={{ showWeekday: false }}` | 不显示星期字段        | 自动化  |
| 只显示时间 | 只 showTime 为 true                 | 只显示时间          | 人工   |
| 只显示日期 | 只 showDate 为 true                 | 只显示日期          | 人工   |
| 全部隐藏  | 三个字段都为 false                      | 组件不显示（返回 null） | 自动化  |

### 6.2 字段排序

| 测试项    | 测试步骤                                      | 预期结果                 | 测试类型 |
|--------|-------------------------------------------|----------------------|------|
| 默认顺序   | 不设置 fieldOrder                            | time、date、weekday 顺序 | 自动化  |
| 自定义顺序1 | `fieldOrder: ['date', 'time', 'weekday']` | 日期在前，时间在中            | 人工   |
| 自定义顺序2 | `fieldOrder: ['weekday', 'date', 'time']` | 星期在前，时间在后            | 人工   |
| 单行模式排序 | layout="inline" + 自定义顺序                   | 按顺序用分隔符连接            | 人工   |

---

## 七、自定义格式化测试

| 测试项   | 测试步骤                                   | 预期结果                         | 测试类型 |
|-------|----------------------------------------|------------------------------|------|
| 标准格式  | `customFormat="YYYY-MM-DD HH:mm:ss"`   | 显示 2026-03-21 13:45:30       | 自动化  |
| 简短格式  | `customFormat="MM/DD HH:mm"`           | 显示 03/21 13:45               | 人工   |
| 中文格式  | `customFormat="YYYY年MM月DD日 HH:mm"`     | 显示 2026年03月21日 13:45         | 人工   |
| 包含星期  | `customFormat="YYYY-MM-DD dddd HH:mm"` | 显示 2026-03-21 Saturday 13:45 | 人工   |
| 优先级测试 | 同时设置 customFormat 和其他格式                | customFormat 优先生效            | 人工   |

---

## 八、刷新机制测试

### 8.1 自动刷新

| 测试项    | 测试步骤                        | 预期结果          | 测试类型 |
|--------|-----------------------------|---------------|------|
| 默认刷新间隔 | 不显示秒                        | 60秒刷新一次       | 自动化  |
| 显示秒刷新  | `showSeconds: true`         | 1秒刷新一次        | 自动化  |
| 自定义间隔  | `refreshInterval={5000}`    | 5秒刷新一次        | 自动化  |
| 禁用刷新   | `disableAutoRefresh={true}` | 不自动刷新，只显示初始时间 | 自动化  |

### 8.2 定时器管理

| 测试项    | 测试步骤     | 预期结果     | 测试类型 |
|--------|----------|----------|------|
| 组件卸载清理 | 卸载组件     | 定时器被清除   | 自动化  |
| 多实例独立  | 渲染多个组件实例 | 每个实例独立刷新 | 人工   |

---

## 九、国际化测试

### 9.1 语言切换

| 测试项  | 测试步骤             | 预期结果      | 测试类型 |
|------|------------------|-----------|------|
| 中文   | `locale="zh-cn"` | 月份、星期显示中文 | 人工   |
| 英文   | `locale="en"`    | 月份、星期显示英文 | 人工   |
| 日文   | `locale="ja"`    | 月份、星期显示日文 | 人工   |
| 动态切换 | 运行时切换 locale     | 立即更新显示    | 人工   |

### 9.2 月份翻译

| 测试项  | 测试步骤           | 预期结果           | 测试类型 |
|------|----------------|----------------|------|
| 英文月份 | locale="en"    | 显示 Mar、April 等 | 人工   |
| 中文月份 | locale="zh-cn" | 显示 3月、4月 等     | 人工   |
| 日文月份 | locale="ja"    | 显示 3月、4月 等     | 人工   |

### 9.3 星期翻译

| 测试项  | 测试步骤           | 预期结果             | 测试类型 |
|------|----------------|------------------|------|
| 英文星期 | locale="en"    | 显示 Mon、Tuesday 等 | 人工   |
| 中文星期 | locale="zh-cn" | 显示 周一、星期二 等      | 人工   |
| 日文星期 | locale="ja"    | 显示日文星期           | 人工   |

---

## 十、样式配置测试

### 10.1 容器样式

| 测试项 | 测试步骤                                                          | 预期结果       | 测试类型 |
|-----|---------------------------------------------------------------|------------|------|
| 背景色 | `containerStyle={{ background: '#f5f5f5' }}`                  | 背景为浅灰色     | 人工   |
| 圆角  | `containerStyle={{ borderRadius: 8 }}`                        | 圆角为 8px    | 人工   |
| 边框  | `containerStyle={{ border: '1px solid #ddd' }}`               | 显示边框       | 人工   |
| 阴影  | `containerStyle={{ boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}` | 显示阴影       | 人工   |
| 内边距 | `containerStyle={{ padding: 16 }}`                            | 内边距为 16px  | 人工   |
| 间距  | `containerStyle={{ gap: 12 }}`                                | 字段间距为 12px | 人工   |

### 10.2 文本样式

| 测试项  | 测试步骤                                             | 预期结果        | 测试类型 |
|------|--------------------------------------------------|-------------|------|
| 时间样式 | `timeStyle={{ fontSize: 32, fontWeight: 700 }}`  | 时间字号32px，加粗 | 人工   |
| 日期样式 | `dateStyle={{ fontSize: 16, color: '#666' }}`    | 日期字号16px，灰色 | 人工   |
| 星期样式 | `weekdayStyle={{ fontSize: 14, color: '#999' }}` | 星期字号14px，浅灰 | 人工   |
| 行高   | `timeStyle={{ lineHeight: 1.5 }}`                | 行高为 1.5     | 人工   |

### 10.3 自定义类名

| 测试项   | 测试步骤                                 | 预期结果  | 测试类型 |
|-------|--------------------------------------|-------|------|
| 自定义类名 | `className="custom-datetime"`        | 类名被应用 | 人工   |
| 自定义样式 | `style={{ backgroundColor: 'red' }}` | 样式被应用 | 自动化  |

---

## 十一、事件回调测试

### 11.1 点击事件

| 测试项  | 测试步骤                                     | 预期结果     | 测试类型 |
|------|------------------------------------------|----------|------|
| 点击回调 | `onClick={() => console.log('clicked')}` | 点击组件触发回调 | 自动化  |

### 11.2 时间更新回调

| 测试项  | 测试步骤                                         | 预期结果         | 测试类型 |
|------|----------------------------------------------|--------------|------|
| 更新回调 | `onTimeUpdate={(time) => console.log(time)}` | 每次刷新时触发回调    | 自动化  |
| 回调参数 | 检查回调参数                                       | 参数为 Dayjs 对象 | 自动化  |

---

## 十二、边界情况测试

### 12.1 特殊时间

| 测试项     | 测试步骤       | 预期结果                           | 测试类型 |
|---------|------------|--------------------------------|------|
| 零点时间    | 时间为 00:00  | 24小时制显示 0:00，12小时制显示 12:00 AM  | 人工   |
| 正午时间    | 时间为 12:00  | 24小时制显示 12:00，12小时制显示 12:00 PM | 人工   |
| 月初      | 时间为 1月1日   | 正确显示                           | 人工   |
| 月末      | 时间为 12月31日 | 正确显示                           | 人工   |
| 闰年2月29日 | 时间为 2月29日  | 正确显示                           | 人工   |

### 12.2 配置冲突

| 测试项     | 测试步骤                           | 预期结果            | 测试类型 |
|---------|--------------------------------|-----------------|------|
| 所有字段隐藏  | showTime/Date/Weekday 都为 false | 返回 null，不渲染     | 自动化  |
| 日期字段全隐藏 | showYear/Month/Day 都为 false    | 不显示日期           | 人工   |
| 格式冲突    | full 和 singleLetter 都为 true    | singleLetter 优先 | 人工   |

### 12.3 极限情况

| 测试项    | 测试步骤                    | 预期结果     | 测试类型 |
|--------|-------------------------|----------|------|
| 超长分隔符  | inlineSeparator 为很长的字符串 | 正常显示不溢出  | 人工   |
| 多个实例   | 同时渲染 50+ 个组件            | 性能良好，无卡顿 | 人工   |
| 快速切换配置 | 频繁切换 layout、format 等配置  | 无报错，正确更新 | 人工   |

---

## 十三、兼容性测试

### 13.1 浏览器兼容

| 测试项     | 测试步骤         | 预期结果 | 测试类型 |
|---------|--------------|------|------|
| Chrome  | 在 Chrome 测试  | 正常工作 | 人工   |
| Firefox | 在 Firefox 测试 | 正常工作 | 人工   |
| Safari  | 在 Safari 测试  | 正常工作 | 人工   |
| Edge    | 在 Edge 测试    | 正常工作 | 人工   |

### 13.2 响应式测试

| 测试项 | 测试步骤     | 预期结果 | 测试类型 |
|-----|----------|------|------|
| 桌面端 | 桌面浏览器    | 正常显示 | 人工   |
| 平板端 | iPad 等平板 | 正常显示 | 人工   |
| 手机端 | 手机浏览器    | 正常显示 | 人工   |

### 13.3 主题适配

| 测试项  | 测试步骤    | 预期结果    | 测试类型 |
|------|---------|---------|------|
| 浅色模式 | 浅色主题下显示 | 颜色对比度合适 | 人工   |
| 深色模式 | 深色主题下显示 | 颜色对比度合适 | 人工   |

---

## 十四、性能测试

| 测试项   | 测试步骤       | 预期结果        | 测试类型 |
|-------|------------|-------------|------|
| 初次渲染  | 测量首次渲染时间   | < 50ms      | 人工   |
| 刷新性能  | 测量每次刷新耗时   | < 10ms      | 人工   |
| 内存占用  | 长时间运行观察内存  | 无内存泄漏       | 人工   |
| 多实例性能 | 渲染 100 个实例 | 无明显卡顿       | 人工   |
| 格式化性能 | 复杂格式化配置    | 格式化耗时 < 5ms | 自动化  |

---

## Bug 汇总

### 待修复的 Bug

| Bug ID | 描述 | 优先级 | 状态 | 发现时间 | 发现人 |
|--------|----|-----|----|------|-----|
| -      | -  | -   | -  | -    | -   |

### 已修复的 Bug

| Bug ID | 描述 | 优先级 | 修复时间 | 修复方案 | 修复人 |
|--------|----|-----|------|------|-----|
| -      | -  | -   | -    | -    | -   |

---

## 测试统计

| 类别    | 总数   | 已通过 | 未通过 | 待测试  |
|-------|------|-----|-----|------|
| 自动化测试 | 25   | 0   | 0   | 25   |
| 人工测试  | 120+ | 0   | 0   | 120+ |
| 总计    | 145+ | 0   | 0   | 145+ |

---

## 测试环境

- **浏览器**：Chrome、Firefox、Safari、Edge
- **设备**：桌面、平板、手机
- **框架版本**：React 18+
- **dayjs 版本**：1.11.8+

---

## 测试说明

1. **自动化测试**：使用 Vitest 编写单元测试，覆盖核心逻辑和边界情况
2. **人工测试**：在实际应用场景中测试 UI 表现、格式化准确性和交互效果
3. **回归测试**：每次修改后重新测试相关用例
4. **Bug 记录**：发现 Bug 后及时记录到"Bug 汇总"部分，包含复现步骤和优先级
5. **测试更新**：随着功能迭代，持续更新测试用例
6. **时间验证**：测试时注意时区和夏令时的影响
7. **国际化验证**：在不同语言环境下验证月份和星期的翻译

---

## 下一步

- [ ] 完成所有自动化测试用例编写
- [ ] 执行人工测试并记录结果
- [ ] 修复发现的 Bug
- [ ] 补充遗漏的测试用例
- [ ] 达到 80% 以上的测试覆盖率
- [ ] 在不同浏览器和设备上测试
- [ ] 验证国际化在各语言环境下的表现
