Add tests for cent-react components and hooks

Author: mhluongo

packages/cent-react/test/components/MoneyDiff.test.tsx

@@ -0,0 +1,123 @@
+import { render, screen } from '@testing-library/react'
+import { Money } from '@thesis-co/cent'
+import { MoneyDiff } from '../../src/components/MoneyDiff'
+
+describe('MoneyDiff', () => {
+  describe('basic rendering', () => {
+    it('renders positive difference with plus sign', () => {
+      render(<MoneyDiff value={Money('$120')} compareTo={Money('$100')} />)
+      expect(screen.getByText('+$20.00')).toBeInTheDocument()
+    })
+
+    it('renders negative difference with minus sign', () => {
+      render(<MoneyDiff value={Money('$80')} compareTo={Money('$100')} />)
+      expect(screen.getByText('-$20.00')).toBeInTheDocument()
+    })
+
+    it('renders zero difference without sign', () => {
+      render(<MoneyDiff value={Money('$100')} compareTo={Money('$100')} />)
+      expect(screen.getByText('$0.00')).toBeInTheDocument()
+    })
+
+    it('accepts string values', () => {
+      render(<MoneyDiff value="$150" compareTo="$100" />)
+      expect(screen.getByText('+$50.00')).toBeInTheDocument()
+    })
+  })
+
+  describe('percentage display', () => {
+    it('shows percentage when showPercentage is true', () => {
+      render(<MoneyDiff value={Money('$120')} compareTo={Money('$100')} showPercentage />)
+      expect(screen.getByText('+$20.00 (+20.00%)')).toBeInTheDocument()
+    })
+
+    it('shows negative percentage for decrease', () => {
+      render(<MoneyDiff value={Money('$80')} compareTo={Money('$100')} showPercentage />)
+      expect(screen.getByText('-$20.00 (-20.00%)')).toBeInTheDocument()
+    })
+
+    it('respects percentageDecimals option', () => {
+      render(
+        <MoneyDiff
+          value={Money('$133.33')}
+          compareTo={Money('$100')}
+          showPercentage
+          percentageDecimals={1}
+        />
+      )
+      expect(screen.getByText(/33\.3%/)).toBeInTheDocument()
+    })
+  })
+
+  describe('data-direction attribute', () => {
+    it('sets data-direction to increase for positive diff', () => {
+      render(<MoneyDiff value={Money('$120')} compareTo={Money('$100')} data-testid="diff" />)
+      expect(screen.getByTestId('diff')).toHaveAttribute('data-direction', 'increase')
+    })
+
+    it('sets data-direction to decrease for negative diff', () => {
+      render(<MoneyDiff value={Money('$80')} compareTo={Money('$100')} data-testid="diff" />)
+      expect(screen.getByTestId('diff')).toHaveAttribute('data-direction', 'decrease')
+    })
+
+    it('sets data-direction to unchanged for zero diff', () => {
+      render(<MoneyDiff value={Money('$100')} compareTo={Money('$100')} data-testid="diff" />)
+      expect(screen.getByTestId('diff')).toHaveAttribute('data-direction', 'unchanged')
+    })
+  })
+
+  describe('custom rendering', () => {
+    it('passes render props to children function', () => {
+      render(
+        <MoneyDiff value={Money('$150')} compareTo={Money('$100')}>
+          {({ direction, formatted, percentageChange }) => (
+            <span data-testid="custom">
+              {direction}: {formatted.difference} ({percentageChange}%)
+            </span>
+          )}
+        </MoneyDiff>
+      )
+
+      expect(screen.getByTestId('custom')).toHaveTextContent('increase: +$50.00 (50.00%)')
+    })
+
+    it('provides Money instances in render props', () => {
+      let receivedCurrent: Money | null = null
+      let receivedDiff: Money | null = null
+
+      render(
+        <MoneyDiff value={Money('$120')} compareTo={Money('$100')}>
+          {({ current, difference }) => {
+            receivedCurrent = current
+            receivedDiff = difference
+            return <span>test</span>
+          }}
+        </MoneyDiff>
+      )
+
+      expect(receivedCurrent?.toString()).toBe('$120.00')
+      expect(receivedDiff?.toString()).toBe('$20.00')
+    })
+  })
+
+  describe('styling', () => {
+    it('applies className', () => {
+      render(
+        <MoneyDiff
+          value={Money('$120')}
+          compareTo={Money('$100')}
+          className="my-diff"
+          data-testid="diff"
+        />
+      )
+      expect(screen.getByTestId('diff')).toHaveClass('my-diff')
+    })
+
+    it('renders as different element type', () => {
+      render(
+        <MoneyDiff value={Money('$120')} compareTo={Money('$100')} as="div" data-testid="diff" />
+      )
+      expect(screen.getByTestId('diff').tagName).toBe('DIV')
+    })
+  })
+})

