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

﻿# PisellUrl 组件测试用例文档

## 1 测试概述

### 1.1 测试目标

确保 PisellUrl 组件的功能完整性、稳定性和用户体验，特别是 URL 特有功能（格式校验、协议补全、链接跳转、显示控制）。

### 1.2 测试范围

- 三种状态模式（只读、编辑、禁用）
- URL 格式校验（URL 构造函数）
- 协议自动补全（http/https）
- 协议白名单限制
- 链接跳转（新窗口，安全性）
- 协议/路径显示控制
- 受控/非受控模式

### 1.3 测试方法

- 使用 Storybook 进行可视化测试
- 人工测试：UI 交互、协议补全、格式校验、链接跳转验证

## 2 核心功能测试点

### 2.1 基础功能测试

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

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

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

- **测试描述**：不传 mode 时，默认应为编辑态
- **预期结果**：渲染带链接图标前缀的输入框
- **测试状态**：待测试 ⏳

### 2.2 URL 格式校验测试（核心）

#### 测试点 3：标准格式校验（有效 URL）

- **测试步骤**：
  1. 输入 "https://www.example.com"
  2. 失焦
- **预期结果**：
  - 无错误提示
  - 输入框无红色边框
- **测试状态**：待测试 ⏳

#### 测试点 4：标准格式校验（无效 URL）

- **测试步骤**：
  1. 输入 "invalid-url"
  2. 失焦
- **预期结果**：
  - 显示 "URL 地址格式不正确"
  - 输入框显示红色边框
- **测试状态**：待测试 ⏳

#### 测试点 5：无协议 URL（自动补全）

- **测试步骤**：
  1. 输入 "www.example.com"
  2. 失焦
- **预期结果**：
  - 自动补全为 "https://www.example.com"
  - 校验通过
- **测试状态**：待测试 ⏳

#### 测试点 6：localhost URL

- **测试步骤**：
  1. 输入 "localhost:3000"
  2. 失焦（如使用智能补全）
- **预期结果**：
  - 自动补全为 "http://localhost:3000"
  - 校验通过
- **测试状态**：待测试 ⏳

#### 测试点 7：带端口的 URL

- **测试步骤**：
  1. 输入 "https://example.com:8080"
- **预期结果**：
  - 校验通过
- **测试状态**：待测试 ⏳

#### 测试点 8：带路径的 URL

- **测试步骤**：
  1. 输入 "https://example.com/path/to/page"
- **预期结果**：
  - 校验通过
- **测试状态**：待测试 ⏳

#### 测试点 9：带查询参数的 URL

- **测试步骤**：
  1. 输入 "https://example.com?key=value&foo=bar"
- **预期结果**：
  - 校验通过
- **测试状态**：待测试 ⏳

#### 测试点 10：带锚点的 URL

- **测试步骤**：
  1. 输入 "https://example.com/page#section"
- **预期结果**：
  - 校验通过
- **测试状态**：待测试 ⏳

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

- **测试步骤**：
  1. 设置 required=true
  2. 输入框为空时失焦
- **预期结果**：
  - 显示 "请输入 URL 地址"
- **测试状态**：待测试 ⏳

### 2.3 协议处理测试（核心）

#### 测试点 12：协议自动补全

- **测试步骤**：
  1. 设置 autoCompleteProtocol=true
  2. 输入 "example.com"
  3. 失焦
- **预期结果**：
  - 自动补全为 "https://example.com"
  - 触发 onProtocolComplete 回调
- **测试状态**：待测试 ⏳

#### 测试点 13：自定义默认协议

- **测试步骤**：
  1. 设置 defaultProtocol="http://"
  2. 输入 "example.com"
  3. 失焦
- **预期结果**：
  - 自动补全为 "http://example.com"
- **测试状态**：待测试 ⏳

#### 测试点 14：关闭协议补全

- **测试步骤**：
  1. 设置 autoCompleteProtocol=false
  2. 输入 "example.com"
  3. 失焦
- **预期结果**：
  - 不自动补全，保持 "example.com"
- **测试状态**：待测试 ⏳

#### 测试点 15：已有协议不补全

- **测试步骤**：
  1. 输入 "http://example.com"
  2. 失焦
- **预期结果**：
  - 保持 "http://example.com"，不改变
- **测试状态**：待测试 ⏳

