Skip to content

Commit 8508a7e

Browse files
✨ [feature] add test case for dateSteps
1 parent 34ff8c6 commit 8508a7e

File tree

3 files changed

+111
-20
lines changed

3 files changed

+111
-20
lines changed

README.md

+19-18
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ react-mobile-datepicker provides a component that can set year, month, day, hour
1010
- is only 4k.
1111
- It does not depend on moment.js
1212

13-
## Theme
13+
## Theme
1414

1515
### default
1616
<div style="padding:30px">
@@ -35,22 +35,22 @@ react-mobile-datepicker provides a component that can set year, month, day, hour
3535
### android-dark
3636
<div style="padding:30px">
3737
<img src="https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/android-dark.png" width="300" />
38-
</div>
39-
40-
## Custom date unit
41-
42-
set dateFormat for `['YYYY', 'MM', 'DD', 'hh', 'mm']` to configure year, month, day, hour, minute.
43-
38+
</div>
39+
40+
## Custom date unit
41+
42+
set dateFormat for `['YYYY', 'MM', 'DD', 'hh', 'mm']` to configure year, month, day, hour, minute.
43+
4444
<div style="padding:30px">
4545
<img src="https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/year-month-day-hour-minute.png" width="300" />
46-
</div>
47-
48-
49-
set dateFormat for `['hh', 'mm', 'ss']` to configure hour, minute and second.
50-
46+
</div>
47+
48+
49+
set dateFormat for `['hh', 'mm', 'ss']` to configure hour, minute and second.
50+
5151
<div style="padding:30px">
5252
<img src="https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/hour-minute-second.png" width="300" />
53-
</div>
53+
</div>
5454

5555

5656
## Getting Started
@@ -122,17 +122,18 @@ ReactDOM.render(<App />, document.getElementById('react-box'));
122122
## PropTypes
123123

124124
| Property | Type | Default | Description |
125-
|:------------- |:------------- |:-------------- |:---------- |
125+
|:------------- |:------------- |:-------------- |:---------- |
126126
| isPopup | Boolean | true | whether as popup add a overlay |
127127
| isOpen | Boolean | false | whether to open datepicker |
128128
| theme | String | default | theme of datepicker, include 'default', 'dark', 'ios', 'android', 'android-dark' |
129-
| dateFormat | Array | ['YYYY', 'M', 'D'] | according to year, month, day, hour, minute, second format specified display text. E.g ['YYYY年', 'MM月', 'DD日']|
129+
| dateFormat | Array | ['YYYY', 'M', 'D'] | according to year, month, day, hour, minute, second format specified display text. E.g ['YYYY年', 'MM月', 'DD日']|
130+
| dateSteps | Array | [1, 1, 1] | set step for each time unit |
130131
|showFormat | String | 'YYYY/MM/DD' | customize the format of the display title |
131132
| value | Date | new Date() | date value |
132133
| min | Date | new Date(1970, 0, 1) | minimum date |
133-
| max | Date | new Date(2050, 0, 1) | maximum date |
134-
| showHeader | Boolean | true | whether to show the header |
135-
| customHeader | ReactElement | undefined | customize the header, if you set this property, it will replace `showFormat`|
134+
| max | Date | new Date(2050, 0, 1) | maximum date |
135+
| showHeader | Boolean | true | whether to show the header |
136+
| customHeader | ReactElement | undefined | customize the header, if you set this property, it will replace `showFormat`|
136137
| confirmText | String | 完成 | customize the selection time button text |
137138
| cancelText | String | 取消 | customize the cancel button text |
138139
| onSelect | Function | () => {} | the callback function after click button of done, Date object as a parameter |

