Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ab3b19418b | |||
| b656c78d7e | |||
| 7fd3819586 | |||
| 595eb59726 |
@@ -53,6 +53,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={handleCopy}
|
onClick={handleCopy}
|
||||||
title={tooltip ?? t('buttons.copy')}
|
title={tooltip ?? t('buttons.copy')}
|
||||||
|
aria-label={tooltip ?? t('buttons.copy')}
|
||||||
className={cn(
|
className={cn(
|
||||||
buttonVariants({ variant, size }),
|
buttonVariants({ variant, size }),
|
||||||
copied &&
|
copied &&
|
||||||
@@ -62,7 +63,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
|||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{copied ? (
|
{copied ? (
|
||||||
<Check className="h-[1.2em] w-[1.2em] animate-in fade-in zoom-in-75 duration-200" />
|
<Check className="h-[1.2em] w-[1.2em]" />
|
||||||
) : (
|
) : (
|
||||||
<Copy className="h-[1.2em] w-[1.2em]" />
|
<Copy className="h-[1.2em] w-[1.2em]" />
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -0,0 +1,194 @@
|
|||||||
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
|
import { act, render, screen, waitFor } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
|
||||||
|
// unmock the globally-mocked component so we test the real implementation
|
||||||
|
vi.unmock('@/components/CopyButton');
|
||||||
|
|
||||||
|
vi.mock('@/utils/clipboard', () => ({
|
||||||
|
copyTextToClipboard: vi.fn(),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('sonner', () => ({
|
||||||
|
toast: {
|
||||||
|
success: vi.fn(),
|
||||||
|
error: vi.fn(),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
|
import { copyTextToClipboard } from '@/utils/clipboard';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
const mockedCopy = vi.mocked(copyTextToClipboard);
|
||||||
|
const mockedToast = vi.mocked(toast);
|
||||||
|
|
||||||
|
describe('CopyButton', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.useFakeTimers({ shouldAdvanceTime: true });
|
||||||
|
vi.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vi.useRealTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('复制成功时调用 copyTextToClipboard 并传入正确 text', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(true);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
render(<CopyButton text="hello world" />);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
expect(mockedCopy).toHaveBeenCalledWith('hello world');
|
||||||
|
expect(mockedToast.success).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('复制成功后图标切换为 Check,1.5 秒后恢复', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(true);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
render(<CopyButton text="test" />);
|
||||||
|
|
||||||
|
// 点击后复制成功,按钮获得 emerald 样式(说明切到了 Check 状态)
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByRole('button').className).toContain('text-emerald');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 1.5 秒后样式恢复
|
||||||
|
act(() => {
|
||||||
|
vi.advanceTimersByTime(1500);
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByRole('button').className).not.toContain('text-emerald');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('复制空文本时弹出 error toast', async () => {
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
render(<CopyButton text="" />);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
expect(mockedCopy).not.toHaveBeenCalled();
|
||||||
|
expect(mockedToast.error).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('复制失败时弹出 error toast', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(false);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
render(<CopyButton text="something" />);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
expect(mockedCopy).toHaveBeenCalledWith('something');
|
||||||
|
expect(mockedToast.error).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
// ==================== 新增测试 ====================
|
||||||
|
|
||||||
|
it('初始渲染时显示 Copy 图标且无 emerald 样式', () => {
|
||||||
|
render(<CopyButton text="initial" />);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
expect(button.className).not.toContain('text-emerald');
|
||||||
|
// 通过 aria-label 确认按钮存在,图标由 lucide 渲染为 svg
|
||||||
|
expect(button).toHaveAttribute('aria-label');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('自定义 tooltip 会覆盖默认 title 和 aria-label', () => {
|
||||||
|
render(<CopyButton text="tooltip-test" tooltip="自定义提示" />);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
expect(button).toHaveAttribute('title', '自定义提示');
|
||||||
|
expect(button).toHaveAttribute('aria-label', '自定义提示');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('className 被正确透传到按钮', () => {
|
||||||
|
render(<CopyButton text="class-test" className="my-custom-class" />);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
expect(button.className).toContain('my-custom-class');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('点击事件阻止冒泡', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(true);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
const parentClick = vi.fn();
|
||||||
|
|
||||||
|
render(
|
||||||
|
<div onClick={parentClick}>
|
||||||
|
<CopyButton text="stop-propagation" />
|
||||||
|
</div>,
|
||||||
|
);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
expect(mockedCopy).toHaveBeenCalled();
|
||||||
|
expect(parentClick).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('组件卸载时清除定时器,不触发状态更新警告', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(true);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
const { unmount } = render(<CopyButton text="unmount-test" />);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
// 在 1.5 秒超时到期前卸载组件
|
||||||
|
act(() => {
|
||||||
|
vi.advanceTimersByTime(500);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 卸载不应抛出 "Can't perform a React state update on an unmounted component" 警告
|
||||||
|
expect(() => unmount()).not.toThrow();
|
||||||
|
|
||||||
|
// 前进剩余时间,确认没有异常
|
||||||
|
act(() => {
|
||||||
|
vi.advanceTimersByTime(2000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('快速连续点击不会创建多个重叠定时器', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(true);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
render(<CopyButton text="rapid-click" />);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
|
||||||
|
// 快速点击 3 次
|
||||||
|
await user.click(button);
|
||||||
|
await user.click(button);
|
||||||
|
await user.click(button);
|
||||||
|
|
||||||
|
// copyTextToClipboard 应该被调用 3 次(每次点击都执行)
|
||||||
|
expect(mockedCopy).toHaveBeenCalledTimes(3);
|
||||||
|
|
||||||
|
// 但 setTimeout 相关的 clearTimeout + setTimeout 组合应正常工作
|
||||||
|
// advance 1.5 秒后,copied 状态应恢复为 false
|
||||||
|
act(() => {
|
||||||
|
vi.advanceTimersByTime(1500);
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(button.className).not.toContain('text-emerald');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('其他 button props 通过 ...props 透传', () => {
|
||||||
|
render(<CopyButton text="props-test" data-testid="copy-btn" disabled id="copy-button-id" />);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
expect(button).toHaveAttribute('data-testid', 'copy-btn');
|
||||||
|
expect(button).toBeDisabled();
|
||||||
|
expect(button).toHaveAttribute('id', 'copy-button-id');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
|
import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
|
||||||
import TextInputArea from '@/components/TextInputArea';
|
import TextInputArea from '@/components/TextInputArea';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
import { useI18n } from '@/utils/chromeI18n';
|
||||||
import CopyButton from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import DecodeResultPaper from '@/components/DecodeResultPaper';
|
import DecodeResultPaper from '@/components/DecodeResultPaper';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
|
import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
import TextInputArea from '@/components/TextInputArea';
|
import TextInputArea from '@/components/TextInputArea';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
import { useI18n } from '@/utils/chromeI18n';
|
||||||
import CopyButton from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import { base64ToText, textToBase64 } from '@/utils/base64Converter';
|
import { base64ToText, textToBase64 } from '@/utils/base64Converter';
|
||||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect, useMemo, useState } from 'react';
|
import React, { useEffect, useMemo, useState } from 'react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
import { useI18n } from '@/utils/chromeI18n';
|
||||||
import { formatBytes } from '@/utils/format';
|
import { formatBytes } from '@/utils/format';
|
||||||
import CopyButton from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import TextInputArea from '@/components/TextInputArea';
|
import TextInputArea from '@/components/TextInputArea';
|
||||||
import { validateJson } from '@/utils/jsonFormatter';
|
import { validateJson } from '@/utils/jsonFormatter';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import {
|
|||||||
validateJson,
|
validateJson,
|
||||||
} from '@/utils/jsonFormatter';
|
} from '@/utils/jsonFormatter';
|
||||||
import { formatBytes } from '@/utils/format';
|
import { formatBytes } from '@/utils/format';
|
||||||
import CopyButton from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||||
import TextInputArea from '@/components/TextInputArea';
|
import TextInputArea from '@/components/TextInputArea';
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
import { Checkbox } from '@/components/ui/checkbox';
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import CopyButton from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
import { useI18n } from '@/utils/chromeI18n';
|
||||||
import { stringifyJson } from '@/utils/jwt';
|
import { stringifyJson } from '@/utils/jwt';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import TextInputArea from '@/components/TextInputArea';
|
import TextInputArea from '@/components/TextInputArea';
|
||||||
import CopyButton from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import JwtSection from './JwtSection';
|
import JwtSection from './JwtSection';
|
||||||
import { useJwt } from './useJwt';
|
import { useJwt } from './useJwt';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
import { useI18n } from '@/utils/chromeI18n';
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Clock } from 'lucide-react';
|
import { Clock } from 'lucide-react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import CopyButton from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import type { UnitType } from './constants';
|
import type { UnitType } from './constants';
|
||||||
import { msToUnit } from './constants';
|
import { msToUnit } from './constants';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
import { useI18n } from '@/utils/chromeI18n';
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import CopyButton from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
import { useI18n } from '@/utils/chromeI18n';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user