From 63f09c3b4c3b108e81799eed91b34446b0a11dea Mon Sep 17 00:00:00 2001 From: nemo-shen Date: Tue, 6 Jul 2021 09:58:51 +0800 Subject: [PATCH] fix(DatetimePicker): fix change max-* emit incorrect value (#8977) * fix(DatetimePicker): fix change max-* emit incorrect value * test(DatetimePicker): add max-minute test * test(DatetimePicker): test case * test(DatetimePicker): update test case name --- src/datetime-picker/DatePicker.js | 9 ++- src/datetime-picker/TimePicker.js | 21 +++++- src/datetime-picker/test/date-picker.spec.js | 61 +++++++++++++++- src/datetime-picker/test/time-picker.spec.js | 75 +++++++++++++++----- 4 files changed, 141 insertions(+), 25 deletions(-) diff --git a/src/datetime-picker/DatePicker.js b/src/datetime-picker/DatePicker.js index 31994cb87..a2d174426 100644 --- a/src/datetime-picker/DatePicker.js +++ b/src/datetime-picker/DatePicker.js @@ -35,8 +35,13 @@ export default createComponent({ this.updateInnerValue(); }); }, - maxDate: 'updateInnerValue', - + maxDate(value) { + if (this.innerValue.valueOf() >= value.valueOf()) { + this.innerValue = value; + } else { + this.updateInnerValue(); + } + }, value(val) { val = this.formatValue(val); diff --git a/src/datetime-picker/TimePicker.js b/src/datetime-picker/TimePicker.js index 5d60f94c9..cc26d680d 100644 --- a/src/datetime-picker/TimePicker.js +++ b/src/datetime-picker/TimePicker.js @@ -50,10 +50,25 @@ export default createComponent({ this.updateInnerValue(); }); }, - maxHour: 'updateInnerValue', + maxHour(value) { + const [hour, minute] = this.innerValue.split(':'); + if (hour >= value) { + this.innerValue = this.formatValue(`${value}:${minute}`); + this.updateColumnValue(); + } else { + this.updateInnerValue(); + } + }, minMinute: 'updateInnerValue', - maxMinute: 'updateInnerValue', - + maxMinute(value) { + const [hour, minute] = this.innerValue.split(':'); + if (minute >= value) { + this.innerValue = this.formatValue(`${hour}:${value}`); + this.updateColumnValue(); + } else { + this.updateInnerValue(); + } + }, value(val) { val = this.formatValue(val); diff --git a/src/datetime-picker/test/date-picker.spec.js b/src/datetime-picker/test/date-picker.spec.js index e6b345031..360e23085 100644 --- a/src/datetime-picker/test/date-picker.spec.js +++ b/src/datetime-picker/test/date-picker.spec.js @@ -249,7 +249,7 @@ test('value has an inital value', () => { expect(wrapper.emitted('confirm')[0][0]).toEqual(defaultValue); }); -test('change min-date and emit correct value', async () => { +test('dynamic set min-date then emit correct value', async () => { const defaultValue = new Date(2020, 10, 2, 10, 30); const wrapper = mount({ template: ` @@ -268,9 +268,66 @@ test('change min-date and emit correct value', async () => { mounted() { this.minDate = defaultValue; }, - }) + }); await later(); wrapper.find('.van-picker__confirm').trigger('click'); expect(wrapper.emitted('confirm')[0][0]).toEqual(defaultValue); }); + +test('dynamic set max-date then emit correct value', async () => { + const date = new Date(2020, 10, 2, 10, 30); + const minDate = new Date(0); + const wrapper = mount({ + template: ` + + `, + + data() { + return { + date, + minDate, + maxDate: new Date(2030, 0, 1, 10, 30), + }; + }, + + methods: { + onChangeMaxDate(date) { + this.maxDate = date; + }, + }, + }); + + await later(); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[0][0]).toEqual(date); + + await later(); + wrapper.vm.onChangeMaxDate(new Date(2029, 10, 10, 10, 10)); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[1][0]).toEqual(date); + + await later(); + wrapper.vm.onChangeMaxDate(new Date(2020, 10, 10, 10, 10)); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[2][0]).toEqual(date); + + await later(); + wrapper.vm.onChangeMaxDate(new Date(2019, 10, 10, 10, 10)); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[3][0]).toEqual( + new Date(2019, 10, 10, 10, 10) + ); + + await later(); + wrapper.vm.onChangeMaxDate(new Date(2040, 10, 10, 10, 10)); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[4][0]).toEqual( + new Date(2019, 10, 10, 10, 10) + ); +}); diff --git a/src/datetime-picker/test/time-picker.spec.js b/src/datetime-picker/test/time-picker.spec.js index 1ca909bf8..fc42521de 100644 --- a/src/datetime-picker/test/time-picker.spec.js +++ b/src/datetime-picker/test/time-picker.spec.js @@ -111,22 +111,6 @@ test('change min-minute and emit correct value', async () => { expect(wrapper.emitted('confirm')[0][0]).toEqual('12:30'); }); -test('set max-hour & max-minute smaller than current then emit correct value', async () => { - const wrapper = mount(TimePicker, { - propsData: { - value: '23:59', - }, - }); - await later(); - wrapper.setProps({ - maxHour: 2, - maxMinute: 2, - }); - - wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual('00:00'); -}); - test('set min-minute dynamically', async () => { const wrapper = mount({ template: ` @@ -151,13 +135,14 @@ test('set min-minute dynamically', async () => { expect(wrapper.emitted('confirm')[0][0]).toEqual('13:00'); }); -test('change min-hour and emit correct value', async () => { +test('dynamic set min-hour & min-minute then emit correct value', async () => { const wrapper = mount({ template: ` `, @@ -165,14 +150,68 @@ test('change min-hour and emit correct value', async () => { return { time: '10:30', minHour: 1, + minMinute: 20, } }, mounted() { this.minHour = 11; + this.minMinute = 40; }, }) await later(); wrapper.find('.van-picker__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual('11:30'); + expect(wrapper.emitted('confirm')[0][0]).toEqual('11:40'); +}); + +test('dynamic set max-hour & max-minute then emit correct value', async () => { + const wrapper = mount({ + template: ` + + `, + + data() { + return { + time: '12:30', + minHour: 1, + minMinute: 1, + maxHour: 20, + maxMinute: 59, + } + }, + }) + + const confirm = wrapper.find('.van-picker__confirm'); + + await later(); + confirm.trigger('click'); + expect(wrapper.emitted('confirm')[0][0]).toEqual('12:30'); + + await later(); + wrapper.setData({ maxHour: 20, maxMinute: 50 }); + confirm.trigger('click'); + expect(wrapper.emitted('confirm')[1][0]).toEqual('12:30'); + + await later(); + wrapper.setData({ maxHour: 12, maxMinute: 30 }); + confirm.trigger('click'); + expect(wrapper.emitted('confirm')[2][0]).toEqual('12:30'); + + await later(); + wrapper.setData({ maxHour: 11, maxMinute: 20 }); + confirm.trigger('click'); + expect(wrapper.emitted('confirm')[3][0]).toEqual('11:20'); + + await later(); + wrapper.setData({ maxHour: 14 }); + await later(); + wrapper.setData({ maxMinute: 25 }); + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[4][0]).toEqual('11:20'); });