import { fireEvent, render } from '@testing-library/react-native';
import { describe, expect, it, vi } from 'vitest';

import { PinInput } from './PinInput';

describe('<PinInput>', () => {
  it('appends digits to the underlying value and stops at length', () => {
    const onChange = vi.fn();
    const { getByTestId } = render(
      <PinInput value="" onChange={onChange} length={6} ariaLabel="PIN" />,
    );
    fireEvent.changeText(getByTestId('pin-input'), '1234567890');
    expect(onChange).toHaveBeenCalledWith('123456');
  });

  it('strips non-digits', () => {
    const onChange = vi.fn();
    const { getByTestId } = render(
      <PinInput value="" onChange={onChange} length={6} ariaLabel="PIN" />,
    );
    fireEvent.changeText(getByTestId('pin-input'), '1a2b3c');
    expect(onChange).toHaveBeenCalledWith('123');
  });

  it('renders one bullet per filled slot', () => {
    const { getAllByText } = render(
      <PinInput value="123" onChange={() => {}} length={6} ariaLabel="PIN" />,
    );
    expect(getAllByText('•').length).toBe(3);
  });
});