Develop (#9)

* feat: optimize popup standalone window layout and enhance storage cleaner synchronization * docs: 更新README文档并删除过时文件 - 更新README文档，添加项目结构、功能特性和路由系统等详细信息 - 删除不再使用的文档文件，包括CLAUDE.md、GEMINI.md和多个设计规范文档 - 清理项目中的过时配置文件和计划文档 * feat: 添加 Vitest 测试框架和组件测试 - 添加 Vitest 配置 (vitest.config.ts, vitest.setup.ts) - 创建组件测试: Button, ToolCard, GlobalSnackbar, TopBar, RouterContainer, StorageCleanerConfirm - 创建工具测试: routes, storageCleaner - 修复 background.ts 监听器参数问题 - 修复 options/App.tsx 硬编码默认值 - 更新 lint-staged.config.mjs (添加 .mjs 支持, 添加 --no-warn-ignored) - 更新 tsconfig.json (添加测试类型支持, 移除测试文件排除) - 更新 package.json (添加测试脚本和依赖) * fix: 修复 StorageCleanerPage Chrome API 监听器内存泄漏使用 useRef 模式存储 loadInfo 函数引用，避免依赖数组变化导致的监听器重复注册问题 * refactor(popup): 优化 OpenUrl 页面样式和导航逻辑重构 OpenUrl 页面输入框样式，改进聚焦状态效果移除 RouterProvider 依赖，直接通过存储设置侧边栏路由在 OpenUrlViewer 页面添加加载状态指示器和错误处理监听存储变化实现 URL 自动更新 * feat(ui): 优化存储清理页面UI和交互效果重构存储清理页面组件，增强视觉层次和交互体验： - 使用新的错误提示样式和布局 - 改进选项卡片样式，增加悬停动画和选中状态 - 调整整体间距和排版，提升视觉一致性 - 添加微交互效果如悬停缩放和阴影 - 优化颜色方案和过渡动画 - 统一组件尺寸和字体层级 * feat: 添加二维码工具页面，支持URL转二维码和二维码解析功能 * chore: update package-lock.json (npm audit fix) * refactor(主题): 将页面样式抽离到统一配置文件将各页面的颜色和样式配置抽离到config/pageTheme.ts中统一管理优化测试用例中使用each替代forEach 更新路由测试以包含新的qrCode页面 * feat(二维码页面): 添加复制二维码功能并优化样式添加复制二维码到剪贴板的功能，并调整按钮布局和样式。同时将 ContentCopyIcon 导入位置调整到其他图标导入之后，并修复缩进问题。在 tsconfig.json 中添加 vitest/globals 类型支持。 * feat(theme): 为所有页面添加统一的背景色和卡片背景色为应用中的所有页面添加了统一的浅灰色背景(#f5f5f5)和白色卡片背景(#ffffff)，以保持视觉一致性。修改了ToolCard组件以支持自定义卡片背景色，并更新了所有相关页面使用新的主题配置。 * feat: 添加复制按钮组件并优化现有复制功能 refactor(utils): 创建剪贴板工具函数 feat(components): 新增可复用的CopyButton组件 refactor(pages): 在QrCodePage和TimestampPage中使用CopyButton style: 格式化代码并调整部分样式 * refactor(存储): 统一qrCode相关存储键名将'qrCode/expanded'重命名为'qrCode/qrExpanded'以保持命名一致性 * feat: 添加二维码工具功能并更新项目配置 - 新增二维码工具页面及相关组件和工具函数 - 添加 MIT 许可证文件 - 更新 package.json 配置为公开项目 - 更新 README 文档说明新功能
2026-04-19 15:31:14 +08:00
parent bbd0507bcd
commit be5e2f02ee
43 changed files with 4943 additions and 2483 deletions
@@ -0,0 +1,150 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ToolCard from '../ToolCard';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+
+describe('ToolCard Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render with title and description', () => {
+      render(
+        <ToolCard
+          title="Test Tool"
+          description="This is a test tool"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      expect(screen.getByText('Test Tool')).toBeInTheDocument();
+      expect(screen.getByText('This is a test tool')).toBeInTheDocument();
+    });
+
+    it('should render with only title when no description', () => {
+      render(
+        <ToolCard
+          title="Title Only"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      expect(screen.getByText('Title Only')).toBeInTheDocument();
+    });
+
+    it('should render icon', () => {
+      render(
+        <ToolCard
+          title="With Icon"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon data-testid="test-icon" />}
+          onClick={() => {}}
+        />
+      );
+
+      expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+    });
+
+    it('should render snapshot content when provided', () => {
+      render(
+        <ToolCard
+          title="With Snapshot"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+          snapshot={<div data-testid="snapshot">Snapshot Content</div>}
+        />
+      );
+
+      expect(screen.getByTestId('snapshot')).toBeInTheDocument();
+    });
+
+    it('should not render snapshot section when not provided', () => {
+      const { container } = render(
+        <ToolCard
+          title="No Snapshot"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      expect(container.querySelector('[data-testid="snapshot"]')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('AI Badge', () => {
+    it('should render AI badge when hasAI is true', () => {
+      render(
+        <ToolCard
+          title="AI Tool"
+          hasAI={true}
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      const autoAwesomeIcon = screen.getByTestId('AutoAwesomeIcon');
+      expect(autoAwesomeIcon).toBeInTheDocument();
+    });
+
+    it('should not render AI badge when hasAI is false', () => {
+      render(
+        <ToolCard
+          title="Normal Tool"
+          hasAI={false}
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      const autoAwesomeIcon = screen.queryByTestId('AutoAwesomeIcon');
+      expect(autoAwesomeIcon).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Interaction', () => {
+    it('should call onClick when clicked', () => {
+      const handleClick = vi.fn();
+      render(
+        <ToolCard
+          title="Clickable"
+          colorCode="#2196f3"
+          icon={<AccessTimeIcon />}
+          onClick={handleClick}
+        />
+      );
+
+      const card = screen.getByText('Clickable').closest('.MuiBox-root');
+      if (card) {
+        fireEvent.click(card);
+      }
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom color code', () => {
+      const customColor = '#ff5722';
+      const { container } = render(
+        <ToolCard
+          title="Custom Color"
+          colorCode={customColor}
+          icon={<AccessTimeIcon />}
+          onClick={() => {}}
+        />
+      );
+
+      const iconContainer = container.querySelector('.MuiBox-root > div');
+      expect(iconContainer).toBeInTheDocument();
+    });
+  });
+});