diff --git a/src/calendar/components/Header.js b/src/calendar/components/Header.js index 10fdf0ebb..f7cc1ccff 100644 --- a/src/calendar/components/Header.js +++ b/src/calendar/components/Header.js @@ -12,10 +12,7 @@ export default createComponent({ methods: { genTitle() { const title = this.slots('title') || this.title || t('title'); - - if (title) { - return
{title}
; - } + return
{title}
; }, genMonth() { diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js index 41497dfd8..6a685a9ee 100644 --- a/src/calendar/components/Month.js +++ b/src/calendar/components/Month.js @@ -49,10 +49,6 @@ export default createComponent({ }, days() { - if (!this.visible) { - return null; - } - const days = []; const year = this.date.getFullYear(); const month = this.date.getMonth(); @@ -95,6 +91,7 @@ export default createComponent({ return compareDay(day, currentDate) === 0 ? 'selected' : ''; } + /* istanbul ignore else */ if (type === 'range') { const [startDay, endDay] = this.currentDate; diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue index 1e83a7569..9426ac2da 100644 --- a/src/calendar/demo/index.vue +++ b/src/calendar/demo/index.vue @@ -60,6 +60,8 @@ :title="$t('calendar')" :poppable="false" :show-confirm="false" + :min-date="tiledMinDate" + :max-date="tiledMaxDate" :style="{ height: '500px' }" /> @@ -136,6 +138,8 @@ export default { formatter: undefined, showConfirm: false, showCalendar: false, + tiledMinDate: new Date(2012, 0, 10), + tiledMaxDate: new Date(2012, 2, 20), confirmText: undefined, confirmDisabledText: undefined, }; diff --git a/src/calendar/index.js b/src/calendar/index.js index 6bab63c65..abb47ba51 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -89,6 +89,7 @@ export default createComponent({ return !this.currentDate; } + /* istanbul ignore else */ if (this.type === 'range') { return !this.currentDate[0] || !this.currentDate[1]; } @@ -137,6 +138,7 @@ export default createComponent({ return defaultDate || minDate; } + /* istanbul ignore else */ if (type === 'range') { const [startDay, endDay] = defaultDate || []; return [startDay || minDate, endDay || getNextDay(minDate)]; @@ -153,6 +155,7 @@ export default createComponent({ const heightSum = heights.reduce((a, b) => a + b, 0); // iOS scroll bounce may exceed the range + /* istanbul ignore next */ if (top < 0 || (bottom > heightSum && top > 0)) { return; } @@ -171,6 +174,7 @@ export default createComponent({ height += heights[i]; } + /* istanbul ignore else */ if (firstMonth) { this.monthTitle = firstMonth.title; } diff --git a/src/calendar/test/__snapshots__/demo.spec.js.snap b/src/calendar/test/__snapshots__/demo.spec.js.snap index e69de29bb..bc6ba7dea 100644 --- a/src/calendar/test/__snapshots__/demo.spec.js.snap +++ b/src/calendar/test/__snapshots__/demo.spec.js.snap @@ -0,0 +1,163 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders demo correctly 1`] = ` +
+
+
+
选择单个日期
+ +
+
+
选择日期区间
+ +
+
+
+
+
选择单个日期
+ +
+
+
选择日期区间
+ +
+
+
+
+
自定义日期范围
+ +
+
+
自定义按钮文字
+ +
+
+
自定义日期文案
+ +
+
+
+
+
+
日历
+
2012年1月
+
日一二三四五六
+
+
+
+
+
1
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+
10
+
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+
+
+
2012年2月
+
+
2
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
+
+
+
2012年3月
+
+
3
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+
+
+
+
+
+ +
+`; diff --git a/src/calendar/test/__snapshots__/index.spec.js.snap b/src/calendar/test/__snapshots__/index.spec.js.snap index e69de29bb..c03cdcf14 100644 --- a/src/calendar/test/__snapshots__/index.spec.js.snap +++ b/src/calendar/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,213 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`formatter prop 1`] = ` +
+
+
日期选择
+
2010年1月
+
日一二三四五六
+
+
+
+
+
1
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+
10
+
+
+
Top Info
11 +
+
12
Bottom Info
+
+
Text
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+
+
+
+
+`; + +exports[`popup wrapper 1`] = ``; + +exports[`popup wrapper 2`] = ` +
+
+
+
日期选择
+
2010年1月
+
日一二三四五六
+
+
+
+
+
1
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+
10
+
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+
+
+
+
+ +
+`; + +exports[`row-height prop 1`] = ` +
+
+
日期选择
+
2010年1月
+
日一二三四五六
+
+
+
+
+
1
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+
10
+
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+
+
+
+
+`; + +exports[`title & footer slot 1`] = ` +
+
+
Custom Title
+
2010年1月
+
日一二三四五六
+
+
+
+
+
1
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+
10
+
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+
+
+
Custom Footer
+
+`; diff --git a/src/calendar/test/index.spec.js b/src/calendar/test/index.spec.js index e69de29bb..2e614e8a3 100644 --- a/src/calendar/test/index.spec.js +++ b/src/calendar/test/index.spec.js @@ -0,0 +1,377 @@ +import Calendar from '..'; +import { mount, later } from '../../../test'; +import { getNextDay } from '../utils'; + +const now = new Date(); +const minDate = new Date(2010, 0, 10); +const maxDate = new Date(2010, 0, 20); + +function formatDate(date) { + if (date) { + return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; + } + + return ''; +} + +function formatRange([start, end]) { + return `${formatDate(start)}-${formatDate(end)}`; +} + +test('select event when type is single', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate, + poppable: false + } + }); + + await later(); + + wrapper + .findAll('.van-calendar__day') + .at(15) + .trigger('click'); + + expect(formatDate(wrapper.emitted('select')[0][0])).toEqual('2010/1/16'); +}); + +test('select event when type is range', async () => { + const wrapper = mount(Calendar, { + propsData: { + type: 'range', + minDate, + maxDate, + poppable: false + } + }); + + await later(); + + const days = wrapper.findAll('.van-calendar__day'); + days.at(15).trigger('click'); + days.at(15).trigger('click'); + days.at(16).trigger('click'); + days.at(15).trigger('click'); + days.at(12).trigger('click'); + + const emittedSelect = wrapper.emitted('select'); + expect(formatRange(emittedSelect[0][0])).toEqual('2010/1/16-'); + expect(formatRange(emittedSelect[1][0])).toEqual('2010/1/16-2010/1/17'); + expect(formatRange(emittedSelect[2][0])).toEqual('2010/1/16-'); + expect(formatRange(emittedSelect[3][0])).toEqual('2010/1/13-'); +}); + +test('should not trigger select event when click disabled day', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate, + poppable: false + } + }); + + await later(); + + wrapper + .findAll('.van-calendar__day') + .at(1) + .trigger('click'); + + expect(formatDate(wrapper.emitted('select'))).toBeFalsy(); +}); + +test('confirm event when type is single', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate, + poppable: false + } + }); + + await later(); + + wrapper + .findAll('.van-calendar__day') + .at(15) + .trigger('click'); + + expect(wrapper.emitted('confirm')).toBeFalsy(); + + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('2010/1/16'); +}); + +test('confirm event when type is range', async () => { + const wrapper = mount(Calendar, { + propsData: { + type: 'range', + minDate, + maxDate, + poppable: false + } + }); + + await later(); + + const days = wrapper.findAll('.van-calendar__day'); + days.at(15).trigger('click'); + days.at(18).trigger('click'); + + expect(wrapper.emitted('confirm')).toBeFalsy(); + + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual( + '2010/1/16-2010/1/19' + ); +}); + +test('default single date', async () => { + const wrapper = mount(Calendar, { + propsData: { + poppable: false + } + }); + + await later(); + + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual(formatDate(now)); +}); + +test('default range date', async () => { + const wrapper = mount(Calendar, { + propsData: { + type: 'range', + poppable: false + } + }); + + await later(); + + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual( + formatRange([now, getNextDay(now)]) + ); +}); + +test('reset method', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate, + type: 'range', + poppable: false + } + }); + + await later(); + + const days = wrapper.findAll('.van-calendar__day'); + days.at(15).trigger('click'); + days.at(18).trigger('click'); + + wrapper.vm.reset(); + + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual( + '2010/1/10-2010/1/11' + ); +}); + +test('set show-confirm to false', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate, + type: 'range', + poppable: false, + showConfirm: false + } + }); + + await later(); + + const days = wrapper.findAll('.van-calendar__day'); + days.at(15).trigger('click'); + days.at(18).trigger('click'); + + expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual( + '2010/1/16-2010/1/19' + ); +}); + +test('row-height prop', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate, + poppable: false, + rowHeight: 50 + } + }); + + await later(); + + expect(wrapper).toMatchSnapshot(); +}); + +test('formatter prop', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate, + poppable: false, + formatter(day) { + const date = day.date.getDate(); + + switch (date) { + case 11: + day.topInfo = 'Top Info'; + break; + case 12: + day.bottomInfo = 'Bottom Info'; + break; + case 13: + day.text = 'Text'; + break; + case 14: + day.className = 'test'; + break; + } + + return day; + } + } + }); + + await later(); + + expect(wrapper).toMatchSnapshot(); +}); + +test('title & footer slot', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate, + poppable: false + }, + scopedSlots: { + title: () => 'Custom Title', + footer: () => 'Custom Footer' + } + }); + + await later(); + + expect(wrapper).toMatchSnapshot(); +}); + +test('should reset when type changed', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate, + poppable: false + } + }); + + await later(); + + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('2010/1/10'); + + wrapper.setProps({ type: 'range' }); + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(formatRange(wrapper.emitted('confirm')[1][0])).toEqual( + '2010/1/10-2010/1/11' + ); +}); + +test('default-date prop in single type', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate, + defaultDate: getNextDay(minDate), + poppable: false + } + }); + + await later(); + + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('2010/1/11'); + + wrapper.setProps({ defaultDate: maxDate }); + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(formatDate(wrapper.emitted('confirm')[1][0])).toEqual('2010/1/20'); +}); + +test('default-date prop in range type', async () => { + const wrapper = mount(Calendar, { + propsData: { + type: 'range', + minDate, + maxDate, + poppable: false + } + }); + + await later(); + + wrapper.setProps({ defaultDate: [] }); + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(wrapper.emitted('confirm')).toBeFalsy(); + + const days = wrapper.findAll('.van-calendar__day'); + days.at(15).trigger('click'); + days.at(18).trigger('click'); + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual( + '2010/1/16-2010/1/19' + ); +}); + +test('popup wrapper', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate + }, + listeners: { + input(value) { + wrapper.setProps({ value }); + } + } + }); + + await later(); + expect(wrapper).toMatchSnapshot(); + + wrapper.setProps({ value: true }); + await later(); + + expect(wrapper).toMatchSnapshot(); + + wrapper.find('.van-popup__close-icon').trigger('click'); + expect(wrapper.element.style.display).toEqual('none'); +}); + +test('set show-mark prop to false', async () => { + const wrapper = mount(Calendar, { + propsData: { + minDate, + maxDate, + showMark: false, + poppable: false + } + }); + + await later(); + + expect(wrapper.find('.van-calendar__month-mark').element).toBeFalsy(); +}); diff --git a/src/calendar/test/utils.spec.js b/src/calendar/test/utils.spec.js new file mode 100644 index 000000000..c978a5d96 --- /dev/null +++ b/src/calendar/test/utils.spec.js @@ -0,0 +1,26 @@ +import { compareDay, compareMonth, getNextDay } from '../utils'; + +const date1 = new Date(2010, 0, 1); +const date2 = new Date(2010, 0, 2); +const date3 = new Date(2010, 1, 1); +const date4 = new Date(2011, 0, 1); + +test('compareMonth', () => { + expect(compareMonth(date1, date1)).toEqual(0); + expect(compareMonth(date1, date2)).toEqual(0); + expect(compareMonth(date2, date3)).toEqual(-1); + expect(compareMonth(date1, date4)).toEqual(-1); + expect(compareMonth(date4, date1)).toEqual(1); +}); + +test('compareDay', () => { + expect(compareDay(date1, date1)).toEqual(0); + expect(compareDay(date1, date2)).toEqual(-1); + expect(compareDay(date2, date3)).toEqual(-1); + expect(compareDay(date4, date1)).toEqual(1); +}); + +test('getNextDay', () => { + expect(getNextDay(date1).getDate()).toEqual(2); + expect(getNextDay(date2).getDate()).toEqual(3); +}); diff --git a/src/calendar/utils.ts b/src/calendar/utils.ts index fa83f6e2c..a71e5f701 100644 --- a/src/calendar/utils.ts +++ b/src/calendar/utils.ts @@ -1,5 +1,4 @@ import { createNamespace } from '../utils'; -import { padZero } from '../utils/format/string'; const [createComponent, bem, t] = createNamespace('calendar'); @@ -8,7 +7,7 @@ export { createComponent, bem, t }; export const ROW_HEIGHT = 64; export function formatMonthTitle(date: Date) { - return t('monthTitle', date.getFullYear(), padZero(date.getMonth() + 1)); + return t('monthTitle', date.getFullYear(), date.getMonth() + 1); } export function compareMonth(date1: Date, date2: Date) {