@transferwise/components 46.92.0 → 46.93.0

package/src/dateLookup/dayCalendar/DayCalendar.spec.js

@@ -1,122 +0,0 @@
-import * as formatting from '@transferwise/formatting';
-import { shallow } from 'enzyme';
-
-import DateHeader from '../dateHeader';
-
-import DayCalendarTable from './table';
-
-import DayCalendar from '.';
-
-const locale = 'en-GB';
-const formatMessage = (id) => `${id}`;
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return <Component {...props} intl={{ locale, formatMessage }} />;
-    },
-  defineMessages: (translations) => translations,
-}));
-jest.mock('@transferwise/formatting', () => ({
-  formatDate: jest.fn().mockReturnValue('MonthName XXXX'),
-}));
-
-describe('DayCalendar', () => {
-  const selectedDate = new Date(2018, 10, 27);
-  const min = new Date(1990, 10, 27);
-  const max = new Date(2020, 10, 27);
-  let component;
-  let props;
-
-  beforeEach(() => {
-    props = {
-      selectedDate,
-      min,
-      max,
-      viewMonth: 10,
-      viewYear: 2018,
-      monthFormat: 'long',
-      onSelect: jest.fn(),
-      onLabelClick: jest.fn(),
-      onViewDateUpdate: jest.fn(),
-    };
-    component = shallow(<DayCalendar {...props} />).dive();
-  });
-
-  it('shows the header', () => {
-    expect(header()).toHaveLength(1);
-  });
-
-  it('shows formatted date as header label in long format', () => {
-    expect(header().prop('label')).toBe('MonthName XXXX');
-    expect(formatting.formatDate).toHaveBeenCalledWith(new Date(2018, 10), locale, {
-      month: 'long',
-      year: 'numeric',
-    });
-  });
-
-  it('shows formatted date as header label in short format', () => {
-    component.setProps({ monthFormat: 'short' });
-    expect(header().prop('label')).toBe('MonthName XXXX');
-    expect(formatting.formatDate).toHaveBeenCalledWith(new Date(2018, 10), locale, {
-      month: 'short',
-      year: 'numeric',
-    });
-  });
-
-  it('passes onLabelClick to header component', () => {
-    expect(header().prop('onLabelClick')).toBe(props.onLabelClick);
-  });
-
-  it('passes selectPreviousMonth to header component', () => {
-    expect(header().prop('onPreviousClick')).toBe(component.instance().selectPreviousMonth);
-  });
-
-  it('passes selectNextMonth header component', () => {
-    expect(header().prop('onNextClick')).toBe(component.instance().selectNextMonth);
-  });
-
-  it('passes dateMode header component', () => {
-    expect(header().prop('dateMode')).toBeDefined();
-  });
-
-  it('calls onViewDateUpdate on previous month select', () => {
-    component.instance().selectPreviousMonth();
-    expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 2018, month: 9 });
-  });
-
-  it('calls onViewDateUpdate on previous month select (year before)', () => {
-    component.setProps({ viewMonth: 0 });
-    component.instance().selectPreviousMonth();
-    expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 2017, month: 11 });
-  });
-
-  it('calls onViewDateUpdate on next year select', () => {
-    component.instance().selectNextMonth();
-    expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 2018, month: 11 });
-  });
-
-  it('calls onViewDateUpdate on next year select (year after)', () => {
-    component.setProps({ viewMonth: 11 });
-    component.instance().selectNextMonth();
-    expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 2019, month: 0 });
-  });
-
-  it('shows month calendar table', () => {
-    expect(table()).toHaveLength(1);
-  });
-
-  it('passes props forward to table component', () => {
-    expect(table().prop('selectedDate')).toBe(selectedDate);
-    expect(table().prop('min')).toBe(min);
-    expect(table().prop('max')).toBe(max);
-    expect(table().prop('viewMonth')).toBe(10);
-    expect(table().prop('viewYear')).toBe(2018);
-  });
-
-  it('passes onSelect to table component', () => {
-    expect(table().prop('onSelect')).toBe(props.onSelect);
-  });
-
-  const header = () => component.find(DateHeader);
-  const table = () => component.find(DayCalendarTable);
-});

