@leafygreen-ui/combobox 12.0.2 → 12.0.4

package/src/Combobox/Combobox.spec.tsx

@@ -1,11 +1,9 @@
 /* eslint-disable jest/no-standalone-expect */
 /* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "expectSelection"] }] */
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import {
   act,
-  fireEvent,
   queryByText,
-  render,
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
@@ -14,15 +12,12 @@ import { axe } from 'jest-axe';
 import flatten from 'lodash/flatten';
 import isUndefined from 'lodash/isUndefined';
 
-import Button from '@leafygreen-ui/button';
-import { keyMap } from '@leafygreen-ui/lib';
 import { RenderMode } from '@leafygreen-ui/popover';
 import { eventContainingTargetValue } from '@leafygreen-ui/testing-lib';
 
 import { OptionObject } from '../ComboboxOption/ComboboxOption.types';
 import {
   defaultOptions,
-  getComboboxJSX,
   groupedOptions,
   NestedObject,
   renderCombobox,
@@ -584,942 +579,6 @@ describe('packages/combobox', () => {
       });
     });
 
-    /**
-     * Mouse interaction
-     */
-    describe('Mouse interaction', () => {
-      test('Menu is not initially opened', () => {
-        const { getMenuElements } = renderCombobox(select);
-        const { menuContainerEl } = getMenuElements();
-        expect(menuContainerEl).not.toBeInTheDocument();
-      });
-
-      test('Clicking the combobox sets focus to the input', () => {
-        const { comboboxEl, inputEl } = renderCombobox(select);
-        userEvent.click(comboboxEl);
-        expect(inputEl).toHaveFocus();
-      });
-
-      test('Menu appears when box is clicked', () => {
-        const { comboboxEl, getMenuElements } = renderCombobox(select);
-        userEvent.click(comboboxEl);
-        const { menuContainerEl } = getMenuElements();
-        expect(menuContainerEl).not.toBeNull();
-        expect(menuContainerEl).toBeInTheDocument();
-      });
-
-      test('Clicking an option sets selection', () => {
-        const { openMenu, queryChipsByName, inputEl } = renderCombobox(select);
-        const { optionElements } = openMenu();
-        expect(optionElements).not.toBeUndefined();
-        const option3 = (optionElements as HTMLCollectionOf<HTMLLIElement>)[2];
-        act(() => {
-          userEvent.click(option3);
-        });
-        if (select === 'multiple') {
-          expect(queryChipsByName('Carrot')).toBeInTheDocument();
-        } else {
-          expect(inputEl).toHaveValue('Carrot');
-        }
-      });
-
-      test('Clicking an option fires onChange', () => {
-        const onChange = jest.fn();
-        const { openMenu } = renderCombobox(select, {
-          onChange,
-        });
-        const { optionElements } = openMenu();
-        expect(optionElements).not.toBeUndefined();
-        const option3 = (optionElements as HTMLCollectionOf<HTMLLIElement>)[2];
-        act(() => {
-          userEvent.click(option3);
-        });
-
-        if (select === 'multiple') {
-          expect(onChange).toHaveBeenCalledWith(
-            expect.arrayContaining(['carrot']),
-            expect.objectContaining({
-              diffType: 'insert',
-              value: 'carrot',
-            }),
-          );
-        } else {
-          expect(onChange).toHaveBeenCalledWith('carrot');
-        }
-      });
-
-      testSingleSelect('Clicking selected option closes menu', async () => {
-        const { openMenu } = renderCombobox(select, {
-          initialValue: 'apple',
-        });
-        const { optionElements, menuContainerEl } = openMenu();
-        expect(optionElements).not.toBeUndefined();
-        userEvent.click((optionElements as HTMLCollectionOf<HTMLLIElement>)[0]);
-        await waitForElementToBeRemoved(menuContainerEl);
-        expect(menuContainerEl).not.toBeInTheDocument();
-      });
-
-      testMultiSelect(
-        'Clicking selected option toggles selection & does NOT close menu',
-        async () => {
-          const { openMenu, queryChipsByName } = renderCombobox(select, {
-            initialValue: ['apple'],
-          });
-          const selectedChip = queryChipsByName('Apple');
-          expect(selectedChip).toBeInTheDocument();
-          const { optionElements, menuContainerEl } = openMenu();
-          expect(optionElements).not.toBeUndefined();
-
-          userEvent.click(
-            (optionElements as HTMLCollectionOf<HTMLLIElement>)[0],
-          );
-
-          await waitFor(() => {
-            expect(selectedChip).not.toBeInTheDocument();
-            expect(menuContainerEl).toBeInTheDocument();
-          });
-        },
-      );
-
-      testSingleSelect('Clicking any option closes menu', async () => {
-        const { openMenu } = renderCombobox(select);
-        const { optionElements, menuContainerEl } = openMenu();
-        expect(optionElements).not.toBeUndefined();
-        userEvent.click((optionElements as HTMLCollectionOf<HTMLLIElement>)[1]);
-        await waitForElementToBeRemoved(menuContainerEl);
-        expect(menuContainerEl).not.toBeInTheDocument();
-      });
-
-      testMultiSelect(
-        'Clicking any option toggles selection & does NOT close menu',
-        async () => {
-          const { openMenu, queryChipsByName } = renderCombobox(select);
-          const { optionElements, menuContainerEl } = openMenu();
-          expect(optionElements).not.toBeUndefined();
-
-          userEvent.click(
-            (optionElements as HTMLCollectionOf<HTMLLIElement>)[0],
-          );
-
-          await waitFor(() => {
-            const selectedChip = queryChipsByName('Apple');
-            expect(selectedChip).toBeInTheDocument();
-            expect(menuContainerEl).toBeInTheDocument();
-          });
-        },
-      );
-
-      testSingleSelect(
-        'Input returned to previous valid selection when menu closes',
-        () => {
-          const initialValue = 'apple';
-          const { inputEl } = renderCombobox(select, {
-            initialValue,
-          });
-          userEvent.type(inputEl, '{backspace}{backspace}{esc}');
-          expect(inputEl).toHaveValue('Apple');
-        },
-      );
-
-      testSingleSelect(
-        'Clicking after making a selection should re-open the menu',
-        async () => {
-          const { comboboxEl, inputEl, openMenu, getMenuElements } =
-            renderCombobox(select);
-          const { optionElements, menuContainerEl } = openMenu();
-          const firstOption = optionElements![0];
-          userEvent.click(firstOption);
-          await waitForElementToBeRemoved(menuContainerEl);
-          userEvent.click(comboboxEl);
-          waitFor(() => {
-            const { menuContainerEl: newMenuContainerEl } = getMenuElements();
-            expect(newMenuContainerEl).not.toBeNull();
-            expect(newMenuContainerEl).toBeInTheDocument();
-            expect(inputEl).toHaveFocus();
-          });
-        },
-      );
-
-      test('Opening the menu when there is a selection should show all options', () => {
-        // See also: 'Pressing Down Arrow when there is a selection shows all menu options'
-        const initialValue = select === 'multiple' ? ['apple'] : 'apple';
-        const { comboboxEl, getMenuElements } = renderCombobox(select, {
-          initialValue,
-        });
-        userEvent.click(comboboxEl);
-        const { optionElements } = getMenuElements();
-        expect(optionElements).toHaveLength(defaultOptions.length);
-      });
-
-      test('First item is highlighted when re-opened after selection is made', async () => {
-        const initialValue = 'banana'; // Select an option that is not the first one
-        const { comboboxEl, getMenuElements } = renderCombobox('single', {
-          initialValue,
-        });
-
-        // Open the combobox
-        userEvent.click(comboboxEl);
-        let { optionElements } = getMenuElements();
-        expect(optionElements).toHaveLength(defaultOptions.length);
-
-        // Verify that the first item is highlighted
-        expect(
-          (optionElements as HTMLCollectionOf<HTMLLIElement>)[0],
-        ).toHaveAttribute('aria-selected', 'true');
-
-        // Click the same option again to close the menu
-        userEvent.click(
-          (optionElements as HTMLCollectionOf<HTMLLIElement>)[1], // Click the second option
-        );
-
-        // Open the combobox again
-        userEvent.click(comboboxEl);
-        optionElements = getMenuElements().optionElements;
-
-        // Verify that the first item is highlighted again
-        expect(
-          (optionElements as HTMLCollectionOf<HTMLLIElement>)[0],
-        ).toHaveAttribute('aria-selected', 'true');
-      });
-
-      describe('Clickaway', () => {
-        test('Menu closes on click-away', async () => {
-          const { containerEl, openMenu } = renderCombobox(select);
-          const { menuContainerEl } = openMenu();
-          userEvent.click(containerEl.parentElement!);
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(menuContainerEl).not.toBeInTheDocument();
-          expect(containerEl).toContainFocus();
-        });
-
-        test("Other click handlers don't fire on click-away", async () => {
-          const buttonClickHandler = jest.fn();
-          const comboboxJSX = getComboboxJSX({
-            multiselect: select === 'multiple',
-          });
-          const renderResult = render(
-            <>
-              {comboboxJSX}
-              <Button onClick={buttonClickHandler}></Button>
-            </>,
-          );
-
-          const comboboxEl = renderResult.getByRole('combobox');
-          const buttonEl = renderResult.getByRole('button');
-          userEvent.click(comboboxEl); // Open menu
-          const menuContainerEl = renderResult.queryByRole('listbox');
-          userEvent.click(buttonEl); // Click button to close menu
-          await waitForElementToBeRemoved(menuContainerEl); // wait for menu to close
-          expect(buttonClickHandler).not.toHaveBeenCalled();
-        });
-
-        testSingleSelect(
-          'Clicking away should keep text if input is a valid value',
-          async () => {
-            const { inputEl, openMenu } = renderCombobox(select);
-            const { menuContainerEl } = openMenu();
-            userEvent.type(inputEl, 'Apple');
-            userEvent.click(document.body);
-            await waitForElementToBeRemoved(menuContainerEl);
-            expect(inputEl).toHaveValue('Apple');
-          },
-        );
-
-        testSingleSelect(
-          'Clicking away should NOT keep text if input is not a valid value',
-          async () => {
-            const { inputEl, openMenu } = renderCombobox(select);
-            const { menuContainerEl } = openMenu();
-            userEvent.type(inputEl, 'abc');
-            userEvent.click(document.body);
-            await waitForElementToBeRemoved(menuContainerEl);
-            expect(inputEl).toHaveValue('');
-          },
-        );
-
-        testMultiSelect('Clicking away should keep text as typed', async () => {
-          const { inputEl, openMenu } = renderCombobox(select);
-          const { menuContainerEl } = openMenu();
-          userEvent.type(inputEl, 'abc');
-          userEvent.click(document.body);
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(inputEl).toHaveValue('abc');
-        });
-      });
-
-      describe('Click clear button', () => {
-        test('Clicking clear all button clears selection', async () => {
-          const initialValue =
-            select === 'single' ? 'apple' : ['apple', 'banana', 'carrot'];
-          const { inputEl, clearButtonEl, queryAllChips } = renderCombobox(
-            select,
-            {
-              initialValue,
-            },
-          );
-          expect(clearButtonEl).not.toBeNull();
-          act(() => {
-            userEvent.click(clearButtonEl!);
-          });
-          if (select === 'multiple') {
-            expect(queryAllChips()).toHaveLength(0);
-          } else {
-            await waitFor(() => expect(inputEl).toHaveValue(''));
-          }
-        });
-      });
-
-      describe('Clicking chips', () => {
-        testMultiSelect('Clicking chip X button removes option', async () => {
-          const initialValue = ['apple', 'banana', 'carrot'];
-          const { queryChipsByName, queryAllChips } = renderCombobox(select, {
-            initialValue,
-          });
-          const appleChip = queryChipsByName('Apple');
-          expect(appleChip).not.toBeNull();
-          const appleChipButton = appleChip!.querySelector('button')!;
-          userEvent.click(appleChipButton);
-          await waitFor(() => {
-            expect(appleChip).not.toBeInTheDocument();
-            const allChips = queryChipsByName(['Banana', 'Carrot']);
-            allChips?.forEach((chip: HTMLElement) =>
-              expect(chip).toBeInTheDocument(),
-            );
-            expect(queryAllChips()).toHaveLength(2);
-          });
-        });
-
-        testMultiSelect(
-          'Clicking chip X button fires onChange with diff',
-          async () => {
-            const onChange = jest.fn();
-            const initialValue = ['apple', 'banana', 'carrot'];
-            const { queryChipsByName } = renderCombobox(select, {
-              onChange,
-              initialValue,
-            });
-            const appleChip = queryChipsByName('Apple');
-            expect(appleChip).not.toBeNull();
-            const appleChipButton = appleChip!.querySelector('button')!;
-            userEvent.click(appleChipButton);
-            await waitFor(() => {
-              expect(appleChip).not.toBeInTheDocument();
-              expect(onChange).toHaveBeenCalledWith(
-                expect.arrayContaining(['banana', 'carrot']),
-                expect.objectContaining({
-                  diffType: 'delete',
-                  value: 'apple',
-                }),
-              );
-            });
-          },
-        );
-
-        testMultiSelect('Clicking chip text focuses the chip', () => {
-          const initialValue = ['apple', 'banana', 'carrot'];
-          const { queryChipsByName, queryAllChips } = renderCombobox(select, {
-            initialValue,
-          });
-          const appleChip = queryChipsByName('Apple');
-          userEvent.click(appleChip!);
-          expect(appleChip!).toContainFocus();
-          expect(queryAllChips()).toHaveLength(3);
-        });
-
-        testMultiSelect(
-          'Clicking chip X button does nothing when disabled',
-          async () => {
-            const initialValue = ['apple', 'banana', 'carrot'];
-            const { queryChipsByName, queryAllChips } = renderCombobox(select, {
-              initialValue,
-              disabled: true,
-            });
-            const carrotChip = queryChipsByName('Carrot');
-            const carrotChipButton = carrotChip!.querySelector('button');
-            expect(() => userEvent.click(carrotChipButton!)).toThrow();
-            await waitFor(() => {
-              expect(queryAllChips()).toHaveLength(3);
-            });
-          },
-        );
-
-        testMultiSelect(
-          'Removing a chip sets focus to the next chip',
-          async () => {
-            const initialValue = ['apple', 'banana', 'carrot'];
-            const { queryChipsByName } = renderCombobox(select, {
-              initialValue,
-            });
-            const appleChip = queryChipsByName('Apple');
-            const bananaChip = queryChipsByName('Banana');
-            const appleChipButton = appleChip!.querySelector('button');
-            const bananaChipButton = bananaChip!.querySelector('button');
-            userEvent.click(appleChipButton!);
-            await waitFor(() => {
-              expect(appleChip).not.toBeInTheDocument();
-              expect(bananaChipButton!).toHaveFocus();
-            });
-          },
-        );
-      });
-
-      test.todo(
-        'Clicking in the middle of the input text should set the cursor there',
-      );
-    });
-
-    /**
-     * Keyboard navigation
-     */
-    describe('Keyboard interaction', () => {
-      test('First option is highlighted on menu open', () => {
-        const { openMenu } = renderCombobox(select);
-        const { optionElements } = openMenu();
-        expect(optionElements).not.toBeUndefined();
-        expect(
-          (optionElements as HTMLCollectionOf<HTMLLIElement>)[0],
-        ).toHaveAttribute('aria-selected', 'true');
-      });
-
-      describe('Enter key', () => {
-        test('opens menu when input is focused', () => {
-          const { getMenuElements, inputEl } = renderCombobox(select);
-          userEvent.tab();
-          userEvent.type(inputEl!, '{enter}');
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).not.toBeNull();
-          expect(menuContainerEl).toBeInTheDocument();
-        });
-
-        test('does not make a selection when clicking enter on a closed menu', () => {
-          const { getMenuElements, inputEl } = renderCombobox(select);
-          userEvent.tab();
-          userEvent.keyboard('{enter}');
-          expect(inputEl).toHaveValue('');
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).not.toBeNull();
-          expect(menuContainerEl).toBeInTheDocument();
-          expect(inputEl).toHaveValue('');
-        });
-
-        test('selects highlighted option', () => {
-          const { inputEl, openMenu, queryChipsByName } =
-            renderCombobox(select);
-          openMenu();
-          userEvent.type(inputEl!, '{arrowdown}{enter}');
-          if (select === 'multiple') {
-            expect(queryChipsByName('Banana')).toBeInTheDocument();
-          } else {
-            expect(inputEl).toHaveValue('Banana');
-          }
-        });
-
-        test('fires onChange handler with payload', () => {
-          const onChange = jest.fn();
-          const { inputEl, openMenu } = renderCombobox(select, { onChange });
-          openMenu();
-          userEvent.type(inputEl!, '{arrowdown}{enter}');
-
-          if (select === 'multiple') {
-            expect(onChange).toHaveBeenCalledWith(
-              ['banana'],
-              expect.objectContaining({
-                diffType: 'insert',
-                value: 'banana',
-              }),
-            );
-          } else {
-            expect(onChange).toHaveBeenCalledWith('banana');
-          }
-        });
-
-        test('does not fire onClear handler', () => {
-          const onClear = jest.fn();
-          const { inputEl, openMenu } = renderCombobox(select, { onClear });
-          openMenu();
-          userEvent.type(inputEl!, '{arrowdown}{enter}');
-          expect(onClear).not.toHaveBeenCalled();
-        });
-
-        testSingleSelect('Re-opens menu after making a selection', async () => {
-          const { inputEl, openMenu, getMenuElements } =
-            renderCombobox('single');
-          const { optionElements, menuContainerEl } = openMenu();
-          const firstOption = optionElements![0];
-          userEvent.click(firstOption);
-          await waitForElementToBeRemoved(menuContainerEl);
-          userEvent.type(inputEl, '{emter}');
-          await waitFor(() => {
-            const { menuContainerEl: newMenuContainerEl } = getMenuElements();
-            expect(newMenuContainerEl).not.toBeNull();
-            expect(newMenuContainerEl).toBeInTheDocument();
-          });
-        });
-
-        testMultiSelect('Removes Chip when one is focused', () => {
-          const initialValue = ['apple', 'banana', 'carrot'];
-          const { comboboxEl, queryAllChips, queryChipsByName } =
-            renderCombobox(select, {
-              initialValue,
-            });
-          userEvent.type(comboboxEl, '{arrowleft}');
-          const chip = queryChipsByName('Carrot');
-          // Calling `userEvent.type` doesn't fire the necessary `keyDown` event
-          fireEvent.keyDown(chip!, { key: keyMap.Enter });
-          expect(queryAllChips()).toHaveLength(2);
-        });
-      });
-
-      describe('Space key', () => {
-        test('Types a space character', () => {
-          const { inputEl, openMenu, queryAllChips } = renderCombobox(select);
-          openMenu();
-          userEvent.type(inputEl, 'a{space}fruit');
-          expect(inputEl).toHaveValue('a fruit');
-          if (select === 'multiple') {
-            expect(queryAllChips()).toHaveLength(0);
-          }
-        });
-
-        testMultiSelect('Removes Chip when one is focused', () => {
-          const initialValue = ['apple', 'banana', 'carrot'];
-          const { comboboxEl, queryAllChips, queryChipsByName } =
-            renderCombobox(select, {
-              initialValue,
-            });
-          userEvent.type(comboboxEl, '{arrowleft}');
-          const chip = queryChipsByName('Carrot');
-          // Calling `userEvent.type` doesn't fire the necessary `keyDown` event
-          fireEvent.keyDown(chip!, { key: keyMap.Space });
-          waitFor(() => expect(queryAllChips()).toHaveLength(2));
-        });
-      });
-
-      describe('Escape key', () => {
-        test('Closes menu', async () => {
-          const { inputEl, openMenu } = renderCombobox(select);
-          const { menuContainerEl } = openMenu();
-          userEvent.type(inputEl, '{esc}');
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(menuContainerEl).not.toBeInTheDocument();
-        });
-        test('Returns focus to the combobox', async () => {
-          const { inputEl, openMenu } = renderCombobox(select);
-          const { menuContainerEl } = openMenu();
-          userEvent.type(inputEl, '{esc}');
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(inputEl).toContainFocus();
-        });
-      });
-
-      describe('Tab key', () => {
-        test('Focuses combobox but does not open menu', () => {
-          const { getMenuElements, inputEl } = renderCombobox(select);
-          userEvent.tab();
-          expect(inputEl).toHaveFocus();
-          const { menuContainerEl } = getMenuElements();
-          expect(menuContainerEl).not.toBeInTheDocument();
-        });
-
-        test('Closes menu when no selection is made', async () => {
-          const { openMenu } = renderCombobox(select);
-          const { menuContainerEl } = openMenu();
-          userEvent.tab();
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(menuContainerEl).not.toBeInTheDocument();
-        });
-
-        test('Focuses clear button when it exists', async () => {
-          const initialValue = select === 'multiple' ? ['apple'] : 'apple';
-          const { clearButtonEl, openMenu } = renderCombobox(select, {
-            initialValue,
-          });
-          openMenu();
-          userEvent.tab();
-          expect(clearButtonEl).toHaveFocus();
-        });
-
-        testMultiSelect('Focuses next Chip when a Chip is selected', () => {
-          const initialValue = ['apple', 'banana', 'carrot'];
-          const { queryAllChips } = renderCombobox(select, { initialValue });
-          const [firstChip, secondChip] = queryAllChips();
-          userEvent.click(firstChip);
-          userEvent.tab();
-          expect(secondChip).toContainFocus();
-        });
-
-        testMultiSelect('Focuses input when the last Chip is selected', () => {
-          const initialValue = ['apple', 'banana', 'carrot'];
-          const { inputEl, queryChipsByIndex } = renderCombobox(select, {
-            initialValue,
-          });
-          const lastChip = queryChipsByIndex('last');
-          userEvent.click(lastChip!);
-          userEvent.tab();
-          expect(inputEl).toHaveFocus();
-        });
-      });
-
-      describe('Backspace key', () => {
-        test('Deletes text when cursor is NOT at beginning of selection', async () => {
-          const { inputEl } = renderCombobox(select);
-          await userEvent.type(inputEl, 'app{backspace}');
-          expect(inputEl).toHaveFocus();
-          expect(inputEl).toHaveValue('ap');
-        });
-
-        testSingleSelect(
-          'Deletes text after making a single selection',
-          async () => {
-            const { inputEl, openMenu } = renderCombobox('single');
-            const { optionElements, menuContainerEl } = openMenu();
-            const firstOption = optionElements![0];
-            userEvent.click(firstOption);
-            await waitForElementToBeRemoved(menuContainerEl);
-            userEvent.type(inputEl, '{backspace}');
-            expect(inputEl).toHaveFocus();
-            expect(inputEl).toHaveValue('Appl');
-          },
-        );
-
-        testSingleSelect('Re-opens menu after making a selection', async () => {
-          const { inputEl, openMenu, getMenuElements } =
-            renderCombobox('single');
-          const { optionElements, menuContainerEl } = openMenu();
-          const firstOption = optionElements![0];
-          userEvent.click(firstOption);
-          await waitForElementToBeRemoved(menuContainerEl);
-          userEvent.type(inputEl, '{backspace}');
-          await waitFor(() => {
-            const { menuContainerEl: newMenuContainerEl } = getMenuElements();
-            expect(newMenuContainerEl).not.toBeNull();
-            expect(newMenuContainerEl).toBeInTheDocument();
-          });
-        });
-
-        testMultiSelect(
-          'Focuses last chip when cursor is at beginning of selection',
-          () => {
-            const initialValue = ['apple'];
-            const { inputEl, queryAllChips } = renderCombobox(select, {
-              initialValue,
-            });
-            userEvent.type(inputEl, '{backspace}');
-            expect(queryAllChips()).toHaveLength(1);
-            expect(queryAllChips()[0]).toContainFocus();
-          },
-        );
-
-        testMultiSelect('Focuses last Chip after making a selection', () => {
-          const { inputEl, openMenu, queryAllChips } = renderCombobox(select);
-          const { optionElements } = openMenu();
-          const firstOption = optionElements![0];
-          userEvent.click(firstOption);
-          userEvent.type(inputEl, '{backspace}');
-          expect(queryAllChips()).toHaveLength(1);
-          expect(queryAllChips()[0]).toContainFocus();
-        });
-
-        testMultiSelect('Removes Chip when one is focused', async () => {
-          const initialValue = ['apple', 'banana', 'carrot'];
-          const { comboboxEl, queryAllChips, queryChipsByIndex } =
-            renderCombobox(select, {
-              initialValue,
-            });
-          userEvent.type(comboboxEl, '{arrowleft}');
-          const lastChip = queryChipsByIndex(2);
-          // Calling `userEvent.type` doesn't fire the necessary `keyDown` event
-          fireEvent.keyDown(lastChip!, { key: keyMap.Backspace });
-          expect(queryAllChips()).toHaveLength(2);
-        });
-
-        testMultiSelect('Focuses input when last chip is removed', () => {
-          const initialValue = ['apple', 'banana'];
-          const { comboboxEl, inputEl, queryChipsByIndex } = renderCombobox(
-            select,
-            { initialValue },
-          );
-          userEvent.type(comboboxEl, '{arrowleft}');
-          const lastChip = queryChipsByIndex(1);
-          fireEvent.keyDown(lastChip!, { key: keyMap.Backspace });
-          expect(inputEl).toHaveFocus();
-        });
-
-        testMultiSelect(
-          'Focuses next chip when an inner chip is removed',
-          () => {
-            const initialValue = ['apple', 'banana', 'carrot'];
-            const { comboboxEl, queryChipsByIndex } = renderCombobox(select, {
-              initialValue,
-            });
-            userEvent.type(comboboxEl, '{arrowleft}');
-            const appleChip = queryChipsByIndex(0);
-            const bananaChip = queryChipsByIndex(1);
-            fireEvent.keyDown(appleChip!, { key: keyMap.Backspace });
-            expect(bananaChip).toContainFocus();
-          },
-        );
-      });
-
-      describe('Up & Down arrow keys', () => {
-        test('Down arrow moves highlight down', async () => {
-          const { inputEl, openMenu, findByRole } = renderCombobox(select);
-          openMenu();
-          userEvent.type(inputEl, '{arrowdown}');
-          const highlight = await findByRole('option', {
-            selected: true,
-          });
-          expect(highlight).toHaveTextContent('Banana');
-        });
-
-        test('Up arrow moves highlight up', async () => {
-          const { inputEl, openMenu, findByRole } = renderCombobox(select);
-          openMenu();
-          userEvent.type(inputEl, '{arrowdown}{arrowdown}{arrowup}');
-          const highlight = await findByRole('option', {
-            selected: true,
-          });
-          expect(highlight).toHaveTextContent('Banana');
-        });
-
-        test.todo('Down arrow cycles highlight to top');
-
-        test.todo('Up arrow cycles highlight to bottom');
-
-        test('Down arrow key opens menu when its closed', async () => {
-          const { inputEl, openMenu, findByRole } = renderCombobox(select);
-          const { menuContainerEl } = openMenu();
-          expect(inputEl).toHaveFocus();
-          userEvent.type(inputEl, '{esc}');
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(menuContainerEl).not.toBeInTheDocument();
-          userEvent.type(inputEl, '{arrowdown}');
-          const reOpenedMenu = await findByRole('listbox');
-          expect(reOpenedMenu).toBeInTheDocument();
-        });
-
-        test('Pressing Down Arrow when there is a selection shows all menu options', () => {
-          // See also: 'Opening the menu when there is a selection should show all options'
-          const initialValue = select === 'multiple' ? ['apple'] : 'apple';
-          const { inputEl, getMenuElements } = renderCombobox(select, {
-            initialValue,
-          });
-          // First pressing escape to ensure the menu is closed
-          userEvent.type(inputEl, '{esc}{arrowdown}');
-          const { optionElements } = getMenuElements();
-          expect(optionElements).toHaveLength(defaultOptions.length);
-          expect(optionElements![0]).toHaveAttribute('aria-selected', 'true');
-        });
-
-        test('Pressing Up Arrow when there is a selection shows all menu options', () => {
-          // See also: 'Opening the menu when there is a selection should show all options'
-          const initialValue = select === 'multiple' ? ['apple'] : 'apple';
-          const { inputEl, getMenuElements } = renderCombobox(select, {
-            initialValue,
-          });
-          // First pressing escape to ensure the menu is closed
-          userEvent.type(inputEl, '{esc}{arrowup}');
-          const { optionElements } = getMenuElements();
-          expect(optionElements).toHaveLength(defaultOptions.length);
-          expect(optionElements![0]).toHaveAttribute('aria-selected', 'true');
-        });
-      });
-
-      describe('Left arrow key', () => {
-        testMultiSelect(
-          'When cursor is at the beginning of input, Left arrow focuses last chip',
-          () => {
-            const initialValue = ['apple', 'banana', 'carrot'];
-            const { queryChipsByIndex, inputEl } = renderCombobox(select, {
-              initialValue,
-            });
-            userEvent.type(inputEl, '{arrowleft}');
-            const lastChip = queryChipsByIndex('last');
-            expect(lastChip).toContainFocus();
-          },
-        );
-        testSingleSelect(
-          'When cursor is at the beginning of input, Left arrow does nothing',
-          async () => {
-            const { inputEl } = renderCombobox(select);
-            userEvent.type(inputEl, '{arrowleft}');
-            await waitFor(() => expect(inputEl).toHaveFocus());
-          },
-        );
-        test('If cursor is NOT at the beginning of input, Left arrow key moves cursor', async () => {
-          const { inputEl } = renderCombobox(select);
-          userEvent.type(inputEl, 'abc{arrowleft}');
-          await waitFor(() => expect(inputEl).toHaveFocus());
-        });
-
-        test('When focus is on clear button, Left arrow moves focus to input', async () => {
-          const initialValue = select === 'multiple' ? ['apple'] : 'apple';
-          const { inputEl } = renderCombobox(select, {
-            initialValue,
-          });
-          userEvent.type(inputEl!, '{arrowright}{arrowleft}');
-          expect(inputEl!).toHaveFocus();
-          expect(inputEl!.selectionEnd).toEqual(select === 'multiple' ? 0 : 5);
-        });
-
-        testMultiSelect(
-          'When focus is on a chip, Left arrow focuses prev chip',
-          () => {
-            const initialValue = ['apple', 'banana', 'carrot'];
-            const { queryChipsByIndex, inputEl } = renderCombobox(select, {
-              initialValue,
-            });
-            userEvent.type(inputEl, '{arrowleft}{arrowleft}');
-            const secondChip = queryChipsByIndex(1);
-            expect(secondChip).toContainFocus();
-          },
-        );
-        testMultiSelect(
-          'When focus is on the first chip, Left arrrow does nothing',
-          () => {
-            const initialValue = ['apple', 'banana', 'carrot'];
-            const { queryAllChips, inputEl } = renderCombobox(select, {
-              initialValue,
-            });
-            const [firstChip] = queryAllChips();
-            userEvent.type(
-              inputEl,
-              '{arrowleft}{arrowleft}{arrowleft}{arrowleft}',
-            );
-            expect(firstChip).toContainFocus();
-          },
-        );
-      });
-
-      describe('Right arrow key', () => {
-        test('Does nothing when focus is on clear button', () => {
-          const initialValue =
-            select === 'multiple' ? ['apple', 'banana', 'carrot'] : 'apple';
-          const { inputEl, clearButtonEl } = renderCombobox(select, {
-            initialValue,
-          });
-          userEvent.type(inputEl, '{arrowright}{arrowright}');
-          expect(clearButtonEl).toHaveFocus();
-        });
-
-        test('Focuses clear button when cursor is at the end of input', () => {
-          const initialValue =
-            select === 'multiple' ? ['apple', 'banana', 'carrot'] : 'apple';
-          const { inputEl, clearButtonEl } = renderCombobox(select, {
-            initialValue,
-          });
-          userEvent.type(inputEl, '{arrowright}');
-          expect(clearButtonEl).toHaveFocus();
-        });
-
-        test('Moves cursor when cursor is NOT at the end of input', () => {
-          const initialValue =
-            select === 'multiple' ? ['apple', 'banana', 'carrot'] : 'apple';
-          const { inputEl } = renderCombobox(select, {
-            initialValue,
-          });
-          userEvent.type(inputEl, 'abc{arrowleft}{arrowright}');
-          expect(inputEl).toHaveFocus();
-        });
-
-        // FIXME: act warning
-        testMultiSelect('Focuses input when focus is on last chip', () => {
-          const initialValue = ['apple', 'banana'];
-          const { inputEl } = renderCombobox(select, {
-            initialValue,
-          });
-          userEvent.type(
-            inputEl!,
-            'abc{arrowleft}{arrowleft}{arrowleft}{arrowleft}{arrowright}',
-          );
-          expect(inputEl!).toHaveFocus();
-          // This behavior passes in the browser, but not in jest
-          // expect(inputEl!.selectionStart).toEqual(0);
-        });
-
-        // FIXME: act warning
-        testMultiSelect('Focuses input when focus is on only chip', () => {
-          const initialValue = ['apple'];
-          const { inputEl } = renderCombobox(select, {
-            initialValue,
-          });
-          userEvent.type(
-            inputEl!,
-            'abc{arrowleft}{arrowleft}{arrowleft}{arrowleft}{arrowright}',
-          );
-          expect(inputEl!).toHaveFocus();
-          // expect(inputEl!.selectionStart).toEqual(0);
-        });
-
-        // FIXME: act warning
-        testMultiSelect(
-          'Focuses next chip when focus is on an inner chip',
-          () => {
-            const initialValue = ['apple', 'banana', 'carrot'];
-            const { inputEl, queryChipsByIndex } = renderCombobox(select, {
-              initialValue,
-            });
-            userEvent.type(inputEl!, '{arrowleft}{arrowleft}{arrowright}');
-            const lastChip = queryChipsByIndex('last');
-            expect(lastChip!).toContainFocus();
-          },
-        );
-      });
-
-      describe('Any other key', () => {
-        test('Updates the value of the input', () => {
-          const { inputEl } = renderCombobox(select);
-          userEvent.type(inputEl, 'z');
-          expect(inputEl).toHaveValue('z');
-        });
-
-        test('Updates the input when options are highlighted', () => {
-          const { inputEl, openMenu } = renderCombobox(select);
-          openMenu();
-          userEvent.type(inputEl, '{arrowdown}z');
-          expect(inputEl).toHaveValue('z');
-        });
-
-        test("Opens the menu if it's closed", async () => {
-          const { inputEl, openMenu, getMenuElements } = renderCombobox(select);
-          const { menuContainerEl } = openMenu();
-          userEvent.type(inputEl, '{esc}');
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(menuContainerEl).not.toBeInTheDocument();
-          userEvent.type(inputEl, 'a');
-          await waitFor(() => {
-            const { menuContainerEl: newMenuContainerEl } = getMenuElements();
-            expect(newMenuContainerEl).toBeInTheDocument();
-          });
-        });
-
-        testSingleSelect(
-          'Opens the menu after making a selection',
-          async () => {
-            const { inputEl, openMenu, getMenuElements } =
-              renderCombobox(select);
-            const { optionElements, menuContainerEl } = openMenu();
-            const firstOption = optionElements![0];
-            userEvent.click(firstOption);
-            await waitForElementToBeRemoved(menuContainerEl);
-            userEvent.type(inputEl, 'a');
-            await waitFor(() => {
-              const { menuContainerEl: newMenuContainerEl } = getMenuElements();
-              expect(newMenuContainerEl).toBeInTheDocument();
-            });
-          },
-        );
-
-        test('Filters the menu options', () => {
-          // Using default options
-          const { inputEl, getMenuElements } = renderCombobox(select);
-          userEvent.type(inputEl, 'c');
-          const { optionElements } = getMenuElements();
-          expect(optionElements).toHaveLength(1); // carrot
-        });
-      });
-    });
-
     describe('Programmatic interaction', () => {
       test('Menu does not open when input is focused programmatically', () => {
         const { inputEl, getMenuElements } = renderCombobox(select);
@@ -1763,53 +822,4 @@ describe('packages/combobox', () => {
       });
     });
   });
