@transferwise/components 46.97.4 → 46.97.5

package/src/tabs/Tabs.spec.tsx

@@ -0,0 +1,137 @@
+import { Globals } from '@react-spring/web';
+import { render, screen, userEvent } from '../test-utils';
+import Tabs, { TabsProps } from './Tabs';
+
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
+if (typeof performance === 'undefined') {
+  global.performance = { now: () => Date.now() } as Performance;
+}
+
+const defaultTabsStatus = [false, true, false];
+
+function generateTabs(tabsStatus = defaultTabsStatus) {
+  return tabsStatus.map((disabled, index) => ({
+    disabled,
+    title: `Title ${index}`,
+    content: <p data-testid={`content-${index}`}>Content {index}</p>,
+  }));
+}
+
+beforeAll(() => {
+  Globals.assign({
+    skipAnimation: true,
+  });
+});
+
+describe('Tabs', () => {
+  const initialProps: TabsProps = {
+    animatePanelsOnClick: true,
+    tabs: generateTabs(),
+    changeTabOnSwipe: true,
+    name: 'testName',
+    headerWidth: 'block',
+    selected: 0,
+    transitionSpacing: 'default',
+    onTabSelect: jest.fn(),
+    className: 'custom-class-name',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  afterEach(async () => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('should render a tablist', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+  });
+
+  it('should respect className', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getByRole('tablist').parentNode).toHaveClass(String(initialProps.className));
+  });
+
+  it('should respect `name` prop', () => {
+    render(<Tabs {...initialProps} />);
+    const controlsTarget = screen
+      .getByRole('tab', { selected: true })
+      .getAttribute('aria-controls');
+    expect(screen.getByRole('tabpanel')).toHaveAttribute('id', controlsTarget);
+  });
+
+  describe('transitionSpacing', () => {
+    test.each([
+      ['default', '100%'],
+      ['xs', '8px'],
+      ['sm', '16px'],
+      ['md', '24px'],
+      ['lg', '32px'],
+    ] as const)('should respect `%s`', (input, width) => {
+      render(<Tabs {...initialProps} transitionSpacing={input} />);
+      expect(screen.getByRole('tabpanel').nextSibling).toHaveStyle({ width });
+    });
+  });
+
+  it('should render correct number of tabs', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getAllByRole('tab')).toHaveLength(defaultTabsStatus.length);
+    initialProps.tabs.forEach(({ title }) => {
+      expect(screen.getByText(title)).toBeInTheDocument();
+    });
+  });
+
+  it('should show first tab content by default', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getAllByRole('tabpanel')).toHaveLength(1);
+    expect(screen.getByTestId('content-0')).toBeInTheDocument();
+  });
+
+  describe('tab switch', () => {
+    it('should call onTabSelecton on click', async () => {
+      render(<Tabs {...initialProps} />);
+      const thirdTab = screen.getAllByRole('tab')[2];
+      await user.click(thirdTab);
+
+      // It's called on mount first, that's why the count is at 2
+      expect(initialProps.onTabSelect).toHaveBeenCalledTimes(2);
+      expect(initialProps.onTabSelect).toHaveBeenCalledWith(2);
+    });
+
+    it('should call onTabSelecton when navigating with keyboard', async () => {
+      render(<Tabs {...initialProps} />);
+      await user.keyboard('{Tab}{Tab}{Tab}{Enter}');
+
+      // It's called on mount first, that's why the count is at 2
+      expect(initialProps.onTabSelect).toHaveBeenCalledTimes(2);
+      expect(initialProps.onTabSelect).toHaveBeenCalledWith(2);
+    });
+
+    it('should call onTabSelecton on swipe', async () => {
+      render(<Tabs {...initialProps} />);
+      await user.keyboard('{Tab}{Tab}{Tab}{Enter}');
+
+      // It's called on mount first, that's why the count is at 2
+      expect(initialProps.onTabSelect).toHaveBeenCalledTimes(2);
+      expect(initialProps.onTabSelect).toHaveBeenCalledWith(2);
+    });
+
+    it('should highlight selected tab', async () => {
+      const { rerender } = render(<Tabs {...initialProps} />);
+      rerender(<Tabs {...initialProps} selected={2} />);
+
+      expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Title 2');
+    });
+
+    it('should switch content tab', async () => {
+      const { rerender } = render(<Tabs {...initialProps} />);
+      rerender(<Tabs {...initialProps} selected={2} />);
+      expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 2');
+    });
+  });
+});

