@transferwise/components 46.40.0 → 46.41.1

package/src/dateInput/DateInput.spec.js

@@ -1,477 +0,0 @@
-import { shallow, mount } from 'enzyme';
-import { useIntl } from 'react-intl';
-
-import { DateInput } from '..';
-import { mockMatchMedia, mockResizeObserver } from '../test-utils';
-
-const LOCALES = {
-  jp: 'ja-JP',
-  us: 'en-US',
-};
-const DEFAULT_LOCALE = 'en-GB';
-const FEBRUARY_INDEX = 1;
-const AUGUST_INDEX = 7;
-
-const DAY_SELECTOR = 'ForwardRef(Input)[name="day"]';
-const MONTH_SELECTOR = 'SelectInput';
-const YEAR_SELECTOR = 'ForwardRef(Input)[name="year"]';
-
-jest.mock('./DateInput.messages', () => ({
-  monthLabel: {
-    id: 'neptune.DateInput.month.label',
-    defaultMessage: 'Month',
-  },
-  dayLabel: {
-    id: 'neptune.DateInput.day.label',
-    defaultMessage: 'Day',
-  },
-  yearLabel: {
-    id: 'neptune.DateInput.year.label',
-    defaultMessage: 'Year',
-  },
-  dayPlaceholder: {
-    id: 'neptune.DateInput.day.placeholder',
-    defaultMessage: 'DD',
-    description: 'Placeholder for 2-digit day values within an input.',
-  },
-  yearPlaceholder: {
-    id: 'neptune.DateInput.year.placeholder',
-    defaultMessage: 'YYYY',
-    description: 'Placeholder for 4-digit year values within an input.',
-  },
-}));
-
-jest.mock('react-intl');
-
-describe('Date Input Component', () => {
-  let selectMonth;
-  let inputDay;
-  let inputYear;
-  let component;
-  const props = { onChange: jest.fn() };
-
-  beforeEach(() => {
-    mockMatchMedia();
-    mockResizeObserver();
-    useIntl.mockReturnValue({
-      locale: DEFAULT_LOCALE,
-      formatMessage: (message) => message.defaultMessage,
-    });
-    component = shallow(<DateInput {...props} />);
-
-    selectMonth = component.find(MONTH_SELECTOR);
-    inputDay = component.find(DAY_SELECTOR);
-    inputYear = component.find(YEAR_SELECTOR);
-  });
-
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
-  describe('when initialised without a model', () => {
-    it('sets day field to empty', () => {
-      expect(inputDay.prop('value')).toBe('');
-    });
-
-    it('sets month field to 0', () => {
-      expect(selectMonth.props().value).toBeNull();
-    });
-
-    it('sets year field to empty', () => {
-      expect(inputYear.prop('value')).toBe('');
-    });
-
-    it('allows 0 prefixed day values', () => {
-      inputDay.simulate('change', { target: { value: '0' } });
-      setTimeout(() => {
-        expect(inputDay.prop('value')).toBe('0');
-      });
-    });
-
-    it('does not allow 00 as a day value', () => {
-      inputDay.simulate('change', { target: { value: '00' } });
-      setTimeout(() => {
-        expect(inputDay.prop('value')).toBe('1');
-      });
-    });
-  });
-
-  describe('when initialised with a model', () => {
-    describe('as a valid Date instance', () => {
-      it(`sets values correctly`, () => {
-        component = shallow(<DateInput {...props} value="1971-02-01" />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('value')).toBe(1);
-        expect(selectMonth.prop('value')).toBe(FEBRUARY_INDEX);
-        expect(inputYear.prop('value')).toBe(1971);
-      });
-    });
-
-    describe('as a valid short ISO8601 string', () => {
-      it('sets values correctly', () => {
-        component = shallow(<DateInput {...props} value="1990-08-22" />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('value')).toBe(22);
-        expect(selectMonth.prop('value')).toBe(AUGUST_INDEX);
-        expect(inputYear.prop('value')).toBe(1990);
-      });
-    });
-
-    describe('as a valid short ISO8601 string with year and month only', () => {
-      it('sets values correctly', () => {
-        component = shallow(<DateInput {...props} value="1990-08" />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('value')).toBe('');
-        expect(selectMonth.prop('value')).toBe(AUGUST_INDEX);
-        expect(inputYear.prop('value')).toBe(1990);
-      });
-    });
-
-    describe('as a valid long ISO8601 string', () => {
-      it('sets values correctly', () => {
-        component = shallow(<DateInput {...props} value="1990-02-28T00:00:00.000Z" />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('value')).toBe(28);
-        expect(selectMonth.prop('value')).toBe(FEBRUARY_INDEX);
-        expect(inputYear.prop('value')).toBe(1990);
-      });
-    });
-
-    describe('when disabled is set to true', () => {
-      it('sets values to disabled', () => {
-        component = shallow(<DateInput {...props} disabled />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('disabled')).toBe(true);
-        expect(selectMonth.prop('disabled')).toBe(true);
-        expect(inputYear.prop('disabled')).toBe(true);
-      });
-    });
-
-    describe('when disabled is set to false', () => {
-      it("doesn't sets values to disabled", () => {
-        component = shallow(<DateInput {...props} />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('disabled')).toBe(false);
-        expect(selectMonth.prop('disabled')).toBe(false);
-        expect(inputYear.prop('disabled')).toBe(false);
-      });
-    });
-  });
-
-  describe('when locale is provided', () => {
-    it('shows day before month if locale is GB', () => {
-      useIntl.mockReturnValue({
-        locale: DEFAULT_LOCALE,
-        formatMessage: (message) => message.defaultMessage,
-      });
-
-      component = shallow(<DateInput {...props} />);
-
-      expect(component.find('span').at(0).text()).toBe('Day');
-      expect(component.find('span').at(1).text()).toBe('Month');
-      expect(component.find('span').at(2).text()).toBe('Year');
-    });
-
-    it('shows month before day if locale is US', () => {
-      useIntl.mockReturnValue({
-        locale: LOCALES.us,
-        formatMessage: (message) => message.defaultMessage,
-      });
-
-      component = shallow(<DateInput {...props} />);
-
-      expect(component.find('span').at(0).text()).toBe('Month');
-      expect(component.find('span').at(1).text()).toBe('Day');
-      expect(component.find('span').at(2).text()).toBe('Year');
-    });
-
-    it('shows year, month, day if locale is JP', () => {
-      useIntl.mockReturnValue({
-        locale: LOCALES.jp,
-        formatMessage: (message) => message.defaultMessage,
-      });
-
-      component = shallow(<DateInput {...props} />);
-
-      expect(component.find('span').at(0).text()).toBe('Year');
-      expect(component.find('span').at(1).text()).toBe('Month');
-      expect(component.find('span').at(2).text()).toBe('Day');
-    });
-  });
-
-  describe('when initialised', () => {
-    describe('without an initial value', () => {
-      it(`doesn't call the onChange callback`, () => {
-        component = mount(<DateInput {...props} />);
-
-        expect(props.onChange).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('with an initial value', () => {
-      it(`doesn't call the onChange callback`, () => {
-        component = mount(<DateInput {...props} value="1990-08" />);
-
-        expect(props.onChange).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('with placeholders set', () => {
-      it(`doesn't override placeholders`, () => {
-        const placeholders = {
-          day: 'DayPlaceholder',
-          month: 'MonthPlaceholder',
-          year: 'YearPlaceholder',
-        };
-        component = mount(<DateInput {...props} placeholders={placeholders} />);
-
-        expect(component.find(DAY_SELECTOR).props().placeholder).toStrictEqual('DayPlaceholder');
-        expect(component.find(MONTH_SELECTOR).props().placeholder).toStrictEqual(
-          'MonthPlaceholder',
-        );
-        expect(component.find(YEAR_SELECTOR).props().placeholder).toStrictEqual('YearPlaceholder');
-      });
-    });
-
-    describe('with placeholders not set', () => {
-      it('uses localized defaults', () => {
-        component = mount(<DateInput {...props} />);
-
-        expect(component.find(DAY_SELECTOR).props().placeholder).toStrictEqual('DD');
-        expect(component.find(MONTH_SELECTOR).props().placeholder).toStrictEqual('Month');
-        expect(component.find(YEAR_SELECTOR).props().placeholder).toStrictEqual('YYYY');
-      });
-    });
-
-    describe('with labels set', () => {
-      it(`doesn't override placeholders`, () => {
-        component = mount(
-          <DateInput
-            {...props}
-            dayLabel="dayLabel"
-            monthLabel="monthLabel"
-            yearLabel="yearLabel"
-          />,
-        );
-
-        expect(component.find({ children: 'dayLabel', type: 'span' })).toBeTruthy();
-        expect(component.find({ children: 'monthLabel', type: 'span' })).toBeTruthy();
-        expect(component.find({ children: 'yearLabel', type: 'span' })).toBeTruthy();
-      });
-    });
-
-    describe('with labels not set', () => {
-      it('uses localized defaults', () => {
-        component = mount(<DateInput {...props} />);
-
-        expect(component.find({ children: 'Day', type: 'span' })).toBeTruthy();
-        expect(component.find({ children: 'Month', type: 'span' })).toBeTruthy();
-        expect(component.find({ children: 'Year', type: 'span' })).toBeTruthy();
-      });
-    });
-  });
-
-  describe('when user interacts', () => {
-    describe('with an empty date input', () => {
-      it('calls onChange with null if month is not selected', () => {
-        component = mount(<DateInput {...props} />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: '12' } });
-
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputYear.simulate('change', { target: { value: '1990' } });
-
-        expect(props.onChange).toHaveBeenLastCalledWith(null);
-      });
-    });
-
-    describe('with day input', () => {
-      it('returns correct value for correct input', () => {
-        component = mount(<DateInput {...props} value="2001-02-11" />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: '12' } });
-
-        expect(props.onChange).toHaveBeenCalledWith('2001-02-12');
-      });
-
-      it('returns null for invalid input', () => {
-        component = mount(<DateInput {...props} value="2001-01-01" />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: 'aa' } });
-
-        expect(props.onChange).toHaveBeenCalledWith(null);
-      });
-
-      it('returns null when day input is cleared', () => {
-        component = mount(<DateInput {...props} value="2001-01-01" />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: '' } });
-
-        expect(props.onChange).toHaveBeenLastCalledWith(null);
-      });
-    });
-
-    describe('with year input', () => {
-      it('returns correct value for correct input', () => {
-        component = mount(<DateInput {...props} value="2001-01-01" />);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputYear.simulate('change', { target: { value: '1990' } });
-
-        expect(props.onChange).toHaveBeenCalledWith('1990-01-01');
-      });
-    });
-  });
-
-  describe('with day input and year input', () => {
-    describe('when switching from day input to year input', () => {
-      it('does not call onBlur nor onFocus', () => {
-        const onFocus = jest.fn();
-        const onBlur = jest.fn();
-
-        component = mount(<DateInput {...props} onFocus={onFocus} onBlur={onBlur} />);
-
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputDay.simulate('focus');
-
-        inputDay.simulate('blur', { relatedTarget: inputYear.getDOMNode() });
-        inputYear.simulate('focus', { relatedTarget: inputDay.getDOMNode() });
-        inputYear.simulate('blur');
-
-        expect(onFocus).toHaveBeenCalledTimes(1);
-        expect(onBlur).toHaveBeenCalledTimes(1);
-
-        jest.useRealTimers();
-      });
-
-      it('does not call onBlur on IE11 either', () => {
-        const onBlur = jest.fn();
-
-        component = mount(<DateInput {...props} onBlur={onBlur} />);
-
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputDay.simulate('focus');
-
-        Object.defineProperty(document, 'activeElement', {
-          value: inputYear.getDOMNode(),
-        });
-
-        inputDay.simulate('blur', { relatedTarget: null });
-        inputYear.simulate('focus', { relatedTarget: inputDay.getDOMNode() });
-
-        expect(onBlur).not.toHaveBeenCalled();
-
-        jest.useRealTimers();
-      });
-    });
-  });
-
-  describe('when user selects invalid dates', () => {
-    it('corrects days in lap years February', () => {
-      component = mount(<DateInput {...props} value="2000-02-29" />);
-
-      expect(component.find(DAY_SELECTOR).prop('value')).toBe(29);
-
-      inputYear = component.find(YEAR_SELECTOR);
-      inputYear.simulate('change', { target: { value: 1999 } });
-
-      expect(component.find(DAY_SELECTOR).prop('value')).toBe(28);
-    });
-
-    it('lowers days if value entered too high', () => {
-      const comp = shallow(<DateInput {...props} />);
-
-      inputDay = comp.find(DAY_SELECTOR);
-
-      inputDay.simulate('change', { target: { value: 32 } });
-
-      expect(comp.find(DAY_SELECTOR).prop('value')).toBe(31);
-    });
-
-    it('highers days if value entered too low', () => {
-      const comp = shallow(<DateInput {...props} />);
-
-      inputDay = comp.find(DAY_SELECTOR);
-
-      inputDay.simulate('change', { target: { value: -1 } });
-
-      expect(comp.find(DAY_SELECTOR).prop('value')).toBe(1);
-    });
-  });
-
-  describe('when in mode month and year only', () => {
-    beforeEach(() => {
-      const extraProps = {
-        mode: 'month-year',
-        value: '2001-01-01',
-      };
-      component = mount(<DateInput {...{ ...props, ...extraProps }} />);
-    });
-
-    it('should only display month and year inputs', () => {
-      expect(component.exists(YEAR_SELECTOR)).toBe(true);
-      expect(component.exists(MONTH_SELECTOR)).toBe(true);
-      expect(component.exists(DAY_SELECTOR)).toBe(false);
-    });
-  });
-
-  describe('when selectProps is provided', () => {
-    beforeEach(() => {
-      component = shallow(
-        <DateInput
-          selectProps={{
-            buttonProps: {
-              'aria-label': 'mock-button-label',
-            },
-          }}
-          {...props}
-        />,
-      );
-    });
-
-    it('renders Select component with expected props', () => {
-      const select = component.find(MONTH_SELECTOR);
-
-      expect(select.prop('buttonProps')).toStrictEqual({
-        'aria-label': 'mock-button-label',
-      });
-    });
-  });
-});