@transferwise/components 45.26.3 → 45.28.0

package/src/moneyInput/MoneyInput.spec.js

@@ -1,8 +1,10 @@
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { shallow } from 'enzyme';
 
-import { Select, MoneyInput, Title, Input } from '..';
+import { MoneyInput, Title, Input, SelectInput } from '..';
+import { mockMatchMedia, mockResizeObserver } from '../test-utils';
+
+mockMatchMedia();
+mockResizeObserver();
 
 jest.mock('./currencyFormatting', () => ({
   parseAmount: jest.fn(),
@@ -83,7 +85,7 @@ describe('Money Input', () => {
   });
 
   function currencySelect() {
-    return component.find(Select);
+    return component.find(SelectInput);
   }
 
   function fixedCurrencyDisplay() {
@@ -96,7 +98,11 @@ describe('Money Input', () => {
   }
 
   function displayedCurrencies() {
-    return currencySelect().prop('options');
+    return currencySelect().prop('items');
+  }
+
+  function getFooter() {
+    return currencySelect().prop('renderFooter');
   }
 
   function amountInput() {
@@ -122,31 +128,86 @@ describe('Money Input', () => {
 
   it('renders a select with all the currencies as options', () => {
     expect(currencySelect()).toHaveLength(1);
-    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');
+    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],
+          },
+        ],
+      },
+    ]);
   });
 
   it('renders Select component with undefined id when id is not provided', () => {
-    const select = component.find('Select');
+    const select = component.find('SelectInput');
 
     expect(select.prop('id')).toBeUndefined();
   });
 
   it('shows the currently active currency as active and hides its note', () => {
-    expect(currencySelect().prop('selected')).toStrictEqual({
+    expect(currencySelect().prop('value')).toStrictEqual({
       value: 'EUR',
-      label: (
-        <Title as="span" type="title-subsection" className="tw-money-input__text">
-          EUR
-        </Title>
-      ),
-      note: null,
+      label: 'EUR',
+      note: 'Euro',
       currency: 'eur',
       searchable: 'Spain, Germany, France, Austria, Estonia',
     });
@@ -170,22 +231,7 @@ 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' },
@@ -194,12 +240,43 @@ describe('Money Input', () => {
         { value: 'EUR', label: 'Euro' },
       ];
       component.setProps({ currencies });
-      expect(displayedCurrencies()).toStrictEqual(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],
+            },
+          ],
+        },
+      ]);
 
       searchCurrencies('O');
       expect(displayedCurrencies()).toStrictEqual([
-        { value: 'GBP', label: 'British pound' },
-        { value: 'EUR', label: 'Euro' },
+        {
+          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],
+        },
       ]);
     });
 
@@ -209,10 +286,27 @@ describe('Money Input', () => {
         { value: 'EUR', label: 'Euro' },
       ];
       component.setProps({ currencies });
-      expect(displayedCurrencies()).toStrictEqual(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],
+        },
+      ]);
 
       searchCurrencies('P');
-      expect(displayedCurrencies()).toStrictEqual([{ value: 'GBP', label: 'British pound' }]);
+      expect(displayedCurrencies()).toStrictEqual([
+        {
+          type: 'option',
+          value: { value: 'GBP', label: 'British pound' },
+          filterMatchers: ['GBP', 'British pound', undefined, undefined],
+        },
+      ]);
     });
 
     it('searches by note', () => {
@@ -221,10 +315,27 @@ describe('Money Input', () => {
         { value: 'EUR', note: 'Other money' },
       ];
       component.setProps({ currencies });
-      expect(displayedCurrencies()).toStrictEqual(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],
+        },
+      ]);
 
       searchCurrencies('Other');
