@transferwise/components 46.97.4 → 46.98.0

package/src/withDisplayFormat/WithDisplayFormat.spec.js

@@ -1,32 +1,20 @@
-import { mount } from 'enzyme/build';
-import { act } from 'react';
-
-import { HistoryNavigator } from '../common';
-import { fakeKeyDownEventForKey } from '../common/fakeEvents';
+import React from 'react';
+import { userEvent, render, screen, waitFor } from '../test-utils';
 import { Input } from '../inputs/Input';
-
 import WithDisplayFormat from '.';
 
-const REDO_EVENT = { ctrlKey: true, charCode: 'z', shiftKey: true, which: 90 };
-const UNDO_EVENT = { ctrlKey: true, charCode: 'z', which: 90 };
-
-const triggerEvent = fakeKeyDownEventForKey();
+const user = userEvent;
 
-const TESTS = [
-  { value: '123', expectedValue: '12-3', displayPattern: '**-**-**' },
-  { value: '1234', expectedValue: '12-34', displayPattern: '**-**-**' },
-  { value: '1234', expectedValue: '+(12) 34', displayPattern: '+(**) *' },
-];
-
-const mountComponent = (props) => {
-  return mount(
-    <WithDisplayFormat {...props} render={(renderProps) => <Input {...renderProps} />} />,
+const setup = (props) =>
+  render(
+    <WithDisplayFormat
+      {...props}
+      render={(renderProps) => <Input {...renderProps} name="input" />}
+    />,
   );
-};
 
-describe('InputWithTextFormat', () => {
-  let component;
-  const props = {
+describe('InputWithTextFormat (React Testing Library)', () => {
+  const initialProps = {
     placeholder: 'a placeholder',
     displayPattern: '**-**',
     onChange: jest.fn(),
@@ -34,233 +22,152 @@ describe('InputWithTextFormat', () => {
     onBlur: jest.fn(),
   };
 
-  beforeEach(() => {
-    jest.useFakeTimers();
-    component = mountComponent(props);
-  });
+  [
+    { value: '123', expectedValue: '12-3', displayPattern: '**-**-**' },
+    { value: '1234', expectedValue: '12-34', displayPattern: '**-**-**' },
+    { value: '1234', expectedValue: '+(12) 34', displayPattern: '+(**) *' },
+  ].forEach(({ value, expectedValue, displayPattern }) => {
+    it(`returns ${expectedValue} for ${value} if displayPattern is ${displayPattern}`, async () => {
+      setup({ ...initialProps, displayPattern });
 
-  afterEach(async () => {
-    await jest.runOnlyPendingTimersAsync();
-    jest.useRealTimers();
-  });
-
-  TESTS.forEach((test) => {
-    const { value, expectedValue, displayPattern } = test;
-    it(`returns ${expectedValue} for ${value} if displayPattern is ${displayPattern} `, () => {
-      component.setProps({ displayPattern });
-      component.setState({ triggerEvent });
+      await user.tab();
+      await user.keyboard(value);
 
-      componentInput().simulate('change', { target: { value } });
-      expect(componentInput().props().value).toStrictEqual(expectedValue);
-      expect(props.onChange).toHaveBeenCalledWith(value);
+      expect(screen.getByRole('textbox')).toHaveValue(expectedValue);
+      await waitFor(() => expect(initialProps.onChange).toHaveBeenCalledWith(value));
 
-      componentInput().simulate('focus', { target: { value } });
-      expect(componentInput().props().value).toStrictEqual(expectedValue);
-      expect(props.onFocus).toHaveBeenCalledWith(value);
-
-      componentInput().simulate('blur', { target: { value } });
-      expect(componentInput().props().value).toStrictEqual(expectedValue);
-      expect(props.onBlur).toHaveBeenCalledWith(value);
+      await user.tab();
+      expect(initialProps.onBlur).toHaveBeenCalledWith(value);
     });
   });
 
-  describe('when Undo/Redo is preformed', () => {
-    it(`goes back/forward in input value's history`, async () => {
-      component.setProps({ displayPattern: '***' });
-      await act(async () => {
-        component.setState({
-          historyNavigator: new HistoryNavigator(['@', '@@', '@@@']),
-        });
-      });
-
-      componentInput().simulate('keyDown', UNDO_EVENT);
-      expect(componentInput().props().value).toBe('@@');
-      componentInput().simulate('keyDown', UNDO_EVENT);
-      expect(componentInput().props().value).toBe('@');
-      componentInput().simulate('keyDown', UNDO_EVENT);
-      expect(componentInput().props().value).toBe('@');
-
-      componentInput().simulate('keyDown', REDO_EVENT);
-      expect(componentInput().props().value).toBe('@@');
-      componentInput().simulate('keyDown', REDO_EVENT);
-      expect(componentInput().props().value).toBe('@@@');
-      componentInput().simulate('keyDown', REDO_EVENT);
-      expect(componentInput().props().value).toBe('@@@');
+  ['Meta', 'Control'].forEach((modifier) => {
+    it(`should support undo and redo with "${modifier}" key`, async () => {
+      setup({ ...initialProps, displayPattern: '***' });
+
+      const modifierOpening = `{${modifier}>}`;
+      const modifierClosing = `{/${modifier}}`;
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, '123');
+      expect(input).toHaveValue('123');
+      await user.type(input, `${modifierOpening}z${modifierClosing}`);
+      expect(input).toHaveValue('12');
+      await user.type(input, `${modifierOpening}z${modifierClosing}`);
+      expect(input).toHaveValue('1');
+      await user.type(input, `${modifierOpening}z${modifierClosing}`);
+      expect(input).toHaveValue('');
+      await user.type(input, `{Shift>}${modifierOpening}z${modifierClosing}{/Shift}`);
+      expect(input).toHaveValue('1');
+      await user.type(input, `{Shift>}${modifierOpening}z${modifierClosing}{/Shift}`);
+      expect(input).toHaveValue('12');
+      await user.type(input, `{Shift>}${modifierOpening}z${modifierClosing}{/Shift}`);
+      expect(input).toHaveValue('123');
     });
   });
 
-  describe('on "autofill"', () => {
-    beforeEach(() => {
-      component = mountComponent(props);
-    });
-
-    it('tests case with 5 random digits', () => {
-      componentInput().simulate('change', { target: { value: '12345' } });
+  it(`can delete user-entered characters`, async () => {
+    setup(initialProps);
+    const input = screen.getByRole('textbox');
+    await user.type(input, '12345');
+    await user.type(input, '{backspace}{backspace}');
+    expect(input).toHaveValue('12-3');
+  });
 
-      jest.runAllTimers();
+  it(`can select and delete multiple user-entered characters`, async () => {
+    setup(initialProps);
+    const input = screen.getByRole('textbox');
+    await user.type(input, '12345');
+    expect(input).toHaveValue('12-345');
 
-      expect(componentInput().props().value).toBe('12-345');
+    await user.type(input, '{backspace}', {
+      initialSelectionStart: 4,
+      initialSelectionEnd: 6,
     });
+    expect(input).toHaveValue('12-3');
   });
 
-  describe('on "autofill" that uses onFocus', () => {
-    beforeEach(() => {
-      component = mountComponent(props);
-    });
-
-    it('tests case with 5 random digits', () => {
-      componentInput().simulate('focus', { target: { value: '12345' } });
+  it(`can select and delete multiple user-entered characters, including separators`, async () => {
+    setup(initialProps);
+    const input = screen.getByRole('textbox');
+    await user.type(input, '12345');
+    expect(input).toHaveValue('12-345');
 
-      jest.runAllTimers();
-
-      expect(componentInput().props().value).toBe('12-345');
+    await user.type(input, '{backspace}', {
+      initialSelectionStart: 1,
+      initialSelectionEnd: 4,
     });
+    expect(input).toHaveValue('14-5');
   });
 
-  describe('when backspace is pressed', () => {
-    beforeEach(() => {
-      component = mountComponent(props);
-      component.setState({
-        triggerEvent: { ...triggerEvent, key: 'Backspace' },
-      });
-    });
-
-    it(`has default behaviour if deleted char is not a symbol`, () => {
-      component.setState({ selectionStart: 2, selectionEnd: 2 });
+  it(`has default behaviour for multiple deletion`, async () => {
+    setup(initialProps);
+    const input = screen.getByRole('textbox');
+    await user.type(input, '12345');
+    expect(input).toHaveValue('12-345');
 
-      componentInput().simulate('change', { target: { value: '12-3' } });
-      expect(componentInput().props().value).toBe('12-3');
+    await user.type(input, '{backspace}', {
+      initialSelectionStart: 4,
+      initialSelectionEnd: 6,
     });
+    expect(input).toHaveValue('12-3');
+  });
 
-    it(`has default behaviour for multiple deletion`, () => {
-      component.setState({ selectionStart: 3, selectionEnd: 1 });
+  it(`performs an extra delete if previous char is a separator`, async () => {
+    setup(initialProps);
+    const input = screen.getByRole('textbox');
+    await user.type(input, '123');
+    expect(input).toHaveValue('12-3');
 
-      componentInput().simulate('change', { target: { value: '12-3' } });
-      expect(componentInput().props().value).toBe('12-3');
-    });
+    await user.type(input, '{backspace}');
+    expect(input).toHaveValue('12');
+  });
 
-    it(`performs an extra delete if next char is a separator`, async () => {
-      await act(async () => {
-        component.setState({ selectionStart: 3, selectionEnd: 3 });
-      });
+  it(`cusor preserve position when entered a char in the middle`, async () => {
+    setup(initialProps);
+    const input = screen.getByRole('textbox');
+    await user.type(input, '123');
+    expect(input).toHaveValue('12-3');
 
-      componentInput().simulate('change', { target: { value: '123' } });
-      expect(componentInput().props().value).toBe('13');
-    });
-  });
+    await user.keyboard('{arrowleft}{arrowleft}{arrowleft}');
+    await user.keyboard('@');
 
-  describe('set cursor position', () => {
-    const triggerEventA = { ...triggerEvent, target: { setSelectionRange: () => {} } };
-    beforeEach(() => {
-      component.setState({
-        triggerEvent: triggerEventA,
-      });
-    });
+    expect(input).toHaveValue('1@-23');
 
-    it(`when entered a char`, async () => {
-      await act(async () => {
-        component.setState({ selectionStart: 4, selectionEnd: 4 });
-      });
-      componentInput().simulate('change', { target: { value: '13-4@' } });
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      expect(component.state().selectionStart).toBe(5);
-    });
+    await user.keyboard('x');
+    expect(input).toHaveValue('1@-x23');
 
-    it(`when entered a char before a symbol`, async () => {
-      await act(async () => {
-        component.setState({ selectionStart: 2, selectionEnd: 2 });
-      });
-      componentInput().simulate('change', { target: { value: '13-@' } });
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      expect(component.state().selectionStart).toBe(4);
-    });
-    //
-    it(`when deleted a char before the symbol`, async () => {
-      await act(async () => {
-        component.setState({
-          triggerEvent: { ...triggerEventA, key: 'Backspace' },
-        });
-      });
-      await act(async () => {
-        component.setState({ selectionStart: 3, selectionEnd: 3 });
-      });
-      componentInput().simulate('change', { target: { value: '13-45-6' } });
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      expect(component.state().selectionStart).toBe(1);
-    });
+    await user.keyboard('{arrowright}{backspace}');
 
-    it(`when delete a symbol`, () => {
-      component.setState({
-        triggerEvent: { ...triggerEventA, ctrlKey: true, which: 68 },
-      });
+    expect(input).toHaveValue('1@-x3');
+  });
 
-      component.setState({ selectionStart: 2, selectionEnd: 2 });
-      componentInput().simulate('change', { target: { value: '14' } });
-      jest.runAllTimers();
-      expect(component.state().selectionStart).toBe(2);
-    });
+  it(`supports pasting`, async () => {
+    setup(initialProps);
+    const input = screen.getByRole('textbox');
+    await user.type(input, '123');
+    expect(input).toHaveValue('12-3');
 
-    it(`when pasted selection is entered after a symbol`, async () => {
-      await act(async () => {
-        component.setState({
-          triggerType: 'Paste',
-          pastedLength: 2,
-        });
-      });
+    await user.type(input, '{arrowLeft}{arrowLeft}{arrowLeft}');
+    await user.paste('@@');
 
-      await act(async () => {
-        component.setState({ selectionStart: 2, selectionEnd: 2 });
-      });
-      componentInput().simulate('change', { target: { value: '13-@@' } });
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      expect(component.state().selectionStart).toBe(5);
-    });
+    expect(input).toHaveValue('1@-@23');
+  });
 
-    it(`when pasted selection is entered before a symbol`, async () => {
-      await act(async () => {
-        component.setState({
-          triggerType: 'Paste',
-          pastedLength: 2,
-        });
-      });
-      await act(async () => {
-        component.setState({ selectionStart: 1, selectionEnd: 1 });
-      });
-      componentInput().simulate('change', { target: { value: '1@-@' } });
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
-      expect(component.state().selectionStart).toBe(4);
-    });
+  it(`supports cutting`, async () => {
+    setup(initialProps);
+    const input = screen.getByRole('textbox');
+    await user.type(input, '12345');
+    expect(input).toHaveValue('12-345');
 
-    it('cut selection before a symbol', () => {
-      component.setState({
-        triggerType: 'Cut',
-      });
-      component.setState({ selectionStart: 0, selectionEnd: 2 });
-      componentInput().simulate('change', { target: { value: '34' } });
-      jest.runAllTimers();
-      expect(component.state().selectionStart).toBe(0);
+    // this is a workaround to set selection without entering
+    // any character (pressing Shift doesn't reset it)
+    await user.type(input, '{Shift}', {
+      initialSelectionStart: 1,
+      initialSelectionEnd: 4,
     });
+    await user.cut();
 
-    it('cut another selection before a symbol', () => {
-      component.setState({
-        triggerType: 'Cut',
-      });
-      component.setState({ selectionStart: 1, selectionEnd: 4 });
-      componentInput().simulate('change', { target: { value: '14' } });
-      jest.runAllTimers();
-      expect(component.state().selectionStart).toBe(1);
-    });
+    expect(input).toHaveValue('14-5');
   });
-
-  const componentInput = () => component.find('input');
 });

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -115,17 +115,16 @@ class WithDisplayFormat<T extends TextElementProps> extends React.Component<
     const { displayPattern } = this.props;
 
     if (triggerEvent) {
-      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
-
       if (triggerType === 'Paste' || triggerType === 'Cut') {
         return triggerType;
       }
 
-      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
+      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && triggerEvent.key === 'z') {
         return triggerEvent.shiftKey ? 'Redo' : 'Undo';
       }
+
       // Detect mouse event redo
-      if (triggerEvent.ctrlKey && charCode === 'd') {
+      if (triggerEvent.ctrlKey && triggerEvent.key === 'd') {
         return 'Delete';
       }
 
@@ -151,8 +150,7 @@ class WithDisplayFormat<T extends TextElementProps> extends React.Component<
   };
 
   detectUndoRedo = (event: React.KeyboardEvent<HTMLTextElement>) => {
-    const charCode = String.fromCharCode(event.which).toLowerCase();
-    if ((event.ctrlKey || event.metaKey) && charCode === 'z') {
+    if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
       return event.shiftKey ? 'Redo' : 'Undo';
     }
     return null;
@@ -272,7 +270,6 @@ class WithDisplayFormat<T extends TextElementProps> extends React.Component<
   handleCursorPositioning = (action: string) => {
     const { displayPattern } = this.props;
     const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;
-    const target = triggerEvent?.currentTarget;
 
     const cursorPosition = getCursorPositionAfterKeystroke(
       action,
@@ -283,7 +280,9 @@ class WithDisplayFormat<T extends TextElementProps> extends React.Component<
     );
 
     setTimeout(() => {
-      target?.setSelectionRange(cursorPosition, cursorPosition);
+      if (triggerEvent) {
+        (triggerEvent.target as HTMLTextElement).setSelectionRange(cursorPosition, cursorPosition);
+      }
       this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
     }, 0);
   };