wix-style-react/dist/src/CalendarPanel/CalendarPanel.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 _CalendarPanel = require('./CalendarPanel');

var _CalendarPanel2 = _interopRequireDefault(_CalendarPanel);

var _CalendarPanel3 = require('./CalendarPanel.driver');

var _CalendarPanel4 = _interopRequireDefault(_CalendarPanel3);

var _unit = require('../../test/utils/unit');

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

var _is_same_day2 = _interopRequireDefault(_is_same_day);

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

var A_DAY = new Date(2019, 4, 29);
var A_DAY_NOT_IN_PRESETS = new Date(2019, 4, 10);

var A_DAY_BEFORE = function () {
  var date = new Date(A_DAY);
  date.setDate(date.getDate() - 1);
  return date;
}();
var A_WEEK_BEFORE = function () {
  var date = new Date(A_DAY);
  date.setDate(date.getDate() - 7);
  return date;
}();
var A_WEEK_AFTER = function () {
  var date = new Date(A_DAY);
  date.setDate(date.getDate() + 7);
  return date;
}();
var TWO_MONTHS_BEFORE = function () {
  var date = new Date(A_DAY);
  date.setMonth(date.getDate() - 60);
  return date;
}();

var ONE_MONTH_BEFORE = function () {
  var date = new Date(A_DAY);
  date.setMonth(date.getDate() - 30);
  return date;
}();

var presets = [{ id: 1, value: 'a day', selectedDays: { from: A_DAY, to: A_DAY } }, {
  id: 2,
  value: 'a day before',
  selectedDays: { from: A_DAY_BEFORE, to: A_DAY_BEFORE }
}, {
  id: 3,
  value: 'a week before',
  selectedDays: { from: A_WEEK_BEFORE, to: A_DAY }
}, {
  id: 4,
  value: 'a week after',
  selectedDays: { from: A_DAY, to: A_WEEK_AFTER }
}, {
  id: 5,
  value: 'one month - two months before',
  selectedDays: { from: TWO_MONTHS_BEFORE, to: ONE_MONTH_BEFORE }
}];

