@transferwise/components 46.92.0 → 46.93.0

package/src/dateLookup/DateLookup.testingLibrary.spec.js

@@ -1,256 +0,0 @@
-import { userEvent } from '@testing-library/user-event';
-import { act } from 'react';
-
-import { render, screen, mockMatchMedia } from '../test-utils';
-import DateLookup from './DateLookup';
-
-mockMatchMedia();
-
-jest.mock(
-  '../dimmer',
-  () =>
-    function ({ children }) {
-      return <div className="dimmer">{children}</div>;
-    },
-);
-
-describe('DateLookup (events)', () => {
-  const date = new Date(2018, 11, 27);
-  const min = new Date(2018, 11, 26);
-  const max = new Date(2018, 11, 28);
-
-  describe('when not clearable', () => {
-    /** @type {jest.Mock} */
-    let handleChange;
-
-    const setup = async (overrides = {}) => {
-      handleChange = jest.fn();
-
-      /** @type {import('@testing-library/react').RenderResult} */
-      let view;
-      await act(async () => {
-        view = render(
-          <>
-            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-            <label id="prioritized-label">Prioritized label</label>
-            <DateLookup
-              value={date}
-              min={min}
-              max={max}
-              size="lg"
-              placeholder="Select date"
-              label="label"
-              aria-labelledby="prioritized-label"
-              disabled={false}
-              clearable={false}
-              onChange={handleChange}
-              onClick={jest.fn()}
-              {...overrides}
-            />
-          </>,
-        );
-      });
-      return view;
-    };
-
-    it('switches to years', async () => {
-      const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
-
-      expect(getActiveYearButton(view)).toHaveFocus();
-
-      await closeDateLookup(view);
-    });
-
-    it('has aria-label for 20 years', async () => {
-      const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
-
-      expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
-
-      await closeDateLookup(view);
-    });
-
-    it('switches to months', async () => {
-      const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
-      await userEvent.click(getActiveYearButton(view));
-
-      expect(getActiveMonthButton(view)).toHaveFocus();
-
-      await closeDateLookup(view);
-    });
-
-    it('has aria label for year', async () => {
-      const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
-      await userEvent.click(getActiveYearButton(view));
-
-      expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
-
-      await closeDateLookup(view);
-    });
-
-    it('switches to days', async () => {
-      const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
-      await userEvent.click(getActiveYearButton(view));
-      await userEvent.click(getActiveMonthButton(view));
-
-      expect(getActiveDayButton(view)).toHaveFocus();
-
-      await closeDateLookup(view);
-    });
-
-    it('has aria label for month', async () => {
-      const view = await setup();
-      await openDateLookup(view);
-      await clickDateButton(view);
-      await userEvent.click(getActiveYearButton(view));
-      await userEvent.click(getActiveMonthButton(view));
-
-      expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
-
-      await closeDateLookup(view);
-    });
-
-    it('updates selected date and closes', async () => {
-      const view = await setup();
-      await openDateLookup(view);
-      const d = new Date(2018, 11, 28);
-      const newDay = screen.getByText(d.getDate().toString());
-      await userEvent.click(newDay);
-
-      expect(handleChange).toHaveBeenCalledWith(d);
-      expect(getOpenButton(view)).toHaveFocus();
-
-      await closeDateLookup(view);
-    });
-
-    it('has aria label on selected date', async () => {
-      const view = await setup();
-      await openDateLookup(view);
-      const d = new Date(2018, 11, 28);
-      const newDay = screen.getByText(d.getDate().toString());
-      await userEvent.click(newDay);
-      await openDateLookup(view);
-      expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
-
-      await closeDateLookup(view);
-    });
-
-    it('supports custom `aria-labelledby` attribute', async () => {
-      const view = await setup();
-      expect(screen.getByRole('button', { name: /^Prioritized label/ })).toBeInTheDocument();
-      await closeDateLookup(view);
-    });
-
-    it('reads our the HTML label as well as the input prefix and the value', async () => {
-      const view = await setup();
-      expect(
-        screen.getByRole('button', { name: 'Prioritized label label 27 December 2018' }),
-      ).toBeInTheDocument();
-      await closeDateLookup(view);
-    });
-
-    it('reads our the HTML label as well as the input prefix and the placeholder', async () => {
-      const view = await setup({ value: undefined });
-      expect(
-        screen.getByRole('button', { name: 'Prioritized label label Select date' }),
-      ).toBeInTheDocument();
-      await closeDateLookup(view);
-    });
-  });
-
-  describe('when is clearable', () => {
-    /** @satisfies {import('./DateLookup').DateLookupProps} */
-    const props = {
-      value: date,
-      onChange: jest.fn(),
-      clearable: true,
-    };
-
-    const setup = async () => {
-      /** @type {import('@testing-library/react').RenderResult} */
-      let view;
-      await act(async () => {
-        view = render(<DateLookup {...props} />);
-      });
-      return view;
-    };
-
-    it(`doesn't show clear button if disable is true`, async () => {
-      const view = await setup();
-      expect(getClearButton(view)).toBeInTheDocument();
-
-      view.rerender(<DateLookup {...props} disabled />);
-
-      expect(getClearButton(view)).not.toBeInTheDocument();
-    });
-
-    it('when user clicks on clear the focus returns to btn', async () => {
-      const view = await setup();
-      await clickClearButton(view);
-      expect(getOpenButton(view)).toHaveFocus();
-    });
-
-    it('onChange gets called with null when reset button is clicked', async () => {
-      const view = await setup();
-      await clickClearButton(view);
-      expect(props.onChange).toHaveBeenCalledWith(null);
-    });
-  });
-
-  const openDateLookup = async (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => userEvent.click(getOpenButton(view));
-
-  const clickDateButton = async (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => userEvent.click(getDateButton(view));
-
-  // Close dateLookup and removes events attached to documents.
-  const closeDateLookup = async (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => userEvent.click(view.container);
-
-  const clickClearButton = async (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => userEvent.click(getClearButton(view));
-
-  const getActiveYearButton = (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => {
-    return view.container.querySelector('button.tw-date-lookup-year-option.active');
-  };
-
-  const getActiveMonthButton = (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => {
-    return view.container.querySelector('button.tw-date-lookup-month-option.active');
-  };
-
-  const getActiveDayButton = (
-    /** @type {import('@testing-library/react').RenderResult} */ view,
-  ) => {
-    return view.container.querySelector('button.tw-date-lookup-day-option.active');
-  };
-
-  const getButtonByAriaLabel = (/** @type {string} */ ariaLabel) => {
-    return screen.getByRole('button', { name: ariaLabel });
-  };
-  const getClearButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    view.container.querySelector('.clear-btn');
-  const getOpenButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    view.container.querySelector('button.np-date-trigger');
-  const getDateButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    view.container.querySelector('button.tw-date-lookup-header-current');
-});

package/src/dateLookup/DateLookup.view.spec.js

@@ -1,151 +0,0 @@
-import { shallow } from 'enzyme';
-
-import { mockMatchMedia } from '../test-utils';
-
-import DateTrigger from './dateTrigger';
-import DayCalendar from './dayCalendar';
-import MonthCalendar from './monthCalendar';
-import YearCalendar from './yearCalendar';
-
-import { DateLookupWithoutInputAttributes as DateLookup } from './DateLookup';
-
-mockMatchMedia();
-
-const defaultLocale = 'en-GB';
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return <Component {...props} intl={{ locale: defaultLocale }} />;
-    },
-  useIntl: () => ({ locale: defaultLocale }),
-  defineMessages: (translations) => translations,
-}));
-
-describe('DateLookup view', () => {
-  const date = new Date(2018, 11, 27);
-  const min = new Date(2018, 11, 26);
-  const max = new Date(2018, 11, 28);
-  let component;
-  let props;
-
-  beforeEach(() => {
-    props = {
-      value: date,
-      min,
-      max,
-      size: 'lg',
-      placeholder: 'Asd..',
-      label: 'Date..',
-      onChange: jest.fn(),
-      id: '123456',
-    };
-    component = shallow(<DateLookup {...props} />);
-  });
-
-  it('shows open button', () => {
-    expect(dateTrigger()).toHaveLength(1);
-  });
-
-  it('passes id to the component', () => {
-    expect(component.prop('id')).toBe('123456');
-  });
-
-  it('passes props forward to open button', () => {
-    expect(Number(dateTrigger().prop('selectedDate'))).toBe(Number(date));
-    expect(dateTrigger().prop('size')).toBe('lg');
-    expect(dateTrigger().prop('placeholder')).toBe('Asd..');
-    expect(dateTrigger().prop('label')).toBe('Date..');
-    expect(dateTrigger().prop('monthFormat')).toBe('long');
-    expect(dateTrigger().prop('disabled')).toBe(false);
-    expect(dateTrigger().prop('onClick')).toBe(component.instance().open);
-    expect(dateTrigger().prop('children')).not.toBeNull();
-  });
-
-  it('passes onClear prop to open button', () => {
-    component.setProps({ clearable: true });
-    expect(dateTrigger().prop('onClear')).not.toBeNull();
-  });
-
-  describe('when in day mode', () => {
-    beforeEach(() => {
-      component.setState({ open: true, mode: 'day' });
-    });
-
-    it('renders day calendar', () => {
-      expect(dayCalendar()).toHaveLength(1);
-    });
-
-    it('passes props forward to day calendar', () => {
-      expect(Number(dayCalendar().prop('selectedDate'))).toBe(Number(date));
-      expect(Number(dayCalendar().prop('min'))).toBe(Number(min));
-      expect(Number(dayCalendar().prop('max'))).toBe(Number(max));
-      expect(dayCalendar().prop('viewMonth')).toBe(11);
-      expect(dayCalendar().prop('viewYear')).toBe(2018);
-      expect(dayCalendar().prop('monthFormat')).toBe('long');
-    });
-
-    it('passes event handlers forward to day calendar', () => {
-      expect(dayCalendar().prop('onSelect')).toBe(component.instance().handleSelectedDateUpdate);
-      expect(dayCalendar().prop('onLabelClick')).toBe(component.instance().switchToYears);
-      expect(dayCalendar().prop('onViewDateUpdate')).toBe(
-        component.instance().handleViewDateUpdate,
-      );
-    });
-  });
-
-  describe('when in month mode', () => {
-    beforeEach(() => {
-      component.setState({ open: true, mode: 'month' });
-    });
-
-    it('renders month calendar', () => {
-      expect(monthCalendar()).toHaveLength(1);
-    });
-
-    it('passes props forward to month calendar', () => {
-      expect(Number(monthCalendar().prop('selectedDate'))).toBe(Number(date));
-      expect(Number(monthCalendar().prop('min'))).toBe(Number(min));
-      expect(Number(monthCalendar().prop('max'))).toBe(Number(max));
-      expect(monthCalendar().prop('viewYear')).toBe(2018);
-      expect(monthCalendar().prop('placeholder')).toBe('Asd..');
-    });
-
-    it('passes event handlers forward to month calendar', () => {
-      expect(monthCalendar().prop('onSelect')).toBe(component.instance().switchToDays);
-      expect(monthCalendar().prop('onLabelClick')).toBe(component.instance().switchToYears);
-      expect(monthCalendar().prop('onViewDateUpdate')).toBe(
-        component.instance().handleViewDateUpdate,
-      );
-    });
-  });
-
-  describe('when in year mode', () => {
-    beforeEach(() => {
-      component.setState({ open: true, mode: 'year' });
-    });
-
-    it('renders year calendar', () => {
-      expect(yearCalendar()).toHaveLength(1);
-    });
-
-    it('passes props forward to year calendar', () => {
-      expect(Number(yearCalendar().prop('selectedDate'))).toBe(Number(date));
-      expect(Number(yearCalendar().prop('min'))).toBe(Number(min));
-      expect(Number(yearCalendar().prop('max'))).toBe(Number(max));
-      expect(yearCalendar().prop('viewYear')).toBe(2018);
-      expect(yearCalendar().prop('placeholder')).toBe('Asd..');
-    });
-
-    it('passes event handlers forward to year calendar', () => {
-      expect(yearCalendar().prop('onSelect')).toBe(component.instance().switchToMonths);
-      expect(yearCalendar().prop('onViewDateUpdate')).toBe(
-        component.instance().handleViewDateUpdate,
-      );
-    });
-  });
-
-  const dateTrigger = () => component.find(DateTrigger);
-  const dayCalendar = () => component.find(DayCalendar);
-  const monthCalendar = () => component.find(MonthCalendar);
-  const yearCalendar = () => component.find(YearCalendar);
-});

package/src/dateLookup/dateHeader/DateHeader.spec.js

@@ -1,95 +0,0 @@
-import { shallow } from 'enzyme';
-import { useIntl } from 'react-intl';
-
-import Chevron from '../../chevron';
-import { mockMatchMedia } from '../../test-utils';
-
-import DateHeader from '.';
-
-mockMatchMedia();
-jest.mock('react-intl');
-jest.mock('../DateLookup.messages', () => ({
-  previous: {
-    id: 'neptune.DateLookup.previous',
-    defaultMessage: 'previous',
-  },
-  next: {
-    id: 'neptune.DateLookup.next',
-    defaultMessage: 'next',
-  },
-  goTo20YearView: {
-    id: 'neptune.DateLookup.goTo20YearView',
-    defaultMessage: 'go to 20 year view',
-  },
-}));
-describe('DateHeader', () => {
-  let component;
-  let props;
-
-  beforeEach(() => {
-    useIntl.mockReturnValue({
-      locale: 'en-GB',
-      formatMessage: (message) => message.defaultMessage,
-      defineMessages: (translations) => translations,
-    });
-    props = {
-      onPreviousClick: jest.fn(),
-      onNextClick: jest.fn(),
-      dateMode: 'year',
-    };
-    component = shallow(<DateHeader {...props} />);
-  });
-
-  it('shows previous and next buttons', () => {
-    const chevrons = component.find(Chevron);
-    expect(chevrons).toHaveLength(2);
-  });
-
-  it('does not show label and middle button by default', () => {
-    expect(component.find('button')).toHaveLength(2);
-    expect(component.find('tw-date-lookup-header-current')).toHaveLength(0);
-  });
-
-  it('calls previous button handler on previous click', () => {
-    component.find('button').at(0).simulate('click');
-    expect(props.onPreviousClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls next button handler on next click', () => {
-    component.find('button').at(1).simulate('click');
-    expect(props.onNextClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('has aria-label on previous button', () => {
-    let previous = component.find('button').at(0);
-    expect(previous.prop('aria-label')).toBe('previous year');
-  });
-
-  it('has aria-label on next button', () => {
-    let previous = component.find('button').at(1);
-    expect(previous.prop('aria-label')).toBe('next year');
-  });
-
-  describe('when label is provided', () => {
-    beforeEach(() => {
-      component.setProps({ label: 'trolo' });
-      useIntl.mockReturnValue({
-        locale: 'en-GB',
-        formatMessage: (message) => message,
-        defineMessages: (translations) => translations,
-      });
-    });
-
-    it('shows the label', () => {
-      expect(component.find('button')).toHaveLength(3);
-      expect(component.find('.tw-date-lookup-header-current').text()).toBe('trolo');
-    });
-
-    it('calls label click handler on label click', () => {
-      const onLabelClick = jest.fn();
-      component.setProps({ onLabelClick });
-      component.find('.tw-date-lookup-header-current').simulate('click');
-      expect(onLabelClick).toHaveBeenCalledTimes(1);
-    });
-  });
-});

package/src/dateLookup/dateTrigger/DateTrigger.spec.js

@@ -1,123 +0,0 @@
-import * as formatting from '@transferwise/formatting';
-import { shallow } from 'enzyme';
-
-import Chevron from '../../chevron';
-
-import DateTrigger from '.';
-
-const locale = 'en-GB';
-const formatMessage = (message) => message.id;
-
-jest.mock('react-intl', () => ({
-  ...jest.requireActual('react-intl'),
-  useIntl: jest.fn(() => ({ locale, formatMessage })),
-}));
-
-jest.mock('@transferwise/formatting', () => ({
-  formatDate: jest.fn().mockReturnValue('1.2.3'),
-}));
-
-describe('DateTrigger', () => {
-  const selectedDate = new Date(1990, 11, 27);
-  const locale = 'en-GB';
-  let component;
-  let props;
-
-  beforeEach(() => {
-    props = {
-      'aria-expanded': false,
-      size: 'md',
-      placeholder: 'Enter date..',
-      label: '',
-      monthFormat: 'long',
-      disabled: false,
-      onClick: jest.fn(),
-      onClear: null,
-    };
-
-    component = shallow(<DateTrigger {...props} />);
-  });
-
-  it('shows placeholder', () => {
-    expect(button().text()).toContain('Enter date..');
-  });
-
-  describe('when date is provided', () => {
-    beforeEach(() => {
-      component.setProps({ selectedDate });
-    });
-
-    it('shows selected date in long format', () => {
-      expect(button().text()).toContain('1.2.3');
-      expect(formatting.formatDate).toHaveBeenLastCalledWith(selectedDate, locale, {
-        day: 'numeric',
-        month: 'long',
-        year: 'numeric',
-      });
-    });
-
-    it('shows selected date in short format', () => {
-      component.setProps({ monthFormat: 'short' });
-      expect(formatting.formatDate).toHaveBeenLastCalledWith(selectedDate, locale, {
-        day: 'numeric',
-        month: 'short',
-        year: 'numeric',
-      });
-    });
-  });
-
-  it('does not show label by default', () => {
-    expect(label()).toHaveLength(0);
-  });
-
-  it('shows label when provided', () => {
-    component.setProps({ label: 'hello' });
-    expect(label().text()).toBe('hello');
-  });
-
-  it('adds label to clear button aria-label', () => {
-    const onClear = jest.fn();
-    component.setProps({ label: 'hello', onClear });
-    expect(clearButton().prop('aria-label')).toBe('neptune.ClearButton.ariaLabel hello');
-  });
-
-  it('calls on click handler on button click', () => {
-    button().simulate('click');
-    expect(props.onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('can disable the button', () => {
-    component.setProps({ disabled: true });
-    expect(button().prop('disabled')).toBe(true);
-  });
-
-  it('shows small button', () => {
-    component.setProps({ size: 'sm' });
-    expect(button().hasClass('btn-sm')).toBe(true);
-  });
-
-  it('shows medium button', () => {
-    component.setProps({ size: 'md' });
-    expect(button().hasClass('btn-md')).toBe(true);
-  });
-
-  it('shows large button', () => {
-    component.setProps({ size: 'lg' });
-    expect(button().hasClass('btn-lg')).toBe(true);
-  });
-
-  it('shows chevron button when onClear is not provided', () => {
-    expect(clearButton()).toHaveLength(0);
-    expect(chevron()).toHaveLength(1);
-  });
-
-  it('shows clear button when onClear is provided', () => {
-    component.setProps({ onClear: jest.fn() });
-    expect(clearButton()).toHaveLength(1);
-  });
-
-  const button = () => component.find('.np-date-trigger');
-  const clearButton = () => component.find('.clear-btn');
-  const chevron = () => component.find(Chevron);
-  const label = () => component.find('.np-date-trigger-label');
-});