#### 测试点 16：协议必需校验

- **测试步骤**：
  1. 设置 requireProtocol=true
  2. 输入 "example.com"
- **预期结果**：
  - 显示 "URL 必须包含协议（如 http:// 或 https://）"
- **测试状态**：待测试 ⏳

### 2.4 协议白名单测试

#### 测试点 17：仅允许 HTTPS

- **测试步骤**：
  1. 设置 allowedProtocols={['https']}
  2. 输入 "http://example.com"
- **预期结果**：
  - 显示 "只允许以下协议：https"
- **测试状态**：待测试 ⏳

#### 测试点 18：允许多个协议

- **测试步骤**：
  1. 设置 allowedProtocols={['http', 'https', 'ftp']}
  2. 输入 "ftp://example.com"
- **预期结果**：
  - 校验通过
- **测试状态**：待测试 ⏳

### 2.5 链接跳转测试（核心）

#### 测试点 19：只读态点击跳转

- **测试步骤**：
  1. mode="read", value="https://www.example.com"
  2. 点击链接
- **预期结果**：
  - 链接显示为紫色（#7F56DA）
  - 新窗口打开链接
  - 添加 noopener,noreferrer 安全性
- **测试状态**：待测试 ⏳

#### 测试点 20：当前窗口打开

- **测试步骤**：
  1. 设置 openInNewWindow=false
  2. 点击链接
- **预期结果**：
  - 当前窗口打开链接
- **测试状态**：待测试 ⏳

#### 测试点 21：链接点击回调

- **测试步骤**：
  1. 设置 onLinkClick 回调
  2. 点击链接
- **预期结果**：
  - 触发 onLinkClick 回调，参数为 URL
- **测试状态**：待测试 ⏳

#### 测试点 22：禁用链接跳转

- **测试步骤**：
  1. mode="read"
  2. enableLinkClick=false
- **预期结果**：
  - 显示为普通文本，无链接样式
  - 点击无反应
- **测试状态**：待测试 ⏳

#### 测试点 23：链接图标显示

- **测试步骤**：
  1. mode="read"
  2. showLinkIcon=true
- **预期结果**：
  - 链接左侧显示链接图标
- **测试状态**：待测试 ⏳

#### 测试点 24：隐藏链接图标

- **测试步骤**：
  1. showLinkIcon=false
- **预期结果**：
  - 不显示链接图标
- **测试状态**：待测试 ⏳

### 2.6 显示控制测试（核心）

#### 测试点 25：隐藏协议

- **测试步骤**：
  1. mode="read"
  2. value="https://www.example.com/path"
  3. showProtocol=false
- **预期结果**：
  - 显示 "www.example.com/path"
- **测试状态**：待测试 ⏳

#### 测试点 26：显示协议

- **测试步骤**：
  1. showProtocol=true
- **预期结果**：
  - 显示 "https://www.example.com/path"
- **测试状态**：待测试 ⏳

#### 测试点 27：隐藏 www

- **测试步骤**：
  1. value="https://www.example.com"
  2. showWww=false
- **预期结果**：
  - 显示 "https://example.com"（去除 www）
- **测试状态**：待测试 ⏳

#### 测试点 28：隐藏路径

- **测试步骤**：
  1. value="https://www.example.com/path/to/page"
  2. showPathname=false
- **预期结果**：
  - 显示 "www.example.com"（仅域名）
- **测试状态**：待测试 ⏳

#### 测试点 29：仅显示域名（displayFormat='domain'）

- **测试步骤**：
  1. value="https://www.example.com/path"
  2. displayFormat="domain"
- **预期结果**：
  - 显示 "www.example.com"
- **测试状态**：待测试 ⏳

#### 测试点 30：自定义格式化

- **测试步骤**：
  1. displayFormat="custom"
  2. customFormat={(url) => '访问 ' + extractDomain(url)}
- **预期结果**：
  - 显示 "访问 example.com"
- **测试状态**：待测试 ⏳

### 2.7 编辑态功能测试

#### 测试点 31：最大长度限制

- **测试步骤**：
  1. 设置 maxLength=100
  2. 尝试输入超过100个字符
- **预期结果**：
  - 自动截断，不允许超出
- **测试状态**：待测试 ⏳

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

- **测试步骤**：
  1. 设置 allowClear=true
  2. 输入 URL 后观察
