import React from 'react';
import { act, fireEvent, screen, waitFor, within } from '@testing-library/react';
import { vi } from 'vitest';

import { stubMatchMedia } from '../../../../vitest/matchMedia';

// jsdom has no CSS.supports, which react-aria's overlay positioning calls when the popover opens.
if (globalThis.CSS === undefined) {
  // @ts-expect-error minimal polyfill for jsdom
  globalThis.CSS = { supports: () => false };
}

// isolate:false shares the module graph per worker; reset it and import both from the fresh graph so
// render's LocalizationProvider and SingleSelect share one context and one matchMedia breakpoint snapshot.
let render: (typeof import('../../../../vitest/render'))['render'];
let SingleSelect: (typeof import('./SingleSelect'))['SingleSelect'];
let restoreMatchMedia: () => void;

// The desktop picker renders only at the 'large' breakpoint. `useScreenHasMinWidth` snapshots its
// media queries at module-import time, so force every query to match BEFORE importing SingleSelect.
beforeAll(async () => {
  restoreMatchMedia = stubMatchMedia(true);
  vi.resetModules();
  [{ render }, { SingleSelect }] = await Promise.all([import('../../../../vitest/render'), import('./SingleSelect')]);
});

afterAll(() => {
  restoreMatchMedia();
  vi.resetModules();
});

type Fruit = { id: string; name: string };

const options: Fruit[] = [
  { id: 'a', name: 'Alpha' },
  { id: 'b', name: 'Beta' },
  { id: 'c', name: 'Gamma' },
];

const common = {
  label: 'Fruit',
  name: 'fruit',
  options,
  getOptionValue: (option: Fruit) => option.id,
  getOptionLabel: (option: Fruit) => option.name,
};

describe('SingleSelect desktop picker (core Select)', () => {
  it('renders a core trigger (not react-aria-components) showing the placeholder', () => {
    const { container } = render(<SingleSelect {...common} placeholder='Pick one' onChange={() => {}} />);

    const trigger = screen.getByRole('button');
    expect(container.querySelector('.singleSelectField__combobox')).not.toBeNull();
    expect(trigger.dataset.rac).toBeUndefined();
    expect(trigger.getAttribute('aria-haspopup')).toBe('listbox');
    expect(trigger.getAttribute('aria-expanded')).toBe('false');
    expect(screen.getByText('Pick one')).toBeTruthy();
  });

  it('opens the listbox and lists the options', () => {
    render(<SingleSelect {...common} onChange={() => {}} />);

    fireEvent.click(screen.getByRole('button'));

    const listbox = screen.getByRole('listbox');
    const optionLabels = within(listbox)
      .getAllByRole('option')
      .map(option => option.getAttribute('aria-label'));
    expect(optionLabels).toEqual(['Alpha', 'Beta', 'Gamma']);
  });

  it('marks the selected value with aria-selected', () => {
    render(<SingleSelect {...common} value='b' onChange={() => {}} />);

    fireEvent.click(screen.getByRole('button'));

    const selectedOption = screen.getByRole('option', { name: 'Beta' });
    const unselectedOption = screen.getByRole('option', { name: 'Alpha' });

    expect(selectedOption.getAttribute('aria-selected')).toBe('true');
    expect(selectedOption.dataset.selected).toBe('true');
    // Unselected options carry an explicit aria-selected="false" (VoiceOver needs it to announce state).
    expect(unselectedOption.getAttribute('aria-selected')).toBe('false');
    expect(unselectedOption.dataset.selected).toBeUndefined();
  });

  it('reports the chosen value and closes on selection', () => {
    const onChange = vi.fn();
    render(<SingleSelect {...common} onChange={onChange} />);

    fireEvent.click(screen.getByRole('button'));
    fireEvent.click(screen.getByRole('option', { name: 'Gamma' }));

    expect(onChange).toHaveBeenCalledWith('c');
    expect(screen.queryByRole('listbox')).toBeNull();
  });

  it('renders the nullable empty option when enabled', () => {
    render(<SingleSelect {...common} nullable onChange={() => {}} />);

    fireEvent.click(screen.getByRole('button'));

    const listbox = screen.getByRole('listbox');
    expect(within(listbox).getAllByRole('option')).toHaveLength(options.length + 1);
  });
});

