mini-starter/mini/tests/unit/components/ui/input.test.tsx

import { render, fireEvent } from '@testing-library/react'
import { Input } from '@/components/ui/input'

describe('Input', () => {
  it('应该渲染输入框', () => {
    const { container } = render(<Input />)

    const input = container.querySelector('input')
    expect(input).toBeTruthy()
  })

  it('应该显示占位符文本', () => {
    const { getByPlaceholderText } = render(
      <Input placeholder="请输入内容" />
    )

    expect(getByPlaceholderText('请输入内容')).toBeTruthy()
  })

  it('应该处理输入事件', () => {
    const handleChange = jest.fn()
    const { container } = render(
      <Input onChange={handleChange} />
    )

    const input = container.querySelector('input') as HTMLInputElement
    fireEvent.input(input, { target: { value: '测试输入' } })

    expect(handleChange).toHaveBeenCalledWith('测试输入', expect.any(Object))
  })

  it('应该显示错误状态', () => {
    const { container, getByText } = render(
      <Input error={true} errorMessage="输入错误" />
    )

    const input = container.querySelector('input')
    expect(input?.className).toContain('border-red-500')
    expect(getByText('输入错误')).toBeTruthy()
  })

  it('应该显示左侧图标', () => {
    const { container } = render(
      <Input leftIcon="search" />
    )

    const leftIcon = container.querySelector('.absolute.left-3')
    expect(leftIcon).toBeTruthy()
  })

  it('应该显示右侧图标', () => {
    const { container } = render(
      <Input rightIcon="close" />
    )

    const rightIcon = container.querySelector('.absolute.right-3')
    expect(rightIcon).toBeTruthy()
  })

  it('应该处理左侧图标点击事件', () => {
    const handleLeftIconClick = jest.fn()
    const { container } = render(
      <Input leftIcon="search" onLeftIconClick={handleLeftIconClick} />
    )

    const leftIcon = container.querySelector('.absolute.left-3')
    fireEvent.click(leftIcon!)

    expect(handleLeftIconClick).toHaveBeenCalled()
  })

  it('应该处理右侧图标点击事件', () => {
    const handleRightIconClick = jest.fn()
    const { container } = render(
      <Input rightIcon="close" onRightIconClick={handleRightIconClick} />
    )

    const rightIcon = container.querySelector('.absolute.right-3')
    fireEvent.click(rightIcon!)

    expect(handleRightIconClick).toHaveBeenCalled()
  })

  it('应该应用不同的变体样式', () => {
    const { container: defaultContainer } = render(<Input variant="default" />)
    const { container: outlineContainer } = render(<Input variant="outline" />)
    const { container: filledContainer } = render(<Input variant="filled" />)

    const defaultInput = defaultContainer.querySelector('input')
    const outlineInput = outlineContainer.querySelector('input')
    const filledInput = filledContainer.querySelector('input')

    expect(defaultInput?.className).toContain('border-gray-300')
    expect(outlineInput?.className).toContain('border-input')
    expect(filledInput?.className).toContain('border-none')
  })

  it('应该应用不同的大小样式', () => {
    const { container: defaultContainer } = render(<Input size="default" />)
    const { container: smContainer } = render(<Input size="sm" />)
    const { container: lgContainer } = render(<Input size="lg" />)

    const defaultInput = defaultContainer.querySelector('input')
    const smInput = smContainer.querySelector('input')
    const lgInput = lgContainer.querySelector('input')

    expect(defaultInput?.className).toContain('h-10')
    expect(smInput?.className).toContain('h-9')
    expect(lgInput?.className).toContain('h-11')
  })

  it('应该禁用输入框', () => {
    const { container } = render(<Input disabled />)

    const input = container.querySelector('input')
    expect(input?.disabled).toBe(true)
  })

  it('应该设置输入框类型', () => {
    const { container } = render(<Input type="password" />)

    const input = container.querySelector('input')
    expect(input?.type).toBe('password')
  })

  it('应该设置输入框值', () => {
    const { container } = render(<Input value="预设值" />)

    const input = container.querySelector('input') as HTMLInputElement
    expect(input.value).toBe('预设值')
  })
})