import { screen, fireEvent, waitFor } from '@testing-library/react'
import { renderWithContext } from '../tests/with-app-context.js'
import { SensitiveContentDisplayInput } from './sensitive-content-display-input'

describe('Base Components: SensitivityContentDisplayInput', () => {
  it('toggles value and masked value', async () => {
    renderWithContext(<SensitiveContentDisplayInput value="showMe" maskedValue="hideMe" name="test" />)

    const input = screen.getByTestId('input-with-sensitivity-button: test') as HTMLInputElement
    expect(input.value).toBe('hideMe')

    fireEvent.mouseDown(screen.getByTestId('icon-button'))
    await waitFor(() => {
      expect(input.value).toBe('showMe')
    })

    fireEvent.mouseDown(screen.getByTestId('icon-button'))
    await waitFor(() => {
      expect(input.value).toBe('hideMe')
    })
  })
})