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

refactor: 抽离 useBase64Converter hook 并新增 Base64ConverterSection 组件，统一 Base64 转换页面的 shadcn 样式

Browse Source
This commit is contained in:
雨霖铃
2026-05-22 22:26:35 +08:00
parent 9601afdd49
commit 89e33f6273
11 changed files with 961 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/Base64Converter/__tests__/index.test.tsx
+30 -15
View File
@@ -1,5 +1,5 @@
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
import Base64ConverterPage from '../index';
// Mock useLazyTranslation
@@ -22,46 +22,61 @@ vi.mock('@/config/features', async (importOriginal) => {
// Mock 子组件
vi.mock('../TextMode', () => ({
default: () => <div data-testid="text-mode">TextMode</div>,
default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
<div data-testid="text-mode">
TextMode
{onSwitchToImageMode && <button onClick={onSwitchToImageMode}>switchToImage</button>}
</div>
),
}));
vi.mock('../FileMode', () => ({
default: () => <div data-testid="file-mode">FileMode</div>,
vi.mock('../Base64ConverterSection', () => ({
default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
}));
vi.mock('../ImageMode', () => ({
default: () => <div data-testid="image-mode">ImageMode</div>,
}));
const waitForStorageInit = () =>
act(async () => {
await Promise.resolve();
});
describe('Base64ConverterPage', () => {
it('应该默认渲染文本模式', () => {
it('应该默认渲染文本模式', async () => {
render(<Base64ConverterPage />);
await waitForStorageInit();
expect(screen.getByTestId('text-mode')).toBeInTheDocument();
});
it('应该渲染模式切换按钮', () => {
it('应该渲染模式切换按钮', async () => {
render(<Base64ConverterPage />);
await waitForStorageInit();
expect(screen.getByText('base64Converter:textMode')).toBeInTheDocument();
expect(screen.getByText('base64Converter:fileMode')).toBeInTheDocument();
expect(screen.getByText('base64Converter:imageMode')).toBeInTheDocument();
});
it('切换到文件模式应该渲染 FileMode', () => {
it('切换到文件模式应该渲染 FileMode', async () => {
render(<Base64ConverterPage />);
await waitForStorageInit();
fireEvent.click(screen.getByText('base64Converter:fileMode'));
expect(screen.getByTestId('file-mode')).toBeInTheDocument();
await waitFor(() => {
expect(screen.getByTestId('file-mode')).toBeInTheDocument();
});
expect(screen.queryByTestId('text-mode')).not.toBeInTheDocument();
});
it('切换到图像模式应该渲染 ImageMode', () => {
it('切换到图像模式应该渲染 ImageMode', async () => {
render(<Base64ConverterPage />);
await waitForStorageInit();
fireEvent.click(screen.getByText('base64Converter:imageMode'));
expect(screen.getByTestId('image-mode')).toBeInTheDocument();
await waitFor(() => {
expect(screen.getByTestId('image-mode')).toBeInTheDocument();
});
expect(screen.queryByTestId('text-mode')).not.toBeInTheDocument();
});
it('应该渲染页面标题', () => {
it('应该渲染页面标题', async () => {
render(<Base64ConverterPage />);
await waitForStorageInit();
expect(screen.getByText('base64Converter:pageTitle')).toBeInTheDocument();
expect(screen.getByText('base64Converter:pageSubtitle')).toBeInTheDocument();
});