packages/cent-react/test/components/MoneyDisplay.test.tsx

@@ -0,0 +1,120 @@
+import { render, screen } from '@testing-library/react'
+import { Money } from '@thesis-co/cent'
+import { MoneyDisplay } from '../../src/components/MoneyDisplay'
+
+describe('MoneyDisplay', () => {
+  describe('basic rendering', () => {
+    it('renders formatted money value', () => {
+      render(<MoneyDisplay value={Money('$100.50')} />)
+      expect(screen.getByText('$100.50')).toBeInTheDocument()
+    })
+
+    it('renders with string value', () => {
+      render(<MoneyDisplay value="$200.00" />)
+      expect(screen.getByText('$200.00')).toBeInTheDocument()
+    })
+
+    it('renders nothing for null value without placeholder', () => {
+      const { container } = render(<MoneyDisplay value={null} />)
+      expect(container).toBeEmptyDOMElement()
+    })
+
+    it('renders placeholder for null value', () => {
+      render(<MoneyDisplay value={null} placeholder="—" />)
+      expect(screen.getByText('—')).toBeInTheDocument()
+    })
+
+    it('renders placeholder for undefined value', () => {
+      render(<MoneyDisplay value={undefined} placeholder="N/A" />)
+      expect(screen.getByText('N/A')).toBeInTheDocument()
+    })
+  })
+
+  describe('formatting options', () => {
+    it('applies compact notation', () => {
+      render(<MoneyDisplay value={Money('$1500000')} compact />)
+      // Compact notation varies by browser, just check it renders
+      expect(screen.getByText(/\$1\.5M|\$1,500K/)).toBeInTheDocument()
+    })
+
+    it('applies maxDecimals', () => {
+      render(<MoneyDisplay value={Money('$100.999')} maxDecimals={2} />)
+      expect(screen.getByText('$101.00')).toBeInTheDocument()
+    })
+
+    it('excludes currency when requested', () => {
+      render(<MoneyDisplay value={Money('$100.00')} excludeCurrency />)
+      expect(screen.getByText('100.00')).toBeInTheDocument()
+    })
+  })
+
+  describe('showSign prop', () => {
+    it('shows negative sign by default for negative values', () => {
+      render(<MoneyDisplay value={Money('-$50.00')} />)
+      expect(screen.getByText(/-\$50\.00|-50\.00/)).toBeInTheDocument()
+    })
+
+    it('shows positive sign when showSign is always', () => {
+      render(<MoneyDisplay value={Money('$50.00')} showSign="always" />)
+      expect(screen.getByText(/\+\$50\.00/)).toBeInTheDocument()
+    })
+
+    it('hides sign when showSign is never', () => {
+      render(<MoneyDisplay value={Money('-$50.00')} showSign="never" />)
+      expect(screen.getByText('$50.00')).toBeInTheDocument()
+    })
+  })
+
+  describe('custom rendering', () => {
+    it('passes parts to children function', () => {
+      render(
+        <MoneyDisplay value={Money('$99.99')}>
+          {({ formatted, isNegative, isZero }) => (
+            <span data-testid="custom">
+              {formatted} - neg:{String(isNegative)} - zero:{String(isZero)}
+            </span>
+          )}
+        </MoneyDisplay>
+      )
+
+      const element = screen.getByTestId('custom')
+      expect(element).toHaveTextContent('$99.99')
+      expect(element).toHaveTextContent('neg:false')
+      expect(element).toHaveTextContent('zero:false')
+    })
+
+    it('provides money instance in parts', () => {
+      let receivedMoney: Money | null = null
+
+      render(
+        <MoneyDisplay value={Money('$100.00')}>
+          {({ money }) => {
+            receivedMoney = money
+            return <span>test</span>
+          }}
+        </MoneyDisplay>
+      )
+
+      expect(receivedMoney).not.toBeNull()
+      expect(receivedMoney!.toString()).toBe('$100.00')
+    })
+  })
+
+  describe('styling', () => {
+    it('applies className', () => {
+      render(<MoneyDisplay value={Money('$100')} className="my-class" />)
+      expect(screen.getByText('$100.00')).toHaveClass('my-class')
+    })
+
+    it('applies style', () => {
+      render(<MoneyDisplay value={Money('$100')} style={{ color: 'red' }} />)
+      expect(screen.getByText('$100.00')).toHaveStyle({ color: 'red' })
+    })
+
+    it('renders as different element type', () => {
+      render(<MoneyDisplay value={Money('$100')} as="div" data-testid="money" />)
+      const element = screen.getByTestId('money')
+      expect(element.tagName).toBe('DIV')
+    })
+  })
+})

