diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx index 23f9bb3..6adf5c0 100644 --- a/src/components/CopyButton.tsx +++ b/src/components/CopyButton.tsx @@ -53,6 +53,7 @@ export const CopyButton: React.FC = ({ type="button" onClick={handleCopy} title={tooltip ?? t('buttons.copy')} + aria-label={tooltip ?? t('buttons.copy')} className={cn( buttonVariants({ variant, size }), copied && @@ -62,7 +63,7 @@ export const CopyButton: React.FC = ({ {...props} > {copied ? ( - + ) : ( )} diff --git a/src/components/CopyButton/__tests__/index.test.tsx b/src/components/CopyButton/__tests__/index.test.tsx new file mode 100644 index 0000000..64af285 --- /dev/null +++ b/src/components/CopyButton/__tests__/index.test.tsx @@ -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(); + + 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(); + + // 点击后复制成功,按钮获得 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(); + + 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(); + + await user.click(screen.getByRole('button')); + + expect(mockedCopy).toHaveBeenCalledWith('something'); + expect(mockedToast.error).toHaveBeenCalled(); + }); + + // ==================== 新增测试 ==================== + + it('初始渲染时显示 Copy 图标且无 emerald 样式', () => { + render(); + + 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(); + + const button = screen.getByRole('button'); + expect(button).toHaveAttribute('title', '自定义提示'); + expect(button).toHaveAttribute('aria-label', '自定义提示'); + }); + + it('className 被正确透传到按钮', () => { + render(); + + 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( +
+ +
, + ); + + 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(); + + 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(); + + 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(); + + const button = screen.getByRole('button'); + expect(button).toHaveAttribute('data-testid', 'copy-btn'); + expect(button).toBeDisabled(); + expect(button).toHaveAttribute('id', 'copy-button-id'); + }); +}); diff --git a/src/pages/Base64Converter/Base64ConverterSection.tsx b/src/pages/Base64Converter/Base64ConverterSection.tsx index ba4912c..469d949 100644 --- a/src/pages/Base64Converter/Base64ConverterSection.tsx +++ b/src/pages/Base64Converter/Base64ConverterSection.tsx @@ -1,7 +1,7 @@ import { Image as ImageIcon, Trash2, Upload } from 'lucide-react'; import TextInputArea from '@/components/TextInputArea'; import { useI18n } from '@/utils/chromeI18n'; -import CopyButton from '@/components/CopyButton'; +import { CopyButton } from '@/components/CopyButton'; import DecodeResultPaper from '@/components/DecodeResultPaper'; import { Button } from '@/components/ui/button'; import { downloadBlob, formatFileSize } from '@/utils/base64Converter'; diff --git a/src/pages/Base64Converter/TextMode.tsx b/src/pages/Base64Converter/TextMode.tsx index 7517cc5..3392e44 100644 --- a/src/pages/Base64Converter/TextMode.tsx +++ b/src/pages/Base64Converter/TextMode.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import TextInputArea from '@/components/TextInputArea'; import { useI18n } from '@/utils/chromeI18n'; -import CopyButton from '@/components/CopyButton'; +import { CopyButton } from '@/components/CopyButton'; import { base64ToText, textToBase64 } from '@/utils/base64Converter'; import SwitchButtonGroup from '@/components/SwitchButtonGroup'; import { useContextMenuData } from '@/utils/useContextMenuData'; diff --git a/src/pages/JsonTools/JsonConvertSection.tsx b/src/pages/JsonTools/JsonConvertSection.tsx index 31e38c6..4218aff 100644 --- a/src/pages/JsonTools/JsonConvertSection.tsx +++ b/src/pages/JsonTools/JsonConvertSection.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useI18n } from '@/utils/chromeI18n'; import { formatBytes } from '@/utils/format'; -import CopyButton from '@/components/CopyButton'; +import { CopyButton } from '@/components/CopyButton'; import TextInputArea from '@/components/TextInputArea'; import { validateJson } from '@/utils/jsonFormatter'; import { cn } from '@/lib/utils'; diff --git a/src/pages/JsonTools/JsonFormatSection.tsx b/src/pages/JsonTools/JsonFormatSection.tsx index d141ed6..116c06a 100644 --- a/src/pages/JsonTools/JsonFormatSection.tsx +++ b/src/pages/JsonTools/JsonFormatSection.tsx @@ -7,7 +7,7 @@ import { validateJson, } from '@/utils/jsonFormatter'; import { formatBytes } from '@/utils/format'; -import CopyButton from '@/components/CopyButton'; +import { CopyButton } from '@/components/CopyButton'; import SwitchButtonGroup from '@/components/SwitchButtonGroup'; import TextInputArea from '@/components/TextInputArea'; import { Checkbox } from '@/components/ui/checkbox'; diff --git a/src/pages/Jwt/JwtSection.tsx b/src/pages/Jwt/JwtSection.tsx index 4a11e0f..7c77fe1 100644 --- a/src/pages/Jwt/JwtSection.tsx +++ b/src/pages/Jwt/JwtSection.tsx @@ -1,4 +1,4 @@ -import CopyButton from '@/components/CopyButton'; +import { CopyButton } from '@/components/CopyButton'; import { useI18n } from '@/utils/chromeI18n'; import { stringifyJson } from '@/utils/jwt'; import { cn } from '@/lib/utils'; diff --git a/src/pages/Jwt/index.tsx b/src/pages/Jwt/index.tsx index 07aa1cb..31a68e6 100644 --- a/src/pages/Jwt/index.tsx +++ b/src/pages/Jwt/index.tsx @@ -1,5 +1,5 @@ import TextInputArea from '@/components/TextInputArea'; -import CopyButton from '@/components/CopyButton'; +import { CopyButton } from '@/components/CopyButton'; import JwtSection from './JwtSection'; import { useJwt } from './useJwt'; import { useI18n } from '@/utils/chromeI18n'; diff --git a/src/pages/Timestamp/LiveClock.tsx b/src/pages/Timestamp/LiveClock.tsx index a75b352..af10d18 100644 --- a/src/pages/Timestamp/LiveClock.tsx +++ b/src/pages/Timestamp/LiveClock.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { Clock } from 'lucide-react'; import { toast } from 'sonner'; -import CopyButton from '@/components/CopyButton'; +import { CopyButton } from '@/components/CopyButton'; import type { UnitType } from './constants'; import { msToUnit } from './constants'; import { useI18n } from '@/utils/chromeI18n'; diff --git a/src/pages/Timestamp/ResultView.tsx b/src/pages/Timestamp/ResultView.tsx index 076d01e..b4a586c 100644 --- a/src/pages/Timestamp/ResultView.tsx +++ b/src/pages/Timestamp/ResultView.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import CopyButton from '@/components/CopyButton'; +import { CopyButton } from '@/components/CopyButton'; import { useI18n } from '@/utils/chromeI18n'; import { cn } from '@/lib/utils';