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

const description =
  'You can start direct messages with anyone in your groups and teams. ' +
  "People you don't share a group or team with won't appear here."

const renderResultsHeading = (value: string | null) =>
  render(<ResultsHeading description={value} />)

describe('ResultsHeading', () => {
  it('shows the description only after the info icon is tapped', () => {
    const view = renderResultsHeading(description)

    expect(view.getByText('Results')).toBeTruthy()
    expect(view.queryByText(description)).toBeNull()

    fireEvent.press(view.getByLabelText('Who appears in results'))
    expect(view.getByText(description)).toBeTruthy()

    fireEvent.press(view.getByLabelText('Who appears in results'))
    expect(view.queryByText(description)).toBeNull()
  })

  it('hides the info icon when the server sends no description', () => {
    const view = renderResultsHeading(null)

    expect(view.getByText('Results')).toBeTruthy()
    expect(view.queryByLabelText('Who appears in results')).toBeNull()
  })
})