superset-frontend/packages/superset-ui-core/src/components/Select/AsyncSelect.test.tsx

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import {
  createEvent,
  fireEvent,
  render,
  userEvent,
  screen,
  waitFor,
  within,
} from '@superset-ui/core/spec';
import { AsyncSelect } from '.';

const ARIA_LABEL = 'Test';
const NEW_OPTION = 'Kyle';
const NO_DATA = 'No data';
const LOADING = 'Loading...';
const OPTIONS = [
  { label: 'John', value: 1, gender: 'Male' },
  { label: 'Liam', value: 2, gender: 'Male' },
  { label: 'Olivia', value: 3, gender: 'Female' },
  { label: 'Emma', value: 4, gender: 'Female' },
  { label: 'Noah', value: 5, gender: 'Male' },
  { label: 'Ava', value: 6, gender: 'Female' },
  { label: 'Oliver', value: 7, gender: 'Male' },
  { label: 'ElijahH', value: 8, gender: 'Male' },
  { label: 'Charlotte', value: 9, gender: 'Female' },
  { label: 'Giovanni', value: 10, gender: 'Male' },
  { label: 'Franco', value: 11, gender: 'Male' },
  { label: 'Sandro', value: 12, gender: 'Male' },
  { label: 'Alehandro', value: 13, gender: 'Male' },
  { label: 'Johnny', value: 14, gender: 'Male' },
  { label: 'Nikole', value: 15, gender: 'Female' },
  { label: 'Igor', value: 16, gender: 'Male' },
  { label: 'Guilherme', value: 17, gender: 'Male' },
  { label: 'Irfan', value: 18, gender: 'Male' },
  { label: 'George', value: 19, gender: 'Male' },
  { label: 'Ashfaq', value: 20, gender: 'Male' },
  { label: 'Herme', value: 21, gender: 'Male' },
  { label: 'Cher', value: 22, gender: 'Female' },
  { label: 'Her', value: 23, gender: 'Male' },
].sort((option1, option2) => option1.label.localeCompare(option2.label));
const NULL_OPTION = { label: '<NULL>', value: null } as unknown as {
  label: string;
  value: number;
};

const loadOptions = async (search: string, page: number, pageSize: number) => {
  const totalCount = OPTIONS.length;
  const start = page * pageSize;
  const deleteCount =
    start + pageSize < totalCount ? pageSize : totalCount - start;
  const searchValue = search.trim().toLowerCase();
  const optionFilterProps = ['label', 'value', 'gender'];
  const data = OPTIONS.filter(option =>
    optionFilterProps.some(prop => {
      const optionProp = option?.[prop as keyof typeof option]
        ? String(option[prop as keyof typeof option])
            .trim()
            .toLowerCase()
        : '';
      return optionProp.includes(searchValue);
    }),
  ).splice(start, deleteCount);
  return {
    data,
    totalCount: OPTIONS.length,
  };
};

const defaultProps = {
  allowClear: true,
  ariaLabel: ARIA_LABEL,
  labelInValue: true,
  options: loadOptions,
  pageSize: 10,
  showSearch: true,
};

const getElementByClassName = (className: string) =>
  document.querySelector(className)! as HTMLElement;

const getElementsByClassName = (className: string) =>
  document.querySelectorAll(className)! as NodeListOf<HTMLElement>;

const getSelect = () =>
  screen.getByRole('combobox', { name: new RegExp(ARIA_LABEL, 'i') });

const getAllSelectOptions = () =>
  getElementsByClassName('.ant-select-item-option-content');

const findSelectOption = (text: string) =>
  waitFor(() =>
    within(getElementByClassName('.rc-virtual-list')).getByText(text),
  );

const querySelectOption = (text: string) =>
  waitFor(() =>
    within(getElementByClassName('.rc-virtual-list')).queryByText(text),
  );

const findAllSelectOptions = () =>
  waitFor(() => getElementsByClassName('.ant-select-item-option-content'));

const findSelectValue = () =>
  waitFor(() => getElementByClassName('.ant-select-selection-item'));

const findAllSelectValues = () =>
  waitFor(() => getElementsByClassName('.ant-select-selection-item'));

const clearAll = () => userEvent.click(screen.getByLabelText('close-circle'));

