雨霖铃
c5b51a9b33
- 补充 i18n 翻译键（generateMode, parseMode, pasteHint 等） - 创建 useDebounce Hook 实现输入防抖 (200ms) - 使用 useRef 解决 useEffect 无限循环问题 - 编写 pages/QrCode 单元测试 (7 个用例) - 优化右键菜单错误处理，改进用户提示 - 运行 603 个测试全部通过
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
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();
|
|
});
|
|
});
|