import { fireEvent, render } from '@testing-library/react-native'
import React from 'react'
import { SearchField } from '../search_field'

const inputLabel = 'Search titles and messages'
const clearLabel = 'Clear search'

describe('SearchField', () => {
  it('reports typed text through onChange', () => {
    const onChange = jest.fn()
    const view = render(<SearchField term="" onChange={onChange} />)

    fireEvent.changeText(view.getByLabelText(inputLabel), 'budget')

    expect(onChange).toHaveBeenCalledWith('budget')
  })

  it('shows the clear button only for a non-empty term and clears on press', () => {
    const onChange = jest.fn()
    const view = render(<SearchField term="" onChange={onChange} />)

    expect(view.queryByLabelText(clearLabel)).toBeNull()

    view.rerender(<SearchField term="budget" onChange={onChange} />)
    fireEvent.press(view.getByLabelText(clearLabel))

    expect(onChange).toHaveBeenCalledWith('')
  })
})