refactor(qrcode): 国际化补充、质量保障与错误处理优化

- 补充 i18n 翻译键（generateMode, parseMode, pasteHint 等） - 创建 useDebounce Hook 实现输入防抖 (200ms) - 使用 useRef 解决 useEffect 无限循环问题 - 编写 pages/QrCode 单元测试 (7 个用例) - 优化右键菜单错误处理，改进用户提示 - 运行 603 个测试全部通过
2026-05-20 22:42:33 +08:00
parent bc560cc453
commit c5b51a9b33
6 changed files with 245 additions and 54 deletions
@@ -0,0 +1,73 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import QrCodePage from '../index';
+
+// Mock 子组件
+vi.mock('@/components/QrCodePreview', () => ({
+  default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
+}));
+
+vi.mock('@/components/ImageUploader', () => ({
+  default: () => <div data-testid="image-uploader">ImageUploader</div>,
+}));
+
+// Mock QRious
+vi.mock('qrious', () => ({
+  default: vi.fn().mockImplementation(() => ({
+    toDataURL: () => 'data:image/png;base64,mock',
+  })),
+}));
+
+// Mock useSnackbar
+vi.mock('@/components/GlobalSnackbar', () => ({
+  useSnackbar: () => ({
+    showMessage: vi.fn(),
+  }),
+}));
+
+describe('QrCodePage', () => {
+  it('应该默认渲染生成模式', () => {
+    render(<QrCodePage />);
+    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
+  });
+
+  it('应该渲染模式切换按钮', () => {
+    render(<QrCodePage />);
+    expect(screen.getByText('qrCode:urlToQr')).toBeInTheDocument();
+    expect(screen.getByText('qrCode:qrToUrl')).toBeInTheDocument();
+  });
+
+  it('应该渲染页面标题', () => {
+    render(<QrCodePage />);
+    expect(screen.getByText('qrCode:pageTitle')).toBeInTheDocument();
+    expect(screen.getByText('qrCode:pageSubtitle')).toBeInTheDocument();
+  });
+
+  it('切换到解析模式应该渲染 ImageUploader', () => {
+    render(<QrCodePage />);
+    fireEvent.click(screen.getByText('qrCode:qrToUrl'));
+    expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
+    expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
+  });
+
+  it('切换回生成模式应该渲染 QrCodePreview', () => {
+    render(<QrCodePage />);
+    // 先切换到解析模式
+    fireEvent.click(screen.getByText('qrCode:qrToUrl'));
+    expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
+    // 再切换回生成模式
+    fireEvent.click(screen.getByText('qrCode:urlToQr'));
+    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
+  });
+
+  it('应该渲染输入区域', () => {
+    render(<QrCodePage />);
+    expect(screen.getByText('qrCode:urlInputLabel')).toBeInTheDocument();
+  });
+
+  it('应该渲染双栏布局容器', () => {
+    const { container } = render(<QrCodePage />);
+    const gridContainer = container.querySelector('.MuiGrid-container');
+    expect(gridContainer).toBeInTheDocument();
+  });
+});