// The keyboard contract the previous react-aria-components picker guaranteed — kept as regression
// tests for the core Select's listbox-owned navigation.
describe('SingleSelect desktop picker keyboard behavior', () => {
  it('closes the listbox on Escape', () => {
    render(<SingleSelect {...common} onChange={() => {}} />);

    fireEvent.click(screen.getByRole('button'));
    expect(screen.getByRole('listbox')).toBeTruthy();

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'Escape' });
    expect(screen.queryByRole('listbox')).toBeNull();
  });

  it('focuses the selected option when the listbox opens', () => {
    render(<SingleSelect {...common} value='b' onChange={() => {}} />);

    fireEvent.click(screen.getByRole('button'));

    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Beta' }));
  });

  it('opens the listbox on ArrowDown from the closed trigger and focuses the first option', () => {
    render(<SingleSelect {...common} onChange={() => {}} />);

    fireEvent.keyDown(screen.getByRole('button'), { key: 'ArrowDown' });

    expect(screen.getByRole('listbox')).toBeTruthy();
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Alpha' }));
  });

  it('moves focus with arrows, skipping disabled options', () => {
    render(<SingleSelect {...common} disabledValues={['b']} onChange={() => {}} />);

    fireEvent.click(screen.getByRole('button'));
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Alpha' }));

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'ArrowDown' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Gamma' }));

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'ArrowUp' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Alpha' }));
  });

  it('moves focus to a matching option on typeahead inside the open listbox', () => {
    render(<SingleSelect {...common} onChange={() => {}} />);

    fireEvent.click(screen.getByRole('button'));
    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'g' });

    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Gamma' }));
  });

  it('opens the listbox when typing on the closed trigger, seeding the typeahead', () => {
    render(<SingleSelect {...common} onChange={() => {}} />);

    fireEvent.keyDown(screen.getByRole('button'), { key: 'g' });

    expect(screen.getByRole('listbox')).toBeTruthy();
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Gamma' }));
  });

  it('closes on Tab without changing the value and returns focus to the trigger', async () => {
    // waitFor can't advance Vitest's fake timers (armed by the setup), so both the async focus
    // restore and waitFor's poll would stall.
    vi.useRealTimers();
    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
    const onChange = vi.fn();
    render(<SingleSelect {...common} onChange={onChange} />);

    const trigger = screen.getByRole('button');
    // jsdom's click does not focus the button the way a real pointer press would; FocusScope
    // restores focus to the previously focused element, so it must be the trigger.
    trigger.focus();
    fireEvent.click(trigger);
    expect(screen.getByRole('listbox')).toBeTruthy();

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'Tab' });

    expect(screen.queryByRole('listbox')).toBeNull();
    expect(onChange).not.toHaveBeenCalled();
    // FocusScope restores focus to the trigger asynchronously.
    await waitFor(() => expect(document.activeElement).toBe(trigger));
    // The focus calls above land outside act(), so the trigger's useFocusRing state updates emit
    // act-environment warnings. Expected here: verify nothing else was logged and clear them.
    consoleErrorSpy.mock.calls.forEach(call => expect(String(call[0])).toContain('act('));
    consoleErrorSpy.mockClear();
  });

  it('selects the focused option and closes on Alt+ArrowUp', () => {
    const onChange = vi.fn();
    render(<SingleSelect {...common} onChange={onChange} />);

    fireEvent.click(screen.getByRole('button'));
    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'ArrowDown' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Beta' }));

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'ArrowUp', altKey: true });

    expect(onChange).toHaveBeenCalledWith('b');
    expect(screen.queryByRole('listbox')).toBeNull();
  });
});