examples/basic/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import DatePicker from '../../lib/index';
77
(function main() {
88
class App extends React.Component {
99
state = {
10-
time: new Date(),
10+
time: new Date(2016, 8, 16, 8, 20, 57),
1111
isOpen: false,
1212
theme: 'default',
1313
}
@@ -59,8 +59,8 @@ import DatePicker from '../../lib/index';
5959
</div>
6060
<DatePicker
6161
value={this.state.time}
62-
min={new Date(2017, 2, 2)}
6362
dateSteps={[1, 1, 5]}
63+
dateFormat={['hh', 'mm', 'ss']}
6464
theme={this.state.theme}
6565
isOpen={this.state.isOpen}
6666
onSelect={this.handleSelect}

test/functional/DatePicker_spec.js

+90
Original file line numberDiff line numberDiff line change
@@ -322,3 +322,93 @@ describe('渲染正确的DatepicketItem子组件', () => {
322322
expect(datePickerItems.at(2).props().format).to.equals('ss');
323323
});
324324
});
325+
326+
describe('测试dateSteps属性', () => {
327+
let props;
328+
let mountedDatepicker;
329+
let yearPicker, monthPicker, dayPicker;
330+
331+
const datePicker = () => {
332+
if (!mountedDatepicker) {
333+
mountedDatepicker = mount(
334+
<DatePicker {...props} />
335+
);
336+
337+
yearPicker = mountedDatepicker.find(DatePickerItem).first();
338+
monthPicker = mountedDatepicker.find(DatePickerItem).at(1);
339+
dayPicker = mountedDatepicker.find(DatePickerItem).at(2);
340+
}
341+
342+
return mountedDatepicker;
343+
}
344+
345+
beforeEach(() => {
346+
props = {
347+
value: new Date(2016, 8, 16, 8, 22, 57),
348+
min: new Date(2015, 10, 1),
349+
max: new Date(2020, 10, 1),
350+
isOpen: true,
351+
};
352+
mountedDatepicker = undefined;
353+
yearPicker = null;
354+
monthPicker = null;
355+
dayPicker = null;
356+
});
357+
358+
359+
it ('当datesteps等于[5, 5, 5], dateFormart等于[hh, mm, ss], 当前时间为8:20:57,向上滑动秒,分钟应该为23', () => {
360+
props.dateFormat = ['hh', 'mm', 'ss'];
361+
props.dateSteps = [1, 1, 5];
362+
363+
const datePickerItems = datePicker().find(DatePickerItem);
364+
const second = dayPicker.find('.datepicker-viewport').instance();
365+
366+
const touchstartEvent = {
367+
targetTouches: [{ pageY: 0 }],
368+
};
369+
const touchmoveEvent = {
370+
targetTouches: [{ pageY: -21 }],
371+
};
372+
const touchendEvent = {
373+
changedTouches: [{ pageY: -21 }],
374+
};
375+
376+
eventTrigger(second, 'touchstart', touchstartEvent);
377+
eventTrigger(second, 'touchmove', touchmoveEvent);
378+
eventTrigger(second, 'touchend', touchendEvent);
379+
380+
return delay(250)
381+
.then(() => {
382+
expect(mountedDatepicker.state('value').getTime()).to.equals(new Date(2016, 8, 16, 8, 23, 2).getTime());
383+
})
384+
});
385+
386+
387+
it ('当datesteps等于[5, 5, 5], dateFormart等于[hh, mm, ss], 当前时间为8:20:57,向上滑动秒,最大时间是8:20:59, 分钟应该为22', () => {
388+
props.dateFormat = ['hh', 'mm', 'ss'];
389+
props.dateSteps = [1, 1, 5];
390+
props.max = new Date(2016, 8, 16, 8, 22, 59);
391+
392+
const datePickerItems = datePicker().find(DatePickerItem);
393+
const second = dayPicker.find('.datepicker-viewport').instance();
394+
395+
const touchstartEvent = {
396+
targetTouches: [{ pageY: 0 }],
397+
};
398+
const touchmoveEvent = {
399+
targetTouches: [{ pageY: -21 }],
400+
};
401+
const touchendEvent = {
402+
changedTouches: [{ pageY: -21 }],
403+
};
404+
405+
eventTrigger(second, 'touchstart', touchstartEvent);
406+
eventTrigger(second, 'touchmove', touchmoveEvent);
407+
eventTrigger(second, 'touchend', touchendEvent);
408+
409+
return delay(250)
410+
.then(() => {
411+
expect(mountedDatepicker.state('value').getTime()).to.equals(new Date(2016, 8, 16, 8, 22, 57).getTime());
412+
})
413+
});
414+
});

0 commit comments

Comments
 (0)