@transferwise/components 46.91.0 → 46.93.0

package/src/dateLookup/yearCalendar/table/YearCalendarTable.spec.js

@@ -1,121 +0,0 @@
-import * as formatting from '@transferwise/formatting';
-import { shallow } from 'enzyme';
-import { useIntl } from 'react-intl';
-
-import YearCalendarTable from '.';
-
-jest.mock('react-intl');
-jest.mock('@transferwise/formatting', () => ({
-  formatDate: jest.fn().mockReturnValue('XXXX'),
-}));
-
-describe('YearCalendarTable', () => {
-  const locale = 'en-GB';
-  let component;
-  let props;
-
-  beforeEach(() => {
-    props = {
-      viewYear: 2018,
-      placeholder: 'Enter date..',
-      onSelect: jest.fn(),
-    };
-    useIntl.mockReturnValue({ locale });
-    component = shallow(<YearCalendarTable {...props} />);
-  });
-
-  it('generates 5x4 table', () => {
-    expect(component.find('tbody tr')).toHaveLength(5);
-    expect(component.find('tbody td')).toHaveLength(20);
-    expect(getTableLink()).toHaveLength(20);
-  });
-
-  it('starts with year 2000, 2020, 2040 etc', () => {
-    expect(getTableLinkAt(0).prop('item')).toBe(2000);
-    component.setProps({ viewYear: 2020 });
-    expect(getTableLinkAt(0).prop('item')).toBe(2020);
-    component.setProps({ viewYear: 2021 });
-    expect(getTableLinkAt(0).prop('item')).toBe(2020);
-    component.setProps({ viewYear: 2039 });
-    expect(getTableLinkAt(0).prop('item')).toBe(2020);
-    component.setProps({ viewYear: 2040 });
-    expect(getTableLinkAt(0).prop('item')).toBe(2040);
-  });
-
-  it('passes year value and type to TableLink', () => {
-    expect(getTableLinkAt(0).prop('item')).toBe(2000);
-    expect(getTableLinkAt(0).prop('type')).toBe('year');
-  });
-
-  it('shows formatted years', () => {
-    expect(getTableLinkAt(0).prop('title')).toBe('XXXX');
-    expect(formatting.formatDate).toHaveBeenCalledWith(new Date(2018, 0), locale, {
-      year: 'numeric',
-    });
-  });
-
-  it('show selectedDate as active', () => {
-    component.setProps({ selectedDate: new Date(2018, 11, 27) });
-    expect(getTableLinkAt(17).prop('active')).toBe(false);
-    expect(getTableLinkAt(18).prop('active')).toBe(true);
-  });
-
-  it('disables dates outside of min and max range', () => {
-    component.setProps({
-      selectedDate: new Date(2017, 11, 27),
-      min: new Date(2016, 1),
-      max: new Date(2018, 11),
-    });
-    expect(getTableLinkAt(15).prop('disabled')).toBe(true);
-    expect(getTableLinkAt(16).prop('disabled')).toBe(false);
-    expect(getTableLinkAt(17).prop('disabled')).toBe(false);
-    expect(getTableLinkAt(18).prop('disabled')).toBe(false);
-    expect(getTableLinkAt(19).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.getFullYear());
-  });
-
-  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 2002 is the selected year', () => {
-    component.setProps({ selectedDate: new Date(2002, 5, 1) });
-    expect(getTableLinkAt(2).prop('autofocus')).toBe(true);
-  });
-
-  it('sets autofocus to true when selected year is null and current year is visible', () => {
-    const today = new Date();
-    component.setProps({
-      selectedDate: null,
-      viewYear: today.getFullYear(),
-    });
-    expect(getTableLink().find({ today: true }).prop('autofocus')).toBe(true);
-  });
-
-  it('sets autofocus to true on the second year when the first year is disabled', () => {
-    component.setProps({
-      selectedDate: null,
-      viewYear: 2000,
-      min: new Date(2001, 1, 1),
-      isDisabled: (month) => month === 0,
-    });
-
-    expect(getTableLinkAt(0).prop('autofocus')).toBe(false);
-    expect(getTableLinkAt(1).prop('autofocus')).toBe(true);
-  });
-
-  const getTableLinkAt = (i) => component.find('[type="year"]').at(i);
-  const getTableLink = () => component.find('[type="year"]');
-});