package/src/dateLookup/dayCalendar/table/DayCalendarTable.spec.js

@@ -1,147 +0,0 @@
-import * as formatting from '@transferwise/formatting';
-import { shallow } from 'enzyme';
-
-import * as dateUtils from '../../../common/dateUtils';
-import TableLink from '../../tableLink';
-
-import DayCalendarTable from '.';
-
-const locale = 'en-GB';
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return <Component {...props} intl={{ locale }} />;
-    },
-  defineMessages: (translations) => translations,
-}));
-
-jest.mock('@transferwise/formatting', () => ({
-  formatDate: jest.fn().mockReturnValue('XXXX'),
-}));
-
-jest.mock('../../../common/dateUtils', () => ({
-  getDayNames: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-  isWithinRange: jest.fn().mockReturnValue(true),
-}));
-
-jest.mock('../../getStartOfDay', () => ({
-  getStartOfDay: (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()),
-}));
-
-describe('DayCalendarTable', () => {
-  let component;
-  let props;
-
-  beforeEach(() => {
-    props = {
-      viewMonth: 11,
-      viewYear: 2018,
-      onSelect: jest.fn(),
-    };
-    component = shallow(<DayCalendarTable {...props} />).dive();
-  });
-
-  it('shows weekday names in table header', () => {
-    const ths = component.find('thead th');
-    expect(ths).toHaveLength(7);
-    expect(ths.at(0).text()).toContain('Mon');
-    expect(ths.at(6).text()).toContain('Sun');
-  });
-
-  it('shows all days of month (2018 December)', () => {
-    expect(component.find('tbody tr')).toHaveLength(6);
-    expect(component.find('tbody td')).toHaveLength(42);
-    expect(component.find(TableLink)).toHaveLength(31);
-  });
-
-  it('shows empty items before first day of month (Sat, 1st December 2018)', () => {
-    expect(getTableDataAt(0).children()).toHaveLength(0);
-    expect(getTableDataAt(4).children()).toHaveLength(0);
-    expect(getTableDataAt(5).children()).toHaveLength(1);
-    expect(getTableDataAt(6).children()).toHaveLength(1);
-  });
-
-  it('display empty cells after the last day (Mon, 31st 2018 December)', () => {
-    expect(getTableDataAt(35).children()).toHaveLength(1);
-    expect(getTableDataAt(36).children()).toHaveLength(0);
-    expect(getTableDataAt(37).children()).toHaveLength(0);
-  });
-
-  it('passes day value and type to TableLink', () => {
-    expect(getTableLinkAt(0).prop('item')).toBe(1);
-    expect(getTableLinkAt(0).prop('type')).toBe('day');
-  });
-
-  it('shows formatted days', () => {
-    expect(getTableLinkAt(0).prop('title')).toBe('XXXX');
-    expect(formatting.formatDate).toHaveBeenCalledWith(new Date(2018, 11, 1), locale, {
-      day: 'numeric',
-    });
-  });
-
-  it('shows full date as link title', () => {
-    expect(getTableLinkAt(0).prop('longTitle')).toBe('XXXX');
-    expect(formatting.formatDate).toHaveBeenCalledWith(new Date(2018, 11, 1), locale);
-  });
-
-  it('show selectedDate as active', () => {
-    component.setProps({ selectedDate: new Date(2018, 11, 27) });
-    expect(component.find(TableLink).find({ active: true }).prop('item')).toBe(27);
-  });
-
-  it('sets property "disabled" for table links (calls isWithinRange)', () => {
-    const selectedDate = new Date(2018, 11, 26);
-    const min = new Date(2018, 11, 26);
-    const max = new Date(2018, 11, 27);
-    component.setProps({ selectedDate, min, max });
-    expect(dateUtils.isWithinRange).toHaveBeenCalledWith(selectedDate, min, max);
-    expect(getTableLinkAt(0).prop('disabled')).toBe(false);
-  });
-
-  it('highlights today', () => {
-    const today = new Date();
-    component.setProps({
-      selectedDate: today,
-      viewMonth: today.getMonth(),
-      viewYear: today.getFullYear(),
-    });
-    expect(component.find(TableLink).find({ today: true }).prop('item')).toBe(today.getDate());
-  });
-
-  it('passes selectDay to TableLink', () => {
-    expect(getTableLinkAt(0).prop('onClick')).toBe(component.instance().selectDay);
-  });
-
-  it('calls onSelect when day gets selected', () => {
-    component.instance().selectDay(1);
-    expect(props.onSelect).toHaveBeenCalledWith(new Date(2018, 11, 1));
-  });
-
-  it('sets autofocus to true when 5 is the selected day', () => {
-    component.setProps({ selectedDate: new Date(2018, 11, 5) });
-    expect(getTableLinkAt(4).prop('autofocus')).toBe(true);
-  });
-
-  it('does not set autofocus to true when 5 is the selected day but not the right month', () => {
-    component.setProps({ selectedDate: new Date(2018, 10, 5) });
-    expect(getTableLinkAt(4).prop('autofocus')).toBe(false);
-  });
-
-  it('does not set autofocus to true when 5 is the selected day but not the right year', () => {
-    component.setProps({ selectedDate: new Date(2017, 11, 5) });
-    expect(getTableLinkAt(4).prop('autofocus')).toBe(false);
-  });
-
-  it('sets autofocus to true when selected date is null and current day is visible', () => {
-    const today = new Date();
-    component.setProps({
-      selectedDate: today,
-      viewMonth: today.getMonth(),
-      viewYear: today.getFullYear(),
-    });
-    expect(component.find(TableLink).find({ today: true }).prop('autofocus')).toBe(true);
-  });
-
-  const getTableLinkAt = (i) => component.find(TableLink).at(i);
-  const getTableDataAt = (i) => component.find('tbody td').at(i);
-});

