import { Field } from '../field/Field';
import { mockMatchMedia, mockResizeObserver, render, screen, within } from '../test-utils';

import PhoneNumberInput from './PhoneNumberInput';

mockMatchMedia();
mockResizeObserver();

describe('PhoneNumberInput', () => {
  it('supports custom `aria-labelledby` attribute', () => {
    render(
      <>
        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
        <label id="prioritized-label">Prioritized label</label>
        <PhoneNumberInput aria-labelledby="prioritized-label" onChange={() => {}} />
      </>,
    );

    expect(
      within(screen.getByLabelText('Prioritized label')).getByRole('textbox'),
    ).toBeInTheDocument();
  });

  it('supports `Field` for labeling', () => {
    render(
      <Field label="Phone number">
        <PhoneNumberInput initialValue="+12345678" onChange={() => {}} />
      </Field>,
    );
    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Phone number/);
  });
});
