@transferwise/components 0.0.0-experimental-50e1f17 → 0.0.0-experimental-08d336e

package/src/moneyInput/MoneyInput.spec.js

@@ -1,10 +1,11 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { shallow } from 'enzyme';
 
-import { MoneyInput, Title, Input, SelectInput } from '..';
-import { mockMatchMedia, mockResizeObserver } from '../test-utils';
+import { Select, MoneyInput, Title, Input } from '..';
+import { mockMatchMedia } from '../test-utils';
 
 mockMatchMedia();
-mockResizeObserver();
 
 jest.mock('./currencyFormatting', () => ({
   parseAmount: jest.fn(),
@@ -85,7 +86,7 @@ describe('Money Input', () => {
   });
 
   function currencySelect() {
-    return component.find(SelectInput);
+    return component.find(Select);
   }
 
   function fixedCurrencyDisplay() {
@@ -98,11 +99,7 @@ describe('Money Input', () => {
   }
 
   function displayedCurrencies() {
-    return currencySelect().prop('items');
-  }
-
-  function getFooter() {
-    return currencySelect().prop('renderFooter');
+    return currencySelect().prop('options');
   }
 
   function amountInput() {
@@ -128,86 +125,31 @@ describe('Money Input', () => {
 
   it('renders a select with all the currencies as options', () => {
     expect(currencySelect()).toHaveLength(1);
-    expect(displayedCurrencies()).toStrictEqual([
-      {
-        type: 'group',
-        label: 'Popular currencies',
-        options: [
-          {
-            type: 'option',
-            value: {
-              value: 'EUR',
-              label: 'EUR',
-              note: 'Euro',
-              currency: 'eur',
-              searchable: 'Spain, Germany, France, Austria, Estonia',
-            },
-            filterMatchers: ['EUR', 'EUR', 'Euro', 'Spain, Germany, France, Austria, Estonia'],
-          },
-          {
-            type: 'option',
-            value: {
-              value: 'USD',
-              label: 'USD',
-              note: 'United States dollar',
-              currency: 'usd',
-              searchable: 'Hong Kong, Saudi Arabia',
-            },
-            filterMatchers: ['USD', 'USD', 'United States dollar', 'Hong Kong, Saudi Arabia'],
-          },
-          {
-            type: 'option',
-            value: {
-              value: 'GBP',
-              label: 'GBP',
-              note: 'British pound',
-              currency: 'gbp',
-              searchable: 'England, Scotland, Wales',
-            },
-            filterMatchers: ['GBP', 'GBP', 'British pound', 'England, Scotland, Wales'],
-          },
-        ],
-      },
-      {
-        type: 'group',
-        label: 'Some other currencies',
-        options: [
-          {
-            type: 'option',
-            value: {
-              value: 'CAD',
-              label: 'CAD',
-              note: 'Canadian dollar',
-              currency: 'cad',
-            },
-            filterMatchers: ['CAD', 'CAD', 'Canadian dollar', undefined],
-          },
-          {
-            type: 'option',
-            value: {
-              value: 'AUD',
-              label: 'AUD',
-              note: 'Australian dollar',
-              currency: 'aud',
-            },
-            filterMatchers: ['AUD', 'AUD', 'Australian dollar', undefined],
-          },
-        ],
-      },
-    ]);
+    expect(displayedCurrencies()).toStrictEqual(props.currencies);
+  });
+
+  it('renders a Select component with expected id when id is provided', () => {
+    let componentWithId = shallow(<MoneyInput id="mock-id" {...props} />).dive();
+    const select = componentWithId.find('Select');
+
+    expect(select.prop('id')).toBe('mock-id-select');
   });
 
   it('renders Select component with undefined id when id is not provided', () => {
-    const select = component.find('SelectInput');
+    const select = component.find('Select');
 
     expect(select.prop('id')).toBeUndefined();
   });
 
   it('shows the currently active currency as active and hides its note', () => {
-    expect(currencySelect().prop('value')).toStrictEqual({
+    expect(currencySelect().prop('selected')).toStrictEqual({
       value: 'EUR',
-      label: 'EUR',
-      note: 'Euro',
+      label: (
+        <Title as="span" type="title-subsection" className="tw-money-input__text">
+          EUR
+        </Title>
+      ),
+      note: null,
       currency: 'eur',
       searchable: 'Spain, Germany, France, Austria, Estonia',
     });
@@ -231,7 +173,22 @@ describe('Money Input', () => {
     });
   });
 
+  it('configures the select visually correctly', () => {
+    const options = currencySelect().props();
+
+    expect(options.required).toBe(true);
+    expect(options.dropdownWidth).toBe('lg');
+    expect(options.inverse).toBe(true);
+  });
+
   describe('when searching', () => {
+    it('passes search value to currency select', () => {
+      expect(currencySelect().prop('searchValue')).toBe('');
+
+      searchCurrencies('EEK');
+      expect(currencySelect().prop('searchValue')).toBe('EEK');
+    });
+
     it('hides headers', () => {
       currencies = [
         { header: 'A currency' },
@@ -240,43 +197,12 @@ describe('Money Input', () => {
         { value: 'EUR', label: 'Euro' },
       ];
       component.setProps({ currencies });
-      expect(displayedCurrencies()).toStrictEqual([
-        {
-          type: 'group',
-          label: 'A currency',
-          options: [
-            {
-              type: 'option',
-              value: { value: 'GBP', label: 'British pound' },
-              filterMatchers: ['GBP', 'British pound', undefined, undefined],
-            },
-          ],
-        },
-        {
-          type: 'group',
-          label: 'Another currency',
-          options: [
-            {
-              type: 'option',
-              value: { value: 'EUR', label: 'Euro' },
-              filterMatchers: ['EUR', 'Euro', undefined, undefined],
-            },
-          ],
-        },
-      ]);
+      expect(displayedCurrencies()).toStrictEqual(currencies);
 
       searchCurrencies('O');
       expect(displayedCurrencies()).toStrictEqual([
-        {
-          type: 'option',
-          value: { value: 'GBP', label: 'British pound' },
-          filterMatchers: ['GBP', 'British pound', undefined, undefined],
-        },
-        {
-          type: 'option',
-          value: { value: 'EUR', label: 'Euro' },
-          filterMatchers: ['EUR', 'Euro', undefined, undefined],
-        },
+        { value: 'GBP', label: 'British pound' },
+        { value: 'EUR', label: 'Euro' },
       ]);
     });
 
@@ -286,27 +212,10 @@ describe('Money Input', () => {
         { value: 'EUR', label: 'Euro' },
       ];
       component.setProps({ currencies });
-      expect(displayedCurrencies()).toStrictEqual([
-        {
-          type: 'option',
-          value: { value: 'GBP', label: 'British pound' },
-          filterMatchers: ['GBP', 'British pound', undefined, undefined],
-        },
-        {
-          type: 'option',
-          value: { value: 'EUR', label: 'Euro' },
-          filterMatchers: ['EUR', 'Euro', undefined, undefined],
-        },
-      ]);
+      expect(displayedCurrencies()).toStrictEqual(currencies);
 
       searchCurrencies('P');
-      expect(displayedCurrencies()).toStrictEqual([
-        {
-          type: 'option',
-          value: { value: 'GBP', label: 'British pound' },
-          filterMatchers: ['GBP', 'British pound', undefined, undefined],
-        },
-      ]);
+      expect(displayedCurrencies()).toStrictEqual([{ value: 'GBP', label: 'British pound' }]);
     });
 
     it('searches by note', () => {
@@ -315,27 +224,10 @@ describe('Money Input', () => {
         { value: 'EUR', note: 'Other money' },
       ];
       component.setProps({ currencies });
-      expect(displayedCurrencies()).toStrictEqual([
-        {
-          type: 'option',
-          value: { value: 'GBP', note: 'Queen money' },
-          filterMatchers: ['GBP', undefined, 'Queen money', undefined],
-        },
-        {
-          type: 'option',
-          value: { value: 'EUR', note: 'Other money' },
-          filterMatchers: ['EUR', undefined, 'Other money', undefined],
-        },
-      ]);
+      expect(displayedCurrencies()).toStrictEqual(currencies);
 
       searchCurrencies('Other');
-      expect(displayedCurrencies()).toStrictEqual([
-        {
-          type: 'option',
-          value: { value: 'EUR', note: 'Other money' },
-          filterMatchers: ['EUR', undefined, 'Other money', undefined],
-        },
-      ]);
+      expect(displayedCurrencies()).toStrictEqual([{ value: 'EUR', note: 'Other money' }]);
     });
 
     it('searches by searchable string', () => {
@@ -344,26 +236,11 @@ describe('Money Input', () => {
         { value: 'EUR', searchable: 'Europe' },
       ];
       component.setProps({ currencies });
-      expect(displayedCurrencies()).toStrictEqual([
-        {
-          type: 'option',
-          value: { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-          filterMatchers: ['GBP', undefined, undefined, 'Great Britain, United Kingdom'],
-        },
-        {
-          type: 'option',
-          value: { value: 'EUR', searchable: 'Europe' },
-          filterMatchers: ['EUR', undefined, undefined, 'Europe'],
-        },
-      ]);
+      expect(displayedCurrencies()).toStrictEqual(currencies);
 
       searchCurrencies('Britain');
       expect(displayedCurrencies()).toStrictEqual([
-        {
-          type: 'option',
-          value: { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-          filterMatchers: ['GBP', undefined, undefined, 'Great Britain, United Kingdom'],
-        },
+        { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
       ]);
     });
 
@@ -372,73 +249,51 @@ describe('Money Input', () => {
         { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
         { value: 'EUR', searchable: 'Europe' },
       ];
+      const CUSTOM_ACTION = 'CUSTOM_ACTION';
       component.setProps({
         currencies,
         onCustomAction: jest.fn(),
         customActionLabel: 'I am a label',
       });
       expect(displayedCurrencies()).toStrictEqual([
-        {
-          type: 'option',
-          value: { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-          filterMatchers: ['GBP', undefined, undefined, 'Great Britain, United Kingdom'],
-        },
-        {
-          type: 'option',
-          value: { value: 'EUR', searchable: 'Europe' },
-          filterMatchers: ['EUR', undefined, undefined, 'Europe'],
-        },
+        ...currencies,
+        { value: CUSTOM_ACTION, label: 'I am a label' },
       ]);
 
       searchCurrencies('Britain');
       expect(displayedCurrencies()).toStrictEqual([
-        {
-          type: 'option',
-          value: { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-          filterMatchers: ['GBP', undefined, undefined, 'Great Britain, United Kingdom'],
-        },
+        { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
+        { value: CUSTOM_ACTION, label: 'I am a label' },
       ]);
 
       searchCurrencies('Random search string');
-      expect(displayedCurrencies()).toHaveLength(0);
-      const footerNode = shallow(getFooter()()).find('div');
-      expect(footerNode).not.toBeNull();
+      expect(displayedCurrencies()).toStrictEqual([
+        { value: CUSTOM_ACTION, label: 'I am a label' },
+      ]);
     });
 
     it('sorts labels to first', () => {
       searchCurrencies('au');
       expect(displayedCurrencies()).toStrictEqual([
         {
-          type: 'option',
-          value: {
-            value: 'AUD',
-            label: 'AUD',
-            note: 'Australian dollar',
-            currency: 'aud',
-          },
-          filterMatchers: ['AUD', 'AUD', 'Australian dollar', undefined],
+          value: 'AUD',
+          label: 'AUD',
+          note: 'Australian dollar',
+          currency: 'aud',
         },
         {
-          type: 'option',
-          value: {
-            value: 'EUR',
-            label: 'EUR',
-            note: 'Euro',
-            currency: 'eur',
-            searchable: 'Spain, Germany, France, Austria, Estonia',
-          },
-          filterMatchers: ['EUR', 'EUR', 'Euro', 'Spain, Germany, France, Austria, Estonia'],
+          value: 'EUR',
+          label: 'EUR',
+          note: 'Euro',
+          currency: 'eur',
+          searchable: 'Spain, Germany, France, Austria, Estonia',
         },
         {
-          type: 'option',
-          value: {
-            value: 'USD',
-            label: 'USD',
-            note: 'United States dollar',
-            currency: 'usd',
-            searchable: 'Hong Kong, Saudi Arabia',
-          },
-          filterMatchers: ['USD', 'USD', 'United States dollar', 'Hong Kong, Saudi Arabia'],
+          value: 'USD',
+          label: 'USD',
+          note: 'United States dollar',
+          currency: 'usd',
+          searchable: 'Hong Kong, Saudi Arabia',
         },
       ]);
     });
@@ -582,24 +437,18 @@ describe('Money Input', () => {
 
   it('uses the passed in search placeholder', () => {
     component.setProps({ searchPlaceholder: 'a placeholder' });
-    expect(currencySelect().prop('filterPlaceholder')).toBe('a placeholder');
+    expect(currencySelect().prop('searchPlaceholder')).toBe('a placeholder');
   });
 
   it('clears the search value when selecting an option', () => {
-    const onSearchChange = jest.fn();
-    component.setProps({ onSearchChange });
     searchCurrencies('eur');
-    expect(onSearchChange).toHaveBeenLastCalledWith({
-      searchQuery: 'eur',
-      filteredOptions: [props.currencies[1]],
-    });
+    expect(currencySelect().prop('options')).toHaveLength(1);
+    expect(currencySelect().prop('searchValue')).toBe('eur');
 
     currencySelect().prop('onChange')(props.currencies[1]);
     component.update();
-    expect(onSearchChange).toHaveBeenLastCalledWith({
-      searchQuery: '',
-      filteredOptions: [...props.currencies],
-    });
+    expect(currencySelect().prop('options')).toHaveLength(7);
+    expect(currencySelect().prop('searchValue')).toBe('');
   });
 
   it('shows custom action last when onCustomAction prop is passed to MoneyInput', () => {
@@ -607,25 +456,21 @@ describe('Money Input', () => {
       { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
       { value: 'EUR', searchable: 'Europe' },
     ];
-    const onCustomActionMock = jest.fn();
     component.setProps({
       currencies,
-      onCustomAction: onCustomActionMock,
+      onCustomAction: jest.fn(),
       customActionLabel: 'Label boy',
     });
 
-    const options = displayedCurrencies();
-
-    expect(options).toHaveLength(2);
-    expect(options[0].value).toStrictEqual(currencies[0]);
-    expect(options[1].value).toStrictEqual(currencies[1]);
-
-    const footerNode = shallow(getFooter()()).find('div');
+    expect(displayedCurrencies()).toStrictEqual([
+      ...currencies,
+      { value: 'CUSTOM_ACTION', label: 'Label boy' },
+    ]);
 
-    expect(footerNode.prop('role')).toBe('button');
-    expect(onCustomActionMock).toHaveBeenCalledTimes(0);
-    footerNode.simulate('click');
-    expect(onCustomActionMock).toHaveBeenCalledTimes(1);
+    expect(displayedCurrencies()[displayedCurrencies().length - 1]).toStrictEqual({
+      value: 'CUSTOM_ACTION',
+      label: 'Label boy',
+    });
   });
 
   it('calls onCustomAction callback when custom action is selected', () => {
@@ -634,9 +479,7 @@ describe('Money Input', () => {
     expect(onCustomAction).not.toHaveBeenCalled();
     expect(props.onCurrencyChange).not.toHaveBeenCalled();
 
-    const footerNode = shallow(getFooter()()).find('div');
-    expect(onCustomAction).toHaveBeenCalledTimes(0);
-    footerNode.simulate('click');
+    currencySelect().prop('onChange')({ value: 'CUSTOM_ACTION', label: '' });
     expect(onCustomAction).toHaveBeenCalledTimes(1);
     expect(props.onCurrencyChange).toHaveBeenCalledTimes(0);
   });
@@ -705,8 +548,7 @@ describe('Money Input', () => {
         filteredOptions: [getCurrencyByValue('EUR')],
       });
 
-      const footerNode = shallow(getFooter()()).find('div');
-      footerNode.simulate('click');
+      currencySelect().prop('onChange')({ value: 'CUSTOM_ACTION' });
       expect(onCustomAction).toHaveBeenCalledTimes(1);
       expect(onSearchChange).toHaveBeenLastCalledWith({
         searchQuery: '',
@@ -715,6 +557,33 @@ describe('Money Input', () => {
     });
   });
 
+  describe('when typing', () => {
+    let rtlComponent;
+    const { formatAmount } = jest.requireActual('./currencyFormatting');
+    beforeAll(() => {
+      numberFormatting.formatAmount = formatAmount;
+    });
+
+    beforeEach(() => {
+      rtlComponent = render(<MoneyInput {...props} amount={null} />);
+      jest.clearAllMocks();
+    });
+
+    it.each([
+      ['asd', ''],
+      ['1a2s3d', '123'],
+      ['±!@#$^*_+?><', ''],
+      ['1±!@#$^*,_+?><2', '1,2'],
+      ['12,3', '12,3'],
+      ['12.3', '12.3'],
+    ])("ignores the letters when typed '%s' and shows '%s'", (testValue, expectedValue) => {
+      const { container } = rtlComponent;
+      const input = container.querySelector('input');
+      userEvent.type(input, testValue);
+      expect(input).toHaveValue(expectedValue);
+    });
+  });
+
   describe('when passed selectProps', () => {
     beforeEach(() => {
       component = shallow(
@@ -730,7 +599,7 @@ describe('Money Input', () => {
     });
 
     it('renders Select component with expected props', () => {
-      const select = component.find('SelectInput');
+      const select = component.find('Select');
 
       expect(select.prop('buttonProps')).toStrictEqual({
         'aria-label': 'mock-button-label',

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
-import { Lock } from '@transferwise/icons';
 
 import MoneyInput from '.';
 
@@ -42,41 +41,6 @@ const exampleCurrency = {
     currency: 'gbp',
     searchable: 'England, Scotland, Wales',
   },
-  usd: {
-    value: 'USD',
-    label: 'USD',
-    note: 'United States dollar',
-    currency: 'usd',
-    searchable: 'Hong Kong, Saudi Arabia',
-  },
-  hkd: {
-    value: 'HKD',
-    label: 'HKD',
-    note: 'Hong Kong',
-    currency: 'hkd',
-    searchable: 'Hong Kong, Saudi Arabia',
-  },
-  aud: {
-    value: 'AUD',
-    label: 'AUD',
-    note: 'Australia',
-    currency: 'aud',
-    searchable: 'Kenguru',
-  },
-  cny: {
-    value: 'CNY',
-    label: 'CNY',
-    note: 'China',
-    currency: 'cny',
-    searchable: 'China',
-  },
-  jpy: {
-    value: 'JPY',
-    label: 'JPY',
-    note: 'Japan',
-    currency: 'jpy',
-    searchable: 'Japan',
-  },
 } as const;
 
 export const SingleCurrency: Story = {
@@ -89,28 +53,14 @@ export const SingleCurrency: Story = {
 
 export const MultipleCurrencies: Story = {
   args: {
-    addon: <Lock />,
     currencies: [
       {
         header: 'Popular currencies',
       },
       exampleCurrency.eur,
       exampleCurrency.gbp,
-      exampleCurrency.usd,
-      exampleCurrency.hkd,
-      { header: 'All currencies' },
-      exampleCurrency.eur,
-      exampleCurrency.gbp,
-      exampleCurrency.usd,
-      exampleCurrency.aud,
-      exampleCurrency.jpy,
     ],
-    customActionLabel: 'Custom message with custom action',
-    onCustomAction: () => {
-      console.log('Custom action');
-    },
-    selectedCurrency: exampleCurrency.usd,
-    searchPlaceholder: 'Type a currency / country',
+    selectedCurrency: exampleCurrency.eur,
   },
 };
 

package/src/ssr.spec.js

@@ -12,6 +12,7 @@ const excluded = new Set([
   'useSnackbar',
   'useDirection',
   'useLayout',
+  'useScreenSize',
 
   // specific components
   'Provider',

package/src/uploadInput/UploadInput.spec.tsx

@@ -2,7 +2,7 @@ import { within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Status } from '../common';
-import { render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
+import { mockMatchMedia, render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { TEST_IDS as UPLOAD_BUTTON_TEST_IDS } from './uploadButton/UploadButton';
@@ -10,6 +10,8 @@ import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
 
 const spiedDateObject = jest.spyOn(global, 'Date');
 
+mockMatchMedia();
+
 describe('UploadInput', () => {
   const pngFile = new File(['foo'], 'foo.png', { type: 'image/png' });
   const jpgFile = new File(['foo'], 'foo.jpg', { type: 'image/jpeg' });