// A dedicated 15-option fixture so PageUp/PageDown's 10-step jumps have room to move and clamp.
const manyOptions: Fruit[] = Array.from({ length: 15 }, (_, index) => ({
  id: String(index),
  name: `Option ${String(index).padStart(2, '0')}`,
}));

const manyCommon = {
  label: 'Fruit',
  name: 'fruit',
  options: manyOptions,
  getOptionValue: (option: Fruit) => option.id,
  getOptionLabel: (option: Fruit) => option.name,
};

describe('SingleSelect desktop picker page navigation', () => {
  it('PageDown moves focus 10 options forward, clamped to the last', () => {
    render(<SingleSelect {...manyCommon} onChange={() => {}} />);

    fireEvent.click(screen.getByRole('button'));
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Option 00' }));

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'PageDown' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Option 10' }));

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'PageDown' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Option 14' }));
  });

  it('PageUp moves focus 10 options backward, clamped to the first', () => {
    render(<SingleSelect {...manyCommon} onChange={() => {}} />);

    fireEvent.click(screen.getByRole('button'));
    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'End' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Option 14' }));

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'PageUp' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Option 04' }));

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'PageUp' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Option 00' }));
  });
});

// The DOM contract of the react-aria-components era, which shared E2E commands still rely on: the
// `data-testid` sits on the `.singleSelectField__combobox` wrapper, and a hidden native `<select>`
// inside it mirrors the option set (value → label) and carries the form `name`.
describe('SingleSelect desktop hidden native select mirror', () => {
  it('mirrors the options and value in a named native select inside the data-testid wrapper', () => {
    const { container } = render(<SingleSelect {...common} value='b' data-testid='fruit-select' onChange={() => {}} />);

    const wrapper = container.querySelector('[data-testid="fruit-select"]');
    expect(wrapper?.classList.contains('singleSelectField__combobox')).toBe(true);

    const select = wrapper?.querySelector('select');
    expect(select?.name).toBe('fruit');
    expect(select?.value).toBe('b');
    expect([...(select?.options ?? [])].map(option => [option.value, option.textContent])).toEqual([
      ['', ''],
      ['a', 'Alpha'],
      ['b', 'Beta'],
      ['c', 'Gamma'],
    ]);
  });

  it('commits a change made on the native select (the browser-autofill path)', () => {
    const onChange = vi.fn();
    const { container } = render(<SingleSelect {...common} onChange={onChange} />);

    fireEvent.change(container.querySelector('select') as HTMLSelectElement, { target: { value: 'c' } });

    expect(onChange).toHaveBeenCalledWith('c');
  });

  it('renders the mirror next to the input inside the data-testid wrapper in search mode', () => {
    const { container } = render(
      <SingleSelect
        {...common}
        mode='search'
        data-testid='fruit-search'
        query={null}
        onQueryChange={() => {}}
        onChange={() => {}}
      />
    );

    const wrapper = container.querySelector('[data-testid="fruit-search"]');
    expect(wrapper?.querySelector('input[type="search"]')).not.toBeNull();
    const values = [...(wrapper?.querySelectorAll('select option') ?? [])].map(
      option => (option as HTMLOptionElement).value
    );
    expect(values).toEqual(['', 'a', 'b', 'c']);
  });

  it('downgrades to a named hidden input above 300 options, keeping submission without autofill', () => {
    const bigOptions: Fruit[] = Array.from({ length: 301 }, (_, index) => ({
      id: String(index),
      name: `Fruit ${index}`,
    }));
    const { container } = render(<SingleSelect {...common} options={bigOptions} value='7' onChange={() => {}} />);

    expect(container.querySelector('select')).toBeNull();
    const input = container.querySelector('input[type="hidden"]') as HTMLInputElement;
    expect(input.name).toBe('fruit');
    expect(input.value).toBe('7');
  });
});