package/src/dateLookup/monthCalendar/MonthCalendar.spec.js

@@ -1,105 +0,0 @@
-import * as formatting from '@transferwise/formatting';
-import { shallow } from 'enzyme';
-
-import DateHeader from '../dateHeader';
-
-import MonthCalendarTable from './table';
-
-import MonthCalendar from '.';
-
-const defaultLocale = 'en-GB';
-const formatMessage = (id) => `${id}`;
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return <Component {...props} intl={{ locale: defaultLocale, formatMessage }} />;
-    },
-  defineMessages: (translations) => translations,
-}));
-jest.mock('@transferwise/formatting', () => ({
-  formatDate: jest.fn().mockReturnValue('XXXX'),
-}));
-
-describe('MonthCalendar', () => {
-  const selectedDate = new Date(2018, 11, 27);
-  const min = new Date(1990, 11, 27);
-  const max = new Date(2020, 11, 27);
-  let component;
-  let props;
-
-  beforeEach(() => {
-    props = {
-      selectedDate,
-      min,
-      max,
-      viewYear: 2018,
-      placeholder: 'Enter date..',
-      onSelect: jest.fn(),
-      onLabelClick: jest.fn(),
-      onViewDateUpdate: jest.fn(),
-    };
-    component = shallow(<MonthCalendar {...props} />).dive();
-  });
-
-  it('shows the header', () => {
-    expect(header()).toHaveLength(1);
-  });
-
-  it('shows formatted date as header label', () => {
-    expect(header().prop('label')).toBe('XXXX');
-    expect(formatting.formatDate).toHaveBeenCalledWith(new Date(2018, 0), defaultLocale, {
-      year: 'numeric',
-    });
-  });
-
-  it('passes onLabelClick to header component', () => {
-    expect(header().prop('onLabelClick')).toBe(props.onLabelClick);
-  });
-
-  it('passes selectPreviousYear to header component', () => {
-    expect(header().prop('onPreviousClick')).toBe(component.instance().selectPreviousYear);
-  });
-
-  it('passes selectNextYear header component', () => {
-    expect(header().prop('onNextClick')).toBe(component.instance().selectNextYear);
-  });
-
-  it('passes dateMode header component', () => {
-    expect(header().prop('dateMode')).toBeDefined();
-  });
-
-  it('calls onViewDateUpdate on previous year select', () => {
-    component.instance().selectPreviousYear();
-    expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 2017 });
-  });
-
-  it('calls onViewDateUpdate on next year select', () => {
-    component.instance().selectNextYear();
-    expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 2019 });
-  });
-
-  it('shows month calendar table', () => {
-    expect(table()).toHaveLength(1);
-  });
-
-  it('passes props forward to table component', () => {
-    expect(table().prop('selectedDate')).toBe(selectedDate);
-    expect(table().prop('min')).toBe(min);
-    expect(table().prop('max')).toBe(max);
-    expect(table().prop('viewYear')).toBe(2018);
-    expect(table().prop('placeholder')).toBe('Enter date..');
-  });
-
-  it('passes onMonthSelect to table component', () => {
-    expect(table().prop('onSelect')).toBe(component.instance().onMonthSelect);
-  });
-
-  it('calls onViewDateUpdate and onSelect on month select', () => {
-    component.instance().onMonthSelect(1);
-    expect(props.onViewDateUpdate).toHaveBeenCalledWith({ month: 1 });
-    expect(props.onSelect).toHaveBeenCalledTimes(1);
-  });
-
-  const header = () => component.find(DateHeader);
-  const table = () => component.find(MonthCalendarTable);
-});