const matchOrder = async (expectedLabels: string[]) => {
  const actualLabels: string[] = [];
  (await findAllSelectOptions()).forEach(option => {
    actualLabels.push(option.textContent || '');
  });
  // menu is a virtual list, which means it may not render all options
  expect(actualLabels.slice(0, expectedLabels.length)).toEqual(
    expectedLabels.slice(0, actualLabels.length),
  );
  return true;
};

const type = async (text: string) => {
  const select = getSelect();
  await userEvent.clear(select);
  return userEvent.type(select, text, { delay: 10 });
};

const open = () => waitFor(() => userEvent.click(getSelect()));

test('displays a header', async () => {
  const headerText = 'Header';
  render(<AsyncSelect {...defaultProps} header={headerText} />);
  expect(screen.getByText(headerText)).toBeInTheDocument();
});

test('adds a new option if the value is not in the options, when options are empty', async () => {
  const loadOptions = jest.fn(async () => ({ data: [], totalCount: 0 }));
  render(
    <AsyncSelect {...defaultProps} options={loadOptions} value={OPTIONS[0]} />,
  );
  await open();
  expect(await findSelectOption(OPTIONS[0].label)).toBeInTheDocument();
  const options = await findAllSelectOptions();
  expect(options).toHaveLength(1);
  options.forEach((option, i) =>
    expect(option).toHaveTextContent(OPTIONS[i].label),
  );
});

test('adds a new option if the value is not in the options, when options have values', async () => {
  const loadOptions = jest.fn(async () => ({
    data: [OPTIONS[1]],
    totalCount: 1,
  }));
  render(
    <AsyncSelect {...defaultProps} options={loadOptions} value={OPTIONS[0]} />,
  );
  await open();
  expect(await findSelectOption(OPTIONS[0].label)).toBeInTheDocument();
  expect(await findSelectOption(OPTIONS[1].label)).toBeInTheDocument();
  const options = await findAllSelectOptions();
  expect(options).toHaveLength(2);
  options.forEach((option, i) =>
    expect(option).toHaveTextContent(OPTIONS[i].label),
  );
});

test('does not add a new option if the value is already in the options', async () => {
  const loadOptions = jest.fn(async () => ({
    data: [OPTIONS[0]],
    totalCount: 1,
  }));
  render(
    <AsyncSelect {...defaultProps} options={loadOptions} value={OPTIONS[0]} />,
  );
  await open();
  expect(await findSelectOption(OPTIONS[0].label)).toBeInTheDocument();
  const options = await findAllSelectOptions();
  expect(options).toHaveLength(1);
});

test('inverts the selection', async () => {
  render(<AsyncSelect {...defaultProps} invertSelection />);
  await open();
  await userEvent.click(await findSelectOption(OPTIONS[0].label));
  expect(await screen.findByLabelText('stop')).toBeInTheDocument();
});

test('sort the options by label if no sort comparator is provided', async () => {
  const loadUnsortedOptions = jest.fn(async () => ({
    data: [...OPTIONS].sort(() => Math.random()),
    totalCount: 2,
  }));
  render(<AsyncSelect {...defaultProps} options={loadUnsortedOptions} />);
  await open();
  const options = await findAllSelectOptions();
  options.forEach((option, key) =>
    expect(option).toHaveTextContent(OPTIONS[key].label),
  );
});

test('sort the options using a custom sort comparator', async () => {
  const sortComparator = (
    option1: (typeof OPTIONS)[0],
    option2: (typeof OPTIONS)[0],
  ) => option1.gender.localeCompare(option2.gender);
  render(<AsyncSelect {...defaultProps} sortComparator={sortComparator} />);
  await open();
  const options = await findAllSelectOptions();
  const optionsPage = OPTIONS.slice(0, defaultProps.pageSize);
  const sortedOptions = optionsPage.sort(sortComparator);
  options.forEach((option, key) => {
    expect(option).toHaveTextContent(sortedOptions[key].label);
  });
});

test('should sort selected to top when in single mode', async () => {
  render(<AsyncSelect {...defaultProps} mode="single" />);
  const originalLabels = OPTIONS.map(option => option.label);
  await open();
  await userEvent.click(await findSelectOption(originalLabels[1]));
  // after selection, keep the original order
  expect(await matchOrder(originalLabels)).toBe(true);

  // order selected to top when reopen
  await type('{esc}');
  await open();
  let labels = originalLabels.slice();
  labels = labels.splice(1, 1).concat(labels);
  expect(await matchOrder(labels)).toBe(true);

  // keep clicking other items, the updated order should still based on
  // original order
  await userEvent.click(await findSelectOption(originalLabels[5]));
  await matchOrder(labels);
  await type('{esc}');
  await open();
  labels = originalLabels.slice();
  labels = labels.splice(5, 1).concat(labels);
  expect(await matchOrder(labels)).toBe(true);

  // should revert to original order
  await clearAll();
  await type('{esc}');
  await open();
  expect(await matchOrder(originalLabels)).toBe(true);
});

