test: add test cases and fix some bugs

react-component · Jul 31, 2017 · 0d2048c · 0d2048c
1 parent 13eb1db
commit 0d2048c
Show file tree

Hide file tree

Showing 6 changed files with 5,872 additions and 1 deletion.
diff --git a/src/Calendar.jsx b/src/Calendar.jsx
@@ -56,7 +56,7 @@ const Calendar = createReactClass({
     defaultValue: PropTypes.object,
     value: PropTypes.object,
     selectedValue: PropTypes.object,
-    mode: PropTypes.oneOf(['data', 'month', 'year', 'decade']),
+    mode: PropTypes.oneOf(['date', 'month', 'year', 'decade']),
     locale: PropTypes.object,
     showDateInput: PropTypes.bool,
     showWeekNumber: PropTypes.bool,
@@ -93,6 +93,11 @@ const Calendar = createReactClass({
       showTimePicker: false,
     };
   },
+  componentWillReceiveProps(nextProps) {
+    if ('mode' in nextProps) {
+      this.setState({ mode: nextProps.mode });
+    }
+  },
   onKeyDown(event) {
     if (event.target.nodeName.toLowerCase() === 'input') {
       return undefined;

diff --git a/src/RangeCalendar.js b/src/RangeCalendar.js
@@ -61,6 +61,7 @@ const RangeCalendar = createReactClass({
     defaultValue: PropTypes.any,
     value: PropTypes.any,
     hoverValue: PropTypes.any,
+    mode: PropTypes.arrayOf(PropTypes.oneOf(['date', 'month', 'year', 'decade'])),
     timePicker: PropTypes.any,
     showOk: PropTypes.bool,
     showToday: PropTypes.bool,
@@ -128,6 +129,9 @@ const RangeCalendar = createReactClass({
       newState.prevSelectedValue = nextProps.selectedValue;
       this.setState(newState);
     }
+    if ('mode' in nextProps) {
+      this.setState({ mode: nextProps.mode });
+    }
   },
 
   onDatePanelEnter() {

diff --git a/tests/Calendar.spec.jsx b/tests/Calendar.spec.jsx
@@ -86,6 +86,59 @@ describe('Calendar', () => {
     });
   });
 
+  describe('controlled panels', () => {
+    it('render controlled panels correctly', () => {
+      const MonthPicker = mount(<Calendar mode="month" />);
+      expect(renderToJson(MonthPicker.render())).toMatchSnapshot();
+      MonthPicker.find('.rc-calendar-month-panel-year-select').at(0).simulate('click');
+      expect(MonthPicker.find('.rc-calendar-year-panel').length).toBe(0);
+      expect(MonthPicker.find('.rc-calendar-month-panel').length).toBe(1);
+
+      const YearPicker = mount(<Calendar mode="year" />);
+      expect(renderToJson(YearPicker.render())).toMatchSnapshot();
+      YearPicker.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click');
+      expect(YearPicker.find('.rc-calendar-decade-panel').length).toBe(0);
+      expect(YearPicker.find('.rc-calendar-year-panel').length).toBe(1);
+    });
+
+    it('support controlled mode', () => {
+      class ControlledCalendar extends React.Component {
+        state = { mode: 'date' };
+
+        handlePanelChange = (mode) => {
+          this.setState({ mode });
+        }
+
+        render() {
+          return <Calendar mode={this.state.mode} onPanelChange={this.handlePanelChange} />;
+        }
+      }
+      const wrapper = mount(<ControlledCalendar />);
+
+      wrapper.find('.rc-calendar-month-select').simulate('click');
+      expect(wrapper.find('.rc-calendar-month-panel').length).toBe(1);
+      wrapper.find('.rc-calendar-month-panel-year-select').simulate('click');
+      expect(wrapper.find('.rc-calendar-year-panel').length).toBe(1);
+      wrapper.find('.rc-calendar-year-panel-decade-select').simulate('click');
+      expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(1);
+      wrapper.find('.rc-calendar-decade-panel-selected-cell').simulate('click');
+      expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(0);
+      wrapper.find('.rc-calendar-year-panel-selected-cell').simulate('click');
+      expect(wrapper.find('.rc-calendar-year-panel').length).toBe(0);
+      wrapper.find('.rc-calendar-month-panel-selected-cell').simulate('click');
+      expect(wrapper.find('.rc-calendar-month-panel').length).toBe(0);
+
+      wrapper.find('.rc-calendar-year-select').simulate('click');
+      expect(wrapper.find('.rc-calendar-year-panel').length).toBe(1);
+      wrapper.find('.rc-calendar-year-panel-decade-select').simulate('click');
+      expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(1);
+      wrapper.find('.rc-calendar-decade-panel-selected-cell').simulate('click');
+      expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(0);
+      wrapper.find('.rc-calendar-year-panel-selected-cell').simulate('click');
+      expect(wrapper.find('.rc-calendar-year-panel').length).toBe(0);
+    });
+  });
+
   describe('after render', () => {
     beforeEach((done) => {
       ReactDOM.render(<Calendar showToday showWeekNumber/>, container, function ok() {

diff --git a/tests/RangeCalendar.spec.jsx b/tests/RangeCalendar.spec.jsx
@@ -257,4 +257,69 @@ describe('RangeCalendar', () => {
       expect(wrapper.find('.rc-calendar-input').get(1).value).toBe('3/18/2017 23:59:59');
     });
   });
+
+  describe('controlled panels', () => {
+    it('render controlled panels correctly', () => {
+      const RangeMonthPicker = mount(<RangeCalendar mode={['month', 'month']} />);
+      expect(renderToJson(RangeMonthPicker.render())).toMatchSnapshot();
+      RangeMonthPicker.find('.rc-calendar-month-panel-year-select').at(0).simulate('click');
+      RangeMonthPicker.find('.rc-calendar-month-panel-year-select').at(1).simulate('click');
+      expect(RangeMonthPicker.find('.rc-calendar-year-panel').length).toBe(0);
+      expect(RangeMonthPicker.find('.rc-calendar-month-panel').length).toBe(2);
+
+      const RangeYearPicker = mount(<RangeCalendar mode={['year', 'year']} />);
+      expect(renderToJson(RangeYearPicker.render())).toMatchSnapshot();
+      RangeYearPicker.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click');
+      RangeYearPicker.find('.rc-calendar-year-panel-decade-select').at(1).simulate('click');
+      expect(RangeYearPicker.find('.rc-calendar-decade-panel').length).toBe(0);
+      expect(RangeYearPicker.find('.rc-calendar-year-panel').length).toBe(2);
+    });
+
+    it('support controlled mode', () => {
+      class ControlledRangeCalendar extends React.Component {
+        state = { mode: ['date', 'date'] };
+
+        handlePanelChange = (mode) => {
+          this.setState({ mode });
+        }
+
+        render() {
+          return <RangeCalendar mode={this.state.mode} onPanelChange={this.handlePanelChange} />;
+        }
+      }
+      const wrapper = mount(<ControlledRangeCalendar />);
+
+      wrapper.find('.rc-calendar-month-select').at(0).simulate('click');
+      wrapper.find('.rc-calendar-month-select').at(1).simulate('click');
+      expect(wrapper.find('.rc-calendar-month-panel').length).toBe(2);
+      wrapper.find('.rc-calendar-month-panel-year-select').at(0).simulate('click');
+      wrapper.find('.rc-calendar-month-panel-year-select').at(0).simulate('click');
+      expect(wrapper.find('.rc-calendar-year-panel').length).toBe(2);
+      wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click');
+      wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click');
+      expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(2);
+      wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click');
+      wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click');
+      expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(0);
+      wrapper.find('.rc-calendar-year-panel-selected-cell').at(0).simulate('click');
+      wrapper.find('.rc-calendar-year-panel-selected-cell').at(0).simulate('click');
+      expect(wrapper.find('.rc-calendar-year-panel').length).toBe(0);
+      wrapper.find('.rc-calendar-month-panel-selected-cell').at(0).simulate('click');
+      wrapper.find('.rc-calendar-month-panel-selected-cell').at(0).simulate('click');
+      expect(wrapper.find('.rc-calendar-month-panel').length).toBe(0);
+
+      wrapper.find('.rc-calendar-year-select').at(0).simulate('click');
+      wrapper.find('.rc-calendar-year-select').at(1).simulate('click');
+      expect(wrapper.find('.rc-calendar-year-panel').length).toBe(2);
+      wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click');
+      wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click');
+      expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(2);
+      wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click');
+      wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click');
+      expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(0);
+      wrapper.find('.rc-calendar-year-panel-selected-cell').at(0).simulate('click');
+      wrapper.find('.rc-calendar-year-panel-selected-cell').at(0).simulate('click');
+      expect(wrapper.find('.rc-calendar-year-panel').length).toBe(0);
+    });
+  });
 });