雨霖铃
aa23a263fe
- 移除 react-i18next、i18next 及相关依赖
- 删除旧的 i18n/ 目录和 useLazyTranslation 工具
- 新增 utils/chromeI18n.ts 类型安全 wrapper（useI18n Hook + getMessage）
- 生成 public/_locales/{zh,en}/messages.json（298 个翻译 key）
- 批量更新 39+ 组件文件的导入和翻译调用
- 转换翻译键格式：namespace:key → namespace_key
- 修复 ErrorBoundary/PageErrorBoundary 从 withTranslation HOC 改为直接调用 getMessage
- 更新 vitest.setup.ts mock 加载实际翻译文本
- 修复 11 个测试文件的断言以匹配中文翻译
- TypeScript、ESLint、547 项测试全部通过
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import QrCodePage from '../index';
|
|
|
|
vi.mock('lucide-react', async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import('lucide-react')>();
|
|
return {
|
|
...actual,
|
|
// 增量伪造需要高精嗅探的 QrCode 核心定位图标
|
|
QrCode: () => <div data-testid="mock-lucide-qrcode">Icon</div>,
|
|
};
|
|
});
|
|
|
|
// Mock useSnackbar
|
|
vi.mock('@/components/GlobalSnackbar', () => ({
|
|
useSnackbar: () => ({
|
|
showMessage: vi.fn(),
|
|
}),
|
|
}));
|
|
|
|
// Mock getEntryPointType（保留原厂其他特征配置，仅模拟入口路由环境）
|
|
vi.mock('@/config/features', async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import('@/config/features')>();
|
|
return {
|
|
...actual,
|
|
getEntryPointType: () => 'sidepanel',
|
|
};
|
|
});
|
|
|
|
// 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',
|
|
})),
|
|
}));
|
|
|
|
describe('QrCodePage', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it('应该默认渲染生成模式', () => {
|
|
render(<QrCodePage />);
|
|
expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
|
|
});
|
|
|
|
it('应该渲染模式切换按钮', () => {
|
|
render(<QrCodePage />);
|
|
expect(screen.getByText('文本转二维码')).toBeInTheDocument();
|
|
expect(screen.getByText('二维码转文本')).toBeInTheDocument();
|
|
});
|
|
|
|
it('切换到解析模式应该渲染 ImageUploader', () => {
|
|
render(<QrCodePage />);
|
|
fireEvent.click(screen.getByText('二维码转文本'));
|
|
expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
|
|
expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('切换回生成模式应该渲染 QrCodePreview', () => {
|
|
render(<QrCodePage />);
|
|
// 先切换到解析模式
|
|
fireEvent.click(screen.getByText('二维码转文本'));
|
|
expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
|
|
// 再切换回生成模式
|
|
fireEvent.click(screen.getByText('文本转二维码'));
|
|
expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
|
|
});
|
|
|
|
it('应该渲染输入区域的系统标签（对齐新版 Label 机制）', () => {
|
|
render(<QrCodePage />);
|
|
expect(screen.getByText('输入 URL 或文本')).toBeInTheDocument();
|
|
});
|
|
|
|
it('应该渲染双翼响应式卡片网格布局', () => {
|
|
const { container } = render(<QrCodePage />);
|
|
const gridContainer = container.querySelector('.grid');
|
|
expect(gridContainer).toBeInTheDocument();
|
|
});
|
|
});
|