test('should sort selected to the top when in multi mode', async () => {
  render(<AsyncSelect {...defaultProps} mode="multiple" />);
  const originalLabels = OPTIONS.map(option => option.label);
  let labels = originalLabels.slice();

  await open();
  await userEvent.click(await findSelectOption(labels[1]));
  expect(await matchOrder(labels)).toBe(true);

  await type('{esc}');
  await open();
  labels = labels.splice(1, 1).concat(labels);
  expect(await matchOrder(labels)).toBe(true);

  await open();
  await userEvent.click(await findSelectOption(labels[5]));
  await type('{esc}');
  await open();
  labels = [labels.splice(0, 1)[0], labels.splice(4, 1)[0]].concat(labels);
  expect(await matchOrder(labels)).toBe(true);

  // should revert to original order
  await clearAll();
  await type('{esc}');
  await open();
  expect(await matchOrder(originalLabels)).toBe(true);
});

test('searches for label or value', async () => {
  const option = OPTIONS[11];
  render(<AsyncSelect {...defaultProps} />);
  const search = option.value;
  await type(search.toString());
  expect(await findSelectOption(option.label)).toBeInTheDocument();
  const options = await findAllSelectOptions();
  expect(options.length).toBe(1);
  expect(options[0]).toHaveTextContent(option.label);
});

test('search order exact and startWith match first', async () => {
  render(<AsyncSelect {...defaultProps} />);
  await open();
  await type('Her');
  expect(await findSelectOption('Guilherme')).toBeInTheDocument();
  const options = await findAllSelectOptions();
  expect(options.length).toBe(4);
  expect(options[0]).toHaveTextContent('Her');
  expect(options[1]).toHaveTextContent('Herme');
  expect(options[2]).toHaveTextContent('Cher');
  expect(options[3]).toHaveTextContent('Guilherme');
});

test('ignores case when searching', async () => {
  render(<AsyncSelect {...defaultProps} />);
  await type('george');
  expect(await findSelectOption('George')).toBeInTheDocument();
});

test('same case should be ranked to the top', async () => {
  const loadOptions = jest.fn(async () => ({
    data: [
      { value: 'Cac' },
      { value: 'abac' },
      { value: 'acbc' },
      { value: 'CAc' },
    ],
    totalCount: 4,
  }));
  render(<AsyncSelect {...defaultProps} options={loadOptions} />);
  await type('Ac');
  await waitFor(() => {
    const options = getAllSelectOptions();
    expect(options.length).toBe(4);
    expect(options[0]?.textContent).toEqual('acbc');
    expect(options[1]?.textContent).toEqual('CAc');
    expect(options[2]?.textContent).toEqual('abac');
    expect(options[3]?.textContent).toEqual('Cac');
  });
});

test('ignores special keys when searching', async () => {
  render(<AsyncSelect {...defaultProps} />);
  await type('{shift}');
  expect(screen.queryByText(LOADING)).not.toBeInTheDocument();
});

test('searches for custom fields', async () => {
  render(
    <AsyncSelect {...defaultProps} optionFilterProps={['label', 'gender']} />,
  );
  await open();
  await type('Liam');
  // Liam is on the second page. need to wait to fetch options
  expect(await findSelectOption('Liam')).toBeInTheDocument();
  let options = await findAllSelectOptions();
  expect(options.length).toBe(1);
  expect(options[0]).toHaveTextContent('Liam');
  await type('Female');
  // Olivia is on the second page. need to wait to fetch options
  expect(await findSelectOption('Olivia')).toBeInTheDocument();
  options = await findAllSelectOptions();
  expect(options.length).toBe(6);
  expect(options[0]).toHaveTextContent('Ava');
  expect(options[1]).toHaveTextContent('Charlotte');
  expect(options[2]).toHaveTextContent('Cher');
  expect(options[3]).toHaveTextContent('Emma');
  expect(options[4]).toHaveTextContent('Nikole');
  expect(options[5]).toHaveTextContent('Olivia');
  await type('1');
  expect(
    await screen.findByText(NO_DATA, { selector: '.ant-empty-description' }),
  ).toBeInTheDocument();
});

