2019-09-13 10:45:47 +00:00
|
|
|
import React from "react";
|
2019-12-03 14:17:53 +00:00
|
|
|
import { mount, shallow } from "enzyme";
|
2019-09-13 10:45:47 +00:00
|
|
|
import { Weekdays, Days, Day } from "./sub-components/";
|
2019-09-18 07:52:55 +00:00
|
|
|
import Calendar from "./";
|
2019-09-17 07:41:35 +00:00
|
|
|
import ComboBox from "../combobox";
|
2019-09-08 16:52:00 +00:00
|
|
|
|
2019-09-13 10:45:47 +00:00
|
|
|
const baseCalendarProps = {
|
|
|
|
isDisabled: false,
|
|
|
|
themeColor: "#ED7309",
|
|
|
|
selectedDate: new Date(),
|
|
|
|
openToDate: new Date(),
|
|
|
|
minDate: new Date("1970/01/01"),
|
|
|
|
maxDate: new Date("3000/01/01"),
|
|
|
|
locale: "en",
|
2020-10-16 13:16:01 +00:00
|
|
|
onChange: () => jest.fn(),
|
2019-09-13 10:45:47 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const baseWeekdaysProps = {
|
|
|
|
optionsWeekdays: [
|
|
|
|
{ key: "en_0", value: "Mo", color: "" },
|
|
|
|
{ key: "en_1", value: "Tu", color: "" },
|
|
|
|
{ key: "en_2", value: "We", color: "" },
|
|
|
|
{ key: "en_3", value: "Th", color: "" },
|
|
|
|
{ key: "en_4", value: "Fr", color: "" },
|
|
|
|
{ key: "en_5", value: "Sa", color: "#A3A9AE" },
|
2020-10-16 13:16:01 +00:00
|
|
|
{ key: "en_6", value: "Su", color: "#A3A9AE" },
|
2019-09-13 10:45:47 +00:00
|
|
|
],
|
2020-10-16 13:16:01 +00:00
|
|
|
size: "base",
|
2019-09-13 10:45:47 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const baseDaysProps = {
|
|
|
|
optionsDays: [
|
|
|
|
{
|
|
|
|
className: "calendar-month_neighboringMonth",
|
|
|
|
dayState: "prev",
|
|
|
|
disableClass: null,
|
2020-10-16 13:16:01 +00:00
|
|
|
value: 25,
|
2019-09-13 10:45:47 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
className: "calendar-month_neighboringMonth",
|
|
|
|
dayState: "prev",
|
|
|
|
disableClass: null,
|
2020-10-16 13:16:01 +00:00
|
|
|
value: 26,
|
|
|
|
},
|
2019-09-13 10:45:47 +00:00
|
|
|
],
|
|
|
|
onDayClick: jest.fn,
|
2020-10-16 13:16:01 +00:00
|
|
|
size: "base",
|
2019-09-13 10:45:47 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const baseDayProps = {
|
|
|
|
day: {
|
|
|
|
className: "calendar-month_neighboringMonth",
|
|
|
|
dayState: "prev",
|
|
|
|
disableClass: null,
|
2020-10-16 13:16:01 +00:00
|
|
|
value: 26,
|
2019-09-13 10:45:47 +00:00
|
|
|
},
|
2019-09-17 07:41:35 +00:00
|
|
|
onDayClick: jest.fn(),
|
2020-10-16 13:16:01 +00:00
|
|
|
size: "base",
|
2019-09-13 10:45:47 +00:00
|
|
|
};
|
2019-09-08 16:52:00 +00:00
|
|
|
|
2019-09-17 07:41:35 +00:00
|
|
|
const options = [
|
|
|
|
{ key: 0, value: "one" },
|
|
|
|
{ key: 1, value: "two" },
|
2020-10-16 13:16:01 +00:00
|
|
|
{ key: 2, value: "three" },
|
2019-09-17 07:41:35 +00:00
|
|
|
];
|
|
|
|
const baseComboBoxProps = {
|
|
|
|
options: options,
|
2020-10-16 13:16:01 +00:00
|
|
|
selectedOption: { key: 0, value: "one" },
|
2019-09-17 07:41:35 +00:00
|
|
|
};
|
|
|
|
|
2019-09-13 14:07:03 +00:00
|
|
|
const selectedDate = new Date("09/12/2019");
|
|
|
|
const openToDate = new Date("09/12/2019");
|
|
|
|
const minDate = new Date("01/01/1970");
|
|
|
|
const maxDate = new Date("01/01/2020");
|
|
|
|
|
2019-09-13 10:45:47 +00:00
|
|
|
describe("Weekdays tests:", () => {
|
|
|
|
it("Weekdays renders without error", () => {
|
|
|
|
const wrapper = mount(<Weekdays {...baseWeekdaysProps} />);
|
2019-09-08 16:52:00 +00:00
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
2019-09-13 10:45:47 +00:00
|
|
|
|
|
|
|
it("Weekdays not re-render test", () => {
|
|
|
|
const wrapper = shallow(<Weekdays {...baseWeekdaysProps} />).instance();
|
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate(wrapper.props);
|
|
|
|
expect(shouldUpdate).toBe(false);
|
|
|
|
});
|
|
|
|
|
2019-09-18 07:52:55 +00:00
|
|
|
it("Weekdays render test", () => {
|
|
|
|
const wrapper = shallow(<Weekdays {...baseWeekdaysProps} />).instance();
|
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate({
|
|
|
|
...wrapper.props,
|
2020-10-16 13:16:01 +00:00
|
|
|
size: "big",
|
2019-09-18 07:52:55 +00:00
|
|
|
});
|
|
|
|
expect(shouldUpdate).toBe(true);
|
|
|
|
});
|
|
|
|
|
2019-09-13 10:45:47 +00:00
|
|
|
it("Weekdays property size passed", () => {
|
|
|
|
const wrapper = mount(<Weekdays {...baseWeekdaysProps} size={"big"} />);
|
|
|
|
expect(wrapper.prop("size")).toEqual("big");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe("Days tests:", () => {
|
|
|
|
it("Days renders without error", () => {
|
|
|
|
const wrapper = mount(<Days {...baseDaysProps} />);
|
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Days not re-render test", () => {
|
|
|
|
const wrapper = shallow(<Days {...baseDaysProps} />).instance();
|
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate(wrapper.props);
|
|
|
|
expect(shouldUpdate).toBe(false);
|
|
|
|
});
|
|
|
|
|
2019-09-18 07:52:55 +00:00
|
|
|
it("Days render test", () => {
|
|
|
|
const wrapper = shallow(<Days {...baseDaysProps} />).instance();
|
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate({
|
|
|
|
...wrapper.props,
|
2020-10-16 13:16:01 +00:00
|
|
|
size: "big",
|
2019-09-18 07:52:55 +00:00
|
|
|
});
|
|
|
|
expect(shouldUpdate).toBe(true);
|
|
|
|
});
|
|
|
|
|
2019-09-13 10:45:47 +00:00
|
|
|
it("Days property size passed", () => {
|
|
|
|
const wrapper = mount(<Days {...baseDaysProps} size={"big"} />);
|
|
|
|
expect(wrapper.prop("size")).toEqual("big");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe("Day tests:", () => {
|
|
|
|
it("Day renders without error", () => {
|
|
|
|
const wrapper = mount(<Day {...baseDayProps} />);
|
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Day not re-render test", () => {
|
|
|
|
const wrapper = shallow(<Day {...baseDayProps} />).instance();
|
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate(wrapper.props);
|
|
|
|
expect(shouldUpdate).toBe(false);
|
|
|
|
});
|
|
|
|
|
2019-09-18 07:52:55 +00:00
|
|
|
it("Day render test", () => {
|
|
|
|
const wrapper = shallow(<Day {...baseDayProps} />).instance();
|
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate({
|
|
|
|
...wrapper.props,
|
2020-10-16 13:16:01 +00:00
|
|
|
size: "big",
|
2019-09-18 07:52:55 +00:00
|
|
|
});
|
|
|
|
expect(shouldUpdate).toBe(true);
|
|
|
|
});
|
|
|
|
|
2019-09-13 10:45:47 +00:00
|
|
|
it("Day property size passed", () => {
|
|
|
|
const wrapper = mount(<Day {...baseDayProps} size={"big"} />);
|
|
|
|
expect(wrapper.prop("size")).toEqual("big");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe("Calendar tests:", () => {
|
|
|
|
it("Calendar renders without error", () => {
|
2019-09-18 07:52:55 +00:00
|
|
|
const wrapper = mount(<Calendar {...baseCalendarProps} />);
|
2019-09-13 10:45:47 +00:00
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
|
|
|
|
2019-09-13 14:07:03 +00:00
|
|
|
it("Calendar selectedDate test", () => {
|
|
|
|
const wrapper = mount(
|
2019-09-18 07:52:55 +00:00
|
|
|
<Calendar {...baseCalendarProps} selectedDate={selectedDate} />
|
2019-09-13 14:07:03 +00:00
|
|
|
);
|
|
|
|
expect(wrapper.props().selectedDate).toEqual(selectedDate);
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Calendar openToDate test", () => {
|
|
|
|
const wrapper = mount(
|
2019-09-18 07:52:55 +00:00
|
|
|
<Calendar {...baseCalendarProps} openToDate={openToDate} />
|
2019-09-13 14:07:03 +00:00
|
|
|
);
|
|
|
|
expect(wrapper.props().openToDate).toEqual(openToDate);
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Calendar minDate test", () => {
|
|
|
|
const wrapper = mount(
|
2019-09-18 07:52:55 +00:00
|
|
|
<Calendar {...baseCalendarProps} minDate={minDate} />
|
2019-09-13 14:07:03 +00:00
|
|
|
);
|
|
|
|
expect(wrapper.props().minDate).toEqual(minDate);
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Calendar maxDate test", () => {
|
|
|
|
const wrapper = mount(
|
2019-09-18 07:52:55 +00:00
|
|
|
<Calendar {...baseCalendarProps} maxDate={maxDate} />
|
2019-09-13 14:07:03 +00:00
|
|
|
);
|
|
|
|
expect(wrapper.props().maxDate).toEqual(maxDate);
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Calendar themeColor test", () => {
|
|
|
|
const wrapper = mount(
|
2019-09-18 07:52:55 +00:00
|
|
|
<Calendar {...baseCalendarProps} themeColor={"#fff"} />
|
2019-09-13 14:07:03 +00:00
|
|
|
);
|
|
|
|
expect(wrapper.props().themeColor).toEqual("#fff");
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Calendar locale test", () => {
|
2019-09-18 10:21:23 +00:00
|
|
|
const wrapper = mount(<Calendar {...baseCalendarProps} locale={"en-GB"} />);
|
2019-09-13 14:07:03 +00:00
|
|
|
expect(wrapper.prop("locale")).toEqual("en-GB");
|
|
|
|
});
|
|
|
|
|
2019-09-20 06:00:11 +00:00
|
|
|
it("Calendar size test", () => {
|
|
|
|
const wrapper = shallow(<Calendar {...baseCalendarProps} size="big" />);
|
|
|
|
expect(wrapper.prop("size")).toEqual("big");
|
|
|
|
});
|
|
|
|
|
2019-09-13 10:45:47 +00:00
|
|
|
it("Calendar disabled when isDisabled is passed", () => {
|
|
|
|
const wrapper = mount(
|
2019-09-18 07:52:55 +00:00
|
|
|
<Calendar {...baseCalendarProps} isDisabled={true} />
|
2019-09-13 10:45:47 +00:00
|
|
|
);
|
|
|
|
expect(wrapper.prop("isDisabled")).toEqual(true);
|
|
|
|
});
|
2019-09-17 07:41:35 +00:00
|
|
|
it("Calendar has rendered content ComboBox", () => {
|
2019-09-18 07:52:55 +00:00
|
|
|
const wrapper = mount(<Calendar {...baseCalendarProps} />);
|
2019-09-17 07:41:35 +00:00
|
|
|
expect(wrapper).toExist(<ComboBox {...baseComboBoxProps} />);
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Calendar check the onChange callback", () => {
|
|
|
|
const onChange = jest.fn();
|
|
|
|
const props = {
|
|
|
|
selectedDate: new Date("03/03/2000"),
|
2020-10-16 13:16:01 +00:00
|
|
|
onChange,
|
2019-09-17 07:41:35 +00:00
|
|
|
};
|
2019-09-18 07:52:55 +00:00
|
|
|
const wrapper = shallow(<Calendar {...props} />).instance();
|
2019-09-17 12:16:33 +00:00
|
|
|
wrapper.onDayClick({
|
|
|
|
value: 1,
|
|
|
|
disableClass: "",
|
|
|
|
className: "",
|
2020-10-16 13:16:01 +00:00
|
|
|
dayState: "prev",
|
2019-09-17 07:41:35 +00:00
|
|
|
});
|
2019-09-20 06:00:11 +00:00
|
|
|
expect(onChange).toBeCalled();
|
2019-09-17 12:16:33 +00:00
|
|
|
|
2019-09-20 06:00:11 +00:00
|
|
|
const wrapper2 = shallow(<Calendar {...props} />).instance();
|
|
|
|
wrapper2.onDayClick({
|
|
|
|
value: 1,
|
|
|
|
disableClass: "",
|
|
|
|
className: "",
|
2020-10-16 13:16:01 +00:00
|
|
|
dayState: "next",
|
2019-09-20 06:00:11 +00:00
|
|
|
});
|
|
|
|
expect(onChange).toBeCalled();
|
|
|
|
|
|
|
|
const wrapper3 = shallow(<Calendar {...props} />).instance();
|
|
|
|
wrapper3.onDayClick({
|
|
|
|
value: 1,
|
|
|
|
disableClass: "",
|
|
|
|
className: "",
|
2020-10-16 13:16:01 +00:00
|
|
|
dayState: "now",
|
2019-09-20 06:00:11 +00:00
|
|
|
});
|
2019-09-17 12:16:33 +00:00
|
|
|
expect(onChange).toBeCalled();
|
2019-09-17 07:41:35 +00:00
|
|
|
});
|
2019-09-18 07:52:55 +00:00
|
|
|
|
|
|
|
it("Calendar check onSelectYear function", () => {
|
|
|
|
const props = {
|
|
|
|
openToDate: new Date("05/01/2000"),
|
|
|
|
selectedDate: new Date("01/01/2000"),
|
|
|
|
minDate: new Date("01/01/1970"),
|
2020-10-16 13:16:01 +00:00
|
|
|
maxDate: new Date("01/01/2020"),
|
2019-09-18 07:52:55 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const wrapper = shallow(<Calendar {...props} />).instance();
|
|
|
|
wrapper.onSelectYear({
|
|
|
|
key: 2020,
|
2020-10-16 13:16:01 +00:00
|
|
|
value: 2020,
|
2019-09-18 07:52:55 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
expect(wrapper.state.openToDate).toEqual(new Date("01/01/2020"));
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Calendar check onSelectMonth function", () => {
|
|
|
|
const props = {
|
|
|
|
openToDate: new Date("01/01/2000"),
|
2020-10-16 13:16:01 +00:00
|
|
|
selectedDate: new Date("01/01/2000"),
|
2019-09-18 07:52:55 +00:00
|
|
|
};
|
|
|
|
const wrapper = shallow(<Calendar {...props} />).instance();
|
|
|
|
wrapper.onSelectMonth({ key: "1", label: "February", disabled: false });
|
|
|
|
|
|
|
|
expect(wrapper.state.openToDate).toEqual(new Date("02/01/2000"));
|
|
|
|
});
|
|
|
|
|
2019-09-18 10:21:23 +00:00
|
|
|
it("Calendar check Compare dates function", () => {
|
|
|
|
const date = new Date();
|
|
|
|
const wrapper = shallow(<Calendar {...baseCalendarProps} />).instance();
|
|
|
|
expect(wrapper.compareDates(date, date) === 0).toEqual(true);
|
|
|
|
expect(wrapper.compareDates(date, new Date("01/01/2000")) === 0).toEqual(
|
|
|
|
false
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Calendar error date test", () => {
|
2019-09-20 06:00:11 +00:00
|
|
|
const wrapper = shallow(<Calendar {...baseCalendarProps} />);
|
|
|
|
wrapper.setState({ hasError: true, isDisabled: true });
|
2019-09-18 10:21:23 +00:00
|
|
|
expect(wrapper.instance().state.hasError).toEqual(true);
|
|
|
|
expect(wrapper.instance().state.isDisabled).toEqual(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Calendar not error date test", () => {
|
2019-09-20 06:00:11 +00:00
|
|
|
const wrapper = shallow(<Calendar {...baseCalendarProps} />);
|
|
|
|
wrapper.setState({ hasError: false, isDisabled: false });
|
2019-09-18 10:21:23 +00:00
|
|
|
expect(wrapper.instance().state.hasError).toEqual(false);
|
2019-09-18 07:52:55 +00:00
|
|
|
});
|
2019-09-20 06:00:11 +00:00
|
|
|
|
|
|
|
it("Calendar componentDidUpdate() test", () => {
|
|
|
|
const wrapper = mount(<Calendar {...baseCalendarProps} />).instance();
|
|
|
|
wrapper.componentDidUpdate(wrapper.props, wrapper.state);
|
|
|
|
|
|
|
|
const wrapper2 = mount(
|
|
|
|
<Calendar {...baseCalendarProps} selectedDate={new Date("01/01/1910")} />
|
|
|
|
).instance();
|
|
|
|
|
|
|
|
expect(wrapper.props).toBe(wrapper.props);
|
|
|
|
expect(wrapper.state).toBe(wrapper.state);
|
|
|
|
|
|
|
|
expect(wrapper2.props).toBe(wrapper2.props);
|
|
|
|
expect(wrapper2.state).toBe(wrapper2.state);
|
|
|
|
});
|
2019-11-26 13:08:26 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts id", () => {
|
|
|
|
const wrapper = mount(<Calendar {...baseCalendarProps} id="testId" />);
|
2019-11-26 13:08:26 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("id")).toEqual("testId");
|
2019-11-26 13:08:26 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts className", () => {
|
|
|
|
const wrapper = mount(<Calendar {...baseCalendarProps} className="test" />);
|
2019-11-26 13:08:26 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("className")).toEqual("test");
|
2019-11-26 13:08:26 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts style", () => {
|
2019-11-26 13:08:26 +00:00
|
|
|
const wrapper = mount(
|
2020-10-16 13:16:01 +00:00
|
|
|
<Calendar {...baseCalendarProps} style={{ color: "red" }} />
|
2019-11-26 13:08:26 +00:00
|
|
|
);
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
|
2019-11-26 13:08:26 +00:00
|
|
|
});
|
2019-09-08 16:52:00 +00:00
|
|
|
});
|