import '@testing-library/jest-dom'
import { render, fireEvent, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { AmountInput } from '../index'

describe('<AmountInput/> decimalScale', () => {
  const onValueChangeSpy = jest.fn()

  beforeEach(() => {
    jest.clearAllMocks()
  })

  it('should pad to decimalScale of 5 on blur', () => {
    render(<AmountInput prefix="£" onValueChange={onValueChangeSpy} decimalScale={5} />)

    userEvent.type(screen.getByRole('textbox'), '1.5')
    fireEvent.focusOut(screen.getByRole('textbox'))

    expect(onValueChangeSpy).toBeCalledWith('1.50000', undefined, {
      float: 1.5,
      formatted: '£1.50000',
      value: '1.50000',
    })

    expect(screen.getByRole('textbox')).toHaveValue('£1.50000')
  })

  it('should pad to decimalScale of 2 on blur', () => {
    const onBlurSpy = jest.fn()
    render(
      <AmountInput
        prefix="£"
        onValueChange={onValueChangeSpy}
        onBlur={onBlurSpy}
        decimalScale={2}
      />
    )

    userEvent.type(screen.getByRole('textbox'), '1')
    fireEvent.focusOut(screen.getByRole('textbox'))

    expect(onBlurSpy).toBeCalled()

    expect(onValueChangeSpy).toBeCalledWith('1.00', undefined, {
      float: 1,
      formatted: '£1.00',
      value: '1.00',
    })

    expect(screen.getByRole('textbox')).toHaveValue('£1.00')
  })
})