test('removes duplicated values', async () => {
  render(<AsyncSelect {...defaultProps} mode="multiple" allowNewOptions />);
  const input = getElementByClassName('.ant-select-selection-search-input');
  const paste = createEvent.paste(input, {
    clipboardData: {
      getData: () => 'a,b,b,b,c,d,d',
    },
  });
  fireEvent(input, paste);
  await waitFor(async () => {
    const values = await findAllSelectValues();
    expect(values.length).toBe(4);
    expect(values[0]).toHaveTextContent('a');
    expect(values[1]).toHaveTextContent('b');
    expect(values[2]).toHaveTextContent('c');
    expect(values[3]).toHaveTextContent('d');
  });
});

test('renders a custom label', async () => {
  const loadOptions = jest.fn(async () => ({
    data: [
      { value: 'John', label: <h1>John</h1> },
      { value: 'Liam', label: <h1>Liam</h1> },
      { value: 'Olivia', label: <h1>Olivia</h1> },
    ],
    totalCount: 3,
  }));
  render(<AsyncSelect {...defaultProps} options={loadOptions} />);
  await open();
  expect(screen.getByRole('heading', { name: 'John' })).toBeInTheDocument();
  expect(screen.getByRole('heading', { name: 'Liam' })).toBeInTheDocument();
  expect(screen.getByRole('heading', { name: 'Olivia' })).toBeInTheDocument();
});

test('searches for a word with a custom label', async () => {
  const loadOptions = jest.fn(async () => ({
    data: [
      { value: 'John', label: <h1>John</h1> },
      { value: 'Liam', label: <h1>Liam</h1> },
      { value: 'Olivia', label: <h1>Olivia</h1> },
    ],
    totalCount: 3,
  }));
  render(<AsyncSelect {...defaultProps} options={loadOptions} />);
  await type('Liam');
  const selectOptions = await findAllSelectOptions();
  expect(selectOptions.length).toBe(1);
  expect(selectOptions[0]).toHaveTextContent('Liam');
});

test('removes a new option if the user does not select it', async () => {
  render(<AsyncSelect {...defaultProps} allowNewOptions />);
  await type(NEW_OPTION);
  expect(await findSelectOption(NEW_OPTION)).toBeInTheDocument();
  await type('k');
  await waitFor(() =>
    expect(screen.queryByText(NEW_OPTION)).not.toBeInTheDocument(),
  );
});

test('clear all the values', async () => {
  const onClear = jest.fn();
  render(
    <AsyncSelect
      {...defaultProps}
      mode="multiple"
      value={[OPTIONS[0], OPTIONS[1]]}
      onClear={onClear}
    />,
  );
  await clearAll();
  expect(onClear).toHaveBeenCalled();
  const values = await findAllSelectValues();
  expect(values.length).toBe(0);
});

test('does not add a new option if allowNewOptions is false', async () => {
  render(<AsyncSelect {...defaultProps} />);
  await open();
  await type(NEW_OPTION);
  expect(
    await screen.findByText(NO_DATA, { selector: '.ant-empty-description' }),
  ).toBeInTheDocument();
});

test('adds the null option when selected in single mode', async () => {
  const loadOptions = jest.fn(async () => ({
    data: [OPTIONS[0], NULL_OPTION],
    totalCount: 2,
  }));
  render(<AsyncSelect {...defaultProps} options={loadOptions} />);
  await open();
  await userEvent.click(await findSelectOption(NULL_OPTION.label));
  const values = await findAllSelectValues();
  expect(values[0]).toHaveTextContent(NULL_OPTION.label);
});

test('adds the null option when selected in multiple mode', async () => {
  const loadOptions = jest.fn(async () => ({
    data: [OPTIONS[0], NULL_OPTION],
    totalCount: 2,
  }));
  render(
    <AsyncSelect {...defaultProps} options={loadOptions} mode="multiple" />,
  );
  await open();
  await userEvent.click(await findSelectOption(OPTIONS[0].label));
  await userEvent.click(await findSelectOption(NULL_OPTION.label));
  const values = await findAllSelectValues();
  expect(values[0]).toHaveTextContent(OPTIONS[0].label);
  expect(values[1]).toHaveTextContent(NULL_OPTION.label);
});

test('renders the select with default props', () => {
  render(<AsyncSelect {...defaultProps} />);
  expect(getSelect()).toBeInTheDocument();
});

