rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 补充 i18n 翻译键（generateMode, parseMode, pasteHint 等）
- 创建 useDebounce Hook 实现输入防抖 (200ms)
- 使用 useRef 解决 useEffect 无限循环问题
- 编写 pages/QrCode 单元测试 (7 个用例)
- 优化右键菜单错误处理，改进用户提示
- 运行 603 个测试全部通过
This commit is contained in:
雨霖铃
2026-05-20 22:42:33 +08:00
parent bc560cc453
commit c5b51a9b33
6 changed files with 245 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/QrCode/__tests__/index.test.tsx
+73
View File
@@ -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();
});
});
pages/QrCode/index.tsx
+97 -38
View File
@@ -1,4 +1,4 @@
import { useState, useCallback } from 'react';
import { useState, useCallback, useEffect, useRef } from 'react';
import { Box, Container, Grid, useMediaQuery, useTheme } from '@mui/material';
import QrCodeIcon from '@mui/icons-material/QrCode';
import QRious from 'qrious';
@@ -12,6 +12,7 @@ import { useSnackbar } from '@/components/GlobalSnackbar';
import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
import { useContextMenuData } from '@/utils/useContextMenuData';
import { useLazyTranslation } from '@/utils/useLazyTranslation';
import { useDebounce } from '@/utils/useDebounce';
import type { QrCodeMode, QrCodeGeneratorState, QrCodeParserState } from './types';
export default function Index() {
@@ -44,7 +45,10 @@ export default function Index() {
// 生成二维码
const generateQrCode = useCallback(
async (text: string) => {
if (!text) return;
if (!text) {
setGeneratorState((prev) => ({ ...prev, qrCodeDataUrl: '' }));
return;
}
try {
setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
@@ -63,10 +67,13 @@ export default function Index() {
});
setGeneratorState((prev) => ({ ...prev, qrCodeDataUrl: qr.toDataURL() }));
showMessage(t('qrCode:qrCodeSuccess'), { severity: 'success', autoHideDuration: 1000 });
} catch (error) {
console.error('生成二维码失败:', error);
showMessage(t('qrCode:parseError'), { severity: 'error', autoHideDuration: 300 });
setGeneratorState((prev) => ({
...prev,
inputError: t('qrCode:generateError'),
}));
showMessage(t('qrCode:generateError'), { severity: 'error', autoHideDuration: 3000 });
} finally {
setGeneratorState((prev) => ({ ...prev, generating: false }));
}
@@ -74,15 +81,25 @@ export default function Index() {
[t, showMessage],
);
// 使用 useRef 存储 generateQrCode 的最新引用，避免无限循环
const generateQrCodeRef = useRef(generateQrCode);
generateQrCodeRef.current = generateQrCode;
// 防抖处理输入文本（200ms）
const debouncedTextToEncode = useDebounce(generatorState.textToEncode, 200);
// 当防抖后的文本变化时，自动生成二维码
useEffect(() => {
if (debouncedTextToEncode && mode === 'generate') {
generateQrCodeRef.current(debouncedTextToEncode);
}
}, [debouncedTextToEncode, mode]);
// 处理右键菜单数据
const handleContextMenuData = useCallback(
(payload: string) => {
setMode('generate');
setGeneratorState((prev) => ({ ...prev, textToEncode: payload }));
generateQrCode(payload);
},
[generateQrCode],
);
const handleContextMenuData = useCallback((payload: string) => {
setMode('generate');
setGeneratorState((prev) => ({ ...prev, textToEncode: payload }));
}, []);
useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
@@ -100,12 +117,13 @@ export default function Index() {
} else {
const errorMsg = result.error || t('qrCode:noQrDetected');
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
showMessage(errorMsg, { severity: 'error', autoHideDuration: 1000 });
showMessage(errorMsg, { severity: 'error', autoHideDuration: 3000 });
}
} catch (error) {
console.error('解析二维码失败:', error);
setParserState((prev) => ({ ...prev, parseError: t('qrCode:parseError') }));
showMessage(t('qrCode:parseError'), { severity: 'error', autoHideDuration: 300 });
const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
showMessage(errorMsg, { severity: 'error', autoHideDuration: 3000 });
} finally {
setParserState((prev) => ({ ...prev, parsing: false }));
}
@@ -121,7 +139,7 @@ export default function Index() {
link.href = generatorState.qrCodeDataUrl;
link.download = 'qrcode.png';
link.click();
showMessage(t('qrCode:qrCodeDownloadSuccess'), { severity: 'success', autoHideDuration: 300 });
showMessage(t('qrCode:qrCodeDownloadSuccess'), { severity: 'success', autoHideDuration: 1000 });
}, [generatorState.qrCodeDataUrl, showMessage, t]);
// 复制二维码
@@ -141,10 +159,26 @@ export default function Index() {
showMessage(t('qrCode:qrCodeCopySuccess'), { severity: 'success', autoHideDuration: 1000 });
} catch (error) {
console.error('复制二维码失败:', error);
showMessage(t('qrCode:parseError'), { severity: 'error', autoHideDuration: 300 });
showMessage(t('qrCode:copyError'), { severity: 'error', autoHideDuration: 3000 });
}
}, [generatorState.qrCodeDataUrl, showMessage, t]);
// 处理文件选择
const handleFileChange = useCallback(
(file: File) => {
setParserState((prev) => ({
...prev,
selectedFile: file,
previewUrl: URL.createObjectURL(file),
decodedResult: '',
parseError: '',
}));
// 自动解析
parseQrCode(file);
},
[parseQrCode],
);
// 清除文件
const handleClearFile = useCallback(() => {
if (parserState.previewUrl) {
@@ -159,6 +193,51 @@ export default function Index() {
}));
}, [parserState.previewUrl]);
// 全局粘贴事件监听（解析模式下）
useEffect(() => {
if (mode !== 'parse') return;
const handlePaste = async (e: ClipboardEvent) => {
const items = e.clipboardData?.items;
if (!items) return;
// 检查是否有图片
for (let i = 0; i < items.length; i++) {
if (items[i].type.startsWith('image/')) {
e.preventDefault();
const file = items[i].getAsFile();
if (file) {
handleFileChange(file);
showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
}
return;
}
}
// 检查是否有 Base64 字符串
const text = e.clipboardData?.getData('text/plain');
if (text && text.startsWith('data:image/')) {
e.preventDefault();
try {
// 将 Base64 转换为 File
const response = await fetch(text);
const blob = await response.blob();
const file = new File([blob], 'pasted-image.png', { type: blob.type });
handleFileChange(file);
showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
} catch (error) {
console.error('处理 Base64 图片失败:', error);
showMessage(t('qrCode:imagePasteError'), { severity: 'error', autoHideDuration: 3000 });
}
}
};
document.addEventListener('paste', handlePaste);
return () => {
document.removeEventListener('paste', handlePaste);
};
}, [mode, handleFileChange, showMessage, t]);
// 模式选项
const modeOptions = [
{ value: 'generate' as QrCodeMode, label: t('qrCode:urlToQr') },
@@ -178,18 +257,6 @@ export default function Index() {
showClear
allowCopy
externalError={generatorState.inputError}
actions={[
{
key: 'generate',
label: generatorState.generating
? t('qrCode:generating')
: t('qrCode:generateButton'),
type: 'primary',
position: 'bottom',
disabled: (value) => !value || generatorState.generating,
onClick: (value) => generateQrCode(value),
},
]}
showMessage={showMessage}
/>
);
@@ -198,15 +265,7 @@ export default function Index() {
return (
<ImageUploader
selectedFile={parserState.selectedFile}
onFileChange={(file) => {
setParserState((prev) => ({
...prev,
selectedFile: file,
previewUrl: URL.createObjectURL(file),
decodedResult: '',
parseError: '',
}));
}}
onFileChange={handleFileChange}
onClearFile={handleClearFile}
previewUrl={parserState.previewUrl}
onPreviewUrlChange={(url) => setParserState((prev) => ({ ...prev, previewUrl: url }))}