describe('SingleSelect desktop search (core Combobox)', () => {
  function SearchHarness({ onChange, ...rest }: { onChange: (value: string | null) => void }) {
    rest satisfies Record<PropertyKey, never>;
    const [query, setQuery] = React.useState<string | null>(null);

    const filtered = React.useMemo(
      () => (query ? options.filter(option => option.name.toLowerCase().includes(query.toLowerCase())) : options),
      [query]
    );

    return (
      <SingleSelect
        {...common}
        mode='search'
        options={filtered}
        query={query}
        onQueryChange={setQuery}
        onChange={onChange}
      />
    );
  }

  it('renders a search input styled via getSearchInputProps', () => {
    render(<SingleSelect {...common} mode='search' onChange={() => {}} query={null} onQueryChange={() => {}} />);

    const input = screen.getByRole('combobox');
    expect(input.getAttribute('type')).toBe('search');
    expect(input.className).toContain('searchField');
  });

  it('exposes the selected option styling state', () => {
    render(
      <SingleSelect {...common} mode='search' value='b' onChange={() => {}} query={null} onQueryChange={() => {}} />
    );

    fireEvent.focus(screen.getByRole('combobox'));

    expect(screen.getByRole('option', { name: 'Beta' }).dataset.selected).toBe('true');
    expect(screen.getByRole('option', { name: 'Alpha' }).dataset.selected).toBeUndefined();
  });

  it('marks the keyboard-active option with the focus indicator, hover with the highlight only', () => {
    render(<SearchHarness onChange={() => {}} />);

    const input = screen.getByRole('combobox');
    fireEvent.focus(input);
    fireEvent.keyDown(input, { key: 'ArrowDown' });

    const alpha = screen.getByRole('option', { name: 'Alpha' });
    expect(alpha.dataset.focused).toBe('true');
    expect(alpha.dataset.focusVisible).toBe('true');

    // Mouse events switch modality to pointer — jsdom has no PointerEvent.
    fireEvent.mouseMove(document.body);
    const gamma = screen.getByRole('option', { name: 'Gamma' });
    fireEvent.mouseOver(gamma);

    expect(gamma.dataset.active).toBe('true');
    expect(gamma.dataset.focused).toBe('true');
    expect(gamma.dataset.focusVisible).toBeUndefined();
    expect(alpha.dataset.focused).toBeUndefined();
  });

  it('seeds the virtual focus on the selected option and continues navigation from it', () => {
    render(
      <SingleSelect {...common} mode='search' value='b' onChange={() => {}} query={null} onQueryChange={() => {}} />
    );

    const input = screen.getByRole('combobox');
    fireEvent.focus(input);

    // Opening announces the selection, not nothing.
    const seededId = input.getAttribute('aria-activedescendant');
    expect(document.getElementById(seededId!)?.getAttribute('aria-label')).toBe('Beta');

    // Arrows continue from the selection instead of restarting at the list edges.
    fireEvent.keyDown(input, { key: 'ArrowDown' });
    const afterDown = input.getAttribute('aria-activedescendant');
    expect(document.getElementById(afterDown!)?.getAttribute('aria-label')).toBe('Gamma');

    fireEvent.keyDown(input, { key: 'ArrowUp' });
    fireEvent.keyDown(input, { key: 'ArrowUp' });
    const afterUp = input.getAttribute('aria-activedescendant');
    expect(document.getElementById(afterUp!)?.getAttribute('aria-label')).toBe('Alpha');
  });

  it('does not re-seed the selection while the user types a query', () => {
    render(
      <SingleSelect {...common} mode='search' value='b' onChange={() => {}} query={null} onQueryChange={() => {}} />
    );

    const input = screen.getByRole('combobox');
    fireEvent.focus(input);
    expect(input.getAttribute('aria-activedescendant')).toBeTruthy();

    // Typing clears the virtual focus; the once-per-open seed must not snap it back mid-query.
    fireEvent.change(input, { target: { value: 'al' } });
    expect(input.getAttribute('aria-activedescendant')).toBeNull();
  });

  it('seeds the virtual focus on the selected option in the virtualized listbox', () => {
    render(
      <SingleSelect
        {...common}
        mode='search'
        virtualize
        value='b'
        onChange={() => {}}
        query={null}
        onQueryChange={() => {}}
      />
    );

    const input = screen.getByRole('combobox');
    fireEvent.focus(input);

    // jsdom measures the scroll container at zero, so the row itself is not rendered — assert on the
    // composed option id, which the navigableValues-driven navigation derives without the DOM.
    expect(input.getAttribute('aria-activedescendant')).toMatch(/-option-b$/);

    fireEvent.keyDown(input, { key: 'ArrowDown' });
    expect(input.getAttribute('aria-activedescendant')).toMatch(/-option-c$/);
  });

  it('opens the listbox on focus and filters through the consumer options', () => {
    render(<SearchHarness onChange={() => {}} />);

    const input = screen.getByRole('combobox');
    fireEvent.focus(input);
    expect(screen.getByRole('listbox')).toBeTruthy();

    fireEvent.change(input, { target: { value: 'gam' } });
    expect(screen.getAllByRole('option').map(option => option.getAttribute('aria-label'))).toEqual(['Gamma']);
  });

  it('moves aria-activedescendant on ArrowDown and commits on Enter', () => {
    const onChange = vi.fn();
    render(<SearchHarness onChange={onChange} />);

    const input = screen.getByRole('combobox');
    fireEvent.focus(input);
    fireEvent.change(input, { target: { value: 'gam' } });

    fireEvent.keyDown(input, { key: 'ArrowDown' });
    const activeId = input.getAttribute('aria-activedescendant');
    expect(document.getElementById(activeId!)?.getAttribute('aria-label')).toBe('Gamma');

    fireEvent.keyDown(input, { key: 'Enter' });
    expect(onChange).toHaveBeenCalledWith('c');
  });

  it('clears aria-activedescendant after committing with Enter', () => {
    const onChange = vi.fn();
    render(<SearchHarness onChange={onChange} />);

    const input = screen.getByRole('combobox');
    fireEvent.focus(input);
    fireEvent.keyDown(input, { key: 'ArrowDown' });
    expect(input.getAttribute('aria-activedescendant')).toBeTruthy();

    fireEvent.keyDown(input, { key: 'Enter' });

    expect(onChange).toHaveBeenCalledWith('a');
    expect(input.getAttribute('aria-activedescendant')).toBeNull();
  });

  it('selects a filtered option on click without the input blur resetting the query', () => {
    const onChange = vi.fn();
    render(<SearchHarness onChange={onChange} />);

    const input = screen.getByRole('combobox') as HTMLInputElement;
    // Real focus (opens the listbox) so the browser's blur below has an active element to leave.
    act(() => input.focus());
    fireEvent.change(input, { target: { value: 'gam' } });
    expect(screen.getAllByRole('option').map(option => option.getAttribute('aria-label'))).toEqual(['Gamma']);

    const gamma = screen.getByRole('option', { name: 'Gamma' });
    // A real pointer press starts with pointer/mouse down on the option, which moves focus off the
    // input before the click completes.
    fireEvent.mouseDown(gamma);
    act(() => input.blur());

    // The list must still show only the filtered option: a blur-driven query reset would restore all
    // three options and shift Gamma out from under the pointer, cancelling the press.
    expect(screen.getAllByRole('option').map(option => option.getAttribute('aria-label'))).toEqual(['Gamma']);

    fireEvent.click(gamma);
    expect(onChange).toHaveBeenCalledWith('c');
  });

  it('replaces the controlled query with the selected option label on selection', () => {
    const onChange = vi.fn();
    render(<SearchHarness onChange={onChange} />);

    const input = screen.getByRole('combobox') as HTMLInputElement;
    act(() => input.focus());
    fireEvent.change(input, { target: { value: 'gam' } });

    fireEvent.click(screen.getByRole('option', { name: 'Gamma' }));

    expect(onChange).toHaveBeenCalledWith('c');
    // APG combobox behavior: committing a selection replaces the input text with the option label —
    // also when the consumer controls the query (the internal reset wins until the prop changes).
    expect(input.value).toBe('Gamma');
  });

  it('replaces the uncontrolled query with the selected option label on selection', () => {
    render(<SingleSelect {...common} mode='search' onChange={() => {}} />);

    const input = screen.getByRole('combobox') as HTMLInputElement;
    act(() => input.focus());
    fireEvent.change(input, { target: { value: 'gam' } });
    fireEvent.click(screen.getByRole('option', { name: 'Gamma' }));

    expect(input.value).toBe('Gamma');
  });

  it('drops the virtual focus on Escape and highlights the first option when reopened with ArrowDown', () => {
    render(<SearchHarness onChange={() => {}} />);

    const input = screen.getByRole('combobox');
    fireEvent.focus(input);
    fireEvent.keyDown(input, { key: 'ArrowDown' });
    fireEvent.keyDown(input, { key: 'ArrowDown' });
    const staleActiveId = input.getAttribute('aria-activedescendant');
    expect(document.getElementById(staleActiveId!)?.getAttribute('aria-label')).toBe('Beta');

    fireEvent.keyDown(input, { key: 'Escape' });
    expect(screen.queryByRole('listbox')).toBeNull();
    expect(input.getAttribute('aria-activedescendant')).toBeNull();

    // One keystroke opens the listbox AND highlights the first option (the move is flushed once
    // the listbox mounts) — not the stale pre-Escape one, and not nothing.
    fireEvent.keyDown(input, { key: 'ArrowDown' });
    expect(screen.getByRole('listbox')).toBeTruthy();
    const activeId = input.getAttribute('aria-activedescendant');
    expect(document.getElementById(activeId!)?.getAttribute('aria-label')).toBe('Alpha');
  });

  it('closes the non-modal popover on a pointer interaction outside the input and listbox', () => {
    render(<SearchHarness onChange={() => {}} />);

    const input = screen.getByRole('combobox');
    fireEvent.focus(input);
    expect(screen.getByRole('listbox')).toBeTruthy();

    // The desktop search popover is non-modal (the input keeps focus), so dismissal is wired
    // explicitly. react-aria listens for pointer events when PointerEvent exists, mouse events
    // otherwise — fire both so the test holds under either jsdom.
    fireEvent.pointerDown(document.body);
    fireEvent.pointerUp(document.body);
    fireEvent.mouseDown(document.body);
    fireEvent.mouseUp(document.body);
    fireEvent.click(document.body);

    expect(screen.queryByRole('listbox')).toBeNull();
  });

  it('keeps the popover open when the pointer interaction lands on the input itself', () => {
    render(<SearchHarness onChange={() => {}} />);

    const input = screen.getByRole('combobox');
    fireEvent.focus(input);
    expect(screen.getByRole('listbox')).toBeTruthy();

    fireEvent.pointerDown(input);
    fireEvent.pointerUp(input);
    fireEvent.mouseDown(input);
    fireEvent.mouseUp(input);
    fireEvent.click(input);

    expect(screen.queryByRole('listbox')).toBeTruthy();
  });
});

describe('SingleSelect desktop picker repeated-character typeahead', () => {
  // Banana first so the listbox opens with a non-'a' option focused; each 'a' then advances.
  const cyclingOptions: Fruit[] = [
    { id: 'b1', name: 'Banana' },
    { id: 'a1', name: 'Apple' },
    { id: 'a2', name: 'Apricot' },
    { id: 'a3', name: 'Avocado' },
  ];

  const cyclingCommon = {
    label: 'Fruit',
    name: 'fruit',
    options: cyclingOptions,
    getOptionValue: (option: Fruit) => option.id,
    getOptionLabel: (option: Fruit) => option.name,
  };

  it('cycles focus among options starting with the repeated character', () => {
    render(<SingleSelect {...cyclingCommon} onChange={() => {}} />);

    fireEvent.click(screen.getByRole('button'));
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Banana' }));

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'a' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Apple' }));

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'a' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Apricot' }));

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'a' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Avocado' }));

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'a' });
    expect(document.activeElement).toBe(screen.getByRole('option', { name: 'Apple' }));
  });
});