@transferwise/components 46.84.1 → 46.85.0

package/src/stepper/Stepper.spec.tsx

@@ -0,0 +1,236 @@
+import { render, screen, userEvent } from '../test-utils';
+import * as mockedDeviceDetection from './deviceDetection';
+
+import Stepper from './Stepper';
+
+jest.mock('./deviceDetection', () => ({
+  isTouchDevice: jest.fn(() => false),
+}));
+
+describe('Stepper', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const generateSteps = (stepsCount: number) =>
+    Array.from({ length: stepsCount }, () => ({
+      label: Math.random().toString(),
+      onClick: jest.fn(),
+    }));
+
+  const getSteps = () => screen.getAllByRole('listitem');
+
+  const initialProps = {
+    activeStep: 0,
+    steps: generateSteps(3),
+  };
+
+  const customRender = (overrides = {}) => {
+    return render(<Stepper {...initialProps} {...overrides} />);
+  };
+
+  describe('progress bar', () => {
+    it('renders nothing when no steps are passed in', () => {
+      customRender({ steps: [] });
+      expect(screen.queryByTestId('progress-bar')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('steps', () => {
+    it('have rendered labels', () => {
+      const steps = generateSteps(5);
+      customRender({ steps });
+
+      getSteps().forEach((step, index) => {
+        expect(step).toHaveTextContent(steps[index].label);
+      });
+    });
+
+    describe('step interactive style', () => {
+      const expectStepIsVisuallyInteractive = (stepIndex: number) => {
+        // eslint-disable-next-line jest/valid-expect
+        return expect(getSteps()[stepIndex].classList.contains('tw-stepper__step--clickable'));
+      };
+
+      it('is not styled as interactive if it is the active step', async () => {
+        const steps = [
+          { label: '0' },
+          { label: '1', onClick: jest.fn() },
+          { label: '2', onClick: jest.fn() },
+        ];
+        customRender({ steps, activeStep: 0 });
+        expectStepIsVisuallyInteractive(0).toBe(false);
+      });
+
+      it('is not styled as interactive if not the active step and has no click handler', () => {
+        const steps = [
+          { label: '0' },
+          { label: '1', onClick: jest.fn() },
+          { label: '2', onClick: jest.fn() },
+        ];
+        customRender({ steps, activeStep: 1 });
+        expectStepIsVisuallyInteractive(0).toBe(false);
+        expectStepIsVisuallyInteractive(1).toBe(false);
+      });
+
+      it('is styled as interactive if not the active step and has click handler', () => {
+        const steps = [
+          { label: '0', onClick: jest.fn() },
+          { label: '1', onClick: jest.fn() },
+          { label: '2', onClick: jest.fn() },
+        ];
+        customRender({ steps, activeStep: 2 });
+        expectStepIsVisuallyInteractive(0).toBe(true);
+        expectStepIsVisuallyInteractive(1).toBe(true);
+        expectStepIsVisuallyInteractive(2).toBe(false);
+      });
+    });
+
+    describe('step interactivity', () => {
+      const getStepChild = (stepIndex: number) => getSteps()[stepIndex].children[0];
+
+      it('is not interactive if it is the active step', async () => {
+        const steps = [
+          { label: '0', onClick: jest.fn() },
+          { label: '1', onClick: jest.fn() },
+          { label: '2', onClick: jest.fn() },
+        ];
+        customRender({ steps, activeStep: 0 });
+        await userEvent.click(getStepChild(0));
+        expect(steps[0].onClick).not.toHaveBeenCalled();
+      });
+
+      it('is not interactive if not the active step but has no click handler', async () => {
+        const steps = [
+          { label: '0' },
+          { label: '1', onClick: jest.fn() },
+          { label: '2', onClick: jest.fn() },
+        ];
+        customRender({ steps, activeStep: 1 });
+        await userEvent.click(getStepChild(0));
+        expect(steps[1].onClick).not.toHaveBeenCalled();
+        await userEvent.click(getStepChild(1));
+        expect(steps[1].onClick).not.toHaveBeenCalled();
+      });
+
+      it('is interactive if not the active step and has click handler', async () => {
+        const steps = [
+          { label: '0', onClick: jest.fn() },
+          { label: '1', onClick: jest.fn() },
+          { label: '2', onClick: jest.fn() },
+        ];
+        customRender({ steps, activeStep: 2 });
+        await userEvent.click(getStepChild(1));
+        expect(steps[1].onClick).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('are not clickable when active', async () => {
+      const clickedOnFirstStep = jest.fn();
+      const clickedOnSecondStep = jest.fn();
+      const initialProps = {
+        steps: [
+          { label: 'one', onClick: clickedOnFirstStep },
+          { label: 'two', onClick: clickedOnSecondStep },
+        ],
+        activeStep: 0,
+      };
+      const { rerender } = customRender(initialProps);
+
+      const clickOnStep = async (stepIndex: number) => {
+        const step = screen.getByText(initialProps.steps[stepIndex].label).parentElement;
+        if (step) {
+          return userEvent.click(step);
+        }
+      };
+
+      await clickOnStep(0);
+      expect(clickedOnFirstStep).not.toHaveBeenCalled();
+
+      rerender(<Stepper {...initialProps} activeStep={1} />);
+      await clickOnStep(0);
+      expect(clickedOnFirstStep).toHaveBeenCalledTimes(1);
+
+      await clickOnStep(1);
+      expect(clickedOnSecondStep).not.toHaveBeenCalled();
+    });
+
+    it('are active when they are the currently active step', () => {
+      const { rerender } = customRender({
+        steps: Array(4)
+          .fill('')
+          .map((_, i) => ({ label: i.toString() })),
+        activeStep: 1,
+      });
+
+      const stepActive = (index: number) =>
+        getSteps()[index].classList.contains('tw-stepper__step--active');
+
+      expect(stepActive(0)).toBe(false);
+      expect(stepActive(1)).toBe(true);
+      expect(stepActive(2)).toBe(false);
+      expect(stepActive(3)).toBe(false);
+
+      rerender(<Stepper {...initialProps} activeStep={2} />);
+
+      expect(stepActive(1)).toBe(false);
+      expect(stepActive(2)).toBe(true);
+    });
+
+    it('are aria-current=step when active', () => {
+      const { rerender } = customRender({ steps: Array(4).fill({ label: '' }), activeStep: 1 });
+
+      const stepCurrent = (index: number) =>
+        getSteps()[index].getAttribute('aria-current') === 'step';
+
+      expect(stepCurrent(0)).toBe(false);
+      expect(stepCurrent(1)).toBe(true);
+      expect(stepCurrent(2)).toBe(false);
+      expect(stepCurrent(3)).toBe(false);
+
+      rerender(<Stepper {...initialProps} activeStep={2} />);
+
+      expect(stepCurrent(1)).toBe(false);
+      expect(stepCurrent(2)).toBe(true);
+    });
+  });
+
+  describe('hover labels', () => {
+    it('will be rendered when provided', async () => {
+      const hoverLabel = 'hover label';
+      customRender({
+        steps: [{ hoverLabel, label: 'label' }, { label: 'label 2' }],
+      });
+      expect(await screen.findByText(hoverLabel)).toBeInTheDocument();
+    });
+
+    it('renders jsx', async () => {
+      customRender({
+        steps: [
+          {
+            hoverLabel: (
+              <>
+                <span>hover label 1</span>
+                <p>hover label 2</p>
+              </>
+            ),
+            label: 'one',
+          },
+        ],
+      });
+
+      expect(await screen.findByText('hover label 1')).toBeInTheDocument();
+      expect(await screen.findByText('hover label 2')).toBeInTheDocument();
+    });
+
+    it('will not be rendered if the user is on a touch device', () => {
+      jest.spyOn(mockedDeviceDetection, 'isTouchDevice').mockImplementation(() => true);
+
+      customRender({
+        steps: [{ hoverLabel: 'hover label', label: 'label' }, { label: 'label 2' }],
+      });
+
+      expect(screen.queryByText('hover label')).not.toBeInTheDocument();
+    });
+  });
+});

package/src/stepper/Stepper.tests.story.tsx

@@ -0,0 +1,89 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { fn, within, expect, screen } from '@storybook/test';
+import Stepper from './Stepper';
+
+const STEPS = [
+  {
+    label: 'One',
+    onClick: fn(),
+  },
+  {
+    label: 'Two',
+    hoverLabel: (
+      <>
+        <div>
+          <strong>Diana Jaramillo</strong>
+        </div>
+        dianajarm123@gmail.com
+      </>
+    ),
+    onClick: fn(),
+  },
+  { label: 'Three', onClick: fn() },
+  { label: 'Four', onClick: fn() },
+  { label: 'Five', onClick: fn() },
+];
+
+const meta = {
+  component: Stepper,
+  title: 'Navigation/Stepper/tests',
+  argTypes: {
+    activeStep: {
+      control: 'radio',
+      options: [...Array(STEPS.length).keys()],
+    },
+  },
+} satisfies Meta<typeof Stepper>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ProgressbarWidth: Story = {
+  play: async ({ step }) => {
+    const getBarBaseWidth = (stepIndex: number) => {
+      const instance = screen.getByTestId(`stepper${stepIndex}`);
+      return within(instance).getByTestId('progress-bar')?.style.width;
+    };
+
+    await step('activeStep: -10 (negative) ▸ width should be 0', async () => {
+      await expect(getBarBaseWidth(-10)).toBe(`0%`);
+    });
+
+    await step('activeStep: 0 ▸ width should be 0', async () => {
+      await expect(getBarBaseWidth(0)).toBe(`0%`);
+    });
+
+    const WIDTHS = [0, 25, 50, 75, 100];
+    // eslint-disable-next-line no-plusplus
+    for (let stepIndex = 1; stepIndex < STEPS.length; stepIndex++) {
+      await step(
+        `activeStep: ${stepIndex} ▸ base width should be ${WIDTHS[stepIndex]}%`,
+        async () => {
+          await expect(getBarBaseWidth(stepIndex)).toMatch(
+            new RegExp(`^calc\\(${WIDTHS[stepIndex]}%.*?`),
+          );
+        },
+      );
+    }
+
+    await step('activeStep: 1000 ▸ base width should be 100%', async () => {
+      await expect(getBarBaseWidth(1000)).toMatch(/^calc\(100%.*?/);
+    });
+  },
+  render: function Render() {
+    return (
+      <>
+        <Stepper steps={STEPS} activeStep={0} testId="stepper-10" />
+        <Stepper steps={STEPS} activeStep={0} testId="stepper0" />
+        <Stepper steps={STEPS} activeStep={1} testId="stepper1" />
+        <Stepper steps={STEPS} activeStep={2} testId="stepper2" />
+        <Stepper steps={STEPS} activeStep={3} testId="stepper3" />
+        <Stepper steps={STEPS} activeStep={4} testId="stepper4" />
+        <Stepper steps={STEPS} activeStep={4} testId="stepper1000" />
+      </>
+    );
+  },
+  args: {
+    steps: STEPS,
+  },
+};

package/src/stepper/Stepper.tsx

@@ -21,13 +21,14 @@ export interface StepperProps {
   steps: readonly Step[];
   activeStep?: number;
   className?: string;
+  testId?: string;
 }
 
 /**
  * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
  * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
  */
-const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
+const Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {
   const { isRTL } = useDirection();
 
   if (steps.length === 0) {
@@ -40,7 +41,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
 
   const getProgressWidth = (): string => {
     if (percentageCompleted === 0) {
-      return '0px';
+      return '0%';
     }
     /**
      * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
@@ -95,9 +96,13 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
   };
 
   return (
-    <div className={clsx('tw-stepper', className)}>
+    <div className={clsx('tw-stepper', className)} data-testid={testId}>
       <div className="progress">
-        <div className="progress-bar" style={{ width: getProgressWidth() }} />
+        <div
+          className="progress-bar"
+          style={{ width: getProgressWidth() }}
+          data-testid="progress-bar"
+        />
       </div>
       <ol className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ol>
     </div>

package/src/stepper/{deviceDetection.spec.js → deviceDetection.spec.ts}

@@ -1,14 +1,14 @@
 import { isTouchDevice } from './deviceDetection';
 
 describe('Device detection', () => {
-  function fakeUserAgent(userAgent) {
+  function fakeUserAgent(userAgent: string) {
     Object.defineProperty(navigator, 'userAgent', {
       value: userAgent,
       configurable: true,
     });
   }
 
-  function fakeMaxTouchPoints(maxTouchPoints) {
+  function fakeMaxTouchPoints(maxTouchPoints: number | undefined) {
     Object.defineProperty(navigator, 'maxTouchPoints', {
       value: maxTouchPoints,
       configurable: true,
@@ -24,7 +24,10 @@ describe('Device detection', () => {
 
   it('recognizes touch devices via window events', () => {
     expect(isTouchDevice()).toBe(false);
-    window.ontouchstart = {};
+    Object.defineProperty(window, 'ontouchstart', {
+      value: () => {},
+      writable: true,
+    });
     expect(isTouchDevice()).toBe(true);
   });
 

package/src/uploadInput/uploadButton/UploadButton.messages.ts

@@ -19,6 +19,13 @@ export default defineMessages({
     description: 'Description about filetypes and size limit for uploading files',
   },
 
+  maximumFiles: {
+    id: 'neptune.UploadButton.maximumFiles',
+    defaultMessage: 'Maximum {maxFiles} files.',
+    description:
+      'When number of files to be uploaded is restricted, this information is displayed within the upload button.',
+  },
+
   allFileTypes: {
     id: 'neptune.UploadButton.allFileTypes',
     defaultMessage: 'All file types',

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -200,7 +200,7 @@ const UploadButton = forwardRef<HTMLInputElement | null, UploadButtonProps>(
           {maxFiles && (
             <>
               <br />
-              {`Maximum ${maxFiles} files.`}
+              {formatMessage(MESSAGES.maximumFiles, { maxFiles })}
             </>
           )}
         </Body>

package/src/dimmer/Dimmer.spec.js

@@ -1,87 +0,0 @@
-import { shallow, mount } from 'enzyme';
-import ReactDOM from 'react-dom';
-
-import DimmerAppendingToBody, { Dimmer } from './Dimmer';
-
-jest.mock('react-dom');
-
-describe('Dimmer', () => {
-  let component;
-  const props = {
-    open: true,
-    fadeContentOnExit: false,
-    fadeContentOnEnter: false,
-    onClick: jest.fn(),
-    children: <div />,
-    className: undefined,
-    onClose: undefined,
-    onExited: jest.fn(),
-  };
-
-  beforeEach(() => {
-    jest.spyOn(ReactDOM, 'createPortal').mockImplementation();
-    ReactDOM.createPortal.mockReturnValue(<Dimmer {...props} />);
-    component = shallow(<Dimmer {...props} />);
-  });
-
-  afterEach(() => {
-    ReactDOM.createPortal.mockClear();
-    jest.clearAllMocks();
-  });
-
-  it('is appended to body', () => {
-    expect(ReactDOM.createPortal).not.toHaveBeenCalled();
-    mount(<DimmerAppendingToBody {...props} />);
-
-    expect(ReactDOM.createPortal).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders with right props', () => {
-    component = mount(
-      <Dimmer {...props} disableClickToClose={false} transparent={false} scrollable={false} />,
-    );
-    expect(component.find(Dimmer)).toHaveLength(1);
-    expect(component.find(Dimmer).props()).toStrictEqual({
-      ...props,
-      disableClickToClose: false,
-      transparent: false,
-      scrollable: false,
-    });
-  });
-
-  it('do not make Dimmer auto scrollable if scrollable=false', () => {
-    expect(component.find('.dimmer').hasClass('dimmer--scrollable')).toBe(false);
-  });
-
-  it('makes Dimmer auto scrollable if scrollable=true', () => {
-    component.setProps({ scrollable: true });
-    expect(component.find('.dimmer').hasClass('dimmer--scrollable')).toBe(true);
-  });
-
-  it('fade content on enter if fadeContentOnEnter is true', () => {
-    component.setProps({ fadeContentOnEnter: true });
-    const cssTransition = component.find('CSSTransition');
-    expect(cssTransition.prop('classNames')).toStrictEqual({
-      enter: 'dimmer--enter-fade',
-      enterDone: 'dimmer--enter-done dimmer--enter-fade',
-      exit: 'dimmer--exit',
-    });
-  });
-
-  it('fade content on exit if fadeContentOnExit is true', () => {
-    component.setProps({ fadeContentOnExit: true });
-    const cssTransition = component.find('CSSTransition');
-    expect(cssTransition.prop('classNames')).toStrictEqual({
-      enter: '',
-      enterDone: 'dimmer--enter-done',
-      exit: 'dimmer--exit dimmer--exit-fade',
-    });
-  });
-
-  it('calls onExited when the exit animation is finished', () => {
-    component.setProps({ fadeContentOnExit: true });
-    const transition = component.find('CSSTransition');
-    transition.prop('onExited')();
-    expect(props.onExited).toHaveBeenCalled();
-  });
-});

package/src/navigationOption/NavigationOption.spec.js

@@ -1,93 +0,0 @@
-import { shallow } from 'enzyme';
-import { createRef } from 'react';
-
-import Option from '../common/Option';
-import { render } from '../test-utils';
-
-import NavigationOption from '.';
-
-describe('Navigation option', () => {
-  let component;
-  beforeEach(() => {
-    component = shallow(<NavigationOption title="" onClick={jest.fn()} />);
-  });
-
-  it('passes shared props to option', () => {
-    const Icon = () => <svg />;
-    const sharedProps = {
-      media: <Icon />,
-      title: 'A title',
-      content: 'A content',
-      complex: true,
-      disabled: true,
-      href: 'https://example.com',
-    };
-    component.setProps(sharedProps);
-
-    expect(option().props()).toMatchObject(sharedProps);
-  });
-
-  it('calls click handler on option click when not disabled', () => {
-    const onClick = jest.fn();
-    component.setProps({ onClick });
-
-    expect(onClick).not.toHaveBeenCalled();
-    option().simulate('click', { event: true });
-    expect(onClick).toHaveBeenCalledWith({ event: true });
-  });
-
-  it('tells option to render as an anchor when a href is passed', () => {
-    expect(option().prop('as')).not.toBe('a');
-    component.setProps({ href: 'https://example.com' });
-    expect(option().prop('as')).toBe('a');
-  });
-
-  it('tells option to render as the `as` prop when it is passed', () => {
-    expect(option().prop('as')).not.toBe('label');
-    component.setProps({ as: 'label' });
-    expect(option().prop('as')).toBe('label');
-  });
-
-  it('does not call click handler when disabled', () => {
-    const onClick = jest.fn();
-    component.setProps({ onClick, disabled: true });
-
-    expect(onClick).not.toHaveBeenCalled();
-    option().simulate('click', {
-      preventDefault: () => {},
-    });
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  it('renders the circle when enabled', () => {
-    const { container, rerender } = render(<NavigationOption title="" />);
-
-    expect(container.querySelector('.circle')).toBeDefined();
-
-    rerender(<NavigationOption title="" showMediaCircle={false} />);
-
-    expect(container.querySelector('.circle')).toBeNull();
-  });
-
-  it('should pass correct class names to Option', () => {
-    expect(option().props().className).toBe('np-navigation-option');
-    component.setProps({ className: 'test-class-name' });
-
-    expect(option().props().className).toBe('np-navigation-option test-class-name');
-  });
-
-  it('`ref` attribute is passed to NavigationOption and reference is created', () => {
-    const reference = createRef();
-
-    expect(reference.current).toBeFalsy();
-    render(<NavigationOption ref={reference} title="" onClick={jest.fn()} />);
-    expect(reference.current).toBeTruthy();
-  });
-
-  it('renders aligned with container content', () => {
-    render(<NavigationOption isContainerAligned />);
-    expect(document.querySelector('.np-option__container-aligned')).toBeInTheDocument();
-  });
-
-  const option = () => component.find(Option);
-});

package/src/radioOption/RadioOption.spec.js

@@ -1,67 +0,0 @@
-import { shallow } from 'enzyme';
-
-import Option from '../common/Option';
-
-import RadioOption from '.';
-
-describe('Radio option', () => {
-  let component;
-  beforeEach(() => {
-    component = shallow(
-      <RadioOption media={<span />} id="" name="" title="" content="" onChange={jest.fn()} />,
-    );
-  });
-
-  it('passes shared props to option', () => {
-    const Icon = () => <svg />;
-    const sharedProps = {
-      media: <Icon />,
-      title: 'A title',
-      content: 'A content',
-      name: 'a-name',
-      complex: true,
-      disabled: true,
-    };
-    component.setProps(sharedProps);
-
-    expect(option().props()).toStrictEqual(expect.objectContaining(sharedProps));
-  });
-
-  it('passes id to radio button passed as button', () => {
-    component.setProps({ id: 'some-id' });
-    expect(buttonProperty('id')).toBe('some-id');
-  });
-
-  it('passes name to radio button passed as button', () => {
-    component.setProps({ name: 'a-name' });
-    expect(buttonProperty('name')).toBe('a-name');
-  });
-
-  it('passes checked to radio button passed as button', () => {
-    expect(buttonProperty('checked')).toBeFalsy();
-    component.setProps({ checked: true });
-    expect(buttonProperty('checked')).toBeTruthy();
-  });
-
-  it('passes change handler to radio button passed as button', () => {
-    const onChange = jest.fn();
-    component.setProps({ onChange });
-    expect(buttonProperty('onChange')).toBe(onChange);
-  });
-
-  it('passes disabled to radio button passed as button', () => {
-    expect(buttonProperty('disabled')).toBeFalsy();
-    component.setProps({ disabled: true });
-    expect(buttonProperty('disabled')).toBeTruthy();
-  });
-
-  it('renders aligned with container content', () => {
-    component.setProps({ isContainerAligned: true });
-    expect(component.find(Option).shallow().prop('className')).toContain(
-      'np-option__container-aligned',
-    );
-  });
-
-  const option = () => component.find(Option);
-  const buttonProperty = (name) => option().prop('button').props[name];
-});