import { render } from '@testing-library/react-native'
import React from 'react'
import { Text } from 'react-native'
import { useAtFontScaleBreakpoint } from '../../../../hooks/use_at_font_scale_breakpoint'
import { ResultRow } from '../result_row'

jest.mock('../../../../hooks/use_at_font_scale_breakpoint')

const mockUseAtFontScaleBreakpoint = jest.mocked(useAtFontScaleBreakpoint)

describe('ResultRow', () => {
  it('lays children out in a row below the font scale breakpoint', () => {
    mockUseAtFontScaleBreakpoint.mockReturnValue(false)
    const view = render(
      <ResultRow accessibilityLabel="Row" onPress={jest.fn()} alignItems="center">
        <Text>child</Text>
      </ResultRow>
    )

    expect(view.getByRole('button')).toHaveStyle({ flexDirection: 'row', alignItems: 'center' })
  })

  it('stacks children at the font scale breakpoint', () => {
    mockUseAtFontScaleBreakpoint.mockReturnValue(true)
    const view = render(
      <ResultRow accessibilityLabel="Row" onPress={jest.fn()} alignItems="center">
        <Text>child</Text>
      </ResultRow>
    )

    expect(view.getByRole('button')).toHaveStyle({ flexDirection: 'column', alignItems: 'stretch' })
  })
})