-
-  describe('Chips', () => {
-    const ellipsis = '…';
-    const options = [
-      'loremipsumdolor',
-      'sitametconsectetur',
-      'anotherlongoption',
-    ];
-
-    test('Chips truncate at the beginning', () => {
-      const { queryAllChips } = renderCombobox('multiple', {
-        options,
-        initialValue: ['loremipsumdolor'],
-        chipTruncationLocation: 'start',
-      });
-      const firstChipEl = queryAllChips()[0];
-      expect(firstChipEl).toHaveTextContent(ellipsis + 'psumdolor');
-    });
-
-    test('Chips truncate in the middle', () => {
-      const { queryAllChips } = renderCombobox('multiple', {
-        options,
-        initialValue: ['loremipsumdolor'],
-        chipTruncationLocation: 'middle',
-      });
-      const [firstChipEl] = queryAllChips();
-      expect(firstChipEl).toHaveTextContent('lore' + ellipsis + 'dolor');
-    });
-    test('Chips truncate at the end', () => {
-      const { queryAllChips } = renderCombobox('multiple', {
-        options,
-        initialValue: ['loremipsumdolor'],
-        chipTruncationLocation: 'end',
-      });
-      const [firstChipEl] = queryAllChips();
-      expect(firstChipEl).toHaveTextContent('loremipsu' + ellipsis);
-    });
-
-    test('Chips truncate to the provided length', () => {
-      const { queryAllChips } = renderCombobox('multiple', {
-        options,
-        initialValue: ['loremipsumdolor'],
-        chipTruncationLocation: 'start',
-        chipCharacterLimit: 8,
-      });
-      const [firstChipEl] = queryAllChips();
-      expect(firstChipEl).toHaveTextContent(ellipsis + 'dolor');
-    });
-  });
 });