test('opens the select without any data', async () => {
  render(
    <AsyncSelect
      {...defaultProps}
      options={async () => ({ data: [], totalCount: 0 })}
    />,
  );
  await open();
  expect(
    await screen.findByText(NO_DATA, { selector: '.ant-empty-description' }),
  ).toBeInTheDocument();
});

test('displays the loading indicator when opening', async () => {
  render(<AsyncSelect {...defaultProps} />);
  userEvent.click(getSelect());

  await waitFor(async () => {
    expect(screen.getByText(LOADING)).toBeInTheDocument();
  });
  expect(screen.queryByText(LOADING)).not.toBeInTheDocument();
});

test('makes a selection in single mode', async () => {
  render(<AsyncSelect {...defaultProps} />);
  const optionText = 'Emma';
  await open();
  await userEvent.click(await findSelectOption(optionText));
  expect(await findSelectValue()).toHaveTextContent(optionText);
});

test('multiple selections in multiple mode', async () => {
  render(<AsyncSelect {...defaultProps} mode="multiple" />);
  await open();
  const [firstOption, secondOption] = OPTIONS;
  await userEvent.click(await findSelectOption(firstOption.label));
  await userEvent.click(await findSelectOption(secondOption.label));
  const values = await findAllSelectValues();
  expect(values[0]).toHaveTextContent(firstOption.label);
  expect(values[1]).toHaveTextContent(secondOption.label);
});

test('changes the selected item in single mode', async () => {
  const onChange = jest.fn();
  render(<AsyncSelect {...defaultProps} onChange={onChange} />);
  await open();
  const [firstOption, secondOption] = OPTIONS;
  await userEvent.click(await findSelectOption(firstOption.label));
  expect(onChange).toHaveBeenCalledWith(
    expect.objectContaining({
      label: firstOption.label,
      value: firstOption.value,
    }),
    expect.objectContaining(firstOption),
  );
  expect(await findSelectValue()).toHaveTextContent(firstOption.label);
  await userEvent.click(await findSelectOption(secondOption.label));
  expect(onChange).toHaveBeenCalledWith(
    expect.objectContaining({
      label: secondOption.label,
      value: secondOption.value,
    }),
    expect.objectContaining(secondOption),
  );
  expect(await findSelectValue()).toHaveTextContent(secondOption.label);
});

test('deselects an item in multiple mode', async () => {
  render(<AsyncSelect {...defaultProps} mode="multiple" />);
  await open();
  const option3 = OPTIONS[2];
  const option8 = OPTIONS[7];
  await userEvent.click(await findSelectOption(option8.label));
  await userEvent.click(await findSelectOption(option3.label));

  let options = await findAllSelectOptions();
  expect(options).toHaveLength(Math.min(defaultProps.pageSize, OPTIONS.length));
  expect(options[0]).toHaveTextContent(OPTIONS[0].label);
  expect(options[1]).toHaveTextContent(OPTIONS[1].label);

  await type('{esc}');
  await open();

  // should rank selected options to the top after menu closes
  options = await findAllSelectOptions();
  expect(options).toHaveLength(Math.min(defaultProps.pageSize, OPTIONS.length));
  expect(options[0]).toHaveTextContent(option3.label);
  expect(options[1]).toHaveTextContent(option8.label);

  let values = await findAllSelectValues();
  expect(values).toHaveLength(2);
  // should keep the order by which the options were selected
  expect(values[0]).toHaveTextContent(option8.label);
  expect(values[1]).toHaveTextContent(option3.label);

  await userEvent.click(await findSelectOption(option3.label));
  values = await findAllSelectValues();
  expect(values.length).toBe(1);
  expect(values[0]).toHaveTextContent(option8.label);
});

test('adds a new option if none is available and allowNewOptions is true', async () => {
  render(<AsyncSelect {...defaultProps} allowNewOptions />);
  await open();
  await type(NEW_OPTION);
  expect(await findSelectOption(NEW_OPTION)).toBeInTheDocument();
});

test('does not add a new option if the option already exists', async () => {
  render(<AsyncSelect {...defaultProps} allowNewOptions />);
  const option = OPTIONS[0].label;
  await open();
  await type(option);
  await waitFor(() => {
    const array = within(
      getElementByClassName('.rc-virtual-list'),
    ).getAllByText(option);
    expect(array.length).toBe(1);
  });
});