packages/cent-react/test/components/MoneyInput.test.tsx

@@ -0,0 +1,141 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Money } from '@thesis-co/cent'
+import { MoneyInput } from '../../src/components/MoneyInput'
+
+describe('MoneyInput', () => {
+  describe('basic rendering', () => {
+    it('renders an input element', () => {
+      render(<MoneyInput name="amount" currency="USD" />)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('displays controlled value', () => {
+      render(<MoneyInput name="amount" currency="USD" value={Money('$100.00')} />)
+      expect(screen.getByRole('textbox')).toHaveValue('100.00')
+    })
+
+    it('displays placeholder', () => {
+      render(<MoneyInput name="amount" currency="USD" placeholder="Enter amount" />)
+      expect(screen.getByPlaceholderText('Enter amount')).toBeInTheDocument()
+    })
+  })
+
+  describe('user input', () => {
+    it('calls onChange with parsed Money value', async () => {
+      const user = userEvent.setup()
+      const onChange = jest.fn()
+
+      render(<MoneyInput name="amount" currency="USD" onChange={onChange} />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, '50.00')
+
+      expect(onChange).toHaveBeenCalled()
+      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0]
+      expect(lastCall.target.name).toBe('amount')
+      expect(lastCall.target.value).not.toBeNull()
+    })
+
+    it('calls onValueChange with Money value', async () => {
+      const user = userEvent.setup()
+      const onValueChange = jest.fn()
+
+      render(<MoneyInput name="amount" currency="USD" onValueChange={onValueChange} />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, '75')
+
+      expect(onValueChange).toHaveBeenCalled()
+    })
+
+    it('handles clearing input', async () => {
+      const user = userEvent.setup()
+      const onChange = jest.fn()
+
+      render(<MoneyInput name="amount" currency="USD" value={Money('$100')} onChange={onChange} />)
+
+      const input = screen.getByRole('textbox')
+      await user.clear(input)
+
+      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0]
+      expect(lastCall.target.value).toBeNull()
+    })
+  })
+
+  describe('formatting', () => {
+    it('formats value on blur when formatOnBlur is true with controlled value', () => {
+      const value = Money('$1234.50')
+      render(
+        <MoneyInput name="amount" currency="USD" value={value} formatOnBlur={true} />
+      )
+
+      const input = screen.getByRole('textbox')
+      // Controlled value should display formatted (without currency since excludeCurrency)
+      expect(input).toHaveValue('1,234.50')
+    })
+
+    it('displays unformatted value when controlled value is set', () => {
+      const value = Money('$100')
+      render(
+        <MoneyInput name="amount" currency="USD" value={value} formatOnBlur={true} />
+      )
+
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveValue('100.00')
+    })
+  })
+
+  describe('validation', () => {
+    it('allows negative values by default', async () => {
+      const user = userEvent.setup()
+      const onChange = jest.fn()
+
+      render(<MoneyInput name="amount" currency="USD" onChange={onChange} />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, '-50')
+
+      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0]
+      expect(lastCall.target.value?.isNegative()).toBe(true)
+    })
+
+    it('converts negative to positive when allowNegative is false', async () => {
+      const user = userEvent.setup()
+      const onChange = jest.fn()
+
+      render(<MoneyInput name="amount" currency="USD" onChange={onChange} allowNegative={false} />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, '-50')
+
+      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0]
+      expect(lastCall.target.value?.isNegative()).toBe(false)
+    })
+  })
+
+  describe('props passthrough', () => {
+    it('passes disabled prop', () => {
+      render(<MoneyInput name="amount" currency="USD" disabled />)
+      expect(screen.getByRole('textbox')).toBeDisabled()
+    })
+
+    it('passes className', () => {
+      render(<MoneyInput name="amount" currency="USD" className="my-input" />)
+      expect(screen.getByRole('textbox')).toHaveClass('my-input')
+    })
+
+    it('sets inputMode to decimal', () => {
+      render(<MoneyInput name="amount" currency="USD" />)
+      expect(screen.getByRole('textbox')).toHaveAttribute('inputMode', 'decimal')
+    })
+  })
+
+  describe('ref forwarding', () => {
+    it('forwards ref to input element', () => {
+      const ref = { current: null as HTMLInputElement | null }
+      render(<MoneyInput name="amount" currency="USD" ref={ref} />)
+      expect(ref.current).toBeInstanceOf(HTMLInputElement)
+    })
+  })
+})