@transferwise/components 46.85.0 → 46.86.1

package/src/phoneNumberInput/PhoneNumberInput.spec.tsx

@@ -0,0 +1,283 @@
+import { Field } from '../field/Field';
+import {
+  mockMatchMedia,
+  mockResizeObserver,
+  render,
+  screen,
+  within,
+  userEvent,
+} from '../test-utils';
+
+import PhoneNumberInput, { PhoneNumberInputProps } from './PhoneNumberInput';
+
+mockMatchMedia();
+mockResizeObserver();
+
+describe('PhoneNumberInput', () => {
+  afterEach(jest.clearAllMocks);
+
+  const props = { onChange: jest.fn() };
+
+  const customRender = (overrides: Partial<PhoneNumberInputProps> = {}, locale?: string) =>
+    render(<PhoneNumberInput {...props} {...overrides} />, { locale });
+
+  const getPrefixEl = () => screen.getByRole('combobox');
+  const getInputEl = () => screen.getByRole('textbox');
+
+  describe('defaults', () => {
+    it('should set prefix control to default UK value', () => {
+      customRender();
+      expect(getPrefixEl()).toHaveTextContent('+44');
+    });
+
+    it('should set number control to empty', () => {
+      customRender();
+      expect(getInputEl()).toHaveValue('');
+    });
+
+    it('should not disable the select', () => {
+      customRender();
+      expect(getPrefixEl()).toBeEnabled();
+    });
+
+    it('should not disable the input', () => {
+      customRender();
+      expect(getInputEl()).toBeEnabled();
+    });
+  });
+
+  it('should propagate `initialValue`', () => {
+    const prefix = '+39';
+    const number = '123456789';
+    customRender({ initialValue: `${prefix}${number}` });
+    expect(getPrefixEl()).toHaveTextContent(prefix);
+    expect(getInputEl()).toHaveValue(number);
+  });
+
+  describe('id prop', () => {
+    it('should not render id by default', () => {
+      customRender();
+      expect(getPrefixEl()).not.toHaveAttribute('id');
+      expect(getInputEl()).not.toHaveAttribute('id');
+    });
+
+    it('should respect `id` for the input and ignore the select', () => {
+      const id = 'component-id';
+      customRender({ id });
+      expect(getPrefixEl()).not.toHaveAttribute('id');
+      expect(getInputEl()).toHaveAttribute('id', id);
+    });
+  });
+
+  describe('pasting', () => {
+    const initialPrefix = '+48';
+    const initialNumber = '987654321';
+
+    const renderAndPaste = async (value: string) => {
+      customRender({ initialValue: `${initialPrefix}${initialNumber}` });
+      await userEvent.tab();
+      await userEvent.tab();
+      await userEvent.paste(value);
+    };
+
+    [
+      { number: '+36303932551', countryCode: '+36', localNumber: '303932551' },
+      { number: '+39123456781', countryCode: '+39', localNumber: '123456781' },
+      { number: '+44 7700 900415', countryCode: '+44', localNumber: '7700900415' },
+      { number: '+2975557308515', countryCode: '+297', localNumber: '5557308515' },
+      { number: '+297-555-7217-360', countryCode: '+297', localNumber: '5557217360' },
+      { number: '+213-555-5160-67', countryCode: '+213', localNumber: '555516067' },
+      { number: '+246-387-5553', countryCode: '+246', localNumber: '3875553' },
+      { number: '+852-940-5558--6', countryCode: '+852', localNumber: '94055586' },
+      { number: '+228 253 5558     4', countryCode: '+228', localNumber: '25355584' },
+    ].forEach(({ number, countryCode, localNumber }) => {
+      it(`'${number}' number should update the value properly`, async () => {
+        await renderAndPaste(number);
+
+        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(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(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(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(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(newNumber);
+      expect(props.onChange).toHaveBeenCalledWith(`${initialPrefix}${newNumber}`, initialPrefix);
+    });
+  });
+
+  describe('initialValue', () => {
+    describe('when a model is supplied that could match more than one prefix', () => {
+      const initialProps = { initialValue: '+1868123456789' };
+
+      it('should set the select to the longest matching prefix', () => {
+        customRender(initialProps);
+        expect(getPrefixEl()).toHaveTextContent('+1868');
+      });
+
+      it('should set the number input to the rest of the number', () => {
+        customRender(initialProps);
+        expect(getInputEl()).toHaveValue('123456789');
+      });
+    });
+
+    describe('when a model is supplied with no matching prefix', () => {
+      const initialProps = { initialValue: '+999123456789' };
+
+      it('should empty the select', () => {
+        customRender(initialProps);
+        expect(getPrefixEl()).toHaveTextContent('Select an option...');
+      });
+
+      it('should put the whole value in the input without the plus', () => {
+        customRender(initialProps);
+        expect(getInputEl()).toHaveValue('999123456789');
+      });
+    });
+
+    describe('when an invalid model is supplied', () => {
+      it('should not re-explode model', () => {
+        customRender({ initialValue: '+123' });
+        expect(getPrefixEl()).toHaveTextContent('+44');
+        expect(getInputEl()).toHaveValue('');
+      });
+    });
+  });
+
+  describe('when disabled is true', () => {
+    it('should disable both controls', () => {
+      customRender({ disabled: true });
+      expect(getPrefixEl()).toBeDisabled();
+      expect(getInputEl()).toBeDisabled();
+    });
+  });
+
+  describe('placeholders', () => {
+    it('should use the provided placeholder', () => {
+      const placeholder = 'custom placeholder';
+      customRender({ placeholder });
+      expect(getInputEl()).toHaveAttribute('placeholder', placeholder);
+    });
+
+    it('should use the provided searchPlaceholder', async () => {
+      const searchPlaceholder = 'search placeholder';
+      customRender({ searchPlaceholder });
+      await userEvent.click(getPrefixEl());
+      expect(screen.getByRole('combobox', { name: searchPlaceholder })).toBeInTheDocument();
+    });
+  });
+
+  describe('when supplied with a locale', () => {
+    describe('and a value', () => {
+      it('should use the prefix of the supplied value', () => {
+        customRender({ initialValue: '+12345678' }, 'es');
+        expect(getPrefixEl()).toHaveTextContent('+1');
+      });
+    });
+
+    describe('and no value', () => {
+      describe('and no country code', () => {
+        it('should default the prefix to the local country', () => {
+          customRender(undefined, 'es');
+          expect(getPrefixEl()).toHaveTextContent('+34');
+        });
+      });
+
+      describe('and country code', () => {
+        it('should override locale prefix with country specific prefix', () => {
+          customRender({ countryCode: 'US' }, 'es');
+          expect(getPrefixEl()).toHaveTextContent('+1');
+        });
+      });
+    });
+  });
+
+  describe('user input', () => {
+    describe('valid number', () => {
+      it('should trigger onChange handler', async () => {
+        customRender();
+        await userEvent.type(getInputEl(), '123');
+        expect(props.onChange).toHaveBeenCalledWith('+44123', '+44');
+      });
+    });
+
+    describe('invalid number', () => {
+      it('should trigger onChange with null value', async () => {
+        customRender({ initialValue: '+1234' });
+        await userEvent.type(getInputEl(), '{Backspace}{Backspace}{Backspace}1');
+        expect(props.onChange).toHaveBeenCalledWith(null, '+1');
+      });
+    });
+
+    describe('when user insert invalid character', () => {
+      it('should strip them', async () => {
+        customRender({ initialValue: '+12345678' });
+        await userEvent.type(getInputEl(), '123--');
+        expect(props.onChange).toHaveBeenCalledWith('+12345678123', '+1');
+      });
+    });
+
+    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');
+        expect(props.onChange).toHaveBeenCalledWith('+201111111', '+20');
+      });
+    });
+  });
+
+  describe('when selectProps is supplied', () => {
+    it('renders Select component with expected props', () => {
+      customRender({ selectProps: { className: 'custom-class' } });
+      expect(getPrefixEl().parentElement).toHaveClass('custom-class');
+    });
+  });
+
+  it('supports custom `aria-labelledby` attribute', () => {
+    render(
+      <>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label id="prioritized-label">Prioritized label</label>
+        <PhoneNumberInput aria-labelledby="prioritized-label" onChange={() => {}} />
+      </>,
+    );
+
+    expect(
+      within(screen.getByLabelText('Prioritized label')).getByRole('textbox'),
+    ).toBeInTheDocument();
+  });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Phone number">
+        <PhoneNumberInput initialValue="+12345678" onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Phone number/);
+  });
+});

