Develop (#55)

feat: optimize dashboard/search UX and simplify extension architecture Redesign Dashboard with compact tool grid and recently used tools Improve TopBar search UX with Cmd/Ctrl+K shortcut and better history navigation Reorganize project structure into src/ Migrate i18n from react-i18next to chrome.i18n Remove runtime language switch and settings page Remove HTML/Markdown conversion tools Clean up unused code, dead animations, redundant comments, and imports Improve component consistency with shadcn/ui patterns Replace hardcoded strings/colors with i18n tokens and theme tokens Add comprehensive project documentation and coding standards Fix CI artifact upload workflow and multiple TypeScript/test issues Includes various refactors, UI polish, i18n cleanup, CI improvements, and maintenance updates across the codebase.
2026-05-28 22:39:25 +08:00
parent d4c29a1bf4
commit 945780def8
200 changed files with 1557 additions and 4380 deletions
@@ -0,0 +1,190 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import TextMode from '../TextMode';
+
+// Mock CopyButton
+vi.mock('@/components/CopyButton', () => ({
+  CopyButton: ({ text }: { text: string }) => <button data-testid="copy-button">{text}</button>,
+  default: ({ text }: { text: string }) => <button data-testid="copy-button">{text}</button>,
+}));
+
+describe('TextMode', () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('应该渲染编码/解码切换按钮', () => {
+    render(<TextMode />);
+    expect(screen.getByText('编码')).toBeInTheDocument();
+    expect(screen.getByText('解码')).toBeInTheDocument();
+  });
+
+  it('应该渲染输入框和转换按钮', () => {
+    render(<TextMode />);
+    expect(screen.getByPlaceholderText('输入需要编码为 Base64 的文本...')).toBeInTheDocument();
+  });
+
+  it('应该将文本编码为 Base64', async () => {
+    render(<TextMode />);
+    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(<TextMode />);
+
+    // 切换到解码模式
+    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(<TextMode />);
+
+    // 切换到解码模式
+    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(<TextMode />);
+
+    // 先编码
+    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(<TextMode />);
+
+    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: 'textInputArea.clear' }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
+      expect(input).toHaveValue('');
+    });
+  });
+
+  it('解码模式下粘贴图片 data URI 时应该显示切换图像模式的提示', () => {
+    render(<TextMode />);
+
+    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(<TextMode />);
+
+    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(<TextMode onSwitchToImageMode={onSwitch} />);
+
+    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(<TextMode />);
+
+    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();
+    });
+  });
+});