@activecollab/components 1.0.408 → 1.0.410

package/dist/cjs/components/DatePicker/DatePicker.spec.js

@@ -0,0 +1,744 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+var _enzyme = require("enzyme");
+var _DatePicker = require("./DatePicker");
+var _react = _interopRequireDefault(require("react"));
+var _moment = _interopRequireDefault(require("moment"));
+var _reactDom = _interopRequireWildcard(require("react-dom"));
+var _testUtils = require("react-dom/test-utils");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+describe("<DatePicker>", function () {
+  var container;
+  beforeEach(function () {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+  afterEach(function () {
+    (0, _reactDom.unmountComponentAtNode)(container);
+    container.remove();
+    container = null;
+  });
+  it("should set Su (Sunday) as default first day of the week", function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, null));
+    var label = wrapper.find(".c-DayPicker-Weekday").first();
+    expect(label.text()).toBe("Su");
+    wrapper.unmount();
+  });
+  it("should format to set Monday as a first day of week", function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1
+    }));
+    var label = wrapper.find(".c-DayPicker-Weekday").first();
+    expect(label.text()).toBe("Mo");
+    wrapper.unmount();
+  });
+  it("should render just calendar without possibility of selecting date(s)", function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      selectionMode: "none"
+    }));
+    var date = wrapper.find(".c-DayPicker-Day").at(10);
+    date.simulate("click");
+    expect(date).not.toHaveProperty("class", "c-DayPicker-Day--selected");
+    date.simulate("mouseenter");
+    expect(date).not.toHaveProperty("class", "hovered");
+    wrapper.unmount();
+  });
+  it("should hover days that are in rage in custom selection mode", function () {
+    var selectedDays = {
+      from: new Date("2020-01-09"),
+      to: new Date("2020-01-09")
+    };
+    var onChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 0),
+      selectedDays: selectedDays,
+      selectionMode: "daily",
+      onChange: onChange
+    }));
+    var month = wrapper.find("YearMonthPicker");
+    expect(month.text()).toBe("January 2020");
+    var selectedDate = wrapper.find(".c-DayPicker-Day").at(10);
+    expect(selectedDate.hasClass("c-DayPicker-Day--selected")).toBeTruthy();
+    var dateBeforeSelected = wrapper.find(".c-DayPicker-Day").at(11);
+    expect(dateBeforeSelected.hasClass("c-DayPicker-Day--selected")).toBeFalsy();
+    var dateAfterSelected = wrapper.find(".c-DayPicker-Day").at(9);
+    expect(dateAfterSelected.hasClass("c-DayPicker-Day--selected")).toBeFalsy();
+    var randomDate = wrapper.find(".c-DayPicker-Day").at(21);
+    expect(randomDate.hasClass("c-DayPicker-Day--selected")).toBeFalsy();
+    dateBeforeSelected.simulate("click");
+    expect(onChange).toBeCalled();
+    wrapper.unmount();
+  });
+  it("should set date on click and deselect on second click", function () {
+    var onChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 0),
+      selectionMode: "daily",
+      onChange: onChange
+    }));
+    var selectedDate = wrapper.find(".c-DayPicker-Day").at(10);
+    selectedDate.simulate("click");
+    expect(onChange).toBeCalled();
+    wrapper.unmount();
+  });
+  it("should change month on click on day from of difference month", function () {
+    var onMonthChange = jest.fn();
+    var onChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      month: new Date(2020, 0),
+      selectionMode: "daily",
+      onChange: onChange,
+      onMonthChange: onMonthChange
+    }));
+    var selectedDate = wrapper.find(".c-DayPicker-Day").at(36);
+    selectedDate.simulate("click");
+    expect(onMonthChange).toBeCalledWith(new Date(2020, 1, 3, 12, 0, 0));
+    wrapper.unmount();
+  });
+  it("should call onDayClick callback when day is clicked", function () {
+    var onChange = jest.fn();
+    var onDayClick = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 0),
+      disabledDays: new Date(2020, 0, 8),
+      selectionMode: "daily",
+      onChange: onChange,
+      onDayClick: onDayClick
+    }));
+    var disabledDay = wrapper.find(".c-DayPicker-Day--disabled").first();
+    disabledDay.simulate("click");
+    expect(onDayClick).toBeCalled();
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onDayClick).toHaveBeenCalledTimes(1);
+    var nonDisabledDay = wrapper.find(".c-DayPicker-Day").at(20);
+    nonDisabledDay.simulate("click");
+    expect(onDayClick).toBeCalled();
+    expect(onChange).toHaveBeenCalled();
+    expect(onDayClick).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    wrapper.unmount();
+  });
+  it("should not hover nor set date on click if it is nonworking day", function () {
+    var onChange = jest.fn();
+    var month = new Date(2020, 0);
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: month,
+      selectionMode: "daily",
+      disabledDays: month,
+      onChange: onChange
+    }));
+    var selectedDate = wrapper.find(".c-DayPicker-Day").at(2);
+    selectedDate.simulate("mouseenter");
+    expect(selectedDate.hasClass("hovered")).toBeFalsy();
+    selectedDate.simulate("click");
+    var clickSelectedDate = wrapper.find(".c-DayPicker-Day").at(2);
+    expect(clickSelectedDate.hasClass("c-DayPicker-Day--selected")).toBeFalsy();
+    wrapper.unmount();
+  });
+  it("should render datePicker with selected date custom", function () {
+    var onChange = jest.fn();
+    var selectedDays = {
+      from: new Date("2020-04-13"),
+      to: new Date("2020-04-23")
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 3),
+      selectedDays: selectedDays,
+      selectionMode: "custom",
+      onChange: onChange
+    }));
+    var month = wrapper.find("YearMonthPicker");
+    expect(month.text()).toBe("April 2020");
+    var startDate = wrapper.find(".c-DayPicker-Day").at(14);
+    expect(startDate.hasClass("c-DayPicker-Day--selected")).toBeTruthy();
+    var endDate = wrapper.find(".c-DayPicker-Day").at(24);
+    expect(endDate.hasClass("c-DayPicker-Day--selected")).toBeTruthy();
+    var secondDate = wrapper.find(".c-DayPicker-Day").at(15);
+    expect(secondDate.hasClass("c-DayPicker-Day--selected")).toBeTruthy();
+    var someDateIncustom = wrapper.find(".c-DayPicker-Day").at(21);
+    expect(someDateIncustom.hasClass("c-DayPicker-Day--selected")).toBeTruthy();
+    var someDateBeforecustom = wrapper.find(".c-DayPicker-Day").at(8);
+    expect(someDateBeforecustom.hasClass("c-DayPicker-Day--selected")).toBeFalsy();
+    var someDateAftercustom = wrapper.find(".c-DayPicker-Day").at(27);
+    expect(someDateAftercustom.hasClass("c-DayPicker-Day--selected")).toBeFalsy();
+    startDate.simulate("click");
+    expect(onChange).toBeCalledWith(undefined);
+    expect(someDateIncustom).not.toHaveProperty("class", "hovered");
+    endDate.simulate("click");
+    expect(onChange).toBeCalledWith(undefined);
+    expect(someDateIncustom).not.toHaveProperty("class", "hovered");
+    wrapper.unmount();
+  });
+  it("should reset date range", function () {
+    var onChange = jest.fn();
+    var selectedDays = {
+      from: new Date("2020-04-13"),
+      to: new Date("2020-04-19")
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 3),
+      selectedDays: selectedDays,
+      selectionMode: "weekly",
+      onChange: onChange
+    }));
+    var clickedNewDate = wrapper.find(".c-DayPicker-Day").at(7);
+    clickedNewDate.simulate("click");
+    expect(onChange).toBeCalled();
+    wrapper.unmount();
+  });
+  it("should mark dates on hover", function () {
+    var selectedDays = {
+      from: new Date("2020-01-09"),
+      to: new Date("2020-01-09")
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      className: "c-datePicker",
+      firstDayOfWeek: 1,
+      month: new Date(2020, 0),
+      selectedDays: selectedDays,
+      selectionMode: "custom"
+    }));
+    var selectedDate = wrapper.find(".c-DayPicker-Day").at(10);
+    expect(selectedDate.hasClass("c-DayPicker-Day--selected")).toBeTruthy();
+    var hoveredToDate = wrapper.find(".c-DayPicker-Day").at(15);
+    hoveredToDate.simulate("mouseenter");
+    var dateBeforeSelected = wrapper.find(".c-DayPicker-Day").at(11);
+    expect(dateBeforeSelected.hasClass("hovered")).toBeFalsy();
+    var hoveredInTheMiddleOfTheRange = wrapper.find(".c-DayPicker-Day").at(13);
+    expect(hoveredInTheMiddleOfTheRange.hasClass("hovered")).toBeFalsy();
+    var hoveredDay = wrapper.find(".c-DayPicker-Day").at(15);
+    expect(hoveredDay.hasClass("hovered")).toBeTruthy();
+    var fourthDay = wrapper.find(".c-DayPicker-Day").at(5);
+    expect(fourthDay.hasClass("hovered")).toBeFalsy();
+    var notHovered = wrapper.find(".c-DayPicker-Day").at(20);
+    expect(notHovered.hasClass("hovered")).toBeFalsy();
+    wrapper.unmount();
+  });
+  it("should mark week days on hover when in weekly selection mode", function () {
+    var startOfWeek = (0, _moment.default)("2020-01-09").startOf("week").toDate();
+    var endOfWeek = (0, _moment.default)("2020-01-09").endOf("week").toDate();
+    var selectedDays = {
+      from: startOfWeek,
+      to: endOfWeek
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      className: "c-datePicker",
+      firstDayOfWeek: 1,
+      month: new Date("2020-01-15"),
+      selectedDays: selectedDays,
+      selectionMode: "weekly"
+    }));
+    var hoveredToDate = wrapper.find(".c-DayPicker-Day").at(15);
+    hoveredToDate.simulate("mouseenter");
+    var startOfHoveredWeek = wrapper.find(".c-DayPicker-Day").at(14);
+    expect(startOfHoveredWeek.hasClass("hovered")).toBeTruthy();
+    var endOfHoveredWeek = wrapper.find(".c-DayPicker-Day").at(19);
+    expect(endOfHoveredWeek.hasClass("hovered")).toBeTruthy();
+    var endOfMonth = wrapper.find(".c-DayPicker-Day").at(25);
+    expect(endOfMonth.hasClass("hovered")).toBeFalsy();
+    wrapper.unmount();
+  });
+  it("should change month on scroll up", function () {
+    var onMonthChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 3),
+      onMonthChange: onMonthChange,
+      selectionMode: "custom"
+    }));
+    wrapper.simulate("wheel", {
+      deltaY: 50
+    });
+    expect(onMonthChange).toBeCalled();
+    wrapper.unmount();
+  });
+  it("should change year on scroll up", function () {
+    var onMonthChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 3),
+      onMonthChange: onMonthChange,
+      selectionMode: "monthly"
+    }));
+    wrapper.simulate("wheel", {
+      deltaY: 50
+    });
+    expect(onMonthChange).toBeCalled();
+    wrapper.unmount();
+  });
+  it("should change year on scroll down", function () {
+    var onMonthChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 3),
+      onMonthChange: onMonthChange,
+      selectionMode: "monthly"
+    }));
+    wrapper.simulate("wheel", {
+      deltaY: -50
+    });
+    expect(onMonthChange).toBeCalled();
+    wrapper.simulate("wheel", {
+      deltaY: 50
+    });
+    expect(onMonthChange).toBeCalledTimes(1);
+    wrapper.unmount();
+  });
+  it("should change month on scroll down", function () {
+    var onMonthChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 3),
+      selectionMode: "custom",
+      onMonthChange: onMonthChange
+    }));
+    wrapper.simulate("wheel", {
+      deltaY: -50
+    });
+    expect(onMonthChange).toBeCalled();
+    wrapper.unmount();
+  });
+  it("should handle month change on left arrow click", function () {
+    var onMonthChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 3),
+      selectionMode: "custom",
+      onMonthChange: onMonthChange
+    }));
+    wrapper.find("Button").at(0).simulate("click");
+    expect(onMonthChange).toBeCalled();
+    wrapper.unmount();
+  });
+  it("should handle month change on right arrow click", function () {
+    var onMonthChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 3),
+      selectionMode: "custom",
+      onMonthChange: onMonthChange
+    }));
+    wrapper.find("Button").at(1).simulate("click");
+    expect(onMonthChange).toBeCalled();
+    wrapper.unmount();
+  });
+  it("should write month with year", function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2019, 11),
+      selectionMode: "weekly"
+    }));
+    var caption = wrapper.find("YearMonthPicker");
+    expect(caption.text()).toEqual("December 2019");
+    wrapper.unmount();
+  });
+  it("pressed Down Arrow key while the picker wrapper is in the focus, should set the next year", function () {
+    var onMonthChange = jest.fn();
+    (0, _testUtils.act)(function () {
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "custom"
+      }), container);
+    });
+    (0, _testUtils.act)(function () {
+      document.dispatchEvent(new KeyboardEvent("keydown", {
+        key: "ArrowDown"
+      }));
+    });
+    expect(onMonthChange).toBeCalled();
+  });
+  it("pressed Up Arrow key while the picker wrapper is in the focus, should set the previous year", function () {
+    var onMonthChange = jest.fn();
+    (0, _testUtils.act)(function () {
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "custom"
+      }), container);
+    });
+    (0, _testUtils.act)(function () {
+      document.dispatchEvent(new KeyboardEvent("keydown", {
+        key: "ArrowUp"
+      }));
+    });
+    expect(onMonthChange).toBeCalled();
+  });
+  it("pressed Left Arrow key while the picker wrapper is in the focus, should set the previous month", function () {
+    var onMonthChange = jest.fn();
+    (0, _testUtils.act)(function () {
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "custom"
+      }), container);
+    });
+    (0, _testUtils.act)(function () {
+      document.dispatchEvent(new KeyboardEvent("keydown", {
+        key: "ArrowLeft"
+      }));
+    });
+    expect(onMonthChange).toBeCalled();
+  });
+  it("pressed Right Arrow key while the picker wrapper is in the focus, should set the next month", function () {
+    var onMonthChange = jest.fn();
+    (0, _testUtils.act)(function () {
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "custom"
+      }), container);
+    });
+    (0, _testUtils.act)(function () {
+      document.dispatchEvent(new KeyboardEvent("keydown", {
+        key: "ArrowRight"
+      }));
+    });
+    expect(onMonthChange).toBeCalled();
+  });
+  it("pressed Right Arrow key while show month is opened should set the next year", function () {
+    var onMonthChange = jest.fn();
+    (0, _testUtils.act)(function () {
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "monthly"
+      }), container);
+    });
+    (0, _testUtils.act)(function () {
+      document.dispatchEvent(new KeyboardEvent("keydown", {
+        key: "ArrowRight"
+      }));
+    });
+    expect(onMonthChange).toBeCalled();
+  });
+  it("pressed Left Arrow key while show month is opened should set the previous year", function () {
+    var onMonthChange = jest.fn();
+    (0, _testUtils.act)(function () {
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "monthly"
+      }), container);
+    });
+    (0, _testUtils.act)(function () {
+      document.dispatchEvent(new KeyboardEvent("keydown", {
+        key: "ArrowLeft"
+      }));
+    });
+    expect(onMonthChange).toBeCalled();
+  });
+  it("should select date custom if from date is already selected and the second date is before first date", function () {
+    var onChange = jest.fn();
+    var fromDate = new Date(Date.UTC(2020, 3, 10));
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: fromDate,
+      selectedDays: {
+        from: fromDate,
+        to: fromDate
+      },
+      selectionMode: "custom",
+      onChange: onChange
+    }));
+    var firstDayOfMonth = wrapper.find(".c-DayPicker-Day:not(.c-DayPicker-Day--outside)").first();
+    firstDayOfMonth.simulate("click");
+    expect(onChange).toBeCalled();
+    wrapper.unmount();
+  });
+  it("should select date custom if from date is already selected and the second date is after first date", function () {
+    var onChange = jest.fn();
+    var fromDate = new Date(2020, 3, 5);
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: fromDate,
+      selectedDays: {
+        from: fromDate,
+        to: fromDate
+      },
+      selectionMode: "custom",
+      onChange: onChange
+    }));
+    var firstDayOfMonth = wrapper.find(".c-DayPicker-Day").at(20);
+    firstDayOfMonth.simulate("click");
+    expect(onChange).toBeCalled();
+    wrapper.unmount();
+  });
+  it("should not call onChange", function () {
+    var onChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date("2020-02-03"),
+      selectionMode: "none",
+      onChange: onChange
+    }));
+    var firstDayOfMonth = wrapper.find(".c-DayPicker-Day").at(20);
+    firstDayOfMonth.simulate("click");
+    expect(onChange).not.toBeCalled();
+    wrapper.unmount();
+  });
+  it("should change month on click on nav bar", function () {
+    var onChange = jest.fn();
+    var onMonthChange = jest.fn();
+    var selectedDate = new Date(Date.UTC(2020, 3));
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: selectedDate,
+      selectedDays: {
+        from: selectedDate,
+        to: selectedDate
+      },
+      selectionMode: "custom",
+      onChange: onChange,
+      onMonthChange: onMonthChange
+    }));
+    var rightArrow = wrapper.find("Button").at(1);
+    rightArrow.simulate("click");
+    expect(onMonthChange).toBeCalled();
+    var leftArrow = wrapper.find("Button").at(0);
+    leftArrow.simulate("click");
+    expect(onMonthChange).toBeCalledTimes(2);
+    wrapper.unmount();
+  });
+  it("click on the from or to date in custom should not deselect if dateRequired is true", function () {
+    var onChange = jest.fn();
+    var selectedDate = {
+      from: new Date(Date.UTC(2020, 2, 1)),
+      to: new Date(Date.UTC(2020, 2, 20))
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date(2020, 2, 10),
+      selectedDays: selectedDate,
+      selectionMode: "custom",
+      onChange: onChange,
+      dateRequired: true
+    }));
+    var firstDayOfMonth = wrapper.find(".c-DayPicker-Day:not(.c-DayPicker-Day--outside)").first();
+    firstDayOfMonth.simulate("click");
+    expect(onChange).not.toBeCalledWith(undefined);
+  });
+  it("click on the specific month should call onChange callback", function () {
+    var onChange = jest.fn();
+    var selectedDate = {
+      from: new Date("2020-03-10"),
+      to: new Date("2020-03-20")
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date("2020-03-20"),
+      selectedDays: selectedDate,
+      selectionMode: "monthly",
+      onChange: onChange,
+      dateRequired: true
+    }));
+    var firstMonth = wrapper.find(".c-monthPicker__month").first();
+    firstMonth.simulate("click");
+    var startOfJanuary = (0, _moment.default)("2020-01-10").startOf("month").toDate();
+    var endOfJanuary = (0, _moment.default)("2020-01-15").endOf("month").toDate();
+    expect(onChange).toBeCalledWith({
+      from: startOfJanuary,
+      to: endOfJanuary
+    });
+    wrapper.unmount();
+  });
+  it("click on the specific month should deselect currently selected month if it is the same month", function () {
+    var onChange = jest.fn();
+    var selectedDate = {
+      from: new Date("2020-03-10"),
+      to: new Date("2020-03-20")
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date("2020-03-20"),
+      selectedDays: selectedDate,
+      selectionMode: "monthly",
+      onChange: onChange,
+      dateRequired: false
+    }));
+    var thirdMonth = wrapper.find(".c-monthPicker__month").at(4);
+    thirdMonth.simulate("click");
+    expect(onChange).toBeCalledWith(undefined);
+    wrapper.unmount();
+  });
+  it("click on the selected day should deselect that day", function () {
+    var onChange = jest.fn();
+    var selectedDate = {
+      from: new Date("2020-03-20"),
+      to: new Date("2020-03-21")
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date("2020-03-20"),
+      selectedDays: selectedDate,
+      selectionMode: "daily",
+      onChange: onChange,
+      dateRequired: false
+    }));
+    var Day25 = wrapper.find(".c-DayPicker-Day").at(25);
+    Day25.simulate("click");
+    expect(onChange).toBeCalledWith(undefined);
+    wrapper.unmount();
+  });
+  it("click on the specific quarter should call onChange callback", function () {
+    var onChange = jest.fn();
+    var selectedDate = {
+      from: new Date("2020-03-10"),
+      to: new Date("2020-03-20")
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date("2020-03-20"),
+      selectedDays: selectedDate,
+      selectionMode: "quarterly",
+      onChange: onChange,
+      dateRequired: true
+    }));
+    var firstMonth = wrapper.find(".c-monthPicker__month").first();
+    firstMonth.simulate("click");
+    var startOfFirstQuarter = (0, _moment.default)("2020-01-10").startOf("quarter").toDate();
+    var endOfFirstQuarter = (0, _moment.default)("2020-01-15").endOf("quarter").toDate();
+    expect(onChange).toBeCalledWith({
+      from: startOfFirstQuarter,
+      to: endOfFirstQuarter
+    });
+    wrapper.unmount();
+  });
+  it("click on the specific quarter should deselect currently selected quarter if it is the same quarter", function () {
+    var onChange = jest.fn();
+    var selectedDate = {
+      from: new Date("2020-02-10"),
+      to: new Date("2020-02-20")
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date("2020-02-20"),
+      selectedDays: selectedDate,
+      selectionMode: "quarterly",
+      onChange: onChange,
+      dateRequired: false
+    }));
+    var secondMonth = wrapper.find(".c-monthPicker__month").at(1);
+    secondMonth.simulate("click");
+    expect(onChange).toBeCalledWith(undefined);
+    wrapper.unmount();
+  });
+  it("click on the already selected day should deselect it if the date is not required", function () {
+    var onChange = jest.fn();
+    var selectedDate = new Date("2020-02-01");
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date("2020-02-20"),
+      selectedDays: {
+        from: selectedDate,
+        to: selectedDate
+      },
+      selectionMode: "daily",
+      onChange: onChange,
+      dateRequired: false
+    }));
+    var firstDay = wrapper.find(".c-DayPicker-Day:not(.c-DayPicker-Day--outside)").first();
+    firstDay.simulate("click");
+    expect(onChange).toBeCalledWith(undefined);
+    wrapper.unmount();
+  });
+  it("click on the already selected week should select date if it's not in this month", function () {
+    var onChange = jest.fn();
+    var startOfWeek = (0, _moment.default)("2020-03-04").startOf("week").toDate();
+    var endOfWeek = (0, _moment.default)("2020-03-04").endOf("week").toDate();
+    var selectedWeek = {
+      from: startOfWeek,
+      to: endOfWeek
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date("2020-03-20"),
+      selectedDays: selectedWeek,
+      selectionMode: "weekly",
+      onChange: onChange,
+      dateRequired: false
+    }));
+    var firstDay = wrapper.find(".c-DayPicker-Day:not(.c-DayPicker-Day--outside)").at(5);
+    firstDay.simulate("click");
+    expect(onChange).toBeCalled();
+    expect(onChange).not.toBeCalledWith(undefined);
+    wrapper.unmount();
+  });
+  it("click on the already selected week should deselect it if the date is not required", function () {
+    var onChange = jest.fn();
+    var startOfWeek = (0, _moment.default)("2020-03-11").startOf("week").toDate();
+    var endOfWeek = (0, _moment.default)("2020-03-11").endOf("week").toDate();
+    var selectedWeek = {
+      from: startOfWeek,
+      to: endOfWeek
+    };
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: new Date("2020-03-20"),
+      selectedDays: selectedWeek,
+      selectionMode: "weekly",
+      onChange: onChange,
+      dateRequired: false
+    }));
+    var firstDay = wrapper.find(".c-DayPicker-Day").at(10);
+    firstDay.simulate("click");
+    expect(onChange).toBeCalled();
+    expect(onChange).toBeCalledWith(undefined);
+    wrapper.unmount();
+  });
+  it("should loose hover when mouse leaves DatePicker", function () {
+    var onChange = jest.fn();
+    var month = new Date(2020, 0);
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: month,
+      selectionMode: "weekly",
+      disabledDays: month,
+      onChange: onChange
+    }));
+    var randomDate = wrapper.find(".c-DayPicker-Day").at(8);
+    randomDate.simulate("mouseenter");
+    var hoveredRandomDate = wrapper.find(".c-DayPicker-Day").at(8);
+    expect(hoveredRandomDate.hasClass("hovered")).toBeTruthy();
+    hoveredRandomDate.simulate("mouseleave");
+    var unHoveredDate = wrapper.find(".c-DayPicker-Day").at(8);
+    expect(unHoveredDate.hasClass("hovered")).toBeFalsy();
+    wrapper.unmount();
+  });
+  it("should loose hover when mouse leaves DatePicker when selectionMode is daily", function () {
+    var onChange = jest.fn();
+    var month = new Date(2020, 0);
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+      firstDayOfWeek: 1,
+      month: month,
+      selectionMode: "daily",
+      disabledDays: month,
+      onChange: onChange
+    }));
+    var randomDate = wrapper.find(".c-DayPicker-Day").at(9);
+    randomDate.simulate("mouseenter");
+    var hoveredRandomDate = wrapper.find(".c-DayPicker-Day").at(9);
+    expect(hoveredRandomDate.hasClass("hovered")).toBeTruthy();
+    hoveredRandomDate.simulate("mouseleave");
+    var unHoveredDate = wrapper.find(".c-DayPicker-Day").at(9);
+    expect(unHoveredDate.hasClass("hovered")).toBeFalsy();
+    wrapper.unmount();
+  });
+});
+//# sourceMappingURL=DatePicker.spec.js.map