package/src/tabs/Tabs.story.tsx

@@ -7,6 +7,7 @@ import Tabs from './Tabs';
 export default {
   component: Tabs,
   title: 'Navigation/Tabs',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/tabs/Tabs.tsx

@@ -403,7 +403,6 @@ export default class Tabs extends Component<TabsProps, TabsState> {
 
     if (isSwiping) {
       const nextSelected = this.getTabToSelect(currentSelectedFromProps, start, end);
-
       this.animateLine(
         this.swipedOverHalfOfContainer(difference) ? nextSelected : currentSelectedFromProps,
       );

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.spec.js

@@ -1,17 +1,18 @@
-import { shallow } from 'enzyme';
-
-import { TextArea } from '../inputs/TextArea';
-
+import { render, screen, userEvent } from '../test-utils';
 import TextareaWithDisplayFormat from '.';
 
 describe('TextareaWithDisplayFormat', () => {
   const props = { displayPattern: '**-**', onChange: jest.fn() };
 
   it('should render input with value prop', () => {
-    const view = shallow(<TextareaWithDisplayFormat {...props} />)
-      .find('WithDisplayFormat')
-      .renderProp('render')({ value: 'test' });
+    render(<TextareaWithDisplayFormat {...props} value="test" />);
+    expect(screen.getByRole('textbox')).toHaveValue('te-st');
+  });
 
-    expect(view.find(TextArea).props('value')).toStrictEqual({ value: 'test' });
+  it('should format as you type', async () => {
+    render(<TextareaWithDisplayFormat {...props} />);
+    await userEvent.tab();
+    await userEvent.keyboard('1234');
+    expect(screen.getByRole('textbox')).toHaveValue('12-34');
   });
 });

package/src/typeahead/Typeahead.story.tsx

@@ -22,7 +22,7 @@ const validateOptionAsEmail = (option: TypeaheadOption) => {
   );
 };
 
-export default {
+const meta: Meta<typeof Typeahead> = {
   component: Typeahead,
   title: 'Forms/Typeahead',
   args: {
@@ -54,7 +54,8 @@ export default {
       options: [Size.MEDIUM, Size.LARGE],
     },
   },
-} satisfies Meta<typeof Typeahead>;
+};
+export default meta;
 
 export const Basic: Story = {
   render: function Render(args) {

package/src/upload/Upload.css

@@ -29,3 +29,6 @@
 .upload-error-message .alert {
   min-width: 100px;
 }
+.np-theme-personal .droppable-dropping .droppable-complete-card {
+  display: none;
+}

package/src/upload/Upload.less

@@ -35,4 +35,10 @@
   .alert {
     min-width: 100px;
   }
-}
+}
+
+.np-theme-personal {
+  .droppable-dropping .droppable-complete-card  {
+    display: none;
+  }
+} 

package/src/upload/Upload.story.tsx

@@ -22,7 +22,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Basic = {
+export const Basic: Story = {
   args: {
     maxSize: MAX_SIZE_DEFAULT,
     usAccept: 'image/*',

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx

@@ -76,4 +76,19 @@ describe('uploadImageStep', () => {
     expect(screen.getByLabelText(errorIconLabel)).toBeInTheDocument();
     expect(screen.getByText(errorMessage)).toBeInTheDocument();
   });
+
+  test('focuses on the upload input when label is clicked', () => {
+    const input = screen.getByLabelText(UPLOADIMAGE_STEP_PROPS.usButtonText);
+    input.focus();
+    expect(input).toHaveFocus();
+  });
+
+  test('triggers file selection on Enter key press', () => {
+    const input = screen.getByLabelText(UPLOADIMAGE_STEP_PROPS.usButtonText);
+    input.focus();
+    const event = new KeyboardEvent('keydown', { key: 'Enter' });
+    input.dispatchEvent(event);
+    expect(input).toHaveFocus();
+    expect(input).toHaveAttribute('type', 'file');
+  });
 });

package/src/upload/steps/uploadImageStep/uploadImageStep.tsx

@@ -28,6 +28,13 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     }
   };
 
+  onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.uploadInputRef.current?.click();
+    }
+  };
+
   getImage = () => {
     const { usHelpImage, usLabel } = this.props;
     const { errorMessage } = this.props;
@@ -78,6 +85,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
             role="button"
             aria-disabled={usDisabled}
             tabIndex={0}
+            onKeyDown={this.onKeyDown}
           >
             {usButtonText ? (
               <span>{usButtonText}</span>

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 TESTS = [
-  { value: '123', expectedValue: '12-3', displayPattern: '**-**-**' },
-  { value: '1234', expectedValue: '12-34', displayPattern: '**-**-**' },
-  { value: '1234', expectedValue: '+(12) 34', displayPattern: '+(**) *' },
-];
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
 
-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(),
@@ -36,7 +24,6 @@ describe('InputWithTextFormat', () => {
 
   beforeEach(() => {
     jest.useFakeTimers();
-    component = mountComponent(props);
   });
 
   afterEach(async () => {
@@ -44,223 +31,147 @@ describe('InputWithTextFormat', () => {
     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 });
+  [
+    { 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 });
 
-      componentInput().simulate('change', { target: { value } });
-      expect(componentInput().props().value).toStrictEqual(expectedValue);
-      expect(props.onChange).toHaveBeenCalledWith(value);
+      await user.tab();
+      await user.keyboard(value);
 
-      componentInput().simulate('focus', { target: { value } });
-      expect(componentInput().props().value).toStrictEqual(expectedValue);
-      expect(props.onFocus).toHaveBeenCalledWith(value);
+      expect(screen.getByRole('textbox')).toHaveValue(expectedValue);
+      await waitFor(() => expect(initialProps.onChange).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' } });
-
-      jest.runAllTimers();
-
-      expect(componentInput().props().value).toBe('12-345');
-    });
+  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');
   });
 
-  describe('on "autofill" that uses onFocus', () => {
-    beforeEach(() => {
-      component = mountComponent(props);
-    });
-
-    it('tests case with 5 random digits', () => {
-      componentInput().simulate('focus', { target: { value: '12345' } });
-
-      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('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(`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');
 
-      componentInput().simulate('change', { target: { value: '12-3' } });
-      expect(componentInput().props().value).toBe('12-3');
+    await user.type(input, '{backspace}', {
+      initialSelectionStart: 1,
+      initialSelectionEnd: 4,
     });
+    expect(input).toHaveValue('14-5');
+  });
 
-    it(`has default behaviour for multiple deletion`, () => {
-      component.setState({ selectionStart: 3, selectionEnd: 1 });
+  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(`performs an extra delete if next char is a separator`, async () => {
-      await act(async () => {
-        component.setState({ selectionStart: 3, selectionEnd: 3 });
-      });
+  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: '123' } });
-      expect(componentInput().props().value).toBe('13');
-    });
+    await user.type(input, '{backspace}');
+    expect(input).toHaveValue('12');
   });
 
-  describe('set cursor position', () => {
-    const triggerEventA = { ...triggerEvent, target: { setSelectionRange: () => {} } };
-    beforeEach(() => {
-      component.setState({
-        triggerEvent: triggerEventA,
-      });
-    });
-
-    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);
-    });
+  // @FIXME (maybe) Is this behaviour expected? 🤔
+  it(`moves to the end, 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');
 
-    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.type(input, '{arrowLeft}{arrowLeft}{arrowLeft}@');
+    expect(input).toHaveValue('1@-23');
 
-    it(`when delete a symbol`, () => {
-      component.setState({
-        triggerEvent: { ...triggerEventA, ctrlKey: true, which: 68 },
-      });
+    await user.type(input, 'x');
+    expect(input).toHaveValue('1@-23x');
+  });
 
-      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');
 });