wix-style-react/dist/src/DatePicker/DatePicker.spec.js

wix-style-react

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _testUtils = require('react-dom/test-utils');

var _testUtils2 = _interopRequireDefault(_testUtils);

var _enzyme = require('enzyme');

var _is_same_day = require('date-fns/is_same_day');

var _is_same_day2 = _interopRequireDefault(_is_same_day);

var _driverFactory = require('wix-ui-test-utils/driver-factory');

var _index = require('../../testkit/index');

var _enzyme2 = require('../../testkit/enzyme');

var _DatePicker = require('./DatePicker.driver');

var _DatePicker2 = _interopRequireDefault(_DatePicker);

var _Input = require('../Input');

var _Input2 = _interopRequireDefault(_Input);

var _DatePicker3 = require('./DatePicker');

var _DatePicker4 = _interopRequireDefault(_DatePicker3);

var _polyfills = require('../../testkit/polyfills');

var _is = require('date-fns/locale/is');

var _is2 = _interopRequireDefault(_is);

var _dateFns = require('date-fns');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var noop = function noop() {};

describe('DatePicker', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_DatePicker2.default);

  beforeAll(function () {
    _polyfills.rangePolyfill.install();
    _polyfills.requestAnimationFramePolyfill.install();
  });

  describe('date picker input', function () {
    it('should exist', function () {
      var _createDriver = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
          inputDriver = _createDriver.inputDriver;

      expect(inputDriver.exists()).toBe(true);
    });

    it('should set inputDataHook from props', function () {
      var _createDriver2 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, inputDataHook: 'inputDataHook' })),
          inputDriver = _createDriver2.inputDriver;

      expect(inputDriver.getDataHook()).toBe('inputDataHook');
    });

    describe('given `disabled` prop', function () {
      it('should be disabled', function () {
        var _createDriver3 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, disabled: true })),
            inputDriver = _createDriver3.inputDriver;

        expect(inputDriver.isDisabled()).toBeTruthy();
      });

      it('should not open calendar on click', function () {
        var _createDriver4 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, disabled: true })),
            inputDriver = _createDriver4.inputDriver,
            calendarDriver = _createDriver4.calendarDriver;

        inputDriver.trigger('click');
        expect(calendarDriver.isVisible()).toBe(false);
      });
    });

    it('has prefix by default', function () {
      var _createDriver5 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
          inputDriver = _createDriver5.inputDriver;

      expect(inputDriver.hasPrefix()).toBe(true);
    });

    it('has custom prefix', function () {
      var _createDriver6 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, prefix: _react2.default.createElement(
          'span',
          null,
          '#'
        ) })),
          inputDriver = _createDriver6.inputDriver;

      expect(inputDriver.hasPrefix()).toBe(true);
    });
  });

  describe('calendar', function () {
    it('should be hidden by default', function () {
      var _createDriver7 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
          calendarDriver = _createDriver7.calendarDriver;

      expect(calendarDriver.isVisible()).toBe(false);
    });

    describe('should open', function () {
      it('on click on datePickerInput', function () {
        var _createDriver8 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
            calendarDriver = _createDriver8.calendarDriver,
            inputDriver = _createDriver8.inputDriver;

        inputDriver.trigger('click');
        expect(calendarDriver.isVisible()).toBe(true);
      });

      it('on focus', function () {
        var value = new Date(2017, 5, 2);

        var _createDriver9 = createDriver(_react2.default.createElement(_DatePicker4.default, { value: value, onChange: noop })),
            inputDriver = _createDriver9.inputDriver,
            calendarDriver = _createDriver9.calendarDriver;

        inputDriver.focus();
        expect(calendarDriver.isVisible()).toBe(true);
      });
    });

    describe('should close', function () {
      it('on select date with click', function () {
        var _createDriver10 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
            inputDriver = _createDriver10.inputDriver,
            calendarDriver = _createDriver10.calendarDriver;

        inputDriver.trigger('click');
        calendarDriver.clickOnNthDay();

        setTimeout(function () {
          return expect(calendarDriver.isVisible()).toBe(false);
        }, 0);
      });

      it('on press "Escape" key', function () {
        var _createDriver11 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
            inputDriver = _createDriver11.inputDriver,
            calendarDriver = _createDriver11.calendarDriver;

        inputDriver.trigger('click');
        calendarDriver.triggerKeyDown({ key: 'Escape', keyCode: 27 });

        expect(calendarDriver.isVisible()).toBe(false);
      });

      it('on press "Escape" key and call onClose callback', function () {
        var onClose = jest.fn();

        var _createDriver12 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, onClose: onClose })),
            inputDriver = _createDriver12.inputDriver,
            calendarDriver = _createDriver12.calendarDriver;

        inputDriver.trigger('click');
        calendarDriver.triggerKeyDown({ key: 'Escape', keyCode: 27 });

        expect(calendarDriver.isVisible()).toBe(false);
        expect(onClose).toBeCalled();
      });

      it('on press "Tab" key', function () {
        var preventDefault = jest.fn();

        var _createDriver13 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
            inputDriver = _createDriver13.inputDriver,
            calendarDriver = _createDriver13.calendarDriver;

        inputDriver.trigger('click');
        calendarDriver.triggerKeyDown({
          key: 'Tab',
          keyCode: 9,
          preventDefault: preventDefault
        });

        expect(preventDefault.mock.calls).toHaveLength(0);
        expect(calendarDriver.isVisible()).toBe(false);
      });

      it('on outside click', function () {
        var _createDriver14 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
            inputDriver = _createDriver14.inputDriver,
            calendarDriver = _createDriver14.calendarDriver;

        inputDriver.trigger('click');
        calendarDriver.mouseClickOutside();

        expect(calendarDriver.isVisible()).toBe(false);
      });
    });

    it('should not close on select when "shouldCloseOnSelect" property is false', function () {
      var _createDriver15 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, shouldCloseOnSelect: false })),
          inputDriver = _createDriver15.inputDriver,
          calendarDriver = _createDriver15.calendarDriver;

      inputDriver.trigger('click');
      calendarDriver.clickOnNthDay();

      expect(calendarDriver.isVisible()).toBe(true);
    });

    it('should disable past dates given `excludePastDates` prop', function () {
      var onChange = jest.fn();
      var date = new Date(2015, 9, 2);

      var _createDriver16 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: onChange, value: date, excludePastDates: true })),
          calendarDriver = _createDriver16.calendarDriver,
          inputDriver = _createDriver16.inputDriver;

      inputDriver.trigger('click');
      calendarDriver.clickOnNthDay();

      expect(onChange).not.toHaveBeenCalled();
      expect(calendarDriver.isVisible()).toBe(true);
    });

    it('should disable past dates given `excludePastDates` prop (current date selected)', function () {
      var onChange = jest.fn();
      var now = new Date();
      var date = new Date(now);
      date.setDate(now.getDate() === 1 ? 2 : 1); // set selected date other then now, but stay in the same month

      var _createDriver17 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: onChange, value: date, excludePastDates: true })),
          calendarDriver = _createDriver17.calendarDriver,
          inputDriver = _createDriver17.inputDriver;

      inputDriver.trigger('click');
      calendarDriver.clickOnNthDay();

      expect(onChange).toHaveBeenCalled();
      expect(calendarDriver.isVisible()).toBe(false);

      var newDate = onChange.mock.calls[0][0];
      expect(newDate.getMonth()).toEqual(now.getMonth());
      expect(newDate.getDate()).toEqual(now.getDate());
    });

    describe('navbar arrow navigation', function () {
      it('should select previous month on previous month button click - LTR mode', function () {
        var onChange = jest.fn();

        var _createDriver18 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: onChange, value: new Date(2015, 9, 2) })),
            calendarDriver = _createDriver18.calendarDriver,
            inputDriver = _createDriver18.inputDriver;

        inputDriver.trigger('click');
        calendarDriver.clickOnPrevMonthButton();
        calendarDriver.clickOnNthDay();

        var newDate = onChange.mock.calls[0][0];
        expect(newDate.getMonth()).toEqual(8);
        expect(newDate.getDate()).toEqual(1);
      });

      it('should select next month on next month button click - LTR mode', function () {
        var onChange = jest.fn();
        var date = new Date(2015, 9, 2);

        var _createDriver19 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: onChange, value: date })),
            calendarDriver = _createDriver19.calendarDriver,
            inputDriver = _createDriver19.inputDriver;

        inputDriver.trigger('click');
        calendarDriver.clickOnNextMonthButton();
        calendarDriver.clickOnNthDay();

        var newDate = onChange.mock.calls[0][0];

        expect(newDate.getMonth()).toEqual(10);
        expect(newDate.getDate()).toEqual(1);
      });

      it('should select previous month on previous month button click - RTL mode', function () {
        var onChange = jest.fn();
        var date = new Date(2015, 9, 2);

        var _createDriver20 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: onChange, value: date, rtl: true })),
            calendarDriver = _createDriver20.calendarDriver,
            inputDriver = _createDriver20.inputDriver;

        inputDriver.trigger('click');
        calendarDriver.clickOnPrevMonthButton();
        calendarDriver.clickOnNthDay();

        var newDate = onChange.mock.calls[0][0];
        expect(newDate.getMonth()).toEqual(8);
        expect(newDate.getDate()).toEqual(1);
      });

      it('should select next month on next month button click - RTL mode', function () {
        var onChange = jest.fn();
        var date = new Date(2015, 9, 2);

        var _createDriver21 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: onChange, value: date, rtl: true })),
            calendarDriver = _createDriver21.calendarDriver,
            inputDriver = _createDriver21.inputDriver;

        inputDriver.trigger('click');
        calendarDriver.clickOnNextMonthButton();
        calendarDriver.clickOnNthDay();

        var newDate = onChange.mock.calls[0][0];
        expect(newDate.getMonth()).toEqual(10);
        expect(newDate.getDate()).toEqual(1);
      });
    });

    it('should show header', function () {
      var date = new Date(2015, 9, 2);

      var _createDriver22 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, value: date })),
          calendarDriver = _createDriver22.calendarDriver,
          inputDriver = _createDriver22.inputDriver;

      inputDriver.trigger('click');
      expect(calendarDriver.isHeaderVisible()).toEqual(true);
      expect(calendarDriver.isYearCaptionExists()).toEqual(true);
      expect(calendarDriver.isMonthCaptionExists()).toEqual(true);
    });

    it('should show year dropdown', function () {
      var date = new Date(2015, 9, 2);

      var _createDriver23 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, showYearDropdown: true, value: date })),
          calendarDriver = _createDriver23.calendarDriver,
          inputDriver = _createDriver23.inputDriver;

      inputDriver.trigger('click');
      expect(calendarDriver.isYearDropdownExists()).toEqual(true);
      expect(calendarDriver.isYearCaptionExists()).toEqual(false);
    });

    it('should show month dropdown', function () {
      var date = new Date(2015, 9, 2);

      var _createDriver24 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, showMonthDropdown: true, value: date })),
          calendarDriver = _createDriver24.calendarDriver,
          inputDriver = _createDriver24.inputDriver;

      inputDriver.trigger('click');
      expect(calendarDriver.isMonthDropdownExists()).toEqual(true);
      expect(calendarDriver.isMonthCaptionExists()).toEqual(false);
    });

    describe('given date in far future', function () {
      it('should not fail', function () {
        var _createDriver25 = createDriver(_react2.default.createElement(_DatePicker4.default, {
          value: new Date('2055/01/01'),
          onChange: noop,
          showYearDropdown: true
        })),
            calendarDriver = _createDriver25.calendarDriver,
            driver = _createDriver25.driver;

        driver.open();

        var yearDropdownDriver = calendarDriver.getYearDropdownDriver();
        var years = yearDropdownDriver.optionsContent().map(function (n) {
          return parseInt(n, 10);
        });
        var firstYear = years[0];
        var lastYear = years[years.length - 1];

        expect(firstYear).toBe(2055);
        expect(lastYear).toBe(1900);
      });
    });

    describe('`width` prop', function () {
      it('should be 150 by default', function () {
        var _createDriver26 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
            calendarDriver = _createDriver26.calendarDriver;

        expect(calendarDriver.getWidth()).toBe('150px');
      });

      it('should allow to be changed', function () {
        var _createDriver27 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, width: 4 })),
            calendarDriver = _createDriver27.calendarDriver;

        expect(calendarDriver.getWidth()).toBe('4px');
      });
    });

    describe('with year dropdown', function () {
      it('should give a possibility to choose date from another year', function () {
        var date = new Date(2015, 9, 2);

        var _createDriver28 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, showYearDropdown: true, value: date })),
            calendarDriver = _createDriver28.calendarDriver,
            inputDriver = _createDriver28.inputDriver;

        inputDriver.trigger('click');
        calendarDriver.clickOnYearDropdown();
        calendarDriver.clickOnNthYear();
        expect(calendarDriver.getSelectedYear()).not.toEqual(date.getFullYear());
      });
    });

    describe('When trigger open and close', function () {
      it('should open calendar using ref', function () {
        var _createDriver29 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
            calendarDriver = _createDriver29.calendarDriver,
            driver = _createDriver29.driver;

        driver.open();
        expect(calendarDriver.isVisible()).toBe(true);
      });

      it('should hide the focus visually on the current element from the user', function () {
        var _createDriver30 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
            calendarDriver = _createDriver30.calendarDriver,
            driver = _createDriver30.driver;

        driver.open();
        expect(calendarDriver.isFocusedDayVisuallyUnfocused()).toBeTruthy();
      });

      it('should close calendar using ref', function () {
        var _createDriver31 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
            calendarDriver = _createDriver31.calendarDriver,
            driver = _createDriver31.driver;

        driver.open();
        expect(calendarDriver.isVisible()).toBe(true);

        calendarDriver.close();
        expect(calendarDriver.isVisible()).toBe(false);
      });
    });

    describe('keyboard navigation', function () {
      it('should navigate days correctly with keyboard - LTR mode', function (done) {
        var date = new Date(2018, 1, 5);

        var _createDriver32 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, value: date })),
            calendarDriver = _createDriver32.calendarDriver,
            driver = _createDriver32.driver;

        driver.open();
        expect(calendarDriver.getFocusedDay()).toEqual('5');
        calendarDriver.pressLeftArrow();
        // we need setTimeout because pressLeftArrow trigger async actions
        setTimeout(function () {
          expect(calendarDriver.getFocusedDay()).toEqual('4');
          done();
        });
      });

      it('should navigate days correctly with keyboard - RTL mode(same as with LTR)', function (done) {
        var date = new Date(2018, 1, 5);

        var _createDriver33 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, rtl: true, value: date })),
            calendarDriver = _createDriver33.calendarDriver,
            driver = _createDriver33.driver;

        driver.open();
        expect(calendarDriver.getFocusedDay()).toEqual('5');
        calendarDriver.pressLeftArrow();
        // we need setTimeout because pressLeftArrow trigger async actions
        setTimeout(function () {
          expect(calendarDriver.getFocusedDay()).toEqual('4');
          done();
        });
      });

      it('should not update input value while navigating the calendar', function () {
        var date = new Date(2018, 1, 5);

        var _createDriver34 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, value: date })),
            calendarDriver = _createDriver34.calendarDriver,
            inputDriver = _createDriver34.inputDriver,
            driver = _createDriver34.driver;

        driver.open();
        expect(inputDriver.getValue()).toEqual('02/05/2018');

        calendarDriver.pressLeftArrow();
        expect(inputDriver.getValue()).toEqual('02/05/2018');
      });

      it('should keep selected day unchanged when navigating with keyboard', function (done) {
        var date = new Date(2018, 1, 5);

        var _createDriver35 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, value: date })),
            calendarDriver = _createDriver35.calendarDriver,
            driver = _createDriver35.driver;

        driver.open();

        expect(calendarDriver.getSelectedDay()).toEqual('5');
        expect(calendarDriver.getFocusedDay()).toEqual('5');

        calendarDriver.pressLeftArrow();
        setTimeout(function () {
          expect(calendarDriver.getSelectedDay()).toEqual('5');
          expect(calendarDriver.getFocusedDay()).toEqual('4');
          done();
        });
      });

      it('should remove unfocused class from the selected day while navigating the calendar', function () {
        var date = new Date(2018, 1, 5);

        var _createDriver36 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, value: date })),
            calendarDriver = _createDriver36.calendarDriver,
            driver = _createDriver36.driver;

        driver.open();
        expect(calendarDriver.isFocusedDayVisuallyUnfocused()).toBeTruthy();

        calendarDriver.pressLeftArrow();
        expect(calendarDriver.containsVisuallyUnfocusedDay()).toBeFalsy();
      });
    });
  });

  describe('`format` prop', function () {
    it('should display date according to string format', function () {
      var _createDriver37 = createDriver(_react2.default.createElement(_DatePicker4.default, {
        onChange: noop,
        value: new Date(2017, 9, 2),
        dateFormat: 'DD/MM/YYYY'
      })),
          inputDriver = _createDriver37.inputDriver;

      expect(inputDriver.getValue()).toBe('02/10/2017');
    });

    it('should ignore format from locale', function () {
      var date = new Date(2017, 9, 2);

      var _createDriver38 = createDriver(_react2.default.createElement(_DatePicker4.default, {
        onChange: noop,
        locale: 'fr',
        dateFormat: 'YYYY/MM/DD',
        value: date
      })),
          inputDriver = _createDriver38.inputDriver;

      expect(inputDriver.getValue()).toBe('2017/10/02');
    });

    it('should display date according to custom function format', function () {
      var date = new Date(2017, 9, 2);

      var _createDriver39 = createDriver(_react2.default.createElement(_DatePicker4.default, {
        onChange: noop,
        locale: 'fr',
        dateFormat: function dateFormat(_date) {
          return (0, _dateFns.format)(_date, 'YYYY MMM DD');
        },
        value: date
      })),
          inputDriver = _createDriver39.inputDriver;

      expect(inputDriver.getValue()).toBe('2017 Oct 02');
    });
  });

  describe('placeholder', function () {
    it('should be taken from `placeholderText` prop', function () {
      var placeholder = 'Datepicker test placeholder';

      var _createDriver40 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, placeholderText: placeholder })),
          inputDriver = _createDriver40.inputDriver;

      expect(inputDriver.getPlaceholder()).toBe(placeholder);
    });

    it('should be taken from `placeholder` prop of `customInput`', function () {
      var placeholder = 'Input test placeholder';

      var _createDriver41 = createDriver(_react2.default.createElement(_DatePicker4.default, {
        onChange: noop,
        placeholderText: 'you should not see me!',
        customInput: _react2.default.createElement(_Input2.default, { placeholder: placeholder })
      })),
          inputDriver = _createDriver41.inputDriver;

      expect(inputDriver.getPlaceholder()).toBe(placeholder);
    });
  });

  describe('`onChange` prop', function () {
    it('should be called on available day click', function () {
      var onChange = jest.fn();
      var value = new Date(2017, 7, 1);
      var expectedValue = new Date(2017, 7, 2);

      var _createDriver42 = createDriver(_react2.default.createElement(_DatePicker4.default, { value: value, onChange: onChange })),
          calendarDriver = _createDriver42.calendarDriver,
          inputDriver = _createDriver42.inputDriver;

      inputDriver.trigger('click');
      calendarDriver.clickOnNthDay(1);

      var newValue = onChange.mock.calls[0][0];

      expect(onChange).toHaveBeenCalled();
      expect((0, _is_same_day2.default)(newValue, expectedValue)).toBe(true);
    });

    it('should not be called choosing already selected date with enter key', function () {
      var onChange = jest.fn();
      var value = new Date(2017, 5, 2);

      var _createDriver43 = createDriver(_react2.default.createElement(_DatePicker4.default, { value: value, onChange: onChange })),
          inputDriver = _createDriver43.inputDriver;

      inputDriver.trigger('click');
      inputDriver.trigger('keyDown', { keyCode: 13 });

      expect(onChange).not.toHaveBeenCalled();
    });

    it('should not be called clicking already selected date', function () {
      var onChange = jest.fn();
      var value = new Date();

      var _createDriver44 = createDriver(_react2.default.createElement(_DatePicker4.default, { value: value, onChange: onChange })),
          calendarDriver = _createDriver44.calendarDriver,
          inputDriver = _createDriver44.inputDriver;

      inputDriver.trigger('click');
      calendarDriver.clickOnSelectedDay();

      expect(onChange).not.toHaveBeenCalled();
    });

    it('should not adjust time of given value', function () {
      var onChange = jest.fn();
      var value = new Date('2017/01/01 12:34:56.000Z');

      var _createDriver45 = createDriver(_react2.default.createElement(_DatePicker4.default, { value: value, onChange: onChange })),
          calendarDriver = _createDriver45.calendarDriver,
          driver = _createDriver45.driver;

      driver.open();
      calendarDriver.clickOnNthDay(1);
      expect(onChange.mock.calls[0][0]).toEqual(new Date('2017-01-02T12:34:56.000Z'));
    });
  });

  describe('`readonly` prop', function () {
    it('should be false by default', function () {
      var _createDriver46 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
          inputDriver = _createDriver46.inputDriver;

      expect(inputDriver.getReadOnly()).toBe(false);
    });

    it('should be readonly when true', function () {
      var _createDriver47 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, readOnly: true })),
          inputDriver = _createDriver47.inputDriver;

      expect(inputDriver.getReadOnly()).toBe(true);
    });
  });

  describe('`locale` prop', function () {
    var setup = function setup() {
      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

      var _createDriver48 = createDriver(_react2.default.createElement(_DatePicker4.default, _extends({
        onChange: noop,
        locale: 'fr',
        value: new Date(2015, 9, 2)
      }, props))),
          calendarDriver = _createDriver48.calendarDriver,
          inputDriver = _createDriver48.inputDriver,
          driver = _createDriver48.driver;

      inputDriver.trigger('click');

      return {
        calendarDriver: calendarDriver,
        driver: driver,
        inputDriver: inputDriver
      };
    };

    it('should display translated month in caption', function () {
      var _setup = setup(),
          calendarDriver = _setup.calendarDriver;

      expect(calendarDriver.getMonthCaption()).toEqual('octobre');
    });

    it('should display translated month in dropdown label', function () {
      var _setup2 = setup({
        showMonthDropdown: true
      }),
          calendarDriver = _setup2.calendarDriver;

      expect(calendarDriver.getMonthDropdownLabel()).toEqual('octobre');
    });

    it('should display translated months in dropdown options', function () {
      var _setup3 = setup({
        showMonthDropdown: true
      }),
          calendarDriver = _setup3.calendarDriver;

      expect(calendarDriver.getMonthDropdownDriver().optionContentAt(0)).toEqual('janvier');
    });

    it('should display translated weekdays', function () {
      var _setup4 = setup(),
          calendarDriver = _setup4.calendarDriver;

      expect(calendarDriver.getNthWeekDayName(0)).toEqual('lu');
    });

    describe('when function from date-fns', function () {
      it('should display translated month in caption', function () {
        var _setup5 = setup({ locale: _is2.default }),
            calendarDriver = _setup5.calendarDriver;

        expect(calendarDriver.getMonthCaption()).toEqual('október');
      });

      it('should display translated month in dropdown label', function () {
        var _setup6 = setup({
          locale: _is2.default,
          showMonthDropdown: true
        }),
            calendarDriver = _setup6.calendarDriver;

        expect(calendarDriver.getMonthDropdownLabel()).toEqual('október');
      });

      it('should display translated months in dropdown options', function () {
        var _setup7 = setup({
          locale: _is2.default,
          showMonthDropdown: true
        }),
            calendarDriver = _setup7.calendarDriver;

        expect(calendarDriver.getMonthDropdownDriver().optionContentAt(0)).toEqual('janúar');
      });

      it('should display translated weekdays', function () {
        var _setup8 = setup({ locale: _is2.default }),
            calendarDriver = _setup8.calendarDriver;

        expect(calendarDriver.getNthWeekDayName(0)).toEqual('má');
      });
    });
  });

  describe('`value` prop', function () {
    it('should show correct value from props', function () {
      var _createDriver49 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop, value: new Date(2017, 9, 2) })),
          inputDriver = _createDriver49.inputDriver;

      expect(inputDriver.getValue()).toBe('10/02/2017');
    });

    it('should show empty value', function () {
      var _createDriver50 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
          inputDriver = _createDriver50.inputDriver;

      expect(inputDriver.getValue()).toBe('');
    });

    describe('when undefined', function () {
      it('should display `placeholderText`', function () {
        var _createDriver51 = createDriver(_react2.default.createElement(_DatePicker4.default, {
          value: undefined,
          placeholderText: 'hello',
          onChange: noop
        })),
            inputDriver = _createDriver51.inputDriver;

        expect(inputDriver.getValue()).toBe('');
        expect(inputDriver.getPlaceholder()).toBe('hello');
      });
    });
  });

  describe('borderRadius', function () {
    it('should have both borderRadius by default', function () {
      var _createDriver52 = createDriver(_react2.default.createElement(_DatePicker4.default, { onChange: noop })),
          inputDriver = _createDriver52.inputDriver;

      expect(inputDriver.hasRightBorderRadius()).toBeTruthy();
      expect(inputDriver.hasLeftBorderRadius()).toBeTruthy();
    });
  });

  describe('inputProps prop', function () {
    it('should pass inputProps to input component', function () {
      var _createDriver53 = createDriver(_react2.default.createElement(_DatePicker4.default, {
        inputProps: { noRightBorderRadius: true, noLeftBorderRadius: true },
        onChange: noop
      })),
          inputDriver = _createDriver53.inputDriver;

      expect(inputDriver.hasRightBorderRadius()).toBeFalsy();
      expect(inputDriver.hasLeftBorderRadius()).toBeFalsy();
    });
  });

  describe('testkit', function () {
    it('should exist', function () {
      var div = document.createElement('div');
      var dataHook = 'dataHook';
      var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_DatePicker4.default, { onChange: noop, dataHook: dataHook })
      )));

      var _datePickerTestkitFac = (0, _index.datePickerTestkitFactory)({
        wrapper: wrapper,
        dataHook: dataHook
      }),
          driver = _datePickerTestkitFac.driver,
          calendarDriver = _datePickerTestkitFac.calendarDriver,
          inputDriver = _datePickerTestkitFac.inputDriver;

      expect(driver.exists()).toBe(true);
      expect(inputDriver.exists()).toBe(true);
      expect(calendarDriver.isVisible()).toBe(false);
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      var dataHook = 'dataHook';
      var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_DatePicker4.default, { onChange: noop, dataHook: dataHook }));

      var _enzymeDatePickerTest = (0, _enzyme2.datePickerTestkitFactory)({ wrapper: wrapper, dataHook: dataHook }),
          driver = _enzymeDatePickerTest.driver,
          calendarDriver = _enzymeDatePickerTest.calendarDriver,
          inputDriver = _enzymeDatePickerTest.inputDriver;

      expect(driver.exists()).toBe(true);
      expect(inputDriver.exists()).toBe(true);
      expect(calendarDriver.isVisible()).toBe(false);
    });
  });

  describe('two months layout', function () {
    it('should switch to 2 months layout if we set twoMonths prop to true', function () {
      var _createDriver54 = createDriver(_react2.default.createElement(_DatePicker4.default, { twoMonths: true, onChange: noop })),
          inputDriver = _createDriver54.inputDriver,
          calendarDriver = _createDriver54.calendarDriver;

      inputDriver.trigger('click');
      expect(calendarDriver.isTwoMonthsLayout()).toBeTruthy();
    });
  });
});