import React from 'react'
|
import { fireEvent, render, screen } from '@testing-library/react'
|
import '@testing-library/jest-dom'
|
import Input, { inputVariants } from './index'
|
|
// Mock the i18n hook
|
jest.mock('react-i18next', () => ({
|
useTranslation: () => ({
|
t: (key: string) => {
|
const translations: Record<string, string> = {
|
'common.operation.search': 'Search',
|
'common.placeholder.input': 'Please input',
|
}
|
return translations[key] || ''
|
},
|
}),
|
}))
|
|
describe('Input component', () => {
|
describe('Variants', () => {
|
it('should return correct classes for regular size', () => {
|
const result = inputVariants({ size: 'regular' })
|
expect(result).toContain('px-3')
|
expect(result).toContain('radius-md')
|
expect(result).toContain('system-sm-regular')
|
})
|
|
it('should return correct classes for large size', () => {
|
const result = inputVariants({ size: 'large' })
|
expect(result).toContain('px-4')
|
expect(result).toContain('radius-lg')
|
expect(result).toContain('system-md-regular')
|
})
|
|
it('should use regular size as default', () => {
|
const result = inputVariants({})
|
expect(result).toContain('px-3')
|
expect(result).toContain('radius-md')
|
expect(result).toContain('system-sm-regular')
|
})
|
})
|
|
it('renders correctly with default props', () => {
|
render(<Input />)
|
const input = screen.getByPlaceholderText('Please input')
|
expect(input).toBeInTheDocument()
|
expect(input).not.toBeDisabled()
|
expect(input).not.toHaveClass('cursor-not-allowed')
|
})
|
|
it('shows left icon when showLeftIcon is true', () => {
|
render(<Input showLeftIcon />)
|
const searchIcon = document.querySelector('svg')
|
expect(searchIcon).toBeInTheDocument()
|
const input = screen.getByPlaceholderText('Search')
|
expect(input).toHaveClass('pl-[26px]')
|
})
|
|
it('shows clear icon when showClearIcon is true and has value', () => {
|
render(<Input showClearIcon value="test" />)
|
const clearIcon = document.querySelector('.group svg')
|
expect(clearIcon).toBeInTheDocument()
|
const input = screen.getByDisplayValue('test')
|
expect(input).toHaveClass('pr-[26px]')
|
})
|
|
it('does not show clear icon when disabled, even with value', () => {
|
render(<Input showClearIcon value="test" disabled />)
|
const clearIcon = document.querySelector('.group svg')
|
expect(clearIcon).not.toBeInTheDocument()
|
})
|
|
it('calls onClear when clear icon is clicked', () => {
|
const onClear = jest.fn()
|
render(<Input showClearIcon value="test" onClear={onClear} />)
|
const clearIconContainer = document.querySelector('.group')
|
fireEvent.click(clearIconContainer!)
|
expect(onClear).toHaveBeenCalledTimes(1)
|
})
|
|
it('shows warning icon when destructive is true', () => {
|
render(<Input destructive />)
|
const warningIcon = document.querySelector('svg')
|
expect(warningIcon).toBeInTheDocument()
|
const input = screen.getByPlaceholderText('Please input')
|
expect(input).toHaveClass('border-components-input-border-destructive')
|
})
|
|
it('applies disabled styles when disabled', () => {
|
render(<Input disabled />)
|
const input = screen.getByPlaceholderText('Please input')
|
expect(input).toBeDisabled()
|
expect(input).toHaveClass('cursor-not-allowed')
|
expect(input).toHaveClass('bg-components-input-bg-disabled')
|
})
|
|
it('displays custom unit when provided', () => {
|
render(<Input unit="km" />)
|
const unitElement = screen.getByText('km')
|
expect(unitElement).toBeInTheDocument()
|
})
|
|
it('applies custom className and style', () => {
|
const customClass = 'test-class'
|
const customStyle = { color: 'red' }
|
render(<Input className={customClass} styleCss={customStyle} />)
|
const input = screen.getByPlaceholderText('Please input')
|
expect(input).toHaveClass(customClass)
|
expect(input).toHaveStyle('color: red')
|
})
|
|
it('applies large size variant correctly', () => {
|
render(<Input size={'large' as any} />)
|
const input = screen.getByPlaceholderText('Please input')
|
expect(input.className).toContain(inputVariants({ size: 'large' }))
|
})
|
|
it('uses custom placeholder when provided', () => {
|
const placeholder = 'Custom placeholder'
|
render(<Input placeholder={placeholder} />)
|
const input = screen.getByPlaceholderText(placeholder)
|
expect(input).toBeInTheDocument()
|
})
|
})
|
