import { Field } from '../field/Field';
import { mockMatchMedia, render, screen } from '../test-utils';
import Typeahead from './Typeahead';
import { createIntl, createIntlCache } from 'react-intl';
import messages from '../i18n';
import { DEFAULT_LANG, DEFAULT_LOCALE } from '../common';

mockMatchMedia();

const cache = createIntlCache();
const intl = createIntl({ locale: DEFAULT_LOCALE, messages: messages[DEFAULT_LANG] }, cache);

describe('Typeahead', () => {
  it('supports `Field` for labeling', () => {
    render(
      <Field id="test" label="Tags">
        <Typeahead
          id="test"
          name="test"
          options={[{ label: 'Test' }]}
          intl={intl}
          onChange={() => {}}
        />
      </Field>,
    );
    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Tags/);
  });

  describe('when no options are provided', () => {
    it('does not render a dropdown when no options and no footer are provided', () => {
      render(
        <Field id="test" label="Tags">
          <Typeahead id="test" name="test" options={[]} intl={intl} onChange={() => {}} />
        </Field>,
      );
      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
    });
    it('does render a dropdown when only a footer is provided', () => {
      render(
        <Field id="test" label="Tags">
          <Typeahead
            id="test"
            name="test"
            options={[]}
            intl={intl}
            footer={<p>hello</p>}
            onChange={() => {}}
          />
        </Field>,
      );
      expect(screen.getByRole('menu')).toBeInTheDocument();
    });
  });
});
