@transferwise/components 46.97.5 → 46.98.0

package/src/phoneNumberInput/PhoneNumberInput.spec.tsx

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

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -4,7 +4,6 @@ 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 {
@@ -64,6 +63,25 @@ 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;
 
@@ -151,6 +169,9 @@ 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)}
@@ -181,6 +202,13 @@ 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 }));
@@ -193,10 +221,13 @@ 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={id}
+            id={ids.phoneNumber.input}
             autoComplete="tel-national"
             name="phoneNumber"
             inputMode="numeric"
@@ -204,6 +235,7 @@ const PhoneNumberInput = ({
             disabled={disabled}
             required={required}
             placeholder={placeholder}
+            aria-labelledby={ids.phoneNumber.label}
             onChange={onSuffixChange}
             onPaste={onPaste}
             onFocus={onFocus}

package/src/promoCard/__snapshots__/PromoCard.spec.tsx.snap

@@ -23,6 +23,7 @@ exports[`PromoCard matches snapshot 1`] = `
     <img
       alt="Test Image"
       class="tw-image tw-image__stretch tw-image__shrink"
+      loading="lazy"
       src="test.jpg"
     />
   </div>

package/src/promoCard/__snapshots__/PromoCardGroup.spec.tsx.snap

@@ -33,6 +33,7 @@ exports[`PromoCardGroup matches snapshot 1`] = `
       <img
         alt=""
         class="tw-image tw-image__stretch tw-image__shrink"
+        loading="lazy"
         src="https://via.placeholder.com/150"
       />
     </div>
@@ -67,6 +68,7 @@ exports[`PromoCardGroup matches snapshot 1`] = `
       <img
         alt=""
         class="tw-image tw-image__stretch tw-image__shrink"
+        loading="lazy"
         src="https://via.placeholder.com/150"
       />
     </div>

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' }]),
+    );
+  });
+});