refactor(web): migrate to Vitest and esm (#29974)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
This commit is contained in:
Stephen Zhou
2025-12-22 16:35:22 +08:00
committed by GitHub
parent 42f7ecda12
commit eabdc5f0eb
268 changed files with 5455 additions and 6307 deletions

View File

@ -1,13 +1,17 @@
import React from 'react'
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import '@testing-library/jest-dom'
import InputWithCopy from './index'
// Create a mock function that we can track using vi.hoisted
const mockCopyToClipboard = vi.hoisted(() => vi.fn(() => true))
// Mock the copy-to-clipboard library
jest.mock('copy-to-clipboard', () => jest.fn(() => true))
vi.mock('copy-to-clipboard', () => ({
default: mockCopyToClipboard,
}))
// Mock the i18n hook
jest.mock('react-i18next', () => ({
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
const translations: Record<string, string> = {
@ -22,17 +26,18 @@ jest.mock('react-i18next', () => ({
}))
// Mock lodash-es debounce
jest.mock('lodash-es', () => ({
vi.mock('lodash-es', () => ({
debounce: (fn: any) => fn,
}))
describe('InputWithCopy component', () => {
beforeEach(() => {
jest.clearAllMocks()
vi.clearAllMocks()
mockCopyToClipboard.mockClear()
})
it('renders correctly with default props', () => {
const mockOnChange = jest.fn()
const mockOnChange = vi.fn()
render(<InputWithCopy value="test value" onChange={mockOnChange} />)
const input = screen.getByDisplayValue('test value')
const copyButton = screen.getByRole('button')
@ -41,7 +46,7 @@ describe('InputWithCopy component', () => {
})
it('hides copy button when showCopyButton is false', () => {
const mockOnChange = jest.fn()
const mockOnChange = vi.fn()
render(<InputWithCopy value="test value" onChange={mockOnChange} showCopyButton={false} />)
const input = screen.getByDisplayValue('test value')
const copyButton = screen.queryByRole('button')
@ -50,30 +55,28 @@ describe('InputWithCopy component', () => {
})
it('copies input value when copy button is clicked', async () => {
const copyToClipboard = require('copy-to-clipboard')
const mockOnChange = jest.fn()
const mockOnChange = vi.fn()
render(<InputWithCopy value="test value" onChange={mockOnChange} />)
const copyButton = screen.getByRole('button')
fireEvent.click(copyButton)
expect(copyToClipboard).toHaveBeenCalledWith('test value')
expect(mockCopyToClipboard).toHaveBeenCalledWith('test value')
})
it('copies custom value when copyValue prop is provided', async () => {
const copyToClipboard = require('copy-to-clipboard')
const mockOnChange = jest.fn()
const mockOnChange = vi.fn()
render(<InputWithCopy value="display value" onChange={mockOnChange} copyValue="custom copy value" />)
const copyButton = screen.getByRole('button')
fireEvent.click(copyButton)
expect(copyToClipboard).toHaveBeenCalledWith('custom copy value')
expect(mockCopyToClipboard).toHaveBeenCalledWith('custom copy value')
})
it('calls onCopy callback when copy button is clicked', async () => {
const onCopyMock = jest.fn()
const mockOnChange = jest.fn()
const onCopyMock = vi.fn()
const mockOnChange = vi.fn()
render(<InputWithCopy value="test value" onChange={mockOnChange} onCopy={onCopyMock} />)
const copyButton = screen.getByRole('button')
@ -83,7 +86,7 @@ describe('InputWithCopy component', () => {
})
it('shows copied state after successful copy', async () => {
const mockOnChange = jest.fn()
const mockOnChange = vi.fn()
render(<InputWithCopy value="test value" onChange={mockOnChange} />)
const copyButton = screen.getByRole('button')
@ -99,7 +102,7 @@ describe('InputWithCopy component', () => {
})
it('passes through all input props correctly', () => {
const mockOnChange = jest.fn()
const mockOnChange = vi.fn()
render(
<InputWithCopy
value="test value"
@ -119,8 +122,7 @@ describe('InputWithCopy component', () => {
})
it('handles empty value correctly', () => {
const copyToClipboard = require('copy-to-clipboard')
const mockOnChange = jest.fn()
const mockOnChange = vi.fn()
render(<InputWithCopy value="" onChange={mockOnChange} />)
const input = screen.getByRole('textbox')
const copyButton = screen.getByRole('button')
@ -129,11 +131,11 @@ describe('InputWithCopy component', () => {
expect(copyButton).toBeInTheDocument()
fireEvent.click(copyButton)
expect(copyToClipboard).toHaveBeenCalledWith('')
expect(mockCopyToClipboard).toHaveBeenCalledWith('')
})
it('maintains focus on input after copy', async () => {
const mockOnChange = jest.fn()
const mockOnChange = vi.fn()
render(<InputWithCopy value="test value" onChange={mockOnChange} />)
const input = screen.getByDisplayValue('test value')