97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
import { describe, it, expect, vi } from 'vitest'
|
|
import { render, screen, fireEvent } from '@testing-library/react'
|
|
import { Input } from '../input'
|
|
|
|
describe('Input', () => {
|
|
it('renders input element', () => {
|
|
render(<Input />)
|
|
|
|
const input = screen.getByRole('textbox')
|
|
expect(input).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders with placeholder', () => {
|
|
render(<Input placeholder="Enter text..." />)
|
|
|
|
const input = screen.getByPlaceholderText('Enter text...')
|
|
expect(input).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders with value', () => {
|
|
render(<Input value="test value" readOnly />)
|
|
|
|
const input = screen.getByDisplayValue('test value')
|
|
expect(input).toBeInTheDocument()
|
|
})
|
|
|
|
it('handles onChange events', () => {
|
|
const handleChange = vi.fn()
|
|
render(<Input onChange={handleChange} />)
|
|
|
|
const input = screen.getByRole('textbox')
|
|
fireEvent.change(input, { target: { value: 'new value' } })
|
|
|
|
expect(handleChange).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
it('renders with disabled state', () => {
|
|
render(<Input disabled />)
|
|
|
|
const input = screen.getByRole('textbox')
|
|
expect(input).toBeDisabled()
|
|
})
|
|
|
|
it('renders with different types', () => {
|
|
render(<Input type="email" />)
|
|
|
|
const input = screen.getByRole('textbox')
|
|
expect(input).toHaveAttribute('type', 'email')
|
|
})
|
|
|
|
it('renders password type', () => {
|
|
render(<Input type="password" />)
|
|
|
|
const input = document.querySelector('input[type="password"]')
|
|
expect(input).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders with custom className', () => {
|
|
render(<Input className="custom-class" />)
|
|
|
|
const input = screen.getByRole('textbox')
|
|
expect(input).toHaveClass('custom-class')
|
|
})
|
|
|
|
it('renders with default styling classes', () => {
|
|
render(<Input />)
|
|
|
|
const input = screen.getByRole('textbox')
|
|
expect(input).toHaveClass('flex')
|
|
expect(input).toHaveClass('h-9')
|
|
expect(input).toHaveClass('w-full')
|
|
expect(input).toHaveClass('rounded-md')
|
|
expect(input).toHaveClass('border')
|
|
})
|
|
|
|
it('forwards ref correctly', () => {
|
|
const ref = { current: null }
|
|
render(<Input ref={ref} />)
|
|
|
|
expect(ref.current).toBeInstanceOf(HTMLInputElement)
|
|
})
|
|
|
|
it('handles focus and blur events', () => {
|
|
const handleFocus = vi.fn()
|
|
const handleBlur = vi.fn()
|
|
render(<Input onFocus={handleFocus} onBlur={handleBlur} />)
|
|
|
|
const input = screen.getByRole('textbox')
|
|
|
|
fireEvent.focus(input)
|
|
expect(handleFocus).toHaveBeenCalledTimes(1)
|
|
|
|
fireEvent.blur(input)
|
|
expect(handleBlur).toHaveBeenCalledTimes(1)
|
|
})
|
|
})
|