- **预期结果**：
  - 输入框右侧显示清空按钮
  - 点击清空内容
- **测试状态**：待测试 ⏳

#### 测试点 33：自动聚焦

- **测试步骤**：
  1. 设置 autoFocus=true
  2. 渲染组件
- **预期结果**：
  - 输入框自动获得焦点
- **测试状态**：待测试 ⏳

#### 测试点 34：占位文本

- **测试步骤**：
  1. 设置 placeholder="请输入网站地址"
- **预期结果**：
  - 空输入框显示自定义占位文本
- **测试状态**：待测试 ⏳

### 2.8 校验触发时机测试

#### 测试点 35：onChange 校验

- **测试步骤**：
  1. 设置 validateTrigger="onChange"
  2. 输入无效 URL
- **预期结果**：
  - 实时显示错误提示
- **测试状态**：待测试 ⏳

#### 测试点 36：onBlur 校验

- **测试步骤**：
  1. 设置 validateTrigger="onBlur"
  2. 输入无效 URL 但不失焦
- **预期结果**：
  - 无错误提示
  - 失焦后才显示错误
- **测试状态**：待测试 ⏳

#### 测试点 37：both 校验

- **测试步骤**：
  1. 设置 validateTrigger="both"
  2. 输入无效 URL
- **预期结果**：
  - 输入时和失焦时都会校验
- **测试状态**：待测试 ⏳

### 2.9 自定义校验测试

#### 测试点 38：自定义校验函数

- **测试步骤**：
  1. 设置 customValidator={(url) => url.includes('.com') || '必须是 .com 域名'}
  2. 输入 "https://example.cn"
- **预期结果**：
  - 显示 "必须是 .com 域名"
- **测试状态**：待测试 ⏳

#### 测试点 39：自定义错误提示

- **测试步骤**：
  1. 设置 errorMessage="网址格式有误"
  2. 输入无效 URL
- **预期结果**：
  - 显示自定义错误提示
- **测试状态**：待测试 ⏳

### 2.10 只读态展示测试

#### 测试点 40：字体样式配置

- **测试步骤**：
  1. mode="read"
  2. fontSize=18, fontWeight=600, linkColor="#FF5722"
- **预期结果**：
  - 链接显示为18px、粗体、橙色
- **测试状态**：待测试 ⏳

#### 测试点 41：完整 URL 显示

- **测试步骤**：
  1. mode="read"
  2. value="https://www.example.com/path"
  3. displayFormat="full"
- **预期结果**：
  - 显示完整 URL
- **测试状态**：待测试 ⏳

### 2.11 禁用态测试

#### 测试点 42：编辑态禁用

- **测试步骤**：
  1. mode="edit", disabled=true
- **预期结果**：
  - 输入框不可输入
  - 透明度 40%
  - 无法获取焦点
- **测试状态**：待测试 ⏳

#### 测试点 43：只读态禁用

- **测试步骤**：
  1. mode="read", disabled=true
- **预期结果**：
  - URL 显示，透明度 40%
  - 不可点击跳转
- **测试状态**：待测试 ⏳

### 2.12 受控/非受控模式测试

#### 测试点 44：受控模式

- **测试步骤**：
  1. 传入 value 和 onChange
  2. 输入内容
- **预期结果**：
  - value 由外部控制
  - onChange 被触发
- **测试状态**：待测试 ⏳

#### 测试点 45：非受控模式

- **测试步骤**：
  1. 只传入 defaultValue
  2. 输入内容
- **预期结果**：
  - 组件内部管理状态
  - 可正常输入
- **测试状态**：待测试 ⏳

### 2.13 边界情况测试

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

- **测试步骤**：
  1. value="" 或 undefined
- **预期结果**：
  - 不报错，显示为空
- **测试状态**：待测试 ⏳

#### 测试点 47：特殊字符 URL

- **测试步骤**：
  1. 输入 "https://example.com/path?key=value&foo=bar#section"
- **预期结果**：
  - 校验通过
- **测试状态**：待测试 ⏳

#### 测试点 48：中文域名

- **测试步骤**：
  1. 输入 "https://中文.com"
- **预期结果**：
  - 校验通过（URL 构造函数支持）
- **测试状态**：待测试 ⏳

#### 测试点 49：IP 地址