test('shows "No data" when allowNewOptions is false and a new option is entered', async () => {
  render(<AsyncSelect {...defaultProps} allowNewOptions={false} showSearch />);
  await open();
  await type(NEW_OPTION);
  expect(
    await screen.findByText(NO_DATA, { selector: '.ant-empty-description' }),
  ).toBeInTheDocument();
});

test('does not show "No data" when allowNewOptions is true and a new option is entered', async () => {
  render(<AsyncSelect {...defaultProps} allowNewOptions />);
  await open();
  await type(NEW_OPTION);
  await waitFor(() =>
    expect(
      screen.queryByText(NO_DATA, { selector: '.ant-empty-description' }),
    ).not.toBeInTheDocument(),
  );
});

test('sets a initial value in single mode', async () => {
  render(<AsyncSelect {...defaultProps} value={OPTIONS[0]} />);
  expect(await findSelectValue()).toHaveTextContent(OPTIONS[0].label);
});

test('sets a initial value in multiple mode', async () => {
  render(
    <AsyncSelect
      {...defaultProps}
      mode="multiple"
      value={[OPTIONS[0], OPTIONS[1]]}
    />,
  );
  const values = await findAllSelectValues();
  expect(values[0]).toHaveTextContent(OPTIONS[0].label);
  expect(values[1]).toHaveTextContent(OPTIONS[1].label);
});

test('searches for matches in both loaded and unloaded pages', async () => {
  render(<AsyncSelect {...defaultProps} />);
  await open();
  await type('and');

  let options = await findAllSelectOptions();
  expect(options.length).toBe(1);
  expect(options[0]).toHaveTextContent('Alehandro');

  await screen.findByText('Sandro');
  options = await findAllSelectOptions();
  expect(options.length).toBe(2);
  expect(options[0]).toHaveTextContent('Alehandro');
  expect(options[1]).toHaveTextContent('Sandro');
});

test('searches for an item in a page not loaded', async () => {
  const mock = jest.fn(loadOptions);
  render(<AsyncSelect {...defaultProps} options={mock} />);
  const search = 'Sandro';
  await open();
  await type(search);
  await waitFor(() => expect(mock).toHaveBeenCalledTimes(2));
  const options = await findAllSelectOptions();
  expect(options.length).toBe(1);
  expect(options[0]).toHaveTextContent(search);
});

test('does not fetches data when rendering', async () => {
  const loadOptions = jest.fn(async () => ({ data: [], totalCount: 0 }));
  render(<AsyncSelect {...defaultProps} options={loadOptions} />);
  expect(loadOptions).not.toHaveBeenCalled();
});

test('fetches data when opening', async () => {
  const loadOptions = jest.fn(async () => ({ data: [], totalCount: 0 }));
  render(<AsyncSelect {...defaultProps} options={loadOptions} />);
  await open();
  expect(loadOptions).toHaveBeenCalled();
});

test('fetches data only after a search input is entered if fetchOnlyOnSearch is true', async () => {
  const loadOptions = jest.fn(async () => ({ data: [], totalCount: 0 }));
  render(
    <AsyncSelect {...defaultProps} options={loadOptions} fetchOnlyOnSearch />,
  );
  await open();
  await waitFor(() => expect(loadOptions).not.toHaveBeenCalled());
  await type('search');
  await waitFor(() => expect(loadOptions).toHaveBeenCalled());
});

test('displays an error message when an exception is thrown while fetching', async () => {
  const error = 'Fetch error';
  const loadOptions = async () => {
    throw new Error(error);
  };
  render(<AsyncSelect {...defaultProps} options={loadOptions} />);
  await open();
  expect(screen.getByText(error)).toBeInTheDocument();
});

test('does not fire a new request for the same search input', async () => {
  const loadOptions = jest.fn(async () => ({ data: [], totalCount: 0 }));
  render(
    <AsyncSelect {...defaultProps} options={loadOptions} fetchOnlyOnSearch />,
  );
  await type('search');
  await waitFor(() => expect(loadOptions).toHaveBeenCalledTimes(1));
  await type('search');
  await waitFor(() => expect(loadOptions).toHaveBeenCalledTimes(1));
});

test('does not fire a new request if all values have been fetched', async () => {
  const mock = jest.fn(loadOptions);
  const search = 'George';
  const pageSize = OPTIONS.length;
  render(<AsyncSelect {...defaultProps} options={mock} pageSize={pageSize} />);
  await open();
  expect(mock).toHaveBeenCalledTimes(1);
  await type(search);
  expect(await findSelectOption(search)).toBeInTheDocument();
  expect(mock).toHaveBeenCalledTimes(1);
});