package/src/dateLookup/monthCalendar/table/MonthCalendarTable.spec.js

@@ -1,120 +0,0 @@
-import * as formatting from '@transferwise/formatting';
-import { shallow } from 'enzyme';
-import { useIntl } from 'react-intl';
-
-import MonthCalendarTable from '.';
-
-jest.mock('react-intl');
-jest.mock('@transferwise/formatting', () => ({
-  formatDate: jest.fn().mockReturnValue('MonthName'),
-}));
-
-describe('MonthCalendarTable', () => {
-  const locale = 'en-GB';
-  let component;
-  let props;
-
-  beforeEach(() => {
-    props = {
-      viewYear: 2018,
-      placeholder: 'Enter date..',
-      onSelect: jest.fn(),
-    };
-    useIntl.mockReturnValue({ locale });
-    component = shallow(<MonthCalendarTable {...props} />);
-  });
-
-  it('generates 3x4 table', () => {
-    expect(component.find('tbody tr')).toHaveLength(3);
-    expect(component.find('tbody td')).toHaveLength(12);
-    expect(getTableLink()).toHaveLength(12);
-  });
-
-  it('starts with month 0 and end with 11', () => {
-    expect(getTableLinkAt(0).prop('item')).toBe(0);
-    expect(getTableLinkAt(11).prop('item')).toBe(11);
-  });
-
-  it('passes month value and type to TableLink', () => {
-    expect(getTableLinkAt(0).prop('item')).toBe(0);
-    expect(getTableLinkAt(0).prop('type')).toBe('month');
-  });
-
-  it('shows formatted months', () => {
-    expect(getTableLinkAt(0).prop('title')).toBe('MonthName');
-    expect(formatting.formatDate).toHaveBeenCalledWith(new Date(2018, 0), locale, {
-      month: 'short',
-    });
-  });
-
-  it('show selectedDate as active', () => {
-    component.setProps({ selectedDate: new Date(2018, 11, 27) });
-    expect(getTableLinkAt(10).prop('active')).toBe(false);
-    expect(getTableLinkAt(11).prop('active')).toBe(true);
-  });
-
-  it('disables dates outside of min and max range', () => {
-    component.setProps({
-      selectedDate: new Date(2018, 6, 1),
-      min: new Date(2018, 6, 1),
-      max: new Date(2018, 7, 31),
-    });
-    expect(getTableLinkAt(5).prop('disabled')).toBe(true);
-    expect(getTableLinkAt(6).prop('disabled')).toBe(false);
-    expect(getTableLinkAt(7).prop('disabled')).toBe(false);
-    expect(getTableLinkAt(8).prop('disabled')).toBe(true);
-  });
-
-  it('highlights today', () => {
-    const today = new Date();
-    component.setProps({
-      selectedDate: today,
-      viewYear: today.getFullYear(),
-    });
-    expect(getTableLink().find({ today: true }).prop('item')).toBe(today.getMonth());
-  });
-
-  it('passes onSelect to TableLink', () => {
-    expect(getTableLinkAt(0).prop('onClick')).toBe(props.onSelect);
-  });
-
-  it('shows placeholder for screen-readers', () => {
-    expect(component.find('.sr-only').text()).toBe('Enter date..');
-  });
-
-  it('sets autofocus to true when June is the selected month', () => {
-    component.setProps({ selectedDate: new Date(2018, 5, 1) });
-    expect(getTableLinkAt(5).prop('autofocus')).toBe(true);
-  });
-
-  it('does not set autofocus to true when June is the selected month but not the right year', () => {
-    component.setProps({ selectedDate: new Date(2017, 5, 1) });
-    expect(getTableLinkAt(5).prop('autofocus')).toBe(false);
-  });
-
-  it('sets autofocus to true when selected date is null and current month is visible', () => {
-    const today = new Date();
-    component.setProps({
-      selectedDate: null,
-      viewYear: today.getFullYear(),
-      viewMonth: today.getMonth(),
-    });
-    expect(getTableLink().find({ today: true }).prop('autofocus')).toBe(true);
-  });
-
-  it('sets autofocus to true on the second month when the first month is disabled', () => {
-    component.setProps({
-      selectedDate: null,
-      viewYear: 2022,
-      min: new Date(2022, 1, 28),
-      viewMonth: 0,
-      isDisabled: (month) => month === 0,
-    });
-
-    expect(getTableLinkAt(0).prop('autofocus')).toBe(false);
-    expect(getTableLinkAt(1).prop('autofocus')).toBe(true);
-  });
-
-  const getTableLinkAt = (i) => component.find('[title="MonthName"]').at(i);
-  const getTableLink = () => component.find('[title="MonthName"]');
-});

