@transferwise/components 46.84.1 → 46.86.0

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/radioOption/RadioOption.spec.tsx

@@ -0,0 +1,73 @@
+import { render, screen, userEvent } from '../test-utils';
+import RadioOption, { type RadioOptionProps } from '.';
+
+describe('Radio option', () => {
+  const initialProps = {
+    id: 'componentId',
+    name: 'componentName',
+    title: 'Component Title',
+    content: <img alt="contentImage" />,
+    onChange: jest.fn(),
+  };
+
+  const customRender = (overrides: Partial<RadioOptionProps> = {}) =>
+    render(<RadioOption {...initialProps} {...overrides} />);
+
+  it('should render `media`', () => {
+    const Icon = <img alt="media" />;
+    customRender({ media: Icon });
+    expect(screen.getByRole('img', { name: 'media' })).toBeInTheDocument();
+  });
+
+  it('passes props to radio button', () => {
+    customRender();
+    expect(screen.getByRole('radio')).toHaveAttribute('id', initialProps.id);
+  });
+
+  it('passes name to radio button', () => {
+    customRender();
+    expect(screen.getByRole('radio')).toHaveAttribute('name', initialProps.name);
+  });
+
+  describe('checked', () => {
+    it('should be `false` by default', () => {
+      customRender();
+      expect(screen.getByRole('radio')).not.toBeChecked();
+    });
+
+    it('should respect the prop', () => {
+      customRender({ checked: true });
+      expect(screen.getByRole('radio')).toBeChecked();
+    });
+  });
+
+  it('passes change handler to radio button', async () => {
+    customRender();
+    await userEvent.click(screen.getByRole('radio'));
+    expect(initialProps.onChange).toHaveBeenCalledTimes(1);
+  });
+
+  describe('disabled', () => {
+    it('should be `false` by default', () => {
+      customRender();
+      expect(screen.getByRole('radio')).toBeEnabled();
+    });
+
+    it('should respect the prop', () => {
+      customRender({ disabled: true });
+      expect(screen.getByRole('radio')).toBeDisabled();
+    });
+  });
+
+  describe('isContainerAligned', () => {
+    it('should not be aligned by default', () => {
+      const { container } = customRender();
+      expect(container.querySelector('.np-option')).not.toHaveClass('np-option__container-aligned');
+    });
+
+    it('renders aligned with container content', () => {
+      const { container } = customRender({ isContainerAligned: true });
+      expect(container.querySelector('.np-option')).toHaveClass('np-option__container-aligned');
+    });
+  });
+});

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/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();
+    });
+  });
+});