test: add tests for BitcoinAmountInput

src/components/BitcoinAmountInput.test.tsx

@@ -0,0 +1,98 @@
+import user from '@testing-library/user-event'
+import { render, screen } from '../testUtils'
+
+import { noop } from '../utils'
+
+import BitcoinAmountInput, { AmountValue, BitcoinAmountInputProps } from './BitcoinAmountInput'
+import { Formik } from 'formik'
+
+describe('<BitcoinAmountInput />', () => {
+  const setup = (props: Omit<BitcoinAmountInputProps, 'field' | 'form'>) => {
+    render(
+      <Formik initialValues={{ value: undefined }} onSubmit={noop}>
+        {(form) => {
+          const valueField = form.getFieldProps<AmountValue>('value')
+          return <BitcoinAmountInput form={form} field={valueField} {...props} />
+        }}
+      </Formik>,
+    )
+  }
+
+  it('should render without errors', () => {
+    setup({
+      label: 'test-label',
+    })
+    const inputElement = screen.getByLabelText('test-label')
+
+    expect(inputElement).toBeVisible()
+    expect(inputElement.dataset.value).toBe(undefined)
+    expect(inputElement.dataset.displayUnit).toBe(undefined)
+    expect(inputElement.dataset.displayValue).toBe(undefined)
+  })
+
+  it('amount can be entered in sats', async () => {
+    setup({
+      label: 'test-label',
+    })
+
+    const inputElement = screen.getByLabelText('test-label')
+
+    await user.type(inputElement, '123456')
+
+    expect(inputElement).toHaveFocus()
+    expect(inputElement.dataset.value).toBe(`123456`)
+    expect(inputElement.dataset.displayUnit).toBe(`sats`)
+    expect(inputElement.dataset.displayValue).toBe(`123456`)
+
+    // changes to display unit to BTC after element loses focus
+    await user.tab()
+
+    expect(inputElement).not.toHaveFocus()
+    expect(inputElement.dataset.value).toBe(`123456`)
+    expect(inputElement.dataset.displayUnit).toBe(`BTC`)
+    expect(inputElement.dataset.displayValue).toBe(`0.00 123 456`)
+  })
+
+  it('amount can be entered in BTC', async () => {
+    setup({
+      label: 'test-label',
+    })
+    const inputElement = screen.getByLabelText('test-label')
+
+    await user.type(inputElement, '1.234')
+
+    expect(inputElement).toHaveFocus()
+    expect(inputElement.dataset.value).toBe(`123400000`)
+    expect(inputElement.dataset.displayUnit).toBe(`BTC`)
+    expect(inputElement.dataset.displayValue).toBe(`1.234`)
+
+    // keeps display unit in BTC after element loses focus
+    await user.tab()
+
+    expect(inputElement).not.toHaveFocus()
+    expect(inputElement.dataset.value).toBe(`123400000`)
+    expect(inputElement.dataset.displayUnit).toBe(`BTC`)
+    expect(inputElement.dataset.displayValue).toBe(`1.23 400 000`)
+  })
+
+  it('given input must be a number', async () => {
+    setup({
+      label: 'test-label',
+    })
+    const inputElement = screen.getByLabelText('test-label')
+
+    await user.type(inputElement, 'test')
+
+    expect(inputElement).toHaveFocus()
+    expect(inputElement.dataset.value).toBe(undefined)
+    expect(inputElement.dataset.displayUnit).toBe(undefined)
+    expect(inputElement.dataset.displayValue).toBe(undefined)
+
+    await user.tab()
+
+    expect(inputElement).not.toHaveFocus()
+    expect(inputElement.dataset.value).toBe(undefined)
+    expect(inputElement.dataset.displayUnit).toBe(undefined)
+    expect(inputElement.dataset.displayValue).toBe('')
+  })
+})

src/components/BitcoinAmountInput.tsx

@@ -24,7 +24,7 @@ const unitFromValue = (value: string | undefined): Unit | undefined => {
   return value !== undefined && value !== '' ? (value?.includes('.') ? 'BTC' : 'sats') : undefined
 }
 
-type BitcoinAmountInputProps = {
+export type BitcoinAmountInputProps = {
   label: string
   className?: string
   inputGroupTextClassName?: string
@@ -53,25 +53,28 @@ const BitcoinAmountInput = forwardRef(
       inputMode: 'decimal',
     })
 
-    const displayInputUnit = useMemo(() => unitFromValue(field.value?.userRawInputValue), [field])
+    const displayInputUnit = useMemo(() => {
+      return inputType.type === 'number'
+        ? unitFromValue(field.value?.userRawInputValue)
+        : field.value?.displayValue
+          ? 'BTC'
+          : undefined
+    }, [field, inputType])
 
     return (
       <>
         <rb.InputGroup hasValidation={true}>
           <rb.InputGroup.Text className={inputGroupTextClassName}>
-            {inputType.type === 'number' ? (
-              <>
-                {displayInputUnit === undefined && <>…</>}
-                {displayInputUnit === 'sats' && <Sprite symbol="sats" width="24" height="24" />}
-                {displayInputUnit === 'BTC' && <span className="fw-bold">{BITCOIN_SYMBOL}</span>}
-              </>
-            ) : (
-              <>{field.value?.displayValue ? <span className="fw-bold">{BITCOIN_SYMBOL}</span> : '…'}</>
-            )}
+            {displayInputUnit === undefined && <>…</>}
+            {displayInputUnit === 'sats' && <Sprite symbol="sats" width="24" height="24" />}
+            {displayInputUnit === 'BTC' && <span className="fw-bold">{BITCOIN_SYMBOL}</span>}
           </rb.InputGroup.Text>
           <rb.Form.Control
             ref={ref}
             aria-label={label}
+            data-value={field.value?.value}
+            data-display-unit={displayInputUnit}
+            data-display-value={field.value?.displayValue}
             name={field.name}
             autoComplete="off"
             type={inputType.type}
@@ -95,7 +98,7 @@ const BitcoinAmountInput = forwardRef(
                 inputMode: 'decimal',
               })
 
-              let displayValue = field.value?.value || ''
+              let displayValue = String(field.value?.value || '')
               if (isValidNumber(field.value?.value)) {
                 displayValue = formatBtcDisplayValue(field.value!.value!)
               }