import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import { FilterInput } from './FilterInput'

describe('FilterInput', () => {
  it('forwards text changes and exposes a clear affordance only when populated', () => {
    const onChange = vi.fn()
    const { rerender } = render(
      <FilterInput label="Filter plans" value="" onChange={onChange} placeholder="Title, slug, project, or topic" />,
    )

    fireEvent.change(screen.getByRole('searchbox', { name: 'Filter plans' }), { target: { value: 'press' } })
    expect(onChange).toHaveBeenCalledWith('press')
    expect(screen.queryByRole('button', { name: 'Clear Filter plans' })).not.toBeInTheDocument()

    rerender(<FilterInput label="Filter plans" value="press" onChange={onChange} />)
    fireEvent.click(screen.getByRole('button', { name: 'Clear Filter plans' }))
    expect(onChange).toHaveBeenLastCalledWith('')
  })
})