test('fires a new request if all values have not been fetched', async () => {
  const mock = jest.fn(loadOptions);
  const pageSize = OPTIONS.length / 2;
  render(<AsyncSelect {...defaultProps} options={mock} pageSize={pageSize} />);
  await open();
  expect(mock).toHaveBeenCalledTimes(1);
  await type('or');

  // `George` is on the first page so when it appears the API has not been called again
  expect(await findSelectOption('George')).toBeInTheDocument();
  expect(mock).toHaveBeenCalledTimes(1);

  // `Igor` is on the second paged API request
  expect(await findSelectOption('Igor')).toBeInTheDocument();
  expect(mock).toHaveBeenCalledTimes(2);
});

test('does not render a helper text by default', async () => {
  render(<AsyncSelect {...defaultProps} />);
  await open();
  expect(screen.queryByRole('note')).not.toBeInTheDocument();
});

test('renders a helper text when one is provided', async () => {
  const helperText = 'Helper text';
  render(<AsyncSelect {...defaultProps} helperText={helperText} />);
  await open();
  expect(screen.getByRole('note')).toBeInTheDocument();
  expect(screen.queryByText(helperText)).toBeInTheDocument();
});

test('finds an element with a numeric value and does not duplicate the options', async () => {
  const options = jest.fn(async () => ({
    data: [
      { label: 'a', value: 11 },
      { label: 'b', value: 12 },
    ],
    totalCount: 2,
  }));
  render(<AsyncSelect {...defaultProps} options={options} allowNewOptions />);
  await open();
  await type('11');
  expect(await findSelectOption('a')).toBeInTheDocument();
  expect(await querySelectOption('11')).not.toBeInTheDocument();
});