package/src/modal/Modal.spec.js

@@ -1,197 +0,0 @@
-import { mount } from 'enzyme';
-
-import { Title } from '..';
-import { mockMatchMedia } from '../test-utils';
-
-import Modal from './Modal';
-
-jest.useFakeTimers();
-mockMatchMedia();
-jest.mock('../common');
-
-const defaultLocale = 'en-GB';
-
-jest.mock('react-intl', () => ({
-  injectIntl: (Component) =>
-    function (props) {
-      return <Component {...props} intl={{ locale: defaultLocale }} />;
-    },
-  useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => String(id) }),
-  defineMessages: (translations) => translations,
-}));
-
-describe('Modal', () => {
-  let component;
-  beforeEach(() => {
-    component = mount(<Modal body="Some body" open onClose={jest.fn()} />);
-
-    jest.clearAllMocks();
-  });
-
-  it('has Dimmer with prop open set correctly', () => {
-    component.setProps({ open: false });
-    expect(dimmer().prop('open')).toBe(false);
-    component.setProps({ open: true });
-    expect(dimmer().prop('open')).toBe(true);
-  });
-
-  describe('renders', () => {
-    it('default dialog', () => {
-      expect(modal()).toHaveLength(1);
-    });
-
-    it('with right size when passed down the props', () => {
-      component.setProps({ size: 'sm' });
-      expect(modalDialog().hasClass('tw-modal-sm')).toBe(true);
-      component.setProps({ size: 'md' });
-      expect(modalDialog().hasClass('tw-modal-md')).toBe(true);
-      component.setProps({ size: 'lg' });
-      expect(modalDialog().hasClass('tw-modal-lg')).toBe(true);
-    });
-
-    it('with title when title is provided', () => {
-      expect(modalTitle().text()).toBe('');
-      component.setProps({ title: 'A title' });
-
-      expect(modalTitle()).toHaveLength(1);
-      expect(modalTitle().text()).toBe('A title');
-    });
-
-    it('with a custom class if classname is provided', () => {
-      component.setProps({ className: 'a-custom-className' });
-      expect(modal().hasClass('a-custom-className')).toBe(true);
-    });
-
-    it('with some random other props', () => {
-      component.setProps({ somerandomprop: 'thing', someotherrandomprop: 'other thing' });
-
-      expect(modal().prop('somerandomprop')).toBe('thing');
-      expect(modal().prop('someotherrandomprop')).toBe('other thing');
-    });
-
-    it('with body content', () => {
-      component.setProps({ body: <p>Some paragraph text</p> });
-
-      expect(modalBody().text()).toBe('Some paragraph text');
-    });
-
-    it('with scroll classes set', () => {
-      component.setProps({ body: <p>Some paragraph text</p>, scroll: 'content' });
-
-      expect(modal().hasClass('tw-modal--scrollable')).toBe(true);
-      expect(modalBody().hasClass('tw-modal-body--scrollable')).toBe(true);
-    });
-
-    it('with no footer when `footer` not specified as prop', () => {
-      component.setProps({ footer: null });
-      expect(modalFooter()).toHaveLength(0);
-    });
-
-    it('with footer content when `footer` specified as prop', () => {
-      component.setProps({ footer: <button type="button">Some button</button> });
-
-      expect(modalFooter()).toHaveLength(1);
-    });
-
-    describe('header', () => {
-      it('with divider if title is provided', () => {
-        expect(modalHeader().hasClass('modal--withoutborder')).toBe(true);
-        component.setProps({ title: 'Some title' });
-        expect(modalHeader().hasClass('modal--withoutborder')).toBe(false);
-      });
-
-      it('with divider if no-Divider class is provided', () => {
-        component.setProps({ title: 'Some title' });
-        expect(modalHeader().hasClass('modal--withoutborder')).toBe(false);
-        component.setProps({ className: 'no-divider' });
-        expect(modalHeader().hasClass('modal--withoutborder')).toBe(true);
-      });
-    });
-
-    describe('content', () => {
-      it('with compact class if compact class is provided', () => {
-        component.setProps({ className: '' });
-        expect(modalContent().hasClass('tw-modal-compact')).toBe(false);
-        component.setProps({ className: 'compact' });
-        expect(modalContent().hasClass('tw-modal-compact')).toBe(true);
-      });
-
-      it('with no title class if title is not provided', () => {
-        component.setProps({ title: 'a title' });
-        expect(modalContent().hasClass('tw-modal-no-title')).toBe(false);
-        component.setProps({ title: '' });
-        expect(modalContent().hasClass('tw-modal-no-title')).toBe(true);
-      });
-    });
-  });
-
-  describe('behaviourally', () => {
-    let originalAddEventListener;
-    let documentEventCallbacks;
-
-    beforeEach(() => {
-      originalAddEventListener = global.document.addEventListener;
-      documentEventCallbacks = {};
-      jest.spyOn(global.document, 'addEventListener').mockImplementation((name, callback) => {
-        documentEventCallbacks[name] = callback;
-      });
-    });
-
-    afterEach(() => {
-      global.document.addEventListener = originalAddEventListener;
-    });
-
-    it('calls close handler on close button click', () => {
-      const onClose = jest.fn();
-      component.setProps({ onClose });
-
-      expect(onClose).not.toHaveBeenCalled();
-      clickCloseButton();
-      expect(onClose).toHaveBeenCalledTimes(1);
-    });
-
-    it('only calls close handler once when setting open to false in onClose handler', () => {
-      const onClose = jest.fn(() => {
-        component.setProps({ open: false });
-      });
-      component.setProps({ onClose });
-      expect(onClose).not.toHaveBeenCalled();
-      clickCloseButton();
-      jest.runAllTimers();
-      expect(onClose).toHaveBeenCalledTimes(1);
-    });
-
-    it('passes onUnmount to Dimmer onExited prop', () => {
-      const onUnmount = jest.fn();
-      component.setProps({ onUnmount });
-      component.setProps({ open: true });
-      expect(component.find('Dimmer').prop('onExited')).toBe(onUnmount);
-    });
-
-    it('calls onUnmount when the component unmounts', () => {
-      const onUnmount = jest.fn();
-      component.setProps({ onUnmount });
-      component.setProps({ open: true });
-      expect(onUnmount).not.toHaveBeenCalled();
-      jest.runAllTimers();
-      component.setProps({ open: false });
-      component.find('Dimmer').prop('onExited')();
-      expect(onUnmount).toHaveBeenCalledTimes(1);
-    });
-
-    const clickCloseButton = () => {
-      component.find('.close').simulate('click');
-    };
-  });
-
-  const modal = () => component.find('.tw-modal');
-  const modalDialog = () => component.find('.tw-modal-dialog');
-  const modalHeader = () => component.find('.tw-modal-header');
-  const modalTitle = () => component.find(Title);
-  const modalContent = () => component.find('.tw-modal-content');
-  const modalBody = () => component.find('.tw-modal-body');
-  const modalFooter = () => component.find('.tw-modal-footer');
-
-  // For some reason Dimmer gets rendered as Component so this is the best way I found to access it.
-  const dimmer = () => component.at(0);
-});

package/src/withNextPortal/withNextPortal.spec.js

@@ -1,22 +0,0 @@
-import { mount } from 'enzyme';
-import ReactDOM from 'react-dom';
-
-import withNextPortal from './withNextPortal';
-
-jest.mock('react-dom');
-
-describe('withNextPortal', () => {
-  it('should return a function', () => {
-    expect(typeof withNextPortal()).toBe('function');
-  });
-
-  it('should create a portal with the component', () => {
-    ReactDOM.createPortal.mockImplementation(() => null);
-    const props = {};
-    const Component = withNextPortal(AnyComponent);
-    mount(<Component {...props} />);
-    expect(ReactDOM.createPortal).toHaveBeenCalledTimes(1);
-  });
-
-  const AnyComponent = () => <div>Test div</div>;
-});