Develop (#55)

feat: optimize dashboard/search UX and simplify extension architecture Redesign Dashboard with compact tool grid and recently used tools Improve TopBar search UX with Cmd/Ctrl+K shortcut and better history navigation Reorganize project structure into src/ Migrate i18n from react-i18next to chrome.i18n Remove runtime language switch and settings page Remove HTML/Markdown conversion tools Clean up unused code, dead animations, redundant comments, and imports Improve component consistency with shadcn/ui patterns Replace hardcoded strings/colors with i18n tokens and theme tokens Add comprehensive project documentation and coding standards Fix CI artifact upload workflow and multiple TypeScript/test issues Includes various refactors, UI polish, i18n cleanup, CI improvements, and maintenance updates across the codebase.
2026-05-28 22:39:25 +08:00
parent d4c29a1bf4
commit 945780def8
200 changed files with 1557 additions and 4380 deletions
@@ -0,0 +1,118 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ToolCard from '@/pages/Dashboard/ToolCard';
+import { Clock } from 'lucide-react';
+
+describe('ToolCard 组件', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('渲染测试', () => {
+    it('应渲染标题和描述', () => {
+      render(
+        <ToolCard
+          title="测试工具"
+          description="这是一个测试工具"
+          colorKey="primary"
+          icon={Clock}
+          onNavigate={() => {}}
+        />,
+      );
+
+      expect(screen.getByText('测试工具')).toBeInTheDocument();
+      expect(screen.getByText('这是一个测试工具')).toBeInTheDocument();
+    });
+
+    it('无描述时仅渲染标题', () => {
+      render(<ToolCard title="仅标题" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
+
+      expect(screen.getByText('仅标题')).toBeInTheDocument();
+    });
+
+    it('应渲染图标', () => {
+      const { container } = render(
+        <ToolCard title="带图标" colorKey="primary" icon={Clock} onNavigate={() => {}} />,
+      );
+
+      const svgElement = container.querySelector('svg');
+      expect(svgElement).toBeInTheDocument();
+    });
+
+    it('提供快照内容时应渲染快照', () => {
+      render(
+        <ToolCard
+          title="带快照"
+          colorKey="primary"
+          icon={Clock}
+          onNavigate={() => {}}
+          snapshot={<div data-testid="snapshot">快照内容</div>}
+        />,
+      );
+
+      expect(screen.getByTestId('snapshot')).toBeInTheDocument();
+    });
+
+    it('未提供快照时不渲染快照区域', () => {
+      const { container } = render(
+        <ToolCard
+          title="无快照"
+          colorKey="primary"
+          icon={Clock}
+          onClick={() => {}}
+          onNavigate={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />,
+      );
+
+      expect(container.querySelector('[data-testid="snapshot"]')).not.toBeInTheDocument();
+    });
+
+    it('应使用 CardActionArea 渲染，支持键盘聚焦', () => {
+      render(<ToolCard title="可聚焦" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
+
+      const button = screen.getByRole('button', { name: /可聚焦/ });
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('交互测试', () => {
+    it('点击时应调用 onClick', () => {
+      const handleClick = vi.fn();
+      render(<ToolCard title="可点击" colorKey="primary" icon={Clock} onNavigate={handleClick} />);
+
+      const button = screen.getByRole('button', { name: /可点击/ });
+      fireEvent.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('按 Enter 键时应调用 onClick', async () => {
+      const handleClick = vi.fn();
+      render(
+        <ToolCard title="键盘可触发" colorKey="primary" icon={Clock} onNavigate={handleClick} />,
+      );
+
+      const button = screen.getByRole('button', { name: /键盘可触发/ });
+      await act(async () => {
+        button.focus();
+        await userEvent.keyboard('{Enter}');
+      });
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('样式测试', () => {
+    it('应应用自定义颜色代码', () => {
+      const { container } = render(
+        <ToolCard title="自定义颜色" colorKey="warning" icon={Clock} onNavigate={() => {}} />,
+      );
+
+      const svgElement = container.querySelector('svg');
+      expect(svgElement).toBeInTheDocument();
+    });
+  });
+});