@activecollab/components 1.0.409 → 1.0.411

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

@@ -0,0 +1,738 @@
+import { mount } from "enzyme";
+import { DatePicker } from "./DatePicker";
+import React from "react";
+import moment from "moment";
+import ReactDOM, { unmountComponentAtNode } from "react-dom";
+import { act } from "react-dom/test-utils";
+describe("<DatePicker>", function () {
+  var container;
+  beforeEach(function () {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+  afterEach(function () {
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+  it("should set Su (Sunday) as default first day of the week", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = moment("2020-01-09").startOf("week").toDate();
+    var endOfWeek = moment("2020-01-09").endOf("week").toDate();
+    var selectedDays = {
+      from: startOfWeek,
+      to: endOfWeek
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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();
+    act(function () {
+      ReactDOM.render( /*#__PURE__*/React.createElement(DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "custom"
+      }), container);
+    });
+    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();
+    act(function () {
+      ReactDOM.render( /*#__PURE__*/React.createElement(DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "custom"
+      }), container);
+    });
+    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();
+    act(function () {
+      ReactDOM.render( /*#__PURE__*/React.createElement(DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "custom"
+      }), container);
+    });
+    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();
+    act(function () {
+      ReactDOM.render( /*#__PURE__*/React.createElement(DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "custom"
+      }), container);
+    });
+    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();
+    act(function () {
+      ReactDOM.render( /*#__PURE__*/React.createElement(DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "monthly"
+      }), container);
+    });
+    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();
+    act(function () {
+      ReactDOM.render( /*#__PURE__*/React.createElement(DatePicker, {
+        firstDayOfWeek: 1,
+        month: new Date(2020, 3),
+        onMonthChange: onMonthChange,
+        selectionMode: "monthly"
+      }), container);
+    });
+    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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = moment("2020-01-10").startOf("month").toDate();
+    var endOfJanuary = moment("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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = moment("2020-01-10").startOf("quarter").toDate();
+    var endOfFirstQuarter = moment("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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = moment("2020-03-04").startOf("week").toDate();
+    var endOfWeek = moment("2020-03-04").endOf("week").toDate();
+    var selectedWeek = {
+      from: startOfWeek,
+      to: endOfWeek
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(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 = moment("2020-03-11").startOf("week").toDate();
+    var endOfWeek = moment("2020-03-11").endOf("week").toDate();
+    var selectedWeek = {
+      from: startOfWeek,
+      to: endOfWeek
+    };
+    var wrapper = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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