- **测试步骤**：
  1. 输入 "http://192.168.1.1"
- **预期结果**：
  - 校验通过
- **测试状态**：待测试 ⏳

#### 测试点 50：首尾空格

- **测试步骤**：
  1. 输入 " https://example.com "
  2. 失焦
- **预期结果**：
  - 自动去除首尾空格
  - 校验通过
- **测试状态**：待测试 ⏳

#### 测试点 51：超长 URL

- **测试步骤**：
  1. 输入超过2048字符的 URL
- **预期结果**：
  - 自动截断在2048字符
- **测试状态**：待测试 ⏳

#### 测试点 52：无顶级域名

- **测试步骤**：
  1. 输入 "http://localhost"
- **预期结果**：
  - 校验通过（localhost 是特殊情况）
- **测试状态**：待测试 ⏳

## 3 事件回调测试

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

- **测试步骤**：
  1. 输入 URL
  2. 观察回调
- **预期结果**：
  - 每次输入都触发 onChange
  - 参数为当前值
- **测试状态**：待测试 ⏳

#### 测试点 54：onBlur 回调

- **测试步骤**：
  1. 输入后失焦
- **预期结果**：
  - 触发 onBlur，参数为当前值
- **测试状态**：待测试 ⏳

#### 测试点 55：onFocus 回调

- **测试步骤**：
  1. 点击输入框
- **预期结果**：
  - 触发 onFocus
- **测试状态**：待测试 ⏳

#### 测试点 56：onProtocolComplete 回调

- **测试步骤**：
  1. 输入无协议 URL 并失焦
- **预期结果**：
  - 触发 onProtocolComplete，参数为补全后的 URL
- **测试状态**：待测试 ⏳

#### 测试点 57：onValidate 回调

- **测试步骤**：
  1. 输入无效 URL 后触发校验
- **预期结果**：
  - 触发 onValidate
  - 参数包含 isValid=false 和 errors 数组
- **测试状态**：待测试 ⏳

## 4 安全性测试

#### 测试点 58：XSS 防护

- **测试步骤**：
  1. 输入 "javascript:alert('xss')"
  2. 尝试跳转
- **预期结果**：
  - URL 构造函数抛出异常
  - 不执行跳转
- **测试状态**：待测试 ⏳

#### 测试点 59：noopener noreferrer

- **测试步骤**：
  1. 检查新窗口打开时的参数
- **预期结果**：
  - 包含 noopener,noreferrer
- **测试状态**：待测试 ⏳

## 5 性能测试

#### 测试点 60：大量组件渲染

- **测试方法**：渲染50个组件
- **性能指标**：正常渲染，不卡顿
- **测试状态**：待测试 ⏳

#### 测试点 61：频繁输入性能

- **测试方法**：快速连续输入字符
- **性能指标**：输入流畅，无延迟
- **测试状态**：待测试 ⏳

## 6 兼容性测试

#### 测试点 62：浏览器兼容性

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

#### 测试点 63：移动端兼容性

- **测试设备**：iOS、Android
- **预期结果**：触摸交互正常，链接跳转正常
- **测试状态**：待测试 ⏳

## 7 测试覆盖率要求

### 7.1 功能覆盖率

- **状态模式**：100%（3/3）
- **URL 校验**：100%（格式/协议必需/协议白名单）
- **协议处理**：100%（自动补全/智能补全）
- **链接跳转**：100%（新窗口/当前窗口/安全性）
- **显示控制**：100%（协议/www/路径/域名）

### 7.2 重点测试项

1. ✅ **URL 格式校验**：PisellUrl 的核心特性，使用 URL 构造函数
2. ✅ **协议自动补全**：失焦时智能补全 http/https
3. ✅ **链接跳转**：新窗口打开，安全性保障
4. ✅ **显示控制**：灵活控制协议/www/路径显示
5. ✅ **协议白名单**：限制允许的协议类型

---

## 8 Bug 汇总模块

### 已发现的 Bug 列表

> 暂无 Bug

### 已修复的 Bug 列表

> 暂无已修复 Bug

---

**说明**：

- 人工测试时发现的 Bug 请记录在此模块
- Bug 修复后请更新状态和修复时间
- Bug 格式：【Bug ID】【严重程度】【Bug 描述】【复现步骤】【修复状态】【修复时间】