describe('CalendarPanel', function () {
  var render = (0, _unit.createRendererWithDriver)(_CalendarPanel4.default);
  afterEach(function () {
    return (0, _unit.cleanup)();
  });

  it('should show the calendar in two month view by default', function () {
    var _render = render(_react2.default.createElement(_CalendarPanel2.default, { onChange: function onChange() {
        return null;
      }, presets: presets })),
        driver = _render.driver;

    expect(driver.calendarDriver().getNumOfVisibleMonths()).toBe(2);
  });

  it('should show the presets dropdown layout', function () {
    var _render2 = render(_react2.default.createElement(_CalendarPanel2.default, { onChange: function onChange() {
        return null;
      }, presets: presets })),
        driver = _render2.driver;

    expect(driver.presetsDropdownLayoutDriver().exists()).toBe(true);
    expect(driver.presetsDropdownLayoutDriver().isShown()).toBe(true);
  });

  it('should show the correct presets', function () {
    var _render3 = render(_react2.default.createElement(_CalendarPanel2.default, { onChange: function onChange() {
        return null;
      }, presets: presets })),
        driver = _render3.driver;

    expect(driver.presetsDropdownLayoutDriver().optionsLength()).toBe(presets.length);
    var optionsContent = driver.presetsDropdownLayoutDriver().optionsContent();
    presets.map(function (preset) {
      return preset.value;
    }).forEach(function (presetValue) {
      expect(optionsContent).toContain(presetValue);
    });
  });

  describe('driver.getNumOfVisibleMonths()', function () {
    it('should return 2 also when showMonthDropdown=true', function () {
      var _render4 = render(_react2.default.createElement(_CalendarPanel2.default, {
        showMonthDropdown: true,
        onChange: function onChange() {
          return null;
        },
        presets: presets
      })),
          driver = _render4.driver;

      expect(driver.calendarDriver().getNumOfVisibleMonths()).toBe(2);
    });
  });

  it('should call onChange with the selected preset dates', function () {
    var selectedPreset = presets[2];
    var onChange = jest.fn();

    var _render5 = render(_react2.default.createElement(_CalendarPanel2.default, { onChange: onChange, presets: presets })),
        driver = _render5.driver;

    driver.presetsDropdownLayoutDriver().clickAtOptionWithValue(selectedPreset.value);
    expect(onChange).toHaveBeenCalledTimes(1);
    expect((0, _is_same_day2.default)(onChange.mock.calls[0][0].from, selectedPreset.selectedDays.from)).toBe(true);
    expect((0, _is_same_day2.default)(onChange.mock.calls[0][0].to, selectedPreset.selectedDays.to)).toBe(true);
  });

  describe('no presets', function () {
    it('should not display the dropdown layout when the presets props is empty array', function () {
      var _render6 = render(_react2.default.createElement(_CalendarPanel2.default, {
        onChange: jest.fn(),
        value: A_DAY_NOT_IN_PRESETS,
        selectionMode: 'range',
        presets: []
      })),
          driver = _render6.driver;

      expect(driver.isDropdownExists()).toBe(false);
    });

    it('should not display the dropdown layout when the is no presets prop', function () {
      var _render7 = render(_react2.default.createElement(_CalendarPanel2.default, {
        onChange: jest.fn(),
        value: A_DAY_NOT_IN_PRESETS,
        selectionMode: 'range'
      })),
          driver = _render7.driver;

      expect(driver.isDropdownExists()).toBe(false);
    });
  });

  describe('footer', function () {
    it('should render a given footer content', function () {
      var compDataHook = 'given-comp';
      var renderProp = function renderProp() {
        return _react2.default.createElement('div', { 'data-hook': compDataHook });
      };

      var _render8 = render(_react2.default.createElement(_CalendarPanel2.default, { onChange: jest.fn(), footer: renderProp })),
          driver = _render8.driver;

      expect(driver.findByDataHook(compDataHook)).toBeTruthy();
    });

    describe('renderProp arguments', function () {
      describe('selectedDays', function () {
        it('should have selectedDays prop', function () {
          var renderProp = jest.fn();
          render(_react2.default.createElement(_CalendarPanel2.default, {
            value: A_DAY,
            onChange: jest.fn(),
            footer: renderProp
          }));

          var renderPropFirstArgument = renderProp.mock.calls[0][0];

          expect(renderProp).toHaveBeenCalledTimes(1);
          expect(Object.keys(renderPropFirstArgument)).toContain('selectedDays');
          expect(renderPropFirstArgument.selectedDays).toBe(A_DAY);
        });
      });

      describe('submitDisabled', function () {
        var noop = function noop() {};
        function testCase(_ref) {
          var props = _ref.props,
              expectedValue = _ref.expectedValue;

          var renderProp = jest.fn();
          render(_react2.default.createElement(_CalendarPanel2.default, _extends({ onChange: noop, footer: renderProp }, props)));

          var renderPropFirstArgument = renderProp.mock.calls[0][0];

          expect(renderPropFirstArgument.submitDisabled).toBe(expectedValue);
        }
        describe('selectionMode=day', function () {
          it('should be false', function () {
            testCase({
              props: { value: A_DAY, selectionMode: 'day' },
              expectedValue: false
            });
          });

          it('should be true', function () {
            testCase({
              props: { value: undefined, selectionMode: 'day' },
              expectedValue: true
            });
          });
        });

        describe('selectionMode=range', function () {
          it('should be enabled when a range is selected', function () {
            testCase({
              props: {
                value: { from: A_DAY_BEFORE, to: A_DAY },
                selectionMode: 'range'
              },
              expectedValue: false
            });
          });

          it('should be disabled given no selection', function () {
            testCase({
              props: { value: undefined, selectionMode: 'range' },
              expectedValue: true
            });
          });

          it('should be disabled given only a \'from\' date', function () {
            testCase({
              props: {
                value: { from: new Date(2018, 1, 1) },
                selectionMode: 'range'
              },
              expectedValue: true
            });
          });
        });
      });
    });
  });
});