airbnb/caravel

File AsyncSelect.test.tsx has 875 lines of code (exceeds 250 allowed). Consider refactoring.

Open

/**
 * 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

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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' },

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

test('Renders only 1 tag and an overflow tag in oneLine mode', () => {
  render(
    <AsyncSelect
      {...defaultProps}
      value={[OPTIONS[0], OPTIONS[1], OPTIONS[2]]}

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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();

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

test('does not fire onChange when searching but no selection', async () => {
  const onChange = jest.fn();
  render(
    <div role="main">
      <AsyncSelect

• Read up
  Read up

Similar blocks of code found in 3 locations. Consider refactoring.

Open

  await waitFor(() => {
    const options = getAllSelectOptions();
    expect(options.length).toBe(4);
    expect(options[0]?.textContent).toEqual('acbc');
    expect(options[1]?.textContent).toEqual('CAc');

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

test('clear all the values', async () => {
  const onClear = jest.fn();
  render(
    <AsyncSelect
      {...defaultProps}

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

const matchOrder = async (expectedLabels: string[]) => {
  const actualLabels: string[] = [];
  (await findAllSelectOptions()).forEach(option => {
    actualLabels.push(option.textContent || '');
  });

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

test('sets a initial value in multiple mode', async () => {
  render(
    <AsyncSelect
      {...defaultProps}
      mode="multiple"

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

  const loadOptions = jest.fn(async () => ({
    data: [
      { label: 'John', value: 1, customLabel: <h1>John</h1> },
      { label: 'Liam', value: 2, customLabel: <h1>Liam</h1> },
      { label: 'Olivia', value: 3, customLabel: <h1>Olivia</h1> },

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

  const loadOptions = jest.fn(async () => ({
    data: [
      { label: 'John', value: 1, customLabel: <h1>John</h1> },
      { label: 'Liam', value: 2, customLabel: <h1>Liam</h1> },
      { label: 'Olivia', value: 3, customLabel: <h1>Olivia</h1> },

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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');

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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();

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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

• Read up
  Read up

Similar blocks of code found in 4 locations. Consider refactoring.

Open

test('fires onChange when clearing the selection in multiple mode', async () => {
  const onChange = jest.fn();
  render(
    <AsyncSelect
      {...defaultProps}

• Read up
  Read up

Similar blocks of code found in 4 locations. Consider refactoring.

Open

test('fires onChange when clearing the selection in single mode', async () => {
  const onChange = jest.fn();
  render(
    <AsyncSelect
      {...defaultProps}

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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(() =>

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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();

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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

• Read up
  Read up

Identical blocks of code found in 2 locations. Consider refactoring.

Open

    optionFilterProps.some(prop => {
      const optionProp = option?.[prop]
        ? String(option[prop]).trim().toLowerCase()
        : '';
      return optionProp.includes(searchValue);

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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

• Read up
  Read up

Identical blocks of code found in 2 locations. Consider refactoring.

Open

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

• Read up
  Read up

Similar blocks of code found in 4 locations. Consider refactoring.

Open

  expect(onChange).toHaveBeenCalledWith(
    expect.objectContaining({
      label: firstOption.label,
      value: firstOption.value,
    }),

• Read up
  Read up

Similar blocks of code found in 4 locations. Consider refactoring.

Open

  expect(onChange).toHaveBeenCalledWith(
    expect.objectContaining({
      label: secondOption.label,
      value: secondOption.value,
    }),

• Read up
  Read up

Similar blocks of code found in 2 locations. Consider refactoring.

Open

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

• Read up
  Read up