package/src/dateLookup/tableLink/TableLink.spec.js

@@ -1,109 +0,0 @@
-import { shallow } from 'enzyme';
-import { useIntl } from 'react-intl';
-
-import TableLink from '.';
-
-jest.mock('react-intl');
-
-jest.mock('../DateLookup.messages', () => ({
-  selected: {
-    id: 'neptune.DateLookup.selected',
-    defaultMessage: 'selected',
-  },
-  day: {
-    id: 'neptune.DateLookup.day',
-    defaultMessage: 'day',
-  },
-  month: {
-    id: 'neptune.DateLookup.month',
-    defaultMessage: 'month',
-  },
-  year: {
-    id: 'neptune.DateLookup.year',
-    defaultMessage: 'year',
-  },
-}));
-
-describe('TableLink', () => {
-  let component;
-  let props;
-
-  beforeEach(() => {
-    useIntl.mockReturnValue({
-      formatMessage: (message) => message.defaultMessage,
-    });
-    props = {
-      item: 12,
-      type: 'day',
-      active: false,
-      disabled: false,
-      today: false,
-      onClick: jest.fn(),
-      title: '12',
-      longTitle: '12/12/1212',
-    };
-    component = shallow(<TableLink {...props} />);
-  });
-
-  it('shows item value', () => {
-    expect(button().text()).toBe('12');
-  });
-
-  it('shows title when provided (instead of item value)', () => {
-    component.setProps({ title: 'five' });
-    expect(button().text()).toBe('five');
-  });
-
-  it('disables the link', () => {
-    component.setProps({ disabled: true });
-    expect(button().prop('disabled')).toBe(true);
-    expect(props.onClick).not.toHaveBeenCalled();
-    button().simulate('click', { preventDefault: () => {} });
-    expect(props.onClick).not.toHaveBeenCalled();
-  });
-
-  it('highlights active link', () => {
-    expect(button().hasClass('active')).toBe(false);
-    component.setProps({ active: true });
-    expect(button().hasClass('active')).toBe(true);
-  });
-
-  it('highlights today', () => {
-    expect(button().hasClass('today')).toBe(false);
-    component.setProps({ today: true });
-    expect(button().hasClass('today')).toBe(true);
-  });
-
-  it('calls click handler on click', () => {
-    button().simulate('click', { preventDefault: () => {} });
-    expect(props.onClick).toHaveBeenCalledWith(12);
-  });
-
-  it('adds aria label to selected day', () => {
-    expect(button().hasClass('active')).toBe(false);
-    component.setProps({ active: true });
-    expect(button().prop('aria-label')).toBe('12/12/1212, selected day');
-  });
-
-  it('adds aria pressed to selected day', () => {
-    expect(button().hasClass('active')).toBe(false);
-    component.setProps({ active: true });
-    expect(button().prop('aria-pressed')).toBe(true);
-  });
-
-  it('adds aria label to selected month', () => {
-    component.setProps({ type: 'month' });
-    expect(button().hasClass('active')).toBe(false);
-    component.setProps({ active: true });
-    expect(button().prop('aria-label')).toBe('12/12/1212, selected month');
-  });
-
-  it('adds aria label to selected year', () => {
-    component.setProps({ type: 'year' });
-    expect(button().hasClass('active')).toBe(false);
-    component.setProps({ active: true });
-    expect(button().prop('aria-label')).toBe('12/12/1212, selected year');
-  });
-
-  const button = () => component.find('button');
-});