package/src/slidingPanel/SlidingPanel.spec.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from '../test-utils';
+import SlidingPanel, { SlidingPanelProps } from './SlidingPanel';
+
+describe('SlidingPanel', () => {
+  const initialProps: SlidingPanelProps = {
+    open: true,
+    children: <div data-testid="content">Content</div>,
+    testId: 'wrapper',
+  };
+
+  const customRender = (overrides: Partial<SlidingPanelProps> = {}) =>
+    render(<SlidingPanel {...initialProps} {...overrides} />);
+
+  describe('open', () => {
+    it('should respect open=false', () => {
+      customRender({ open: false });
+      expect(screen.queryByTestId('wrapper')).not.toBeInTheDocument();
+    });
+
+    it('should respect open=true', () => {
+      customRender();
+      expect(screen.getByTestId('wrapper')).toBeInTheDocument();
+    });
+  });
+
+  describe('position', () => {
+    it(`should default to 'left'`, () => {
+      customRender();
+      expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-left`);
+    });
+
+    (['left', 'right', 'top', 'bottom'] as const).forEach((position) => {
+      describe(position, () => {
+        it(`should add the classname`, () => {
+          customRender({ position });
+          expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-${position}`);
+        });
+
+        it(`should add the classname for 'showSlidingPanelBorder'`, () => {
+          customRender({ position, showSlidingPanelBorder: true });
+          expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--border-${position}`);
+        });
+      });
+    });
+  });
+
+  it('should render children', () => {
+    customRender();
+    expect(screen.getByTestId('content')).toBeInTheDocument();
+  });
+
+  it('should respect className', () => {
+    const className = 'customClass';
+    customRender({ className });
+    expect(screen.getByTestId('wrapper')).toHaveClass(className);
+  });
+
+  describe('slidingPanelPositionFixed', () => {
+    it('should not be fixed by default', () => {
+      customRender();
+      expect(screen.getByTestId('wrapper')).not.toHaveClass('sliding-panel--fixed');
+    });
+
+    it('should respect slidingPanelPositionFixed=true', () => {
+      customRender({ slidingPanelPositionFixed: true });
+      expect(screen.getByTestId('wrapper')).toHaveClass('sliding-panel--fixed');
+    });
+  });
+});

package/src/circularButton/_button-label-states.less

@@ -1,34 +0,0 @@
-.button-label-states(@prefix, @type, @normal, @hover, @active, @isModernTheme: false) {
-  .@{prefix}.@{type} {
-    .@{prefix}__label {
-      color: @normal;
-    }
-
-    &:not(.disabled, :disabled):hover .@{prefix}__label {
-      color: @hover;
-    }
-
-    &:active .@{prefix}__label,
-    input[type="button"]:active ~ .@{prefix}__label {
-      color: @active;
-    }
-
-    &.secondary {
-      .tw-icon {
-        color: @normal;
-      }
-
-      &:not(.disabled, :disabled):hover .tw-icon,
-      input[type="button"]:active + .tw-icon {
-        color: white;
-        & when (@isModernTheme = true) {
-          color: var(--color-interactive-control);
-        }
-      }
-
-      &:active input[type="button"] + .tw-icon when (@isModernTheme = true) {
-        color: var(--color-interactive-control);
-      }
-    }
-  }
-}

package/src/definitionList/DefinitionList.spec.js

@@ -1,91 +0,0 @@
-import { shallow, mount } from 'enzyme';
-
-import { DefinitionList } from '..';
-import { Layout } from '../common';
-
-const {
-  VERTICAL_TWO_COLUMN,
-  VERTICAL_ONE_COLUMN,
-  HORIZONTAL_LEFT_ALIGNED,
-  HORIZONTAL_RIGHT_ALIGNED,
-  HORIZONTAL_JUSTIFIED,
-} = Layout;
-
-describe('DefinitionList', () => {
-  const someDefinitions = () => [{ title: 'First', value: 'first value', key: 'first' }, null];
-
-  const withLayout = (layout) =>
-    shallow(<DefinitionList layout={layout} definitions={someDefinitions()} />);
-
-  const listHasClass = (layout, className) =>
-    withLayout(layout).find('dl.tw-definition-list').hasClass(className);
-
-  const valueHasClass = (layout, className) =>
-    withLayout(layout).find('dl.tw-definition-list dd').hasClass(className);
-
-  it('applies correct flex class', () => {
-    const colClass = 'flex-column';
-
-    expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(true);
-    expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(true);
-  });
-
-  it('applies correct class for vertical two-column layout', () => {
-    const colClass = 'tw-definition-list--columns flex-column flex-row--sm';
-
-    expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
-    expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(false);
-  });
-
-  it('applies correct class for horiztonal layouts', () => {
-    const rowClass = 'tw-definition-list--horizontal flex-column';
-
-    expect(listHasClass(VERTICAL_TWO_COLUMN, rowClass)).toBe(false);
-    expect(listHasClass(VERTICAL_ONE_COLUMN, rowClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, rowClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, rowClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_JUSTIFIED, rowClass)).toBe(true);
-  });
-
-  it('applies correct class for alignment', () => {
-    expect(valueHasClass(VERTICAL_TWO_COLUMN, 'd-flex justify-content-between')).toBe(true);
-    expect(valueHasClass(VERTICAL_ONE_COLUMN, 'd-flex justify-content-between')).toBe(true);
-    expect(valueHasClass(HORIZONTAL_LEFT_ALIGNED, 'd-flex justify-content-between')).toBe(true);
-    expect(valueHasClass(HORIZONTAL_RIGHT_ALIGNED, 'text-sm-right')).toBe(true);
-    expect(valueHasClass(HORIZONTAL_JUSTIFIED, 'text-sm-justify')).toBe(true);
-  });
-
-  it('has muted text class on title and value when muted flag is passed', () => {
-    const muted = shallow(<DefinitionList muted definitions={someDefinitions()} />);
-    const notMuted = shallow(<DefinitionList definitions={someDefinitions()} />);
-
-    expect(muted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(true);
-    expect(notMuted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(false);
-  });
-
-  it('shows action button when one is passed in', () => {
-    const buttonSpy = jest.fn();
-
-    const definitionList = mount(
-      <DefinitionList
-        definitions={[
-          {
-            title: 'Name',
-            value: 'Jenkins',
-            key: '1',
-            action: { label: 'A button', onClick: buttonSpy },
-          },
-        ]}
-      />,
-    );
-
-    definitionList.find('button').simulate('click');
-    expect(buttonSpy).toHaveBeenCalledTimes(1);
-  });
-});

package/src/moneyInput/MoneyInput.rtl.spec.tsx

@@ -1,149 +0,0 @@
-import { Field } from '../field/Field';
-import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
-
-import MoneyInput from './MoneyInput';
-import messages from './MoneyInput.messages';
-
-mockMatchMedia();
-mockResizeObserver();
-
-describe('MoneyInput', () => {
-  const currencies = [
-    {
-      header: 'Popular currencies',
-    },
-    {
-      value: 'EUR',
-      label: 'EUR',
-      note: 'Euro',
-      currency: 'eur',
-      searchable: 'Spain, Germany, France, Austria, Estonia',
-    },
-    {
-      value: 'USD',
-      label: 'USD',
-      note: 'United States dollar',
-      currency: 'usd',
-      searchable: 'Hong Kong, Saudi Arabia',
-    },
-    {
-      value: 'GBP',
-      label: 'GBP',
-      note: 'British pound',
-      currency: 'gbp',
-      searchable: 'England, Scotland, Wales',
-    },
-    {
-      header: 'Some other currencies',
-    },
-    {
-      value: 'CAD',
-      label: 'CAD',
-      note: 'Canadian dollar',
-      currency: 'cad',
-    },
-    {
-      value: 'AUD',
-      label: 'AUD',
-      note: 'Australian dollar',
-      currency: 'aud',
-    },
-  ] as const;
-  const props = {
-    currencies,
-    selectedCurrency: currencies[1],
-    searchPlaceholder: 'Type a currency / country',
-    amount: 1000,
-    onAmountChange: jest.fn(),
-    onCurrencyChange: jest.fn(),
-  };
-  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'", async (testValue, expectedValue) => {
-    render(<MoneyInput {...props} amount={null} />);
-
-    const input = screen.getByRole('textbox');
-    await userEvent.type(input, testValue);
-    expect(input).toHaveValue(expectedValue);
-  });
-
-  it('supports custom `aria-labelledby` attribute', () => {
-    render(
-      <>
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label id="prioritized-label">Prioritized label</label>
-        <MoneyInput {...props} aria-labelledby="prioritized-label" />
-      </>,
-    );
-
-    expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('input-group');
-  });
-
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Recipient gets">
-        <MoneyInput {...props} />
-      </Field>,
-    );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
-  });
-
-  describe('ids', () => {
-    it('should guarantee id and connect the input with the selected currency via withId HoC', () => {
-      render(<MoneyInput {...props} />);
-      const input = screen.getByRole('textbox');
-      const button = screen.getByRole('combobox');
-      expect(input.getAttribute('id')).toBeTruthy();
-      expect(input).toHaveAttribute('aria-describedby', button.getAttribute('id'));
-    });
-
-    it('should have unique id for the select filter with predefined id', async () => {
-      const fieldId = 'myFieldId';
-      render(
-        <Field label="Multiple currencies" id={fieldId}>
-          <MoneyInput {...props} />
-        </Field>,
-      );
-      await userEvent.click(screen.getByRole('combobox'));
-      expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
-        'id',
-        `${fieldId}SelectedCurrencySearch`,
-      );
-    });
-
-    it('should have unique id for the select filter without predefined id', async () => {
-      render(
-        <Field label="Multiple currencies">
-          <MoneyInput {...props} />
-        </Field>,
-      );
-      await userEvent.click(screen.getByRole('combobox'));
-      expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
-        'id',
-        expect.stringMatching(/^:.*?:SelectedCurrencySearch$/),
-      );
-    });
-  });
-
-  it('should have AT label for the currency dropdown', () => {
-    render(<MoneyInput {...props} />);
-    expect(screen.getByRole('combobox')).toHaveAttribute(
-      'aria-label',
-      messages.selectCurrencyLabel.defaultMessage,
-    );
-  });
-
-  it('should have a listbox label', async () => {
-    render(<MoneyInput {...props} />);
-    const trigger = screen.getByRole('combobox');
-    await userEvent.click(trigger);
-    const triggerLabel = trigger.getAttribute('aria-label');
-    expect(triggerLabel).toBeTruthy();
-    expect(screen.getByRole('listbox', { name: triggerLabel ?? '' })).toBeInTheDocument();
-  });
-});