import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
import TextMode from '../components/TextMode';
// Mock CopyButton
vi.mock('@/components/CopyButton', () => ({
CopyButton: ({ text }: { text: string }) => ,
default: ({ text }: { text: string }) => ,
}));
describe('TextMode', () => {
beforeEach(() => {
vi.useFakeTimers({ shouldAdvanceTime: true });
});
afterEach(() => {
vi.useRealTimers();
});
it('应该渲染编码/解码切换按钮', () => {
render();
expect(screen.getByText('编码')).toBeInTheDocument();
expect(screen.getByText('解码')).toBeInTheDocument();
});
it('应该渲染输入框和转换按钮', () => {
render();
expect(screen.getByPlaceholderText('输入需要编码为 Base64 的文本...')).toBeInTheDocument();
});
it('应该将文本编码为 Base64', async () => {
render();
const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
fireEvent.change(input, { target: { value: 'Hello' } });
act(() => {
vi.advanceTimersByTime(200);
});
await waitFor(() => {
expect(screen.getByText('Base64 编码结果')).toBeInTheDocument();
});
expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
});
it('应该解码 Base64 文本', async () => {
render();
// 切换到解码模式
fireEvent.click(screen.getByText('解码'));
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
fireEvent.change(input, { target: { value: 'SGVsbG8=' } });
act(() => {
vi.advanceTimersByTime(200);
});
await waitFor(() => {
expect(screen.getByText('解码文本结果')).toBeInTheDocument();
});
expect(screen.getByRole('button', { name: 'Hello' })).toBeInTheDocument();
});
it('应该对无效 Base64 显示错误', async () => {
render();
// 切换到解码模式
fireEvent.click(screen.getByText('解码'));
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
fireEvent.change(input, { target: { value: 'invalid!!!' } });
act(() => {
vi.advanceTimersByTime(200);
});
await waitFor(() => {
expect(screen.getByText('无效的 Base64 字符串')).toBeInTheDocument();
});
});
it('切换方向时应该清除输出', async () => {
render();
// 先编码
const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
fireEvent.change(input, { target: { value: 'Hello' } });
act(() => {
vi.advanceTimersByTime(200);
});
await waitFor(() => {
expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
});
// 切换方向
fireEvent.click(screen.getByText('解码'));
// 输出应该被清除
await waitFor(() => {
expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
});
});
it('点击清除按钮应该清空所有内容', async () => {
render();
const input = screen.getByPlaceholderText('输入需要编码为 Base64 的文本...');
fireEvent.change(input, { target: { value: 'Hello' } });
act(() => {
vi.advanceTimersByTime(200);
});
await waitFor(() => {
expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
});
fireEvent.click(screen.getByRole('button', { name: '清空' }));
await waitFor(() => {
expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
expect(input).toHaveValue('');
});
});
it('解码模式下粘贴图片 data URI 时应该显示切换图像模式的提示', () => {
render();
fireEvent.click(screen.getByText('解码'));
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
fireEvent.change(input, {
target: { value: 'data:image/png;base64,iVBORw0KGgo=' },
});
expect(
screen.getByText('检测到图片的 data URI,请使用「图像」选项卡进行解码。'),
).toBeInTheDocument();
expect(screen.getByText('切换到图像模式')).toBeInTheDocument();
});
it('粘贴非图片 data URI 时不应该显示图像模式提示', () => {
render();
fireEvent.click(screen.getByText('解码'));
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
fireEvent.change(input, { target: { value: 'SGVsbG8=' } });
expect(
screen.queryByText('检测到图片的 data URI,请使用「图像」选项卡进行解码。'),
).not.toBeInTheDocument();
});
it('点击切换图像模式按钮应该调用 onSwitchToImageMode 回调', () => {
const onSwitch = vi.fn();
render();
fireEvent.click(screen.getByText('解码'));
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
fireEvent.change(input, {
target: { value: 'data:image/png;base64,iVBORw0KGgo=' },
});
fireEvent.click(screen.getByText('切换到图像模式'));
expect(onSwitch).toHaveBeenCalledTimes(1);
});
it('解码模式下对二进制数据应该显示更清晰的错误', async () => {
render();
fireEvent.click(screen.getByText('解码'));
const input = screen.getByPlaceholderText('输入需要解码的 Base64 字符串...');
fireEvent.change(input, { target: { value: 'iVBORw0KGgo=' } });
act(() => {
vi.advanceTimersByTime(200);
});
await waitFor(() => {
expect(screen.getByText('检测到二进制数据(如图像),请使用图像选项卡')).toBeInTheDocument();
});
});
});