test('Renders only 1 tag and an overflow tag in oneLine mode', () => {
  render(
    <AsyncSelect
      {...defaultProps}
      value={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
      mode="multiple"
      oneLine
    />,
  );
  expect(screen.getByText(OPTIONS[0].label)).toBeVisible();
  expect(screen.queryByText(OPTIONS[1].label)).not.toBeInTheDocument();
  expect(screen.queryByText(OPTIONS[2].label)).not.toBeInTheDocument();
  expect(screen.getByText('+ 2 ...')).toBeVisible();
});

test('Renders only an overflow tag if dropdown is open in oneLine mode', async () => {
  render(
    <AsyncSelect
      {...defaultProps}
      value={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}
      mode="multiple"
      oneLine
    />,
  );
  await open();

  const withinSelector = within(getElementByClassName('.ant-select-selector'));
  await waitFor(() => {
    expect(
      withinSelector.queryByText(OPTIONS[0].label),
    ).not.toBeInTheDocument();
    expect(
      withinSelector.queryByText(OPTIONS[1].label),
    ).not.toBeInTheDocument();
    expect(
      withinSelector.queryByText(OPTIONS[2].label),
    ).not.toBeInTheDocument();
    expect(withinSelector.getByText('+ 3 ...')).toBeVisible();
  });

  await type('{esc}');

  expect(await withinSelector.findByText(OPTIONS[0].label)).toBeVisible();
  expect(withinSelector.queryByText(OPTIONS[1].label)).not.toBeInTheDocument();
  expect(withinSelector.queryByText(OPTIONS[2].label)).not.toBeInTheDocument();
  expect(withinSelector.getByText('+ 2 ...')).toBeVisible();
});

test('does not fire onChange when searching but no selection', async () => {
  const onChange = jest.fn();
  render(
    <div role="main">
      <AsyncSelect
        {...defaultProps}
        onChange={onChange}
        mode="multiple"
        allowNewOptions
      />
    </div>,
  );
  await open();
  await type('Joh');
  await userEvent.click(await findSelectOption('John'));
  await userEvent.click(screen.getByRole('main'));
  expect(onChange).toHaveBeenCalledTimes(1);
});

test('fires onChange when clearing the selection in single mode', async () => {
  const onChange = jest.fn();
  render(
    <AsyncSelect
      {...defaultProps}
      onChange={onChange}
      mode="single"
      value={OPTIONS[0]}
    />,
  );
  await clearAll();
  expect(onChange).toHaveBeenCalledTimes(1);
});

test('fires onChange when clearing the selection in multiple mode', async () => {
  const onChange = jest.fn();
  render(
    <AsyncSelect
      {...defaultProps}
      onChange={onChange}
      mode="multiple"
      value={OPTIONS[0]}
    />,
  );
  await clearAll();
  expect(onChange).toHaveBeenCalledTimes(1);
});

test('fires onChange when pasting a selection', async () => {
  const onChange = jest.fn();
  render(<AsyncSelect {...defaultProps} onChange={onChange} />);
  await open();
  const input = getElementByClassName('.ant-select-selection-search-input');
  const paste = createEvent.paste(input, {
    clipboardData: {
      getData: () => OPTIONS[0].label,
    },
  });
  fireEvent(input, paste);
  await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
});

test('does not duplicate options when using numeric values', async () => {
  render(
    <AsyncSelect
      {...defaultProps}
      mode="multiple"
      options={async () => ({
        data: [
          { label: '1', value: 1 },
          { label: '2', value: 2 },
        ],
        totalCount: 2,
      })}
    />,
  );
  await type('1');
  await waitFor(() => expect(getAllSelectOptions().length).toBe(1));
});

test('pasting an existing option does not duplicate it', async () => {
  const options = jest.fn(async () => ({
    data: [OPTIONS[0]],
    totalCount: 1,
  }));
  render(<AsyncSelect {...defaultProps} options={options} />);
  await open();
  const input = getElementByClassName('.ant-select-selection-search-input');
  const paste = createEvent.paste(input, {
    clipboardData: {
      getData: () => OPTIONS[0].label,
    },
  });
  fireEvent(input, paste);
  expect(await findAllSelectOptions()).toHaveLength(1);
});

test('pasting an existing option does not duplicate it in multiple mode', async () => {
  const options = jest.fn(async () => ({
    data: [
      { label: 'John', value: 1 },
      { label: 'Liam', value: 2 },
      { label: 'Olivia', value: 3 },
    ],
    totalCount: 3,
  }));
  render(
    <AsyncSelect
      {...defaultProps}
      options={options}
      mode="multiple"
      allowNewOptions
    />,
  );
  await open();
  const input = getElementByClassName('.ant-select-selection-search-input');
  const paste = createEvent.paste(input, {
    clipboardData: {
      getData: () => 'John,Liam,Peter',
    },
  });
  fireEvent(input, paste);
  await waitFor(async () =>
    // Only Peter should be added
    expect(await findAllSelectOptions()).toHaveLength(4),
  );
});

test('pasting an non-existent option should not add it if allowNewOptions is false', async () => {
  render(
    <AsyncSelect
      {...defaultProps}
      allowNewOptions={false}
      options={async () => ({ data: [], totalCount: 0 })}
    />,
  );
  await open();
  const input = getElementByClassName('.ant-select-selection-search-input');
  const paste = createEvent.paste(input, {
    clipboardData: {
      getData: () => 'John',
    },
  });
  await waitFor(() => fireEvent(input, paste));
  expect(await findAllSelectOptions()).toHaveLength(0);
});

test('onChange is called with the value property when pasting an option that was not loaded yet', async () => {
  const onChange = jest.fn();
  render(<AsyncSelect {...defaultProps} onChange={onChange} />);
  await open();
  const input = getElementByClassName('.ant-select-selection-search-input');
  const lastOption = OPTIONS[OPTIONS.length - 1];
  const paste = createEvent.paste(input, {
    clipboardData: {
      getData: () => lastOption.label,
    },
  });
  fireEvent(input, paste);
  await waitFor(() =>
    expect(onChange).toHaveBeenCalledWith(
      expect.objectContaining({ value: lastOption.value }),
      expect.anything(),
    ),
  );
});

test('does not fire onChange if the same value is selected in single mode', async () => {
  const onChange = jest.fn();
  render(<AsyncSelect {...defaultProps} onChange={onChange} />);
  const optionText = 'Emma';
  await open();
  expect(onChange).toHaveBeenCalledTimes(0);
  await userEvent.click(await findSelectOption(optionText));
  expect(onChange).toHaveBeenCalledTimes(1);
  await userEvent.click(await findSelectOption(optionText));
  expect(onChange).toHaveBeenCalledTimes(1);
});

/*
 TODO: Add tests that require scroll interaction. Needs further investigation.
 - Fetches more data when scrolling and more data is available
 - Doesn't fetch more data when no more data is available
 - Requests the correct page and page size
 - Sets the page to zero when a new search is made
 */