wix-style-react/dist/es/src/Calendar/Calendar.spec.js

wix-style-react

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; };

import React from 'react';
import calendarDriverFactory from './Calendar.driver';
import Calendar from './Calendar';
import { createRendererWithDriver, cleanup } from '../../test/utils/react';

describe('Calendar', function () {
  var render = createRendererWithDriver(calendarDriverFactory);
  var createDriver = function createDriver(jsx) {
    return render(jsx).driver;
  };

  afterEach(function () {
    return cleanup();
  });

  var AUGUST = 7,
      SEPTEMBER = 8,
      OCTOBER = 9,
      NOVEMBER = 10;

  var monthNames = 'January February March April May June July August September October November December'.split(' ');

  describe('rendering the Calendar', function () {
    it('should display the month of the {from} Date if the provided value is {from, to}', function () {
      var driver = createDriver(React.createElement(Calendar, {
        value: {
          from: new Date(2018, OCTOBER, 5),
          to: new Date(2018, NOVEMBER, 7)
        },
        onChange: function onChange() {}
      }));

      expect(driver.getMonthCaption()).toEqual(monthNames[OCTOBER]);
    });

    it('should display the month of the {from} Date if the provided value is {from, to} with date strings', function () {
      var driver = createDriver(React.createElement(Calendar, {
        value: { from: '2018/10/05', to: '2018/11/07' },
        onChange: function onChange() {}
      }));

      expect(driver.getMonthCaption()).toEqual(monthNames[OCTOBER]);
    });

    it('should display the month of the {from} Date if the provided value is {from}', function () {
      var driver = createDriver(React.createElement(Calendar, {
        value: { from: new Date(2018, OCTOBER, 5) },
        onChange: function onChange() {}
      }));

      expect(driver.getMonthCaption()).toEqual(monthNames[OCTOBER]);
    });

    it('should display the month of the {from} Date if the provided value is {from} with a date string', function () {
      var driver = createDriver(React.createElement(Calendar, { value: { from: '2018/10/05' }, onChange: function onChange() {} }));

      expect(driver.getMonthCaption()).toEqual(monthNames[OCTOBER]);
    });

    it('should display the month of the {to} Date if the provided value is {to}', function () {
      var driver = createDriver(React.createElement(Calendar, {
        value: { to: new Date(2018, NOVEMBER, 7) },
        onChange: function onChange() {}
      }));

      expect(driver.getMonthCaption()).toEqual(monthNames[NOVEMBER]);
    });

    it('should display the month of the {to} Date if the provided value is {to} with a date string', function () {
      var driver = createDriver(React.createElement(Calendar, { value: { to: '2018/11/07' }, onChange: function onChange() {} }));

      expect(driver.getMonthCaption()).toEqual(monthNames[NOVEMBER]);
    });

    it('should display the month of the Date if the provided value is a single Date', function () {
      var driver = createDriver(React.createElement(Calendar, { value: new Date(2018, NOVEMBER, 7), onChange: function onChange() {} }));

      expect(driver.getMonthCaption()).toEqual(monthNames[NOVEMBER]);
    });

    it('should display the month of the Date if the provided value is a single date string', function () {
      var driver = createDriver(React.createElement(Calendar, { value: '2018/11/07', onChange: function onChange() {} }));

      expect(driver.getMonthCaption()).toEqual(monthNames[NOVEMBER]);
    });

    it('should display the current month if the provided value is undefined', function () {
      var driver = createDriver(React.createElement(Calendar, { onChange: function onChange() {} }));

      expect(driver.getMonthCaption()).toEqual(monthNames[new Date().getMonth()]);
    });

    it('should display the current month if the provided value is an empty object', function () {
      var driver = createDriver(React.createElement(Calendar, { value: {}, onChange: function onChange() {} }));

      expect(driver.getMonthCaption()).toEqual(monthNames[new Date().getMonth()]);
    });
  });

  describe('onClose', function () {
    it('should be call with default not prevented when closing with ESC key', function () {
      var onCloseMock = jest.fn();
      var value = new Date(2018, 10, 5);
      var driver = createDriver(React.createElement(Calendar, {
        value: value,
        onChange: function onChange() {},
        onClose: onCloseMock,
        shouldCloseOnSelect: false
      }));

      driver.clickDay(new Date(2018, 10, 1));

      driver.triggerKeyDown({
        key: 'Escape',
        keyCode: 27
      });
      expect(onCloseMock).toHaveBeenCalledTimes(1);
      expect(onCloseMock.mock.calls[0][0].type).toEqual('keydown');
      expect(onCloseMock.mock.calls[0][0].defaultPrevented).toBeFalsy();
    });

    it('should be call with default not prevented when closing with TAB key', function () {
      var onCloseMock = jest.fn();
      var value = new Date(2018, 10, 5);
      var driver = createDriver(React.createElement(Calendar, {
        value: value,
        onChange: function onChange() {},
        onClose: onCloseMock,
        shouldCloseOnSelect: false
      }));

      driver.clickDay(new Date(2018, 10, 1));

      driver.triggerKeyDown({
        key: 'Tab',
        keyCode: 9
      });
      expect(onCloseMock).toHaveBeenCalledTimes(1);
      expect(onCloseMock.mock.calls[0][0].type).toEqual('keydown');
      expect(onCloseMock.mock.calls[0][0].defaultPrevented).toBeFalsy();
    });
  });

  describe('Prevent Default', function () {
    it('should prevent default when clicking in header parts', function () {
      var eventListenerMock = jest.fn();
      var dataHook = 'calendar-data-hook';
      // We use a label wrapper, since a label's default is to delegate the click on to it's target. Just to demostrate that this is a use-case that needs to be prevented.

      var _render = render(React.createElement(
        'label',
        { onClick: eventListenerMock },
        React.createElement(Calendar, {
          dataHook: dataHook,
          onChange: function onChange() {},
          showYearDropdown: true,
          showMonthDropdown: true
        })
      ), dataHook),
          driver = _render.driver;

      driver.clickOnPrevMonthButton();
      driver.clickOnNextMonthButton();
      driver.clickOnYearDropdown();
      driver.clickOnMonthDropdown();

      expect(eventListenerMock).toHaveBeenCalledTimes(4);
      expect(eventListenerMock.mock.calls[0][0].defaultPrevented).toEqual(true);
      expect(eventListenerMock.mock.calls[1][0].defaultPrevented).toEqual(true);
      expect(eventListenerMock.mock.calls[2][0].defaultPrevented).toEqual(true);
      expect(eventListenerMock.mock.calls[3][0].defaultPrevented).toEqual(true);
    });
  });

  describe('clicking on a day', function () {
    var onChange = void 0;

    beforeEach(function () {
      onChange = jest.fn();
    });

    describe("with selectionMode='day'", function () {
      it('should call onChange with the clicked day', function () {
        var date = new Date(2018, 10, 5);
        var driver = createDriver(React.createElement(Calendar, { value: date, onChange: onChange, selectionMode: 'day' }));

        expect(onChange).toHaveBeenCalledTimes(0);

        driver.clickDay(new Date(2018, 10, 1));

        expect(onChange).toHaveBeenCalledTimes(1);
        expect(onChange.mock.calls[0][0].getDate()).toEqual(1);
      });

      it('should prevent event default', function () {
        var dataHook = 'calendar-data-hook';
        var date = new Date(2018, 10, 5);
        var eventListenerMock = jest.fn();

        var _render2 = render(React.createElement(
          'div',
          { onClick: eventListenerMock },
          React.createElement(Calendar, {
            value: date,
            onChange: onChange,
            selectionMode: 'day',
            dataHook: dataHook
          })
        ), dataHook),
            driver = _render2.driver;

        driver.clickDay(new Date(2018, 10, 1));

        expect(eventListenerMock).toHaveBeenCalledTimes(1);
        expect(eventListenerMock.mock.calls[0][0].defaultPrevented).toEqual(true);
      });

      it('should call `onClose` callback with event', function () {
        var date = new Date(2018, 10, 5);
        var onCloseMock = jest.fn();
        var driver = createDriver(React.createElement(Calendar, {
          value: date,
          onChange: onChange,
          selectionMode: 'day',
          onClose: onCloseMock,
          shouldCloseOnSelect: true
        }));

        driver.clickDay(new Date(2018, 10, 1));

        expect(onCloseMock).toHaveBeenCalledTimes(1);
        expect(onCloseMock.mock.calls[0][0].type).toEqual('click');
      });
    });

    describe("with selectionMode='range'", function () {
      it('should call onChange({from: $clickedDay}) when value is undefined', function () {
        var driver = createDriver(React.createElement(Calendar, { onChange: onChange, selectionMode: 'range' }));

        driver.clickOnNthDay(0);
        expect(onChange).toHaveBeenCalledTimes(1);
        expect(onChange.mock.calls[0][0].from.getDate()).toEqual(1);
      });

      it('should call onChange({from: $clickedDay}) when value is a Range', function () {
        var driver = createDriver(React.createElement(Calendar, {
          value: { from: new Date(2018, 10, 5), to: new Date(2018, 10, 10) },
          onChange: onChange,
          selectionMode: 'range'
        }));

        driver.clickOnNthDay(0);
        expect(onChange).toHaveBeenCalledTimes(1);
        expect(onChange.mock.calls[0][0].from.getDate()).toEqual(1);
      });

      it('should call onChange({from: $clickedDay}) when value is a single Date', function () {
        var driver = createDriver(React.createElement(Calendar, {
          value: new Date(2018, 10, 5),
          onChange: onChange,
          selectionMode: 'range'
        }));

        driver.clickOnNthDay(0);
        expect(onChange).toHaveBeenCalledTimes(1);
        expect(onChange.mock.calls[0][0].from.getDate()).toEqual(1);
      });

      it('should call onChange({from: $from, to: $clickedDay}) when value has only \'from\'', function () {
        var driver = createDriver(React.createElement(Calendar, {
          value: { from: new Date(2018, 10, 1) },
          onChange: onChange,
          selectionMode: 'range'
        }));

        driver.clickOnNthDay(2);
        expect(onChange).toHaveBeenCalledTimes(1);
        expect(onChange.mock.calls[0][0].from.getDate()).toEqual(1);
        expect(onChange.mock.calls[0][0].to.getDate()).toEqual(3);
      });

      it('should call onChange({from: $clickedDay, to: $to}) when a day is clicked, given only \'to\'', function () {
        var driver = createDriver(React.createElement(Calendar, {
          value: { to: new Date(2018, 10, 3) },
          onChange: onChange,
          selectionMode: 'range'
        }));

        driver.clickOnNthDay(0);
        expect(onChange).toHaveBeenCalledTimes(1);
        expect(onChange.mock.calls[0][0].from.getDate()).toEqual(1);
        expect(onChange.mock.calls[0][0].to.getDate()).toEqual(3);
      });
      it('should call onChange({from: $clickedDay, to: $from}) if the clicked day is earlier than the provided \'from\'', function () {
        var driver = createDriver(React.createElement(Calendar, {
          value: { from: new Date(2018, 10, 10) },
          onChange: onChange,
          selectionMode: 'range'
        }));

        driver.clickOnNthDay(0);
        expect(onChange).toHaveBeenCalledTimes(1);
        expect(onChange.mock.calls[0][0].from.getDate()).toEqual(1);
        expect(onChange.mock.calls[0][0].to.getDate()).toEqual(10);
      });

      it('should call onChange({from: $clickedDay, to: $from}) when a day is clicked, given only \'from\'', function () {
        var driver = createDriver(React.createElement(Calendar, {
          value: { from: new Date(2018, 10, 10) },
          onChange: onChange,
          selectionMode: 'range'
        }));

        driver.clickOnNthDay(2);
        expect(onChange).toHaveBeenCalledTimes(1);
        expect(onChange.mock.calls[0][0].from.getDate()).toEqual(3);
        expect(onChange.mock.calls[0][0].to.getDate()).toEqual(10);
      });

      it('should prevent event default', function () {
        var dataHook = 'calendar-data-hook';
        var eventListenerMock = jest.fn();

        var _render3 = render(React.createElement(
          'div',
          { onClick: eventListenerMock },
          React.createElement(Calendar, {
            value: { from: new Date(2018, 10, 10) },
            onChange: onChange,
            selectionMode: 'range',
            dataHook: dataHook
          })
        ), dataHook),
            driver = _render3.driver;

        driver.clickOnNthDay(2);
        expect(eventListenerMock).toHaveBeenCalledTimes(1);
        expect(eventListenerMock.mock.calls[0][0].defaultPrevented).toEqual(true);
      });

      it('should call `onClose` callback with event', function () {
        var onCloseMock = jest.fn();
        var driver = createDriver(React.createElement(Calendar, {
          value: { from: new Date(2018, 10, 10) },
          onChange: onChange,
          selectionMode: 'range',
          onClose: onCloseMock,
          shouldCloseOnSelect: true
        }));

        driver.clickOnNthDay(2);
        expect(onCloseMock).toHaveBeenCalledTimes(1);
        expect(onCloseMock.mock.calls[0][0].type).toEqual('click');
      });
    });
  });

  describe('\'value\' update', function () {
    describe('\'month\' state', function () {
      function testCase(_ref) {
        var initialValue = _ref.initialValue,
            nextValue = _ref.nextValue,
            expectedInitialMonth = _ref.expectedInitialMonth,
            expectedMonth = _ref.expectedMonth,
            _ref$numOfMonths = _ref.numOfMonths,
            numOfMonths = _ref$numOfMonths === undefined ? 1 : _ref$numOfMonths;

        var props = {
          onChange: function onChange() {},
          numOfMonths: numOfMonths
        };

        var _render4 = render(React.createElement(Calendar, _extends({}, props, { value: initialValue }))),
            driver = _render4.driver,
            rerender = _render4.rerender;

        expect(driver.getMonthCaption()).toEqual(monthNames[expectedInitialMonth]);
        rerender(React.createElement(Calendar, _extends({}, props, { value: nextValue })));
        expect(driver.getMonthCaption()).toEqual(monthNames[expectedMonth]);
      }

      describe('one month', function () {
        it('should not change when nextValue is empty', function () {
          testCase({
            initialValue: new Date(2018, NOVEMBER, 1),
            expectedInitialMonth: NOVEMBER,
            nextValue: {},
            expectedMonth: NOVEMBER
          });
        });

        describe('single day', function () {
          it('should not change the displayed month, provided that current month contains the new Date', function () {
            testCase({
              initialValue: new Date(2018, OCTOBER, 1),
              expectedInitialMonth: OCTOBER,
              nextValue: new Date(2018, OCTOBER, 2),
              expectedMonth: OCTOBER
            });
          });

          it('should change the displayed month, provided that the current month is earlier than the new Date', function () {
            testCase({
              initialValue: new Date(2018, OCTOBER, 1),
              expectedInitialMonth: OCTOBER,
              nextValue: new Date(2018, NOVEMBER, 1),
              expectedMonth: NOVEMBER
            });
          });

          it('should change the displayed month, provided that the current month is later than the new Date', function () {
            testCase({
              initialValue: new Date(2018, OCTOBER, 1),
              expectedInitialMonth: OCTOBER,
              nextValue: new Date(2018, SEPTEMBER, 1),
              expectedMonth: SEPTEMBER
            });
          });
        });

        describe('range', function () {
          it('should not change the displayed month, provided that the current month is contained in the new Range', function () {
            testCase({
              initialValue: new Date(2018, OCTOBER, 1),
              expectedInitialMonth: OCTOBER,
              nextValue: {
                from: new Date(2018, SEPTEMBER, 1),
                to: new Date(2018, NOVEMBER, 1)
              },
              expectedMonth: SEPTEMBER
            });
          });

          it('should move the displayed month forward, provided that the current month is earlier than the new Range', function () {
            testCase({
              initialValue: new Date(2018, SEPTEMBER, 1),
              expectedInitialMonth: SEPTEMBER,
              nextValue: {
                from: new Date(2018, OCTOBER, 1),
                to: new Date(2018, NOVEMBER, 1)
              },
              expectedMonth: OCTOBER
            });
          });

          it('should move the displayed month forward, provided that the current month is earlier than the new unbounded Range', function () {
            testCase({
              initialValue: new Date(2018, SEPTEMBER, 1),
              expectedInitialMonth: SEPTEMBER,
              nextValue: {
                from: new Date(2018, OCTOBER, 1)
              },
              expectedMonth: OCTOBER
            });
          });

          it('should move the displayed month back, provided that the current month is later than the new Range', function () {
            testCase({
              initialValue: new Date(2018, NOVEMBER, 1),
              expectedInitialMonth: NOVEMBER,
              nextValue: {
                from: new Date(2018, SEPTEMBER, 1),
                to: new Date(2018, OCTOBER, 1)
              },
              expectedMonth: OCTOBER
            });
          });

          it('should move the displayed month back, provided that the current month is later than the new unbounded Range', function () {
            testCase({
              initialValue: new Date(2018, NOVEMBER, 1),
              expectedInitialMonth: NOVEMBER,
              nextValue: {
                to: new Date(2018, OCTOBER, 1)
              },
              expectedMonth: OCTOBER
            });
          });
        });
      });

      describe('two month', function () {
        describe('single day', function () {
          it('should not change the displayed month, when new day is 2nd month', function () {
            testCase({
              initialValue: new Date(2018, OCTOBER, 1),
              expectedInitialMonth: OCTOBER,
              nextValue: new Date(2018, NOVEMBER, 2),
              expectedMonth: OCTOBER,
              numOfMonths: 2
            });
          });
        });

        describe('range', function () {
          it('should not change the displayed month, when new \'from\' is in 2nd month', function () {
            testCase({
              initialValue: new Date(2018, OCTOBER, 1),
              expectedInitialMonth: OCTOBER,
              nextValue: { from: new Date(2018, NOVEMBER, 2) },
              expectedMonth: OCTOBER,
              numOfMonths: 2
            });
          });

          it('should change the displayed month to new range \'from\', when new \'to\' is before calendar view and the new range fits in view', function () {
            testCase({
              initialValue: new Date(2018, NOVEMBER, 1),
              expectedInitialMonth: NOVEMBER,
              nextValue: {
                from: new Date(2018, SEPTEMBER, 1),
                to: new Date(2018, OCTOBER, 10)
              },
              expectedMonth: SEPTEMBER,
              numOfMonths: 2
            });
          });

          it('should change the displayed month so that new range \'to\' is in the 2nd month, when new \'to\' is before calendar view and the new range doesn\'t fit in view', function () {
            testCase({
              initialValue: new Date(2018, NOVEMBER, 1),
              expectedInitialMonth: NOVEMBER,
              nextValue: {
                from: new Date(2018, AUGUST, 1),
                to: new Date(2018, OCTOBER, 20)
              },
              expectedMonth: SEPTEMBER,
              numOfMonths: 2
            });
          });

          it('should change the displayed month to the \'from\', when new range contains the view', function () {
            testCase({
              initialValue: new Date(2018, NOVEMBER, 1),
              expectedInitialMonth: NOVEMBER,
              nextValue: {
                from: new Date(2018, AUGUST, 1),
                to: new Date(2018, OCTOBER, 20)
              },
              expectedMonth: SEPTEMBER,
              numOfMonths: 2
            });
          });
        });
      });
    });
  });
});