|
|
import { describe, expect, it, vi } from 'vitest' |
|
|
import { fireEvent, render, screen } from '@testing-library/react' |
|
|
import GroupedSatsInput from './index' |
|
|
import { |
|
|
formatSatsGrouped, |
|
|
SAT_GROUP_SEPARATOR, |
|
|
splitSatsGroupedParts |
|
|
} from '@/lib/lightning' |
|
|
import { superchatSatsLeadingHighlightClass } from '@/lib/superchat-ui' |
|
|
|
|
|
describe('GroupedSatsInput', () => { |
|
|
it('shows the same grouped string in the input as on the overlay', () => { |
|
|
render(<GroupedSatsInput sats={1_234_567} onSatsChange={() => {}} id="test-sats" />) |
|
|
const input = screen.getByRole('textbox', { name: '' }) |
|
|
expect(input).toHaveAttribute('id', 'test-sats') |
|
|
expect(input).toHaveValue(formatSatsGrouped(1_234_567)) |
|
|
}) |
|
|
|
|
|
it('highlights only the leading digit group above 999 999 sats', () => { |
|
|
const { container, rerender } = render( |
|
|
<GroupedSatsInput sats={420} onSatsChange={() => {}} /> |
|
|
) |
|
|
expect(container.querySelector(`.${superchatSatsLeadingHighlightClass.split(' ')[0]}`)).toBeNull() |
|
|
|
|
|
rerender(<GroupedSatsInput sats={1_000_000} onSatsChange={() => {}} />) |
|
|
const parts = splitSatsGroupedParts(1_000_000) |
|
|
const highlighted = container.querySelector(`.${superchatSatsLeadingHighlightClass.split(' ')[0]}`) |
|
|
expect(highlighted).toHaveTextContent(parts[0]!) |
|
|
expect(highlighted?.textContent).toBe('1') |
|
|
}) |
|
|
|
|
|
it('renders overlay groups joined with thin spaces (no flex gap)', () => { |
|
|
const { container } = render(<GroupedSatsInput sats={21_000} onSatsChange={() => {}} />) |
|
|
const overlay = container.querySelector('[aria-hidden] span.whitespace-nowrap') |
|
|
expect(overlay?.textContent).toBe( |
|
|
splitSatsGroupedParts(21_000).join(SAT_GROUP_SEPARATOR) |
|
|
) |
|
|
}) |
|
|
|
|
|
it('parses edited grouped input', () => { |
|
|
const onSatsChange = vi.fn() |
|
|
render(<GroupedSatsInput sats={420} onSatsChange={onSatsChange} />) |
|
|
const input = screen.getByRole('textbox') |
|
|
fireEvent.change(input, { target: { value: `2${SAT_GROUP_SEPARATOR}100` } }) |
|
|
expect(onSatsChange).toHaveBeenLastCalledWith(2100) |
|
|
}) |
|
|
})
|
|
|
|
