mirror of
https://github.com/langgenius/dify.git
synced 2026-03-27 15:09:57 +08:00
221 lines
8.2 KiB
TypeScript
221 lines
8.2 KiB
TypeScript
import { fireEvent, render, screen } from '@testing-library/react'
|
|
import * as React from 'react'
|
|
import { createReactI18nextMock } from '@/test/i18n-mock'
|
|
import Input, { inputVariants } from '../index'
|
|
|
|
// Mock the i18n hook with custom translations for test assertions
|
|
vi.mock('react-i18next', () => createReactI18nextMock({
|
|
'operation.search': 'Search',
|
|
'placeholder.input': 'Please input',
|
|
}))
|
|
|
|
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(/input/i)
|
|
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('.i-ri-search-line')
|
|
expect(searchIcon).toBeInTheDocument()
|
|
const input = screen.getByPlaceholderText(/search/i)
|
|
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('.i-ri-close-circle-fill')
|
|
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('.i-ri-close-circle-fill')
|
|
expect(clearIcon).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('calls onClear when clear icon is clicked', () => {
|
|
const onClear = vi.fn()
|
|
render(<Input showClearIcon value="test" onClear={onClear} />)
|
|
const clearIconContainer = screen.getByTestId('input-clear')
|
|
fireEvent.click(clearIconContainer!)
|
|
expect(onClear).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it('shows warning icon when destructive is true', () => {
|
|
render(<Input destructive />)
|
|
const warningIcon = document.querySelector('.i-ri-error-warning-line')
|
|
expect(warningIcon).toBeInTheDocument()
|
|
const input = screen.getByPlaceholderText(/input/i)
|
|
expect(input).toHaveClass('border-components-input-border-destructive')
|
|
})
|
|
|
|
it('applies disabled styles when disabled', () => {
|
|
render(<Input disabled />)
|
|
const input = screen.getByPlaceholderText(/input/i)
|
|
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(/input/i)
|
|
expect(input).toHaveClass(customClass)
|
|
expect(input).toHaveStyle({ color: 'rgb(255, 0, 0)' })
|
|
})
|
|
|
|
it('applies large size variant correctly', () => {
|
|
render(<Input size="large" />)
|
|
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()
|
|
})
|
|
|
|
describe('Additional Layout Branches', () => {
|
|
it('applies pl-7 when showLeftIcon and size is large', () => {
|
|
render(<Input showLeftIcon size="large" />)
|
|
const input = screen.getByRole('textbox')
|
|
expect(input).toHaveClass('pl-7')
|
|
})
|
|
|
|
it('applies pr-7 when showClearIcon, has value, and size is large', () => {
|
|
render(<Input showClearIcon value="123" size="large" onChange={vi.fn()} />)
|
|
const input = screen.getByRole('textbox')
|
|
expect(input).toHaveClass('pr-7')
|
|
})
|
|
|
|
it('applies pr-7 when destructive and size is large', () => {
|
|
render(<Input destructive size="large" />)
|
|
const input = screen.getByRole('textbox')
|
|
expect(input).toHaveClass('pr-7')
|
|
})
|
|
|
|
it('shows copy icon and applies pr-[26px] when showCopyIcon is true', () => {
|
|
render(<Input showCopyIcon />)
|
|
const input = screen.getByRole('textbox')
|
|
expect(input).toHaveClass('pr-[26px]')
|
|
// Assert that CopyFeedbackNew wrapper is present
|
|
const copyWrapper = document.querySelector('.group.absolute.right-0')
|
|
expect(copyWrapper).toBeInTheDocument()
|
|
})
|
|
|
|
it('shows copy icon and applies pr-7 when showCopyIcon and size is large', () => {
|
|
render(<Input showCopyIcon size="large" value="my-val" onChange={vi.fn()} />)
|
|
const input = screen.getByRole('textbox')
|
|
expect(input).toHaveClass('pr-7')
|
|
})
|
|
})
|
|
|
|
describe('Number Input Formatting', () => {
|
|
it('removes leading zeros on change when current value is zero', () => {
|
|
let changedValue = ''
|
|
const onChange = vi.fn((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
changedValue = e.target.value
|
|
})
|
|
render(<Input type="number" value={0} onChange={onChange} />)
|
|
|
|
const input = screen.getByRole('spinbutton') as HTMLInputElement
|
|
fireEvent.change(input, { target: { value: '00042' } })
|
|
|
|
expect(onChange).toHaveBeenCalledTimes(1)
|
|
expect(changedValue).toBe('42')
|
|
})
|
|
|
|
it('does not normalize when value is 0 and input value is already normalized', () => {
|
|
const onChange = vi.fn()
|
|
render(<Input type="number" value={0} onChange={onChange} />)
|
|
|
|
const input = screen.getByRole('spinbutton') as HTMLInputElement
|
|
// The event value ('1') is already normalized, preventing e.target.value reassignment
|
|
fireEvent.change(input, { target: { value: '1' } })
|
|
|
|
expect(onChange).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it('keeps typed value on change when current value is not zero', () => {
|
|
let changedValue = ''
|
|
const onChange = vi.fn((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
changedValue = e.target.value
|
|
})
|
|
render(<Input type="number" value={1} onChange={onChange} />)
|
|
|
|
const input = screen.getByRole('spinbutton') as HTMLInputElement
|
|
fireEvent.change(input, { target: { value: '00042' } })
|
|
expect(onChange).toHaveBeenCalledTimes(1)
|
|
expect(changedValue).toBe('00042')
|
|
})
|
|
|
|
it('normalizes value and triggers change on blur when leading zeros exist', () => {
|
|
const onChange = vi.fn()
|
|
const onBlur = vi.fn()
|
|
render(<Input type="number" defaultValue="0012" onChange={onChange} onBlur={onBlur} />)
|
|
|
|
const input = screen.getByRole('spinbutton')
|
|
fireEvent.blur(input)
|
|
|
|
expect(onChange).toHaveBeenCalledTimes(1)
|
|
expect(onChange.mock.calls[0][0].type).toBe('change')
|
|
expect(onChange.mock.calls[0][0].target.value).toBe('12')
|
|
expect(onBlur).toHaveBeenCalledTimes(1)
|
|
expect(onBlur.mock.calls[0][0].target.value).toBe('12')
|
|
})
|
|
|
|
it('does not trigger change on blur when value is already normalized', () => {
|
|
const onChange = vi.fn()
|
|
const onBlur = vi.fn()
|
|
render(<Input type="number" defaultValue="12" onChange={onChange} onBlur={onBlur} />)
|
|
|
|
const input = screen.getByRole('spinbutton')
|
|
fireEvent.blur(input)
|
|
|
|
expect(onChange).not.toHaveBeenCalled()
|
|
expect(onBlur).toHaveBeenCalledTimes(1)
|
|
expect(onBlur.mock.calls[0][0].target.value).toBe('12')
|
|
})
|
|
})
|
|
})
|