Compare commits
35 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9a0c8ba850 | |||
| 6c7b7294b4 | |||
| a2e07a9115 | |||
| 2464a5fea6 | |||
| 78f5292b00 | |||
| 5a2589cc57 | |||
| 64db60d75e | |||
| 7090ba3251 | |||
| 31b6edf06b | |||
| a374bf456d | |||
| ea10b27c14 | |||
| 40443c8fc5 | |||
| ee4a45630e | |||
| 4a423889d9 | |||
| ee78e314d3 | |||
| ee77c97b56 | |||
| aa8b84af50 | |||
| 707f17ac84 | |||
| af0b2d8ed1 | |||
| 49e7f1ea55 | |||
| 1a92e88934 | |||
| 2b84eda24f | |||
| 7f22b95aa2 | |||
| 9990d86270 | |||
| ea0552e8aa | |||
| c40b66b703 | |||
| f55fd4338d | |||
| 27c1cf37e3 | |||
| 2520d72eb1 | |||
| 4d038203a7 | |||
| 2c45ddada9 | |||
| a0b1ade662 | |||
| d964e27c9d | |||
| 10644fae95 | |||
| 77f722b575 |
@@ -1,6 +1,6 @@
|
|||||||
# AGENTS.md
|
# AGENTS.md
|
||||||
|
|
||||||
WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown、测试数据生成器等测试效率工具。
|
WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown 等测试效率工具。
|
||||||
|
|
||||||
## 核心命令
|
## 核心命令
|
||||||
|
|
||||||
@@ -54,7 +54,6 @@ src/ # 源代码根目录
|
|||||||
utils/ # 工具函数与服务抽象
|
utils/ # 工具函数与服务抽象
|
||||||
types/ # TypeScript 类型声明
|
types/ # TypeScript 类型声明
|
||||||
lib/ # 通用工具函数(cn、utils)
|
lib/ # 通用工具函数(cn、utils)
|
||||||
workers/ # Web Worker(数据生成等耗时任务)
|
|
||||||
public/ # 静态资源(图标、_locales 等)
|
public/ # 静态资源(图标、_locales 等)
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -77,37 +76,6 @@ src/pages/FeatureName/
|
|||||||
- 当 `index.tsx` 超过 150 行时,必须拆分为 UI + Hook 模式
|
- 当 `index.tsx` 超过 150 行时,必须拆分为 UI + Hook 模式
|
||||||
- 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
|
- 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
|
||||||
|
|
||||||
### 测试数据生成器模块
|
|
||||||
|
|
||||||
```
|
|
||||||
src/pages/TestDataGenerator/
|
|
||||||
├── index.tsx # 主页面(字段配置 + 标签页切换)
|
|
||||||
├── hooks/useGenerator.ts # Web Worker 管理 Hook(创建、复用、通信、销毁)
|
|
||||||
└── components/
|
|
||||||
├── FieldList.tsx # 字段列表(虚拟滚动 + @dnd-kit 拖拽排序 + 规则保存)
|
|
||||||
├── FieldItem.tsx # 字段卡片展示
|
|
||||||
├── FieldEditor.tsx # 字段编辑器(名称校验、生成器选择、参数配置)
|
|
||||||
├── GeneratorSelector.tsx # 生成器选择器(分类 + 搜索)
|
|
||||||
├── GeneratorConfig.tsx # 生成器参数表单(动态渲染 string/number/boolean/select/array)
|
|
||||||
├── GenerateOptions.tsx # 生成选项(数量、格式)
|
|
||||||
├── GenerateButton.tsx # 生成按钮 + 进度条
|
|
||||||
├── DataPreview.tsx # 示例数据预览(JSON 语法高亮)
|
|
||||||
├── ResultPanel.tsx # 生成结果状态面板
|
|
||||||
├── ExportPanel.tsx # 导出面板(复制/下载 JSON/CSV)
|
|
||||||
└── RuleManager.tsx # 规则管理(CRUD、搜索、导入/导出)
|
|
||||||
|
|
||||||
src/utils/
|
|
||||||
├── ruleStorage.ts # 规则持久化存储(localStorage)
|
|
||||||
├── dataExporter.ts # 数据导出工具(JSON/CSV 转换、下载、剪贴板)
|
|
||||||
└── generators/ # 内置生成器定义(个人信息、企业、技术、基础类型)
|
|
||||||
|
|
||||||
src/workers/
|
|
||||||
└── generator.worker.ts # 数据生成 Web Worker
|
|
||||||
|
|
||||||
src/types/
|
|
||||||
└── testDataGenerator.ts # 类型定义(FieldConfig, DataRule, GeneratorDefinition 等)
|
|
||||||
```
|
|
||||||
|
|
||||||
## 关键架构决策
|
## 关键架构决策
|
||||||
|
|
||||||
**路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理,`RouterProvider` 根据 `PageType`
|
**路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理,`RouterProvider` 根据 `PageType`
|
||||||
@@ -180,8 +148,7 @@ src/types/
|
|||||||
## 关键外部库(非显而易见的)
|
## 关键外部库(非显而易见的)
|
||||||
|
|
||||||
- `@webext-core/messaging` — 扩展消息通信
|
- `@webext-core/messaging` — 扩展消息通信
|
||||||
- `@dnd-kit` — 拖拽排序(用于页面顺序管理和字段列表排序)
|
- `@dnd-kit` — 拖拽排序(用于页面顺序管理)
|
||||||
- `qrious` + `qr-scanner` — 二维码生成与解析
|
- `qrious` + `qr-scanner` — 二维码生成与解析
|
||||||
- `dayjs` — 日期处理(时间戳转换)
|
- `dayjs` — 日期处理(时间戳转换)
|
||||||
- `sonner` — Toast 通知(替代传统 snackbar)
|
- `sonner` — Toast 通知(替代传统 snackbar)
|
||||||
- Web Worker — 批量数据生成(`src/workers/generator.worker.ts`),避免阻塞 UI 线程
|
|
||||||
|
|||||||
@@ -8,72 +8,61 @@
|
|||||||
|
|
||||||
## 功能特性
|
## 功能特性
|
||||||
|
|
||||||
### Dashboard 首页
|
### 🚀 Dashboard 首页
|
||||||
|
|
||||||
- **工具导航**: 快速访问所有可用工具.
|
- **工具导航**: 快速访问所有可用工具.
|
||||||
- **个性化定制**: 支持自定义工具的排序和可见性.
|
- **个性化定制**: 支持自定义工具的排序和可见性.
|
||||||
- **实时预览**: 在卡片上直接查看实时数据(如当前时间戳).
|
- **实时预览**: 在卡片上直接查看实时数据(如当前时间戳).
|
||||||
|
|
||||||
### 时间戳转换工具
|
### ⏰ 时间戳转换工具
|
||||||
|
|
||||||
- **实时显示**: 毫秒级精度显示当前系统时间.
|
- **实时显示**: 毫秒级精度显示当前系统时间.
|
||||||
- **双向转换**: 日期字符串与 Unix 时间戳(秒/毫秒)之间的无缝转换.
|
- **双向转换**: 日期字符串与 Unix 时间戳(秒/毫秒)之间的无缝转换.
|
||||||
- **多时区支持**: 预设常用时区(亚洲/上海、美洲/纽约、欧洲/伦敦),支持快速切换.
|
- **多时区支持**: 预设常用时区(亚洲/上海、美洲/纽约、欧洲/伦敦),支持快速切换.
|
||||||
- **快捷操作**: 一键复制转换结果,支持多种格式.
|
- **快捷操作**: 一键复制转换结果,支持多种格式.
|
||||||
|
|
||||||
### 存储清理工具
|
### 🧹 存储清理工具
|
||||||
|
|
||||||
- **智能识别**: 自动检测并显示当前活动标签页的域名.
|
- **智能识别**: 自动检测并显示当前活动标签页的域名.
|
||||||
- **全面清理**: 支持一键清理 localStorage、sessionStorage、IndexedDB、Cookies、Cache Storage 和 Service Workers.
|
- **全面清理**: 支持一键清理 localStorage、sessionStorage、IndexedDB、Cookies、Cache Storage 和 Service Workers.
|
||||||
- **细粒度控制**: 可根据需要选择特定的清理项.
|
- **细粒度控制**: 可根据需要选择特定的清理项.
|
||||||
- **自动刷新**: 提供清理后自动刷新页面的选项,确保状态同步.
|
- **自动刷新**: 提供清理后自动刷新页面的选项,确保状态同步.
|
||||||
|
|
||||||
### 文本统计工具
|
### 📝 文本统计工具
|
||||||
|
|
||||||
- **实时分析**: 键入即统计,无需额外操作.
|
- **实时分析**: 键入即统计,无需额外操作.
|
||||||
- **多维指标**: 统计字符数、单词数、行数以及精确的字节大小.
|
- **多维指标**: 统计字符数、单词数、行数以及精确的字节大小.
|
||||||
- **性能优化**: 采用高性能分词算法,支持大文本处理.
|
- **性能优化**: 采用高性能分词算法,支持大文本处理.
|
||||||
|
|
||||||
### JWT 解析工具
|
### 🔑 JWT 解析工具
|
||||||
|
|
||||||
- **快速解码**: 自动解析 JSON Web Token 的 Header 和 Payload.
|
- **快速解码**: 自动解析 JSON Web Token 的 Header 和 Payload.
|
||||||
- **格式化显示**: 以着色和格式化的 JSON 视图展示数据,方便阅读.
|
- **格式化显示**: 以着色和格式化的 JSON 视图展示数据,方便阅读.
|
||||||
- **安全检查**: 自动去除 `Bearer` 前缀,处理异常输入并提供友好提示.
|
- **安全检查**: 自动去除 `Bearer` 前缀,处理异常输入并提供友好提示.
|
||||||
- **签名查看**: 展示 JWT 签名部分,辅助验证令牌完整性.
|
- **签名查看**: 展示 JWT 签名部分,辅助验证令牌完整性.
|
||||||
|
|
||||||
### 右键恢复工具
|
### 🖱️ 右键恢复工具
|
||||||
|
|
||||||
- **当前页面检测**: 自动识别当前活动标签页的域名.
|
- **当前页面检测**: 自动识别当前活动标签页的域名.
|
||||||
- **一键恢复**: 解除网站对右键菜单的限制,恢复复制、粘贴等基础操作.
|
- **一键恢复**: 解除网站对右键菜单的限制,恢复复制、粘贴等基础操作.
|
||||||
- **状态可视化**: 通过 Badge 组件直观展示当前页面的锁定/解锁状态.
|
- **状态可视化**: 通过 Badge 组件直观展示当前页面的锁定/解锁状态.
|
||||||
|
|
||||||
### 二维码工具
|
### 🖼️ 二维码工具
|
||||||
|
|
||||||
- **生成器**: 将当前 URL 或自定义文本快速转换为二维码,支持下载.
|
- **生成器**: 将当前 URL 或自定义文本快速转换为二维码,支持下载.
|
||||||
- **解析器**: 支持通过上传图片或粘贴图片来解析二维码内容.
|
- **解析器**: 支持通过上传图片或粘贴图片来解析二维码内容.
|
||||||
|
|
||||||
### JSON 工具
|
### 🔄 JSON 工具
|
||||||
|
|
||||||
- **差异比较**: 对比两段 JSON 数据,高亮展示差异.
|
- **差异比较**: 对比两段 JSON 数据,高亮展示差异.
|
||||||
- **格式化**: 支持 JSON 美化、压缩、转 YAML / TOML.
|
- **格式化**: 支持 JSON 美化、压缩、转 YAML / TOML.
|
||||||
|
|
||||||
### Base64 转换器
|
### 🧰 Base64 转换器
|
||||||
|
|
||||||
- **文本编解码**: 支持文本内容的 Base64 编码与解码.
|
- **文本编解码**: 支持文本内容的 Base64 编码与解码.
|
||||||
- **文件转换**: 支持文件与 Base64 字符串互转.
|
- **文件转换**: 支持文件与 Base64 字符串互转.
|
||||||
- **图像预览**: 支持图片 Base64 编码与实时预览.
|
- **图像预览**: 支持图片 Base64 编码与实时预览.
|
||||||
|
|
||||||
### 测试数据生成器
|
|
||||||
|
|
||||||
- **可视化字段配置**: 通过 UI 界面定义数据字段,支持拖拽排序、最多 40 个字段.
|
|
||||||
- **丰富的内置生成器**: 涵盖个人信息(姓名、手机、邮箱)、企业数据(公司名、职位)、技术数据(IP、MAC 地址、UUID)、基础类型(数字、日期、枚举)等多个分类.
|
|
||||||
- **灵活的参数配置**: 每个生成器支持自定义参数(如数字范围、日期格式、枚举值列表等).
|
|
||||||
- **空值率与唯一性**: 可为非必填字段设置空值率,支持字段唯一性约束.
|
|
||||||
- **规则管理**: 保存、加载、编辑、复制、导入/导出字段配置规则,方便复用.
|
|
||||||
- **批量生成**: 支持 1 ~ 100,000 条数据生成,通过 Web Worker 异步处理避免阻塞 UI.
|
|
||||||
- **实时预览**: 配置字段后即时预览示例数据结构.
|
|
||||||
- **多格式导出**: 支持 JSON 和 CSV 格式,提供复制到剪贴板和下载文件两种导出方式.
|
|
||||||
|
|
||||||
## 技术栈
|
## 技术栈
|
||||||
|
|
||||||
- **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
|
- **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
|
||||||
@@ -86,8 +75,6 @@
|
|||||||
- **存储**: Chrome Storage API (类型安全封装)
|
- **存储**: Chrome Storage API (类型安全封装)
|
||||||
- **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
|
- **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
|
||||||
- **测试**: Vitest + Testing Library
|
- **测试**: Vitest + Testing Library
|
||||||
- **拖拽排序**: @dnd-kit/core + @dnd-kit/sortable
|
|
||||||
- **异步生成**: Web Worker (批量数据生成)
|
|
||||||
|
|
||||||
## 项目结构
|
## 项目结构
|
||||||
|
|
||||||
@@ -102,7 +89,6 @@
|
|||||||
│ │ ├── background.ts # 后台 Service Worker
|
│ │ ├── background.ts # 后台 Service Worker
|
||||||
│ │ └── content.ts # 网页注入脚本
|
│ │ └── content.ts # 网页注入脚本
|
||||||
│ ├── pages/ # 各功能模块的页面组件
|
│ ├── pages/ # 各功能模块的页面组件
|
||||||
│ ├── workers/ # Web Worker (数据生成等耗时任务)
|
|
||||||
│ ├── providers/ # 全局状态提供者 (Router, Theme 等)
|
│ ├── providers/ # 全局状态提供者 (Router, Theme 等)
|
||||||
│ ├── hooks/ # 自定义 React Hooks
|
│ ├── hooks/ # 自定义 React Hooks
|
||||||
│ ├── utils/ # 工具函数与服务抽象
|
│ ├── utils/ # 工具函数与服务抽象
|
||||||
|
|||||||
@@ -1,194 +0,0 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
||||||
import { act, render, screen, waitFor } from '@testing-library/react';
|
|
||||||
import userEvent from '@testing-library/user-event';
|
|
||||||
|
|
||||||
// unmock the globally-mocked component so we test the real implementation
|
|
||||||
vi.unmock('@/components/CopyButton');
|
|
||||||
|
|
||||||
vi.mock('@/utils/clipboard', () => ({
|
|
||||||
copyTextToClipboard: vi.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock('sonner', () => ({
|
|
||||||
toast: {
|
|
||||||
success: vi.fn(),
|
|
||||||
error: vi.fn(),
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
import { CopyButton } from '@/components/CopyButton';
|
|
||||||
import { copyTextToClipboard } from '@/utils/clipboard';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
|
|
||||||
const mockedCopy = vi.mocked(copyTextToClipboard);
|
|
||||||
const mockedToast = vi.mocked(toast);
|
|
||||||
|
|
||||||
describe('CopyButton', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.useFakeTimers({ shouldAdvanceTime: true });
|
|
||||||
vi.clearAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
vi.useRealTimers();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('复制成功时调用 copyTextToClipboard 并传入正确 text', async () => {
|
|
||||||
mockedCopy.mockResolvedValue(true);
|
|
||||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
|
||||||
|
|
||||||
render(<CopyButton text="hello world" />);
|
|
||||||
|
|
||||||
await user.click(screen.getByRole('button'));
|
|
||||||
|
|
||||||
expect(mockedCopy).toHaveBeenCalledWith('hello world');
|
|
||||||
expect(mockedToast.success).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('复制成功后图标切换为 Check,1.5 秒后恢复', async () => {
|
|
||||||
mockedCopy.mockResolvedValue(true);
|
|
||||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
|
||||||
|
|
||||||
render(<CopyButton text="test" />);
|
|
||||||
|
|
||||||
// 点击后复制成功,按钮获得 emerald 样式(说明切到了 Check 状态)
|
|
||||||
await user.click(screen.getByRole('button'));
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.getByRole('button').className).toContain('text-emerald');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 1.5 秒后样式恢复
|
|
||||||
act(() => {
|
|
||||||
vi.advanceTimersByTime(1500);
|
|
||||||
});
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(screen.getByRole('button').className).not.toContain('text-emerald');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('复制空文本时弹出 error toast', async () => {
|
|
||||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
|
||||||
|
|
||||||
render(<CopyButton text="" />);
|
|
||||||
|
|
||||||
await user.click(screen.getByRole('button'));
|
|
||||||
|
|
||||||
expect(mockedCopy).not.toHaveBeenCalled();
|
|
||||||
expect(mockedToast.error).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('复制失败时弹出 error toast', async () => {
|
|
||||||
mockedCopy.mockResolvedValue(false);
|
|
||||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
|
||||||
|
|
||||||
render(<CopyButton text="something" />);
|
|
||||||
|
|
||||||
await user.click(screen.getByRole('button'));
|
|
||||||
|
|
||||||
expect(mockedCopy).toHaveBeenCalledWith('something');
|
|
||||||
expect(mockedToast.error).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
// ==================== 新增测试 ====================
|
|
||||||
|
|
||||||
it('初始渲染时显示 Copy 图标且无 emerald 样式', () => {
|
|
||||||
render(<CopyButton text="initial" />);
|
|
||||||
|
|
||||||
const button = screen.getByRole('button');
|
|
||||||
expect(button.className).not.toContain('text-emerald');
|
|
||||||
// 通过 aria-label 确认按钮存在,图标由 lucide 渲染为 svg
|
|
||||||
expect(button).toHaveAttribute('aria-label');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('自定义 tooltip 会覆盖默认 title 和 aria-label', () => {
|
|
||||||
render(<CopyButton text="tooltip-test" tooltip="自定义提示" />);
|
|
||||||
|
|
||||||
const button = screen.getByRole('button');
|
|
||||||
expect(button).toHaveAttribute('title', '自定义提示');
|
|
||||||
expect(button).toHaveAttribute('aria-label', '自定义提示');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('className 被正确透传到按钮', () => {
|
|
||||||
render(<CopyButton text="class-test" className="my-custom-class" />);
|
|
||||||
|
|
||||||
const button = screen.getByRole('button');
|
|
||||||
expect(button.className).toContain('my-custom-class');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('点击事件阻止冒泡', async () => {
|
|
||||||
mockedCopy.mockResolvedValue(true);
|
|
||||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
|
||||||
const parentClick = vi.fn();
|
|
||||||
|
|
||||||
render(
|
|
||||||
<div onClick={parentClick}>
|
|
||||||
<CopyButton text="stop-propagation" />
|
|
||||||
</div>,
|
|
||||||
);
|
|
||||||
|
|
||||||
await user.click(screen.getByRole('button'));
|
|
||||||
|
|
||||||
expect(mockedCopy).toHaveBeenCalled();
|
|
||||||
expect(parentClick).not.toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('组件卸载时清除定时器,不触发状态更新警告', async () => {
|
|
||||||
mockedCopy.mockResolvedValue(true);
|
|
||||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
|
||||||
|
|
||||||
const { unmount } = render(<CopyButton text="unmount-test" />);
|
|
||||||
|
|
||||||
await user.click(screen.getByRole('button'));
|
|
||||||
|
|
||||||
// 在 1.5 秒超时到期前卸载组件
|
|
||||||
act(() => {
|
|
||||||
vi.advanceTimersByTime(500);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 卸载不应抛出 "Can't perform a React state update on an unmounted component" 警告
|
|
||||||
expect(() => unmount()).not.toThrow();
|
|
||||||
|
|
||||||
// 前进剩余时间,确认没有异常
|
|
||||||
act(() => {
|
|
||||||
vi.advanceTimersByTime(2000);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('快速连续点击不会创建多个重叠定时器', async () => {
|
|
||||||
mockedCopy.mockResolvedValue(true);
|
|
||||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
|
||||||
|
|
||||||
render(<CopyButton text="rapid-click" />);
|
|
||||||
|
|
||||||
const button = screen.getByRole('button');
|
|
||||||
|
|
||||||
// 快速点击 3 次
|
|
||||||
await user.click(button);
|
|
||||||
await user.click(button);
|
|
||||||
await user.click(button);
|
|
||||||
|
|
||||||
// copyTextToClipboard 应该被调用 3 次(每次点击都执行)
|
|
||||||
expect(mockedCopy).toHaveBeenCalledTimes(3);
|
|
||||||
|
|
||||||
// 但 setTimeout 相关的 clearTimeout + setTimeout 组合应正常工作
|
|
||||||
// advance 1.5 秒后,copied 状态应恢复为 false
|
|
||||||
act(() => {
|
|
||||||
vi.advanceTimersByTime(1500);
|
|
||||||
});
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(button.className).not.toContain('text-emerald');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('其他 button props 通过 ...props 透传', () => {
|
|
||||||
render(<CopyButton text="props-test" data-testid="copy-btn" disabled id="copy-button-id" />);
|
|
||||||
|
|
||||||
const button = screen.getByRole('button');
|
|
||||||
expect(button).toHaveAttribute('data-testid', 'copy-btn');
|
|
||||||
expect(button).toBeDisabled();
|
|
||||||
expect(button).toHaveAttribute('id', 'copy-button-id');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,117 +0,0 @@
|
|||||||
import { act, renderHook, waitFor } from '@testing-library/react';
|
|
||||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
||||||
import { useGenerator } from '@/pages/TestDataGenerator/hooks/useGenerator';
|
|
||||||
import type { FieldConfig, WorkerResponseMessage } from '@/types/testDataGenerator';
|
|
||||||
|
|
||||||
const mockField: FieldConfig = {
|
|
||||||
id: 'field-1',
|
|
||||||
name: 'username',
|
|
||||||
generatorId: 'string',
|
|
||||||
params: {},
|
|
||||||
required: true,
|
|
||||||
nullRate: 0,
|
|
||||||
unique: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
type WorkerListener = (event: MessageEvent<WorkerResponseMessage>) => void;
|
|
||||||
|
|
||||||
class MockWorker {
|
|
||||||
static instances: MockWorker[] = [];
|
|
||||||
onmessage: WorkerListener | null = null;
|
|
||||||
onerror: ((event: ErrorEvent) => void) | null = null;
|
|
||||||
postedMessages: unknown[] = [];
|
|
||||||
|
|
||||||
constructor(_url: URL, _options?: WorkerOptions) {
|
|
||||||
MockWorker.instances.push(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
postMessage(message: unknown) {
|
|
||||||
this.postedMessages.push(message);
|
|
||||||
}
|
|
||||||
|
|
||||||
terminate() {
|
|
||||||
const index = MockWorker.instances.indexOf(this);
|
|
||||||
if (index >= 0) {
|
|
||||||
MockWorker.instances.splice(index, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
emit(message: WorkerResponseMessage) {
|
|
||||||
this.onmessage?.({ data: message } as MessageEvent<WorkerResponseMessage>);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('useGenerator', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
MockWorker.instances = [];
|
|
||||||
vi.stubGlobal('Worker', MockWorker);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('应忽略过期 generationId 的 complete 消息', async () => {
|
|
||||||
const { result } = renderHook(() => useGenerator());
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
result.current.generate([mockField], 10);
|
|
||||||
});
|
|
||||||
|
|
||||||
const worker = MockWorker.instances[0];
|
|
||||||
expect(worker).toBeDefined();
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
result.current.cancel();
|
|
||||||
});
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
result.current.generate([mockField], 5);
|
|
||||||
});
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
worker.emit({
|
|
||||||
type: 'complete',
|
|
||||||
generationId: 1,
|
|
||||||
payload: {
|
|
||||||
success: true,
|
|
||||||
data: [{ username: 'stale' }],
|
|
||||||
stats: { total: 10, success: 10, failed: 0, duration: 1 },
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(result.current.result).toBeNull();
|
|
||||||
expect(result.current.isGenerating).toBe(true);
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
worker.emit({
|
|
||||||
type: 'complete',
|
|
||||||
generationId: 3,
|
|
||||||
payload: {
|
|
||||||
success: true,
|
|
||||||
data: [{ username: 'fresh' }],
|
|
||||||
stats: { total: 5, success: 5, failed: 0, duration: 1 },
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
await waitFor(() => {
|
|
||||||
expect(result.current.isGenerating).toBe(false);
|
|
||||||
});
|
|
||||||
expect(result.current.result?.data?.[0]).toEqual({ username: 'fresh' });
|
|
||||||
});
|
|
||||||
|
|
||||||
it('cancel 后应发送 cancel 消息并使 generationId 失效', () => {
|
|
||||||
const { result } = renderHook(() => useGenerator());
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
result.current.generate([mockField], 100);
|
|
||||||
});
|
|
||||||
|
|
||||||
const worker = MockWorker.instances[0];
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
result.current.cancel();
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(result.current.isGenerating).toBe(false);
|
|
||||||
expect(worker.postedMessages).toEqual(expect.arrayContaining([{ type: 'cancel' }]));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -8,8 +8,7 @@ import type {
|
|||||||
FieldConfig,
|
FieldConfig,
|
||||||
GenerateResult,
|
GenerateResult,
|
||||||
GenerateProgress,
|
GenerateProgress,
|
||||||
WorkerRequestMessage,
|
WorkerMessage,
|
||||||
WorkerResponseMessage,
|
|
||||||
} from '@/types/testDataGenerator';
|
} from '@/types/testDataGenerator';
|
||||||
|
|
||||||
export interface UseGeneratorReturn {
|
export interface UseGeneratorReturn {
|
||||||
@@ -36,7 +35,6 @@ export function useGenerator(): UseGeneratorReturn {
|
|||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const workerRef = useRef<Worker | null>(null);
|
const workerRef = useRef<Worker | null>(null);
|
||||||
const generationIdRef = useRef(0);
|
|
||||||
|
|
||||||
// 清理 Worker
|
// 清理 Worker
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -60,30 +58,22 @@ export function useGenerator(): UseGeneratorReturn {
|
|||||||
type: 'module',
|
type: 'module',
|
||||||
});
|
});
|
||||||
|
|
||||||
worker.onmessage = (e: MessageEvent<WorkerResponseMessage>) => {
|
worker.onmessage = (e: MessageEvent<WorkerMessage>) => {
|
||||||
const data = e.data;
|
const data = e.data;
|
||||||
const { type } = data;
|
const { type } = data;
|
||||||
|
|
||||||
if (data.generationId !== generationIdRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'progress':
|
case 'progress':
|
||||||
setProgress(data.payload);
|
setProgress(data.payload as GenerateProgress);
|
||||||
break;
|
break;
|
||||||
case 'complete':
|
case 'complete':
|
||||||
setIsGenerating(false);
|
setIsGenerating(false);
|
||||||
if (data.payload.success) {
|
setResult(data.payload as GenerateResult);
|
||||||
setResult(data.payload);
|
|
||||||
} else if (data.payload.error && data.payload.error !== '生成已取消') {
|
|
||||||
setError(data.payload.error);
|
|
||||||
}
|
|
||||||
setProgress(null);
|
setProgress(null);
|
||||||
break;
|
break;
|
||||||
case 'error':
|
case 'error':
|
||||||
setIsGenerating(false);
|
setIsGenerating(false);
|
||||||
setError(data.payload.error);
|
setError((data.payload as { error: string }).error);
|
||||||
setProgress(null);
|
setProgress(null);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@@ -110,17 +100,15 @@ export function useGenerator(): UseGeneratorReturn {
|
|||||||
(fields: FieldConfig[], count: number, csvMode = false) => {
|
(fields: FieldConfig[], count: number, csvMode = false) => {
|
||||||
if (isGenerating) return;
|
if (isGenerating) return;
|
||||||
|
|
||||||
const generationId = ++generationIdRef.current;
|
|
||||||
|
|
||||||
setIsGenerating(true);
|
setIsGenerating(true);
|
||||||
setProgress(null);
|
setProgress(null);
|
||||||
setResult(null);
|
setResult(null);
|
||||||
setError(null);
|
setError(null);
|
||||||
|
|
||||||
const worker = getWorker();
|
const worker = getWorker();
|
||||||
const message: WorkerRequestMessage = {
|
const message: WorkerMessage = {
|
||||||
type: 'start',
|
type: 'start',
|
||||||
payload: { generationId, fields, count, csvMode },
|
payload: { fields, count, csvMode },
|
||||||
};
|
};
|
||||||
worker.postMessage(message);
|
worker.postMessage(message);
|
||||||
},
|
},
|
||||||
@@ -132,8 +120,7 @@ export function useGenerator(): UseGeneratorReturn {
|
|||||||
*/
|
*/
|
||||||
const cancel = useCallback(() => {
|
const cancel = useCallback(() => {
|
||||||
if (workerRef.current && isGenerating) {
|
if (workerRef.current && isGenerating) {
|
||||||
++generationIdRef.current;
|
const message: WorkerMessage = { type: 'cancel' };
|
||||||
const message: WorkerRequestMessage = { type: 'cancel' };
|
|
||||||
workerRef.current.postMessage(message);
|
workerRef.current.postMessage(message);
|
||||||
setIsGenerating(false);
|
setIsGenerating(false);
|
||||||
setProgress(null);
|
setProgress(null);
|
||||||
|
|||||||
@@ -156,29 +156,19 @@ export interface GenerateProgress {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Worker 请求消息类型
|
* Worker 消息类型
|
||||||
*/
|
*/
|
||||||
export type WorkerRequestMessage =
|
export type WorkerMessage =
|
||||||
| { type: 'start'; payload: WorkerStartPayload }
|
| { type: 'start'; payload: WorkerStartPayload }
|
||||||
|
| { type: 'progress'; payload: GenerateProgress }
|
||||||
|
| { type: 'complete'; payload: GenerateResult }
|
||||||
|
| { type: 'error'; payload: { error: string } }
|
||||||
| { type: 'cancel' };
|
| { type: 'cancel' };
|
||||||
|
|
||||||
/**
|
|
||||||
* Worker 响应消息类型
|
|
||||||
*/
|
|
||||||
export type WorkerResponseMessage =
|
|
||||||
| { type: 'progress'; generationId: number; payload: GenerateProgress }
|
|
||||||
| { type: 'complete'; generationId: number; payload: GenerateResult }
|
|
||||||
| { type: 'error'; generationId: number; payload: { error: string } };
|
|
||||||
|
|
||||||
/** @deprecated 使用 WorkerRequestMessage | WorkerResponseMessage */
|
|
||||||
export type WorkerMessage = WorkerRequestMessage | WorkerResponseMessage;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Worker 启动参数
|
* Worker 启动参数
|
||||||
*/
|
*/
|
||||||
export interface WorkerStartPayload {
|
export interface WorkerStartPayload {
|
||||||
/** 生成任务 ID,用于忽略过期 Worker 响应 */
|
|
||||||
generationId: number;
|
|
||||||
/** 字段配置列表 */
|
/** 字段配置列表 */
|
||||||
fields: FieldConfig[];
|
fields: FieldConfig[];
|
||||||
/** 生成数量 */
|
/** 生成数量 */
|
||||||
|
|||||||
@@ -1,65 +0,0 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
||||||
import * as ruleStorage from '../ruleStorage';
|
|
||||||
|
|
||||||
const STORAGE_KEY = 'testDataGenerator_rules';
|
|
||||||
|
|
||||||
const mockField = {
|
|
||||||
id: 'field-1',
|
|
||||||
name: 'username',
|
|
||||||
generatorId: 'string',
|
|
||||||
params: {},
|
|
||||||
required: true,
|
|
||||||
nullRate: 0,
|
|
||||||
unique: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('ruleStorage', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
localStorage.clear();
|
|
||||||
vi.restoreAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('save 在 localStorage 写入失败时应返回 null', () => {
|
|
||||||
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
|
|
||||||
throw new DOMException('QuotaExceededError');
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = ruleStorage.save({
|
|
||||||
name: 'Test Rule',
|
|
||||||
fields: [mockField],
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(result).toBeNull();
|
|
||||||
expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('update 在 localStorage 写入失败时应返回 null', () => {
|
|
||||||
const saved = ruleStorage.save({
|
|
||||||
name: 'Test Rule',
|
|
||||||
fields: [mockField],
|
|
||||||
});
|
|
||||||
expect(saved).not.toBeNull();
|
|
||||||
|
|
||||||
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
|
|
||||||
throw new DOMException('QuotaExceededError');
|
|
||||||
});
|
|
||||||
|
|
||||||
const updated = ruleStorage.update(saved!.id, { name: 'Updated Rule' });
|
|
||||||
expect(updated).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('deleteRule 在 localStorage 写入失败时应返回 false', () => {
|
|
||||||
const saved = ruleStorage.save({
|
|
||||||
name: 'Test Rule',
|
|
||||||
fields: [mockField],
|
|
||||||
});
|
|
||||||
expect(saved).not.toBeNull();
|
|
||||||
|
|
||||||
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
|
|
||||||
throw new DOMException('QuotaExceededError');
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(ruleStorage.deleteRule(saved!.id)).toBe(false);
|
|
||||||
expect(ruleStorage.getById(saved!.id)).toBeDefined();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -78,9 +78,7 @@ export function save(
|
|||||||
useCount: 0,
|
useCount: 0,
|
||||||
};
|
};
|
||||||
rules.unshift(newRule);
|
rules.unshift(newRule);
|
||||||
if (!setAll(rules)) {
|
setAll(rules);
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return newRule;
|
return newRule;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -97,9 +95,7 @@ export function save(
|
|||||||
updatedAt: now,
|
updatedAt: now,
|
||||||
};
|
};
|
||||||
rules[index] = updatedRule;
|
rules[index] = updatedRule;
|
||||||
if (!setAll(rules)) {
|
setAll(rules);
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return updatedRule;
|
return updatedRule;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -121,9 +117,7 @@ export function update(id: string, updates: Partial<DataRule>): DataRule | null
|
|||||||
updatedAt: Date.now(),
|
updatedAt: Date.now(),
|
||||||
};
|
};
|
||||||
rules[index] = updatedRule;
|
rules[index] = updatedRule;
|
||||||
if (!setAll(rules)) {
|
setAll(rules);
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return updatedRule;
|
return updatedRule;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -138,7 +132,8 @@ export function deleteRule(id: string): boolean {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
rules.splice(index, 1);
|
rules.splice(index, 1);
|
||||||
return setAll(rules);
|
setAll(rules);
|
||||||
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -170,9 +165,7 @@ export function duplicate(id: string, copySuffix = '(副本)'): DataRule | n
|
|||||||
|
|
||||||
const rules = getAll();
|
const rules = getAll();
|
||||||
rules.unshift(newRule);
|
rules.unshift(newRule);
|
||||||
if (!setAll(rules)) {
|
setAll(rules);
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return newRule;
|
return newRule;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -274,13 +267,11 @@ export function clear(): void {
|
|||||||
/**
|
/**
|
||||||
* 保存所有规则到存储
|
* 保存所有规则到存储
|
||||||
*/
|
*/
|
||||||
function setAll(rules: DataRule[]): boolean {
|
function setAll(rules: DataRule[]): void {
|
||||||
try {
|
try {
|
||||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
|
||||||
return true;
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('[ruleStorage] 保存规则失败:', error);
|
console.error('[ruleStorage] 保存规则失败:', error);
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -6,14 +6,11 @@
|
|||||||
import { getGeneratorById } from '@/lib/generators';
|
import { getGeneratorById } from '@/lib/generators';
|
||||||
import type {
|
import type {
|
||||||
FieldConfig,
|
FieldConfig,
|
||||||
WorkerRequestMessage,
|
WorkerMessage,
|
||||||
GenerateResult,
|
GenerateResult,
|
||||||
GenerateProgress,
|
GenerateProgress,
|
||||||
} from '@/types/testDataGenerator';
|
} from '@/types/testDataGenerator';
|
||||||
|
|
||||||
/** 每生成 N 行让出一次事件循环,以便处理 cancel 消息 */
|
|
||||||
const YIELD_EVERY = 100;
|
|
||||||
|
|
||||||
// 生成结果缓存
|
// 生成结果缓存
|
||||||
let generatedData: Record<string, unknown>[] = [];
|
let generatedData: Record<string, unknown>[] = [];
|
||||||
let isCancelled = false;
|
let isCancelled = false;
|
||||||
@@ -21,7 +18,7 @@ let isCancelled = false;
|
|||||||
/**
|
/**
|
||||||
* Worker 消息处理器
|
* Worker 消息处理器
|
||||||
*/
|
*/
|
||||||
self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {
|
self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
|
||||||
const data = e.data;
|
const data = e.data;
|
||||||
const { type } = data;
|
const { type } = data;
|
||||||
|
|
||||||
@@ -40,12 +37,11 @@ self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {
|
|||||||
* 处理开始生成消息
|
* 处理开始生成消息
|
||||||
*/
|
*/
|
||||||
async function handleStart(payload: {
|
async function handleStart(payload: {
|
||||||
generationId: number;
|
|
||||||
fields: FieldConfig[];
|
fields: FieldConfig[];
|
||||||
count: number;
|
count: number;
|
||||||
csvMode: boolean;
|
csvMode: boolean;
|
||||||
}): Promise<void> {
|
}): Promise<void> {
|
||||||
const { generationId, fields, count } = payload;
|
const { fields, count } = payload;
|
||||||
generatedData = [];
|
generatedData = [];
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -55,7 +51,6 @@ async function handleStart(payload: {
|
|||||||
if (!generator) {
|
if (!generator) {
|
||||||
self.postMessage({
|
self.postMessage({
|
||||||
type: 'error',
|
type: 'error',
|
||||||
generationId,
|
|
||||||
payload: { error: `生成器 "${field.generatorId}" 不存在` },
|
payload: { error: `生成器 "${field.generatorId}" 不存在` },
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -70,7 +65,6 @@ async function handleStart(payload: {
|
|||||||
if (isCancelled) {
|
if (isCancelled) {
|
||||||
self.postMessage({
|
self.postMessage({
|
||||||
type: 'complete',
|
type: 'complete',
|
||||||
generationId,
|
|
||||||
payload: {
|
payload: {
|
||||||
success: false,
|
success: false,
|
||||||
error: '生成已取消',
|
error: '生成已取消',
|
||||||
@@ -142,23 +136,7 @@ async function handleStart(payload: {
|
|||||||
total: count,
|
total: count,
|
||||||
estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
|
estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
|
||||||
};
|
};
|
||||||
self.postMessage({ type: 'progress', generationId, payload: progress });
|
self.postMessage({ type: 'progress', payload: progress });
|
||||||
}
|
|
||||||
|
|
||||||
// 定期让出事件循环,使 cancel 消息能被处理
|
|
||||||
if ((i + 1) % YIELD_EVERY === 0) {
|
|
||||||
await new Promise<void>((resolve) => setTimeout(resolve, 0));
|
|
||||||
if (isCancelled) {
|
|
||||||
self.postMessage({
|
|
||||||
type: 'complete',
|
|
||||||
generationId,
|
|
||||||
payload: {
|
|
||||||
success: false,
|
|
||||||
error: '生成已取消',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -177,11 +155,10 @@ async function handleStart(payload: {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
self.postMessage({ type: 'complete', generationId, payload: result });
|
self.postMessage({ type: 'complete', payload: result });
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
self.postMessage({
|
self.postMessage({
|
||||||
type: 'error',
|
type: 'error',
|
||||||
generationId,
|
|
||||||
payload: { error: `生成失败: ${error}` },
|
payload: { error: `生成失败: ${error}` },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user