@transferwise/components 0.0.0-experimental-c46d48c → 0.0.0-experimental-5865548

package/src/common/closeButton/CloseButton.tsx

@@ -15,6 +15,7 @@ export type CloseButtonProps = Pick<
   filled?: boolean;
   isDisabled?: boolean;
   testId?: string;
+  tabIndex?: number;
 };
 
 /**
@@ -29,6 +30,7 @@ export const CloseButton = forwardRef(function CloseButton(
     onClick,
     isDisabled,
     testId,
+    tabIndex,
   }: CloseButtonProps,
   reference: React.ForwardedRef<HTMLButtonElement | null>,
 ) {
@@ -55,6 +57,7 @@ export const CloseButton = forwardRef(function CloseButton(
       aria-disabled={isDisabled}
       disabled={isDisabled}
       data-testid={testId}
+      tabIndex={tabIndex}
       onClick={onClick}
     >
       <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />

package/src/i18n/en.json

@@ -23,8 +23,6 @@
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Select currency",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
-  "neptune.PhoneNumberInput.countryCodeLabel": "Country code",
-  "neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
   "neptune.SelectOption.action.label": "Choose",

package/src/phoneNumberInput/PhoneNumberInput.messages.ts

@@ -5,12 +5,4 @@ export default defineMessages({
     id: 'neptune.PhoneNumberInput.SelectInput.placeholder',
     defaultMessage: 'Select an option...',
   },
-  countryCodeLabel: {
-    id: 'neptune.PhoneNumberInput.countryCodeLabel',
-    defaultMessage: 'Country code',
-  },
-  phoneNumberLabel: {
-    id: 'neptune.PhoneNumberInput.phoneNumberLabel',
-    defaultMessage: 'Phone number',
-  },
 });

package/src/phoneNumberInput/PhoneNumberInput.spec.tsx

@@ -21,30 +21,28 @@ describe('PhoneNumberInput', () => {
   const customRender = (overrides: Partial<PhoneNumberInputProps> = {}, locale?: string) =>
     render(<PhoneNumberInput {...props} {...overrides} />, { locale });
 
-  const getCountryCodeSelect = () => screen.getByRole('combobox');
-  const getCountryCodeLabel = () => screen.getByText('Country code');
-  const getPhoneNumberInput = () => screen.getByRole('textbox');
-  const getPhoneNumberLabel = () => screen.getByText('Phone number');
+  const getPrefixEl = () => screen.getByRole('combobox');
+  const getInputEl = () => screen.getByRole('textbox');
 
   describe('defaults', () => {
     it('should set prefix control to default UK value', () => {
       customRender();
-      expect(getCountryCodeSelect()).toHaveTextContent('+44');
+      expect(getPrefixEl()).toHaveTextContent('+44');
     });
 
     it('should set number control to empty', () => {
       customRender();
-      expect(getPhoneNumberInput()).toHaveValue('');
+      expect(getInputEl()).toHaveValue('');
     });
 
     it('should not disable the select', () => {
       customRender();
-      expect(getCountryCodeSelect()).toBeEnabled();
+      expect(getPrefixEl()).toBeEnabled();
     });
 
     it('should not disable the input', () => {
       customRender();
-      expect(getPhoneNumberInput()).toBeEnabled();
+      expect(getInputEl()).toBeEnabled();
     });
   });
 
@@ -52,54 +50,22 @@ describe('PhoneNumberInput', () => {
     const prefix = '+39';
     const number = '123456789';
     customRender({ initialValue: `${prefix}${number}` });
-    expect(getCountryCodeSelect()).toHaveTextContent(prefix);
-    expect(getPhoneNumberInput()).toHaveValue(number);
+    expect(getPrefixEl()).toHaveTextContent(prefix);
+    expect(getInputEl()).toHaveValue(number);
   });
 
   describe('id prop', () => {
-    it('should render sensible default IDs', () => {
+    it('should not render id by default', () => {
       customRender();
-      const countryCodeSelectID = getCountryCodeSelect().getAttribute('id');
-      expect(countryCodeSelectID).toMatch(/^country-code-select-[a-z0-9]{6}$/);
-      const countryCodeLabelID = getCountryCodeLabel().getAttribute('id');
-      expect(countryCodeLabelID).toMatch(/^country-code-label-[a-z0-9]{6}$/);
-      const phoneNumberInputID = getPhoneNumberInput().getAttribute('id');
-      expect(phoneNumberInputID).toMatch(/^phone-number-input-[a-z0-9]{6}$/);
-      const phoneNumberLabelID = getPhoneNumberLabel().getAttribute('id');
-      expect(phoneNumberLabelID).toMatch(/^phone-number-label-[a-z0-9]{6}$/);
+      expect(getPrefixEl()).not.toHaveAttribute('id');
+      expect(getInputEl()).not.toHaveAttribute('id');
     });
 
-    it('should use the custom `id` as-is for the input but with slight modification for select', () => {
+    it('should respect `id` for the input and ignore the select', () => {
       const id = 'component-id';
       customRender({ id });
-      expect(getPhoneNumberInput()).toHaveAttribute('id', id);
-      expect(getPhoneNumberLabel()).toHaveAttribute('id', `${id}-phone-number-label`);
-      expect(getCountryCodeSelect()).toHaveAttribute('id', `${id}-country-code-select`);
-      expect(getCountryCodeLabel()).toHaveAttribute('id', `${id}-country-code-label`);
-    });
-
-    it('should set correct ARIA attributes on the country code select when id is provided', () => {
-      const id = 'my-id';
-      customRender({ id });
-      expect(getCountryCodeSelect()).toHaveAttribute('aria-labelledby', `${id}-country-code-label`);
-    });
-
-    it('should set correct ARIA attributes on the country code select when id is not provided', () => {
-      customRender();
-      const selectLabelledBy = getCountryCodeSelect().getAttribute('aria-labelledby');
-      expect(selectLabelledBy).toMatch(/^country-code-label-[a-z0-9]{6}$/);
-    });
-
-    it('should set correct ARIA attributes on the phone number input when id is provided', () => {
-      const id = 'my-id';
-      customRender({ id });
-      expect(getPhoneNumberInput()).toHaveAttribute('aria-labelledby', `${id}-phone-number-label`);
-    });
-
-    it('should set correct ARIA attributes on the phone number input when id is not provided', () => {
-      customRender();
-      const inputLabelledBy = getPhoneNumberInput().getAttribute('aria-labelledby');
-      expect(inputLabelledBy).toMatch(/^phone-number-label-[a-z0-9]{6}$/);
+      expect(getPrefixEl()).not.toHaveAttribute('id');
+      expect(getInputEl()).toHaveAttribute('id', id);
     });
   });
 
@@ -128,38 +94,38 @@ describe('PhoneNumberInput', () => {
       it(`'${number}' number should update the value properly`, async () => {
         await renderAndPaste(number);
 
-        expect(getCountryCodeSelect()).toHaveTextContent(countryCode);
-        expect(getPhoneNumberInput()).toHaveValue(localNumber);
+        expect(getPrefixEl()).toHaveTextContent(countryCode);
+        expect(getInputEl()).toHaveValue(localNumber);
         expect(props.onChange).toHaveBeenCalledWith(number.replace(/[\s-]+/g, ''), countryCode);
       });
     });
 
     it('should not paste invalid characters', async () => {
       await renderAndPaste('+36asdasdasd');
-      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
-      expect(getPhoneNumberInput()).toHaveValue(initialNumber);
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(initialNumber);
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it('should not paste countries which are not in the select', async () => {
       await renderAndPaste('+9992342343423');
-      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
-      expect(getPhoneNumberInput()).toHaveValue(initialNumber);
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(initialNumber);
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should not paste numbers which doesn't start with the country code", async () => {
       await renderAndPaste('0+36303932551');
-      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
-      expect(getPhoneNumberInput()).toHaveValue(initialNumber);
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(initialNumber);
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should allow pasting numbers which don't contain a country code", async () => {
       const newNumber = '06303932551';
       await renderAndPaste(newNumber);
-      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
-      expect(getPhoneNumberInput()).toHaveValue(newNumber);
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(newNumber);
       expect(props.onChange).toHaveBeenCalledWith(`${initialPrefix}${newNumber}`, initialPrefix);
     });
   });
@@ -170,12 +136,12 @@ describe('PhoneNumberInput', () => {
 
       it('should set the select to the longest matching prefix', () => {
         customRender(initialProps);
-        expect(getCountryCodeSelect()).toHaveTextContent('+1868');
+        expect(getPrefixEl()).toHaveTextContent('+1868');
       });
 
       it('should set the number input to the rest of the number', () => {
         customRender(initialProps);
-        expect(getPhoneNumberInput()).toHaveValue('123456789');
+        expect(getInputEl()).toHaveValue('123456789');
       });
     });
 
@@ -184,20 +150,20 @@ describe('PhoneNumberInput', () => {
 
       it('should empty the select', () => {
         customRender(initialProps);
-        expect(getCountryCodeSelect()).toHaveTextContent('Select an option...');
+        expect(getPrefixEl()).toHaveTextContent('Select an option...');
       });
 
       it('should put the whole value in the input without the plus', () => {
         customRender(initialProps);
-        expect(getPhoneNumberInput()).toHaveValue('999123456789');
+        expect(getInputEl()).toHaveValue('999123456789');
       });
     });
 
     describe('when an partial model is supplied (with a matching prefix)', () => {
       it('should set the select to the matching prefix and put the rest of the number in the suffix', () => {
         customRender({ initialValue: '+123' });
-        expect(getCountryCodeSelect()).toHaveTextContent('+1');
-        expect(getPhoneNumberInput()).toHaveValue('23');
+        expect(getPrefixEl()).toHaveTextContent('+1');
+        expect(getInputEl()).toHaveValue('23');
       });
     });
   });
@@ -205,8 +171,8 @@ describe('PhoneNumberInput', () => {
   describe('when disabled is true', () => {
     it('should disable both controls', () => {
       customRender({ disabled: true });
-      expect(getCountryCodeSelect()).toBeDisabled();
-      expect(getPhoneNumberInput()).toBeDisabled();
+      expect(getPrefixEl()).toBeDisabled();
+      expect(getInputEl()).toBeDisabled();
     });
   });
 
@@ -214,13 +180,13 @@ describe('PhoneNumberInput', () => {
     it('should use the provided placeholder', () => {
       const placeholder = 'custom placeholder';
       customRender({ placeholder });
-      expect(getPhoneNumberInput()).toHaveAttribute('placeholder', placeholder);
+      expect(getInputEl()).toHaveAttribute('placeholder', placeholder);
     });
 
     it('should use the provided searchPlaceholder', async () => {
       const searchPlaceholder = 'search placeholder';
       customRender({ searchPlaceholder });
-      await userEvent.click(getCountryCodeSelect());
+      await userEvent.click(getPrefixEl());
       expect(screen.getByRole('combobox', { name: searchPlaceholder })).toBeInTheDocument();
     });
   });
@@ -229,7 +195,7 @@ describe('PhoneNumberInput', () => {
     describe('and a value', () => {
       it('should use the prefix of the supplied value', () => {
         customRender({ initialValue: '+12345678' }, 'es');
-        expect(getCountryCodeSelect()).toHaveTextContent('+1');
+        expect(getPrefixEl()).toHaveTextContent('+1');
       });
     });
 
@@ -237,14 +203,14 @@ describe('PhoneNumberInput', () => {
       describe('and no country code', () => {
         it('should default the prefix to the local country', () => {
           customRender(undefined, 'es');
-          expect(getCountryCodeSelect()).toHaveTextContent('+34');
+          expect(getPrefixEl()).toHaveTextContent('+34');
         });
       });
 
       describe('and country code', () => {
         it('should override locale prefix with country specific prefix', () => {
           customRender({ countryCode: 'US' }, 'es');
-          expect(getCountryCodeSelect()).toHaveTextContent('+1');
+          expect(getPrefixEl()).toHaveTextContent('+1');
         });
       });
     });
@@ -254,7 +220,7 @@ describe('PhoneNumberInput', () => {
     describe('valid number', () => {
       it('should trigger onChange handler', async () => {
         customRender();
-        await userEvent.type(getPhoneNumberInput(), '123');
+        await userEvent.type(getInputEl(), '123');
         expect(props.onChange).toHaveBeenCalledWith('+44123', '+44');
       });
     });
@@ -262,7 +228,7 @@ describe('PhoneNumberInput', () => {
     describe('invalid number', () => {
       it('should trigger onChange with null value', async () => {
         customRender({ initialValue: '+1234' });
-        await userEvent.type(getPhoneNumberInput(), '{Backspace}{Backspace}{Backspace}1');
+        await userEvent.type(getInputEl(), '{Backspace}{Backspace}{Backspace}1');
         expect(props.onChange).toHaveBeenCalledWith(null, '+1');
       });
     });
@@ -270,7 +236,7 @@ describe('PhoneNumberInput', () => {
     describe('when user insert invalid character', () => {
       it('should strip them', async () => {
         customRender({ initialValue: '+12345678' });
-        await userEvent.type(getPhoneNumberInput(), '123--');
+        await userEvent.type(getInputEl(), '123--');
         expect(props.onChange).toHaveBeenCalledWith('+12345678123', '+1');
       });
     });
@@ -278,8 +244,8 @@ describe('PhoneNumberInput', () => {
     describe('overlapping prefix and suffix numbers', () => {
       it("shouldn't change the prefix number on matching suffix input", async () => {
         customRender({ countryCode: 'eg' });
-        await userEvent.type(getPhoneNumberInput(), '1111111');
-        expect(getPhoneNumberInput()).toHaveValue('1111111');
+        await userEvent.type(getInputEl(), '1111111');
+        expect(getInputEl()).toHaveValue('1111111');
         expect(props.onChange).toHaveBeenCalledWith('+201111111', '+20');
       });
     });
@@ -288,7 +254,7 @@ describe('PhoneNumberInput', () => {
   describe('when selectProps is supplied', () => {
     it('renders Select component with expected props', () => {
       customRender({ selectProps: { className: 'custom-class' } });
-      expect(getCountryCodeSelect().parentElement).toHaveClass('custom-class');
+      expect(getPrefixEl().parentElement).toHaveClass('custom-class');
     });
   });
 

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { useInputAttributes } from '../inputs/contexts';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
+
 import messages from './PhoneNumberInput.messages';
 import countries from './data/countries';
 import {
@@ -63,25 +64,6 @@ const PhoneNumberInput = ({
 
   const { locale, formatMessage } = useIntl();
 
-  const createId = (customID: string | undefined, backup: string): string => {
-    if (customID) {
-      return customID + (backup ? `-${backup}` : '');
-    }
-    const random = Math.random().toString(36).slice(2, 8);
-    return `${backup}-${random}`;
-  };
-
-  const ids = {
-    countryCode: {
-      label: createId(id, 'country-code-label'),
-      select: createId(id, 'country-code-select'),
-    },
-    phoneNumber: {
-      label: createId(id, 'phone-number-label'),
-      input: createId(id, id ? '' : 'phone-number-input'),
-    },
-  };
-
   const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
     const cleanValue = initialValue ? cleanNumber(initialValue) : null;
 
@@ -169,9 +151,6 @@ const PhoneNumberInput = ({
       aria-labelledby={ariaLabelledBy}
       className="tw-telephone"
     >
-      <label className="sr-only" id={ids.countryCode.label}>
-        {formatMessage(messages.countryCodeLabel)}
-      </label>
       <div className="tw-telephone__country-select">
         <SelectInput
           placeholder={formatMessage(messages.selectInputPlaceholder)}
@@ -202,13 +181,6 @@ const PhoneNumberInput = ({
           filterPlaceholder={searchPlaceholder}
           disabled={disabled}
           size={size}
-          id={ids.countryCode.select}
-          UNSAFE_triggerButtonProps={{
-            id: ids.countryCode.select,
-            'aria-labelledby': ids.countryCode.label,
-            'aria-describedby': undefined,
-            'aria-invalid': undefined,
-          }}
           onChange={(prefix) => {
             const country = prefix != null ? findCountryByPrefix(prefix) : null;
             setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));
@@ -221,13 +193,10 @@ const PhoneNumberInput = ({
           {...selectProps}
         />
       </div>
-      <label className="sr-only" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>
-        {formatMessage(messages.phoneNumberLabel)}
-      </label>
       <div className="tw-telephone__number-input">
         <div className={`input-group input-group-${size}`}>
           <Input
-            id={ids.phoneNumber.input}
+            id={id}
             autoComplete="tel-national"
             name="phoneNumber"
             inputMode="numeric"
@@ -235,7 +204,6 @@ const PhoneNumberInput = ({
             disabled={disabled}
             required={required}
             placeholder={placeholder}
-            aria-labelledby={ids.phoneNumber.label}
             onChange={onSuffixChange}
             onPaste={onPaste}
             onFocus={onFocus}

package/src/test-utils/jest.setup.ts

@@ -1,14 +1,10 @@
 import util from 'node:util';
 import '@testing-library/jest-dom';
 
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import Enzyme from 'enzyme';
 import fetchMock from 'jest-fetch-mock';
 
 global.fetch = fetchMock as unknown as typeof global.fetch;
 
-Enzyme.configure({ adapter: new Adapter() });
-
 global.requestAnimationFrame = (callback: (time: number) => void): number => {
   callback(performance.now());
   return 0;

package/src/typeahead/Typeahead.spec.tsx

@@ -0,0 +1,182 @@
+import { Field } from '../field/Field';
+import { mockMatchMedia, render, screen, fireEvent } from '../test-utils';
+import { wait } from '../test-utils/wait';
+import Typeahead from './Typeahead';
+
+mockMatchMedia();
+
+describe('Typeahead', () => {
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field id="test" label="Tags">
+        <Typeahead id="test" name="test" options={[{ label: 'Test' }]} onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Tags/);
+  });
+
+  describe('when no options are provided', () => {
+    it('does not render a dropdown when no options and no footer are provided', () => {
+      render(
+        <Field id="test" label="Tags">
+          <Typeahead id="test" name="test" options={[]} onChange={() => {}} />
+        </Field>,
+      );
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    });
+    it('does render a dropdown when only a footer is provided', () => {
+      render(
+        <Field id="test" label="Tags">
+          <Typeahead id="test" name="test" options={[]} footer={<p>hello</p>} onChange={() => {}} />
+        </Field>,
+      );
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+  });
+
+  it('renders input with placeholder', () => {
+    render(
+      <Typeahead id="test" name="test" options={[]} placeholder="Type here" onChange={() => {}} />,
+    );
+    expect(screen.getByPlaceholderText('Type here')).toBeInTheDocument();
+  });
+
+  it('renders chips when multiple is true and selected has items', () => {
+    const initialValue = [{ label: 'Chip 1' }, { label: 'Chip 2' }];
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        multiple
+        initialValue={initialValue}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByText('Chip 1')).toBeInTheDocument();
+    expect(screen.getByText('Chip 2')).toBeInTheDocument();
+  });
+
+  it('calls onChange when selecting an option', () => {
+    const onChange = jest.fn();
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[{ label: 'Option 1' }, { label: 'Option 2' }]}
+        minQueryLength={0}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByRole('combobox');
+    fireEvent.change(input, { target: { value: 'Option 1' } });
+    fireEvent.click(screen.getByText('Option 1'));
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('shows clear button when there is a value', () => {
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        initialValue={[{ label: 'Chip' }]}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /clear/i })).toBeInTheDocument();
+  });
+
+  it('clears value when clear button is clicked', () => {
+    const onChange = jest.fn();
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        initialValue={[{ label: 'Chip' }]}
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /clear/i }));
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it('shows InlineAlert when alert prop is provided', () => {
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        alert={{ message: 'Something went wrong', type: 'error' }}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('calls onFocus when input is focused', () => {
+    const onFocus = jest.fn();
+    render(<Typeahead id="test" name="test" options={[]} onChange={() => {}} onFocus={onFocus} />);
+    fireEvent.focus(screen.getByRole('combobox'));
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it('calls onInputChange when input value changes', () => {
+    const onInputChange = jest.fn();
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        minQueryLength={0}
+        onChange={() => {}}
+        onInputChange={onInputChange}
+      />,
+    );
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'abc' } });
+    expect(onInputChange).toHaveBeenCalledWith('abc');
+  });
+
+  it('calls onSearch when input value changes', async () => {
+    const onSearch = jest.fn();
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        minQueryLength={0}
+        onChange={() => {}}
+        onSearch={onSearch}
+      />,
+    );
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'abc' } });
+    // wait for debounce
+    await wait(500);
+    expect(onSearch).toHaveBeenCalledWith('abc');
+  });
+
+  it('adds a new chip when allowNew and multiple are true and separator is pasted', () => {
+    const onChange = jest.fn();
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        allowNew
+        multiple
+        chipSeparators={[',']}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByRole('combobox');
+    fireEvent.paste(input, {
+      clipboardData: {
+        getData: () => 'foo,bar',
+      },
+    });
+    expect(onChange).toHaveBeenCalledWith(
+      expect.arrayContaining([{ label: 'foo' }, { label: 'bar' }]),
+    );
+  });
+});