Input Event

Note

If you want to simulate a more natural typing behaviour while testing your component, consider the companion library user-event

import React, {useState} from 'react'
import {screen, render, fireEvent} from '@testing-library/react'

function CostInput() {
  const [value, setValue] = useState('')

  const removeDollarSign = value => (value[0] === '$' ? value.slice(1) : value)
  const getReturnValue = value => (value === '' ? '' : `$${value}`)

  const handleChange = ev => {
    ev.preventDefault()
    const inputtedValue = ev.currentTarget.value
    const noDollarSign = removeDollarSign(inputtedValue)
    if (isNaN(noDollarSign)) return
    setValue(getReturnValue(noDollarSign))
  }

  return <input value={value} aria-label="cost-input" onChange={handleChange} />
}

const setup = () => {
  const utils = render(<CostInput />)
  const input = screen.getByLabelText('cost-input')
  return {
    input,
    ...utils,
  }
}

test('It should keep a $ in front of the input', () => {
  const {input} = setup()
  fireEvent.change(input, {target: {value: '23'}})
  expect(input.value).toBe('$23')
})
test('It should allow a $ to be in the input when the value is changed', () => {
  const {input} = setup()
  fireEvent.change(input, {target: {value: '$23.0'}})
  expect(input.value).toBe('$23.0')
})

test('It should not allow letters to be inputted', () => {
  const {input} = setup()
  expect(input.value).toBe('') // empty before
  fireEvent.change(input, {target: {value: 'Good Day'}})
  expect(input.value).toBe('') //empty after
})

test('It should allow the $ to be deleted', () => {
  const {input} = setup()
  fireEvent.change(input, {target: {value: '23'}})
  expect(input.value).toBe('$23') // need to make a change so React registers "" as a change
  fireEvent.change(input, {target: {value: ''}})
  expect(input.value).toBe('')
})