Web: Components: added new tests, fixed date-picker bug

web/ASC.Web.Components/src/components/calendar/calendar.test.js

@@ -202,6 +202,11 @@ describe("Calendar tests:", () => {
     expect(wrapper.prop("locale")).toEqual("en-GB");
   });
 
+  it("Calendar size test", () => {
+    const wrapper = shallow(<Calendar {...baseCalendarProps} size="big" />);
+    expect(wrapper.prop("size")).toEqual("big");
+  });
+
   it("Calendar disabled when isDisabled is passed", () => {
     const wrapper = mount(
       <Calendar {...baseCalendarProps} isDisabled={true} />
@@ -224,9 +229,26 @@ describe("Calendar tests:", () => {
       value: 1,
       disableClass: "",
       className: "",
-      dayState: ""
+      dayState: "prev"
     });
+    expect(onChange).toBeCalled();
 
+    const wrapper2 = shallow(<Calendar {...props} />).instance();
+    wrapper2.onDayClick({
+      value: 1,
+      disableClass: "",
+      className: "",
+      dayState: "next"
+    });
+    expect(onChange).toBeCalled();
+
+    const wrapper3 = shallow(<Calendar {...props} />).instance();
+    wrapper3.onDayClick({
+      value: 1,
+      disableClass: "",
+      className: "",
+      dayState: "now"
+    });
     expect(onChange).toBeCalled();
   });
 
@@ -268,15 +290,30 @@ describe("Calendar tests:", () => {
   });
 
   it("Calendar error date test", () => {
-    const wrapper = shallow(<Calendar {...baseCalendarProps} />)
-    wrapper.setState({hasError: true, isDisabled: true});
+    const wrapper = shallow(<Calendar {...baseCalendarProps} />);
+    wrapper.setState({ hasError: true, isDisabled: true });
     expect(wrapper.instance().state.hasError).toEqual(true);
     expect(wrapper.instance().state.isDisabled).toEqual(true);
   });
 
   it("Calendar not error date test", () => {
-    const wrapper = shallow(<Calendar {...baseCalendarProps} />)
-    wrapper.setState({hasError: false, isDisabled: false});
+    const wrapper = shallow(<Calendar {...baseCalendarProps} />);
+    wrapper.setState({ hasError: false, isDisabled: false });
     expect(wrapper.instance().state.hasError).toEqual(false);
   });
+
+  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);
+  });
 });

web/ASC.Web.Components/src/components/date-picker/date-picker.test.js

@@ -92,13 +92,11 @@ describe("DatePicker tests", () => {
     wrapper.simulate("change", { target: { value: "09/09/2019" } });
     expect(onChange).toHaveBeenCalledWith(new Date("09/09/2019"));
   });
