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

# PisellTimeNavigator 组件测试用例文档

## 测试概览

本文档列出 PisellTimeNavigator 组件的所有测试用例点，包括受控/非受控、时间范围、模式与方向、交互、样式与事件等。

**测试范围**：

- 基础渲染与 value/defaultValue 解析
- 受控与非受控
- Realtime 模式
- 时间范围、步长、营业时间、禁用区间
- cursorMode（axis-moves / cursor-moves）、orientation（horizontal / vertical）
- 交互：点击、键盘、Now 按钮、惯性滚动
- 样式与 onChange 事件

---

## 一、基础渲染测试

### 1.1 默认渲染

| 测试项                    | 测试步骤                    | 预期结果                                                | 测试类型 |
|------------------------|-------------------------|-----------------------------------------------------|------|
| 无 value 无 defaultValue | 不传 value 与 defaultValue | 使用 range 起点为初始时间，根节点存在                              | 自动化  |
| 有 defaultValue         | defaultValue="12:00"    | 初始选中 12:00，轴与气泡显示正确                                 | 自动化  |
| 有 value（受控）            | value="14:30"           | 显示 14:30，刻度与气泡一致                                    | 自动化  |
| 根节点类名                  | 任意合法 props              | 包含 .pisell-time-navigator、--horizontal 或 --vertical | 自动化  |

### 1.2 数据输入（value / defaultValue）

| 测试项       | 测试步骤            | 预期结果                    | 测试类型 |
|-----------|-----------------|-------------------------|------|
| 字符串 HH:mm | value="09:30"   | 正常解析并展示                 | 自动化  |
| 无效字符串     | value="invalid" | 不抛错，按 null 或 range 起点处理 | 自动化  |
| null      | value={null}    | 不抛错，使用 range 起点         | 自动化  |

---

## 二、受控与非受控测试

| 测试项         | 测试步骤                    | 预期结果                          | 测试类型 |
|-------------|-------------------------|-------------------------------|------|
| 非受控变更       | 无 value，点击刻度            | 内部状态更新，onChange 被调用且参数为 Dayjs | 自动化  |
| 受控变更        | 传 value + onChange，点击刻度 | onChange 被调用，展示依赖外部 value     | 自动化  |
| 受控 value 更新 | 受控模式下外部更新 value         | 轴与气泡展示新 value                 | 自动化  |

---

## 三、Realtime 模式测试

| 测试项                | 测试步骤            | 预期结果                     | 测试类型 |
|--------------------|-----------------|--------------------------|------|
| realtime=false（默认） | 不传 realtime     | 不自动跟随时钟                  | 人工   |
| realtime=true      | realtime={true} | 约每秒 value 更新并触发 onChange | 人工   |
| 点击 Now             | 点击 Now 按钮       | 时间跳转到当前系统时间              | 自动化  |

---

## 四、时间范围与刻度测试

### 4.1 range / stepMinutes / majorStepMinutes

| 测试项              | 测试步骤                                     | 预期结果                              | 测试类型 |
|------------------|------------------------------------------|-----------------------------------|------|
| 默认范围             | 不传 range                                 | 单日 00:00–24:00，刻度按 stepMinutes 生成 | 自动化  |
| 自定义 range        | range={{ start: "08:00", end: "22:00" }} | 仅显示 08:00–22:00 段刻度               | 自动化  |
| stepMinutes      | stepMinutes={30}                         | 刻度间隔 30 分钟，吸附到 30 分               | 自动化  |
| majorStepMinutes | majorStepMinutes={60}                    | 整点为大刻度（横向显示小时数字）                  | 人工   |

### 4.2 businessHours / disabledRanges

| 测试项            | 测试步骤                                                | 预期结果                 | 测试类型 |
|----------------|-----------------------------------------------------|----------------------|------|
| businessHours  | businessHours={{ start: "10:00", end: "22:00" }}    | 该区间有营业时间高亮背景         | 自动化  |
| disabledRanges | disabledRanges={[{ start: "00:00", end: "08:00" }]} | 点击 08:00 前不选中或吸附到可用点 | 人工   |

---

## 五、模式与方向测试

### 5.1 cursorMode

| 测试项            | 测试步骤                      | 预期结果                          | 测试类型 |
|----------------|---------------------------|-------------------------------|------|
| axis-moves（默认） | cursorMode="axis-moves"   | 指示器固定视口中央，刻度可滚动，value 由滚动中心决定 | 人工   |
| cursor-moves   | cursorMode="cursor-moves" | 刻度固定，指示器在轴上移动                 | 人工   |

### 5.2 orientation

| 测试项            | 测试步骤                   | 预期结果            | 测试类型 |
|----------------|------------------------|-----------------|------|
| horizontal（默认） | 不传 orientation         | 横向布局，左右滚动       | 自动化  |
| vertical       | orientation="vertical" | 竖向布局，上下滚动，含竖向类名 | 自动化  |

---

## 六、交互测试

### 6.1 点击与吸附

| 测试项                  | 测试步骤    | 预期结果                    | 测试类型 |
|----------------------|---------|-------------------------|------|
| 点击刻度                 | 点击某刻度区域 | onChange 被调用；默认不吸附，连续时间 | 人工   |
| snapToStep=true      | 点击非整刻度  | 吸附到最近 step              | 人工   |
| snapToStep=false（默认） | 点击某位置   | 选中时间为连续时间（非整 step）      | 人工   |

### 6.2 Now 按钮

| 测试项    | 测试步骤                   | 预期结果           | 测试类型 |
|--------|------------------------|----------------|------|
| 显示 Now | showNowButton=true（默认） | 可见 Now 按钮      | 自动化  |
| 隐藏 Now | showNowButton={false}  | 不渲染 Now 按钮     | 自动化  |
| 点击 Now | 点击 Now                 | 时间跳转到当前系统时间并吸附 | 自动化  |

### 6.3 键盘

| 测试项   | 测试步骤                           | 预期结果                 | 测试类型 |
|-------|--------------------------------|----------------------|------|
| 左右/上下 | 聚焦后按 ArrowLeft/Right 或 Up/Down | 时间步进 step            | 人工   |
| 回车    | 聚焦后按 Enter                     | 确认当前中心时间并触发 onChange | 人工   |

### 6.4 惯性滚动

| 测试项           | 测试步骤                 | 预期结果       | 测试类型 |
|---------------|----------------------|------------|------|
| inertia=false | 默认                   | 松手即停       | 人工   |
| inertia=true  | inertia={true}，拖动后松手 | 松手后继续滚动并减速 | 人工   |

---

## 七、样式与事件测试

| 测试项               | 测试步骤               | 预期结果                   | 测试类型 |
|-------------------|--------------------|------------------------|------|
| className / style | 传入 className、style | 应用到根节点                 | 自动化  |
| onChange          | 选择新时间              | onChange 被调用，参数为 Dayjs | 自动化  |
| locale            | locale="zh-cn"     | 刻度与气泡使用对应语言格式          | 人工   |
| timeFormat        | timeFormat="HH:mm" | 气泡显示符合该格式              | 自动化  |

---

## 八、边界与异常

| 测试项                | 测试步骤                | 预期结果       | 测试类型 |
|--------------------|---------------------|------------|------|
| 空 range 边界         | range 为 end < start | 不抛错，使用合理默认 | 自动化  |
| disabledRanges 与点击 | 点击落在禁用区间            | 不选中或吸附到区间外 | 人工   |

---

## bug 汇总

（人工测试过程中发现的 bug 记录于此，格式：描述 / 复现步骤 / 状态）

- 暂无
