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,83 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import DecodeResultPaper from '@/components/DecodeResultPaper';
+
+describe('DecodeResultPaper 组件', () => {
+  const defaultProps = {
+    title: 'decodedFileOutput',
+    mimeType: 'image/png',
+    blobSize: 1024,
+    fileName: 'decoded.png',
+    onFileNameChange: vi.fn(),
+    onDownload: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('渲染测试', () => {
+    it('应渲染标题', () => {
+      render(<DecodeResultPaper {...defaultProps} />);
+      expect(screen.getByText('decodedFileOutput')).toBeInTheDocument();
+    });
+
+    it('应渲染 MIME 类型信息', () => {
+      render(<DecodeResultPaper {...defaultProps} />);
+      expect(screen.getByText(/image\/png/)).toBeInTheDocument();
+    });
+
+    it('应通过 formatFileSize 渲染文件大小', () => {
+      render(<DecodeResultPaper {...{ ...defaultProps, blobSize: 1536 }} />);
+      expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument();
+    });
+
+    it('应渲染文件名输入框', () => {
+      render(<DecodeResultPaper {...defaultProps} />);
+      const input = screen.getByDisplayValue('decoded.png');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('应渲染下载按钮', () => {
+      render(<DecodeResultPaper {...defaultProps} />);
+      expect(screen.getByRole('button', { name: '下载' })).toBeInTheDocument();
+    });
+
+    it('应渲染 children 内容', () => {
+      render(
+        <DecodeResultPaper {...defaultProps}>
+          <div data-testid="preview">预览内容</div>
+        </DecodeResultPaper>,
+      );
+      expect(screen.getByTestId('preview')).toBeInTheDocument();
+      expect(screen.getByText('预览内容')).toBeInTheDocument();
+    });
+  });
+
+  describe('交互测试', () => {
+    it('修改文件名时应调用 onFileNameChange', () => {
+      render(<DecodeResultPaper {...defaultProps} />);
+      const input = screen.getByDisplayValue('decoded.png');
+      fireEvent.change(input, { target: { value: 'new-name.png' } });
+      expect(defaultProps.onFileNameChange).toHaveBeenCalledWith('new-name.png');
+    });
+
+    it('点击下载按钮时应调用 onDownload', () => {
+      render(<DecodeResultPaper {...defaultProps} />);
+      fireEvent.click(screen.getByRole('button', { name: '下载' }));
+      expect(defaultProps.onDownload).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('按钮状态', () => {
+    it('文件名为空时下载按钮应禁用', () => {
+      render(<DecodeResultPaper {...{ ...defaultProps, fileName: '' }} />);
+      expect(screen.getByRole('button', { name: '下载' })).toBeDisabled();
+    });
+
+    it('文件名不为空时下载按钮应启用', () => {
+      render(<DecodeResultPaper {...defaultProps} />);
+      expect(screen.getByRole('button', { name: '下载' })).toBeEnabled();
+    });
+  });
+});