-  
+
   it("check DatePicker popup open", () => {
     const onFocus = jest.fn(() => true);
-    const wrapper = mount(<DatePicker onFocus={onFocus} isOpen={false} />)
-    const input = wrapper.find(
-      "input"
-    );
+    const wrapper = mount(<DatePicker onFocus={onFocus} isOpen={false} />);
+    const input = wrapper.find("input");
     input.simulate("focus");
 
     const instance = wrapper.instance();
@@ -121,7 +119,7 @@ describe("DatePicker tests", () => {
     expect(onChange).toHaveBeenCalled();
   });
 
-  it("Calendar check Compare date function", () => {
+  it("DatePicker check Compare date function", () => {
     const date = new Date();
     const errorDate = new Date("01/01/3000");
     const wrapper = shallow(<DatePicker />).instance();
@@ -129,7 +127,7 @@ describe("DatePicker tests", () => {
     expect(wrapper.compareDate(errorDate)).toEqual(false);
   });
 
-  it("Calendar check Compare dates function", () => {
+  it("DatePicker check Compare dates function", () => {
     const date = new Date();
     const wrapper = shallow(<DatePicker />).instance();
     expect(wrapper.compareDates(date, date) === 0).toEqual(true);
@@ -137,4 +135,60 @@ describe("DatePicker tests", () => {
       false
     );
   });
+
+  it("DatePicker check is valid dates function", () => {
+    var date = new Date();
+    date.setFullYear(1);
+    const wrapper = shallow(<DatePicker />).instance();
+    expect(wrapper.isValidDate(selectedDate, maxDate, minDate, false)).toEqual(
+      false
+    );
+    expect(wrapper.isValidDate(date, maxDate, minDate, false)).toEqual(true);
+  });
+
+  it("DatePicker componentDidUpdate() lifecycle test", () => {
+    const props = {
+      selectedDate: new Date(),
+      minDate: new Date("01/01/1970"),
+      maxDate: new Date("01/01/2030"),
+      isOpen: true,
+      isDisabled: false,
+      isReadOnly: false,
+      hasError: false,
+      themeColor: "#ED7309",
+      locale: "en"
+    };
+
+    var date = new Date();
+    date.setFullYear(1);
+
+    const wrapper = mount(<DatePicker {...props} />).instance();
+    wrapper.componentDidUpdate(wrapper.props, wrapper.state);
+
+    expect(wrapper.props).toBe(wrapper.props);
+    expect(wrapper.state).toBe(wrapper.state);
+
+    const wrapper2 = mount(
+      <DatePicker
+        {...props}
+        selectedDate={date}
+        hasError={false}
+        size="big"
+        isDisabled={false}
+      />
+    ).instance();
+
+    wrapper2.componentDidUpdate(wrapper2.props, wrapper2.state);
+
+    expect(wrapper2.props).toBe(wrapper2.props);
+    expect(wrapper2.state).toBe(wrapper2.state);
+  });
+
+  it('componentWillUnmount() lifecycle  test', () => {
+    const wrapper = mount(<DatePicker isOpen={true} />);
+    const componentWillUnmount = jest.spyOn(wrapper.instance(), 'componentWillUnmount');
+
+    wrapper.unmount();
+    expect(componentWillUnmount).toHaveBeenCalled();
+  });
 });

web/ASC.Web.Components/src/components/date-picker/index.js

@@ -24,19 +24,28 @@ class DatePicker extends Component {
     moment.locale(props.locale);
     this.ref = React.createRef();
 
-    const { isOpen, selectedDate, hasError } = this.props;
+    const { isOpen, selectedDate, hasError, minDate, maxDate } = this.props;
 
     if (isOpen) {
       handleAnyClick(true, this.handleClick);
     }
 
-    this.state = {
+    let newState = {
       isOpen,
       selectedDate: moment(selectedDate).toDate(),
       value: moment(selectedDate).format("L"),
       mask: this.getMask,
       hasError
     };
+
+    if (this.isValidDate(selectedDate, maxDate, minDate, hasError)) {
+      newState = Object.assign({}, newState, {
+        hasError: true,
+        isOpen: false
+      });
+    }
+
+    this.state = newState;
   }
 
   handleClick = e => {
@@ -143,6 +152,17 @@ class DatePicker extends Component {
       .diff(moment(date2).startOf("day"), "days");
   };
 
+  isValidDate = (selectedDate, maxDate, minDate, hasError) => {
+    if (
+      (this.compareDates(selectedDate, maxDate) > 0 ||
+        this.compareDates(selectedDate, minDate) < 0) &&
+      !hasError
+    ) {
+      return true;
+    }
+    return false;
+  };
+
   componentWillUnmount() {
     handleAnyClick(false, this.handleClick);
   }
@@ -200,11 +220,7 @@ class DatePicker extends Component {
       });
     }
 
-    if (
-      (this.compareDates(selectedDate, maxDate) > 0 ||
-        this.compareDates(selectedDate, minDate) < 0) &&
-      !hasError
-    ) {
+    if (this.isValidDate(selectedDate, maxDate, minDate, hasError)) {
       newState = Object.assign({}, newState, {
         hasError: true,
         isOpen: false