-      expect(displayedCurrencies()).toStrictEqual([{ value: 'EUR', note: 'Other money' }]);
+      expect(displayedCurrencies()).toStrictEqual([
+        {
+          type: 'option',
+          value: { value: 'EUR', note: 'Other money' },
+          filterMatchers: ['EUR', undefined, 'Other money', undefined],
+        },
+      ]);
     });
 
     it('searches by searchable string', () => {
@@ -233,11 +344,26 @@ describe('Money Input', () => {
         { value: 'EUR', searchable: 'Europe' },
       ];
       component.setProps({ currencies });
-      expect(displayedCurrencies()).toStrictEqual(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'],
+        },
+      ]);
 
       searchCurrencies('Britain');
       expect(displayedCurrencies()).toStrictEqual([
-        { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
+        {
+          type: 'option',
+          value: { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
+          filterMatchers: ['GBP', undefined, undefined, 'Great Britain, United Kingdom'],
+        },
       ]);
     });
 
@@ -246,51 +372,73 @@ 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([
-        ...currencies,
-        { value: CUSTOM_ACTION, label: 'I am a label' },
+        {
+          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'],
+        },
       ]);
 
       searchCurrencies('Britain');
       expect(displayedCurrencies()).toStrictEqual([
-        { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-        { value: CUSTOM_ACTION, label: 'I am a label' },
+        {
+          type: 'option',
+          value: { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
+          filterMatchers: ['GBP', undefined, undefined, 'Great Britain, United Kingdom'],
+        },
       ]);
 
       searchCurrencies('Random search string');
-      expect(displayedCurrencies()).toStrictEqual([
-        { value: CUSTOM_ACTION, label: 'I am a label' },
-      ]);
+      expect(displayedCurrencies()).toHaveLength(0);
+      const footerNode = shallow(getFooter()()).find('div');
+      expect(footerNode).not.toBeNull();
     });
 
     it('sorts labels to first', () => {
       searchCurrencies('au');
       expect(displayedCurrencies()).toStrictEqual([
         {
-          value: 'AUD',
-          label: 'AUD',
-          note: 'Australian dollar',
-          currency: 'aud',
+          type: 'option',
+          value: {
+            value: 'AUD',
+            label: 'AUD',
+            note: 'Australian dollar',
+            currency: 'aud',
+          },
+          filterMatchers: ['AUD', 'AUD', 'Australian dollar', undefined],
         },
         {
-          value: 'EUR',
-          label: 'EUR',
-          note: 'Euro',
-          currency: 'eur',
-          searchable: 'Spain, Germany, France, Austria, Estonia',
+          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: 'USD',
-          label: 'USD',
-          note: 'United States dollar',
-          currency: 'usd',
-          searchable: 'Hong Kong, Saudi Arabia',
+          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'],
         },
       ]);
     });
@@ -389,7 +537,6 @@ describe('Money Input', () => {
     expect(currencySelect()).toHaveLength(0);
     expect(fixedCurrencyDisplay()).toHaveLength(1);
     expect(component.find(Title).props().children).toBe('EEK');
-    expect(component.find('.currency-flag').hasClass('currency-flag-eek')).toBe(true);
   });
 
   it('shows fixed currency view when no function is passed to onCurrencyChange prop', () => {
@@ -408,13 +555,11 @@ describe('Money Input', () => {
 
     ['md', 'lg'].forEach((size) => {
       component.setProps({ size });
-      expect(component.find('.tw-money-input__keyline')).toHaveLength(1);
-      expect(component.find('.currency-flag')).toHaveLength(1);
+      expect(component.find('.money-input-currency-flag')).toHaveLength(1);
     });
 
     component.setProps({ size: 'sm' });
-    expect(component.find('.tw-money-input__keyline')).toHaveLength(0);
-    expect(component.find('.currency-flag')).toHaveLength(0);
+    expect(component.find('.money-input-currency-flag')).toHaveLength(0);
   });
 
   it('amount input will be disabled when there is no onAmountChange prop', () => {
@@ -434,18 +579,24 @@ describe('Money Input', () => {
 
   it('uses the passed in search placeholder', () => {
     component.setProps({ searchPlaceholder: 'a placeholder' });
-    expect(currencySelect().prop('searchPlaceholder')).toBe('a placeholder');
+    expect(currencySelect().prop('filterPlaceholder')).toBe('a placeholder');
   });
 
   it('clears the search value when selecting an option', () => {
+    const onSearchChange = jest.fn();
+    component.setProps({ onSearchChange });
     searchCurrencies('eur');
-    expect(currencySelect().prop('options')).toHaveLength(1);
-    expect(currencySelect().prop('searchValue')).toBe('eur');
+    expect(onSearchChange).toHaveBeenLastCalledWith({
+      searchQuery: 'eur',
+      filteredOptions: [props.currencies[1]],
+    });
 
     currencySelect().prop('onChange')(props.currencies[1]);
     component.update();
-    expect(currencySelect().prop('options')).toHaveLength(7);
-    expect(currencySelect().prop('searchValue')).toBe('');
+    expect(onSearchChange).toHaveBeenLastCalledWith({
+      searchQuery: '',
+      filteredOptions: [...props.currencies],
+    });
   });
 
   it('shows custom action last when onCustomAction prop is passed to MoneyInput', () => {
@@ -453,21 +604,25 @@ describe('Money Input', () => {
       { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
       { value: 'EUR', searchable: 'Europe' },
     ];
+    const onCustomActionMock = jest.fn();
     component.setProps({
       currencies,
-      onCustomAction: jest.fn(),
+      onCustomAction: onCustomActionMock,
       customActionLabel: 'Label boy',
     });
 
-    expect(displayedCurrencies()).toStrictEqual([
-      ...currencies,
-      { value: 'CUSTOM_ACTION', label: 'Label boy' },
-    ]);
+    const options = displayedCurrencies();
 
-    expect(displayedCurrencies()[displayedCurrencies().length - 1]).toStrictEqual({
-      value: 'CUSTOM_ACTION',
-      label: 'Label boy',
-    });
+    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(footerNode.prop('role')).toBe('button');
+    expect(onCustomActionMock).toHaveBeenCalledTimes(0);
+    footerNode.simulate('click');
+    expect(onCustomActionMock).toHaveBeenCalledTimes(1);
   });
 
   it('calls onCustomAction callback when custom action is selected', () => {
@@ -476,7 +631,9 @@ describe('Money Input', () => {
     expect(onCustomAction).not.toHaveBeenCalled();
     expect(props.onCurrencyChange).not.toHaveBeenCalled();
 
-    currencySelect().prop('onChange')({ value: 'CUSTOM_ACTION', label: '' });
+    const footerNode = shallow(getFooter()()).find('div');
+    expect(onCustomAction).toHaveBeenCalledTimes(0);
+    footerNode.simulate('click');
     expect(onCustomAction).toHaveBeenCalledTimes(1);
     expect(props.onCurrencyChange).toHaveBeenCalledTimes(0);
   });
@@ -545,7 +702,8 @@ describe('Money Input', () => {
         filteredOptions: [getCurrencyByValue('EUR')],
       });
 
-      currencySelect().prop('onChange')({ value: 'CUSTOM_ACTION' });
+      const footerNode = shallow(getFooter()()).find('div');
+      footerNode.simulate('click');
       expect(onCustomAction).toHaveBeenCalledTimes(1);
       expect(onSearchChange).toHaveBeenLastCalledWith({
         searchQuery: '',
@@ -554,33 +712,6 @@ 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(
@@ -596,7 +727,7 @@ describe('Money Input', () => {
     });
 
     it('renders Select component with expected props', () => {
-      const select = component.find('Select');
+      const select = component.find('SelectInput');
 
       expect(select.prop('buttonProps')).toStrictEqual({
         'aria-label': 'mock-button-label',

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,5 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
+import { Lock } from '@transferwise/icons';
+import React from 'react';
+
+import Drawer from '../drawer';
 
 import MoneyInput from '.';
 
@@ -41,6 +45,41 @@ 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 = {
@@ -53,14 +92,28 @@ 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,
     ],
-    selectedCurrency: exampleCurrency.eur,
+    customActionLabel: 'Custom message with custom action',
+    onCustomAction: () => {
+      console.log('Custom action');
+    },
+    selectedCurrency: exampleCurrency.usd,
+    searchPlaceholder: 'Type a currency / country',
   },
 };