package/src/dateLookup/yearCalendar/YearCalendar.spec.js

@@ -1,88 +0,0 @@
-import { shallow } from 'enzyme';
-
-import DateHeader from '../dateHeader';
-
-import YearCalendarTable from './table';
-
-import YearCalendar from '.';
-
-const formatMessage = (id) => `${id}`;
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return <Component {...props} intl={{ formatMessage }} />;
-    },
-  defineMessages: (translations) => translations,
-}));
-
-describe('YearCalendar', () => {
-  const selectedDate = new Date(2018, 11, 27);
-  const min = new Date(1990, 11, 27);
-  const max = new Date(2020, 11, 27);
-  let component;
-  let props;
-
-  beforeEach(() => {
-    props = {
-      selectedDate,
-      min,
-      max,
-      viewYear: 2018,
-      placeholder: 'Enter date..',
-      onSelect: jest.fn(),
-      onViewDateUpdate: jest.fn(),
-    };
-    component = shallow(<YearCalendar {...props} />).dive();
-  });
-
-  it('shows the header', () => {
-    expect(header()).toHaveLength(1);
-  });
-
-  it('passes selectPreviousYears to header component', () => {
-    expect(header().prop('onPreviousClick')).toBe(component.instance().selectPreviousYears);
-  });
-
-  it('passes selectNextYears header component', () => {
-    expect(header().prop('onNextClick')).toBe(component.instance().selectNextYears);
-  });
-
-  it('passes dateMode header component', () => {
-    expect(header().prop('dateMode')).toBeDefined();
-  });
-
-  it('calls onViewDateUpdate on previous years select', () => {
-    component.instance().selectPreviousYears();
-    expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 1998 });
-  });
-
-  it('calls onViewDateUpdate on next years select', () => {
-    component.instance().selectNextYears();
-    expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 2038 });
-  });
-
-  it('shows year calendar table', () => {
-    expect(table()).toHaveLength(1);
-  });
-
-  it('passes props forward to table component', () => {
-    expect(table().prop('selectedDate')).toBe(selectedDate);
-    expect(table().prop('min')).toBe(min);
-    expect(table().prop('max')).toBe(max);
-    expect(table().prop('viewYear')).toBe(2018);
-    expect(table().prop('placeholder')).toBe('Enter date..');
-  });
-
-  it('passes onYearSelect to table component', () => {
-    expect(table().prop('onSelect')).toBe(component.instance().onYearSelect);
-  });
-
-  it('calls onViewDateUpdate and onSelect on year select', () => {
-    component.instance().onYearSelect(1990);
-    expect(props.onViewDateUpdate).toHaveBeenCalledWith({ year: 1990 });
-    expect(props.onSelect).toHaveBeenCalledTimes(1);
-  });
-
-  const header = () => component.find(DateHeader);
-  const table = () => component.find(YearCalendarTable);
-});