diff --git a/src/calendar/test/__snapshots__/index.legacy.js.snap b/src/calendar/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index 36899eec8..000000000 --- a/src/calendar/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,325 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`color prop when type is range 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[`color prop when type is single 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[`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/__snapshots__/index.spec.ts.snap b/src/calendar/test/__snapshots__/index.spec.ts.snap new file mode 100644 index 000000000..d56d27a99 --- /dev/null +++ b/src/calendar/test/__snapshots__/index.spec.ts.snap @@ -0,0 +1,1143 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`color prop when type is range 1`] = ` +
+
+
+ Calendar +
+
+
+
+ + Sun + + + Mon + + + Tue + + + Wed + + + Thu + + + Fri + + + Sat + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+`; + +exports[`color prop when type is single 1`] = ` +
+
+
+ Calendar +
+
+
+
+ + Sun + + + Mon + + + Tue + + + Wed + + + Thu + + + Fri + + + Sat + +
+
+
+
+
+
+ 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[`formatter prop 1`] = ` +
+
+
+ Calendar +
+
+
+
+ + Sun + + + Mon + + + Tue + + + Wed + + + Thu + + + Fri + + + Sat + +
+
+
+
+
+
+ 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`] = ` + +
+
+ + +
+
+
+
+ Calendar +
+
+
+
+ + Sun + + + Mon + + + Tue + + + Wed + + + Thu + + + Fri + + + Sat + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + +
+ +`; + +exports[`row-height prop 1`] = ` +
+
+
+ Calendar +
+
+
+
+ + Sun + + + Mon + + + Tue + + + Wed + + + Thu + + + Fri + + + Sat + +
+
+
+
+
+
+ 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 +
+
+
+
+ + Sun + + + Mon + + + Tue + + + Wed + + + Thu + + + Fri + + + Sat + +
+
+
+
+
+
+ 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/__snapshots__/prop.legacy.js.snap b/src/calendar/test/__snapshots__/prop.legacy.js.snap deleted file mode 100644 index 1d8862afe..000000000 --- a/src/calendar/test/__snapshots__/prop.legacy.js.snap +++ /dev/null @@ -1,54 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`lazy-render prop 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
-
-
-
-
-
-`; diff --git a/src/calendar/test/__snapshots__/prop.spec.ts.snap b/src/calendar/test/__snapshots__/prop.spec.ts.snap new file mode 100644 index 000000000..5534021e2 --- /dev/null +++ b/src/calendar/test/__snapshots__/prop.spec.ts.snap @@ -0,0 +1,227 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`lazy-render prop 1`] = ` +
+
+
+ Calendar +
+
+
+
+ + Sun + + + Mon + + + Tue + + + Wed + + + Thu + + + Fri + + + Sat + +
+
+
+
+
+
+ 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 +
+
+
+
+
+ +
+
+`; diff --git a/src/calendar/test/index.spec.js b/src/calendar/test/index.spec.js deleted file mode 100644 index 2b02b5855..000000000 --- a/src/calendar/test/index.spec.js +++ /dev/null @@ -1,50 +0,0 @@ -import { Calendar } from '..'; -import { mount } from '../../../test'; -import { getNextDay, getPrevDay } from '../utils'; -import { minDate, maxDate } from './utils'; - -test('should reset to default date when calling reset method', async () => { - const defaultDate = [minDate, getNextDay(minDate)]; - const wrapper = mount(Calendar, { - props: { - minDate, - maxDate, - type: 'range', - poppable: false, - lazyRender: false, - defaultDate, - }, - }); - - const days = wrapper.findAll('.van-calendar__day'); - await days[15].trigger('click'); - await days[18].trigger('click'); - - wrapper.vm.reset(); - - wrapper.find('.van-calendar__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual(defaultDate); -}); - -test('should reset to specific date when calling reset method with date', async () => { - const wrapper = mount(Calendar, { - props: { - minDate, - maxDate, - type: 'range', - poppable: false, - lazyRender: false, - defaultDate: [minDate, getNextDay(minDate)], - }, - }); - - const days = wrapper.findAll('.van-calendar__day'); - await days[15].trigger('click'); - await days[18].trigger('click'); - - const newDate = [getPrevDay(maxDate), maxDate]; - wrapper.vm.reset(newDate); - - wrapper.find('.van-calendar__confirm').trigger('click'); - expect(wrapper.emitted('confirm')[0][0]).toEqual(newDate); -}); diff --git a/src/calendar/test/index.legacy.js b/src/calendar/test/index.spec.ts similarity index 54% rename from src/calendar/test/index.legacy.js rename to src/calendar/test/index.spec.ts index e0f472017..b4c6741fc 100644 --- a/src/calendar/test/index.legacy.js +++ b/src/calendar/test/index.spec.ts @@ -1,14 +1,54 @@ -import { Calendar } from '..'; +import { Calendar, CalendarDayItem } from '..'; import { mount, later } from '../../../test'; -import { getNextDay } from '../utils'; -import { - now, - minDate, - maxDate, - formatDate, - formatRange, - formatMultiple, -} from './utils'; +import { getNextDay, getPrevDay } from '../utils'; +import { now, minDate, maxDate } from './utils'; +import type { ComponentInstance } from '../../utils'; + +test('should reset to default date when calling reset method', async () => { + const defaultDate = [minDate, getNextDay(minDate)]; + const wrapper = mount(Calendar, { + props: { + minDate, + maxDate, + type: 'range', + poppable: false, + lazyRender: false, + defaultDate, + }, + }); + + const days = wrapper.findAll('.van-calendar__day'); + await days[15].trigger('click'); + await days[18].trigger('click'); + + (wrapper.vm as ComponentInstance).reset(); + + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(wrapper.emitted<[Date, Date]>('confirm')![0][0]).toEqual(defaultDate); +}); + +test('should reset to specific date when calling reset method with date', async () => { + const wrapper = mount(Calendar, { + props: { + minDate, + maxDate, + type: 'range', + poppable: false, + lazyRender: false, + defaultDate: [minDate, getNextDay(minDate)], + }, + }); + + const days = wrapper.findAll('.van-calendar__day'); + await days[15].trigger('click'); + await days[18].trigger('click'); + + const newDate = [getPrevDay(maxDate), maxDate]; + (wrapper.vm as ComponentInstance).reset(newDate); + + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(wrapper.emitted<[Date, Date]>('confirm')![0][0]).toEqual(newDate); +}); test('select event when type is single', async () => { const wrapper = mount(Calendar, { @@ -16,14 +56,17 @@ test('select event when type is single', async () => { minDate, maxDate, poppable: false, + lazyRender: false, }, }); await later(); - wrapper.findAll('.van-calendar__day').at(15).trigger('click'); + wrapper.findAll('.van-calendar__day')[15].trigger('click'); - expect(formatDate(wrapper.emitted('select')[0][0])).toEqual('2010/1/16'); + expect(wrapper.emitted<[Date]>('select')![0][0]).toEqual( + new Date(2010, 0, 16) + ); }); test('select event when type is range', async () => { @@ -33,23 +76,27 @@ test('select event when type is range', async () => { minDate, maxDate, poppable: false, + lazyRender: 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'); + days[15].trigger('click'); + days[15].trigger('click'); + days[16].trigger('click'); + days[15].trigger('click'); + days[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-'); + const onSelect = wrapper.emitted<[Date]>('select'); + expect(onSelect![0][0]).toEqual([new Date(2010, 0, 16)]); + expect(onSelect![1][0]).toEqual([ + new Date(2010, 0, 16), + new Date(2010, 0, 17), + ]); + expect(onSelect![2][0]).toEqual([new Date(2010, 0, 16)]); + expect(onSelect![3][0]).toEqual([new Date(2010, 0, 13)]); }); test('select event when type is multiple', async () => { @@ -60,31 +107,43 @@ test('select event when type is multiple', async () => { maxDate, poppable: false, defaultDate: [minDate], + lazyRender: false, }, }); await later(); const days = wrapper.findAll('.van-calendar__day'); - days.at(15).trigger('click'); - days.at(16).trigger('click'); - days.at(17).trigger('click'); + days[15].trigger('click'); + days[16].trigger('click'); + days[17].trigger('click'); await later(); - days.at(15).trigger('click'); - days.at(12).trigger('click'); + days[15].trigger('click'); + days[12].trigger('click'); - const emittedSelect = wrapper.emitted('select'); - expect(formatMultiple(emittedSelect[0][0])).toEqual('2010/1/10,2010/1/16'); - expect(formatMultiple(emittedSelect[1][0])).toEqual( - '2010/1/10,2010/1/16,2010/1/17' - ); - expect(formatMultiple(emittedSelect[2][0])).toEqual( - '2010/1/10,2010/1/16,2010/1/17,2010/1/18' - ); - expect(formatMultiple(emittedSelect[3][0])).toEqual( - '2010/1/10,2010/1/17,2010/1/18,2010/1/13' - ); + const onSelect = wrapper.emitted<[Date]>('select'); + expect(onSelect![0][0]).toEqual([ + new Date(2010, 0, 10), + new Date(2010, 0, 16), + ]); + expect(onSelect![1][0]).toEqual([ + new Date(2010, 0, 10), + new Date(2010, 0, 16), + new Date(2010, 0, 17), + ]); + expect(onSelect![2][0]).toEqual([ + new Date(2010, 0, 10), + new Date(2010, 0, 16), + new Date(2010, 0, 17), + new Date(2010, 0, 18), + ]); + expect(onSelect![3][0]).toEqual([ + new Date(2010, 0, 10), + new Date(2010, 0, 17), + new Date(2010, 0, 18), + new Date(2010, 0, 13), + ]); }); test('select event when type is multiple', async () => { @@ -95,17 +154,20 @@ test('select event when type is multiple', async () => { maxDate, poppable: false, defaultDate: [minDate], + lazyRender: false, }, }); await later(); const days = wrapper.findAll('.van-calendar__day'); - days.at(15).trigger('click'); + days[15].trigger('click'); await later(); - days.at(15).trigger('click'); + days[15].trigger('click'); - expect(formatDate(wrapper.emitted('unselect')[0][0])).toEqual('2010/1/16'); + expect(wrapper.emitted<[Date]>('unselect')![0][0]).toEqual( + new Date(2010, 0, 16) + ); }); test('should not trigger select event when click disabled day', async () => { @@ -114,6 +176,7 @@ test('should not trigger select event when click disabled day', async () => { minDate, maxDate, poppable: false, + lazyRender: false, }, }); @@ -121,7 +184,7 @@ test('should not trigger select event when click disabled day', async () => { wrapper.findAll('.van-calendar__day')[1].trigger('click'); - expect(formatDate(wrapper.emitted('select'))).toBeFalsy(); + expect(wrapper.emitted('select')).toBeFalsy(); }); test('confirm event when type is single', async () => { @@ -130,17 +193,20 @@ test('confirm event when type is single', async () => { minDate, maxDate, poppable: false, + lazyRender: false, }, }); await later(); - wrapper.findAll('.van-calendar__day').at(15).trigger('click'); + wrapper.findAll('.van-calendar__day')[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'); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual( + new Date(2010, 0, 16) + ); }); test('confirm event when type is range', async () => { @@ -150,34 +216,23 @@ test('confirm event when type is range', async () => { minDate, maxDate, poppable: false, + lazyRender: false, }, }); await later(); const days = wrapper.findAll('.van-calendar__day'); - days.at(15).trigger('click'); - days.at(18).trigger('click'); + days[15].trigger('click'); + days[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, { - props: { - poppable: false, - }, - }); - - await later(); - - wrapper.find('.van-calendar__confirm').trigger('click'); - expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual(formatDate(now)); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual([ + new Date(2010, 0, 16), + new Date(2010, 0, 19), + ]); }); test('default range date', async () => { @@ -185,15 +240,31 @@ test('default range date', async () => { props: { type: 'range', poppable: false, + lazyRender: false, }, }); await later(); wrapper.find('.van-calendar__confirm').trigger('click'); - expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual( - formatRange([now, getNextDay(now)]) - ); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual([ + now, + getNextDay(now), + ]); +}); + +test('default single date', async () => { + const wrapper = mount(Calendar, { + props: { + poppable: false, + lazyRender: false, + }, + }); + + await later(); + + wrapper.find('.van-calendar__confirm').trigger('click'); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(now); }); test('set show-confirm to false', async () => { @@ -204,18 +275,20 @@ test('set show-confirm to false', async () => { type: 'range', poppable: false, showConfirm: false, + lazyRender: false, }, }); await later(); const days = wrapper.findAll('.van-calendar__day'); - days.at(15).trigger('click'); - days.at(18).trigger('click'); + days[15].trigger('click'); + days[18].trigger('click'); - expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual( - '2010/1/16-2010/1/19' - ); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual([ + new Date(2010, 0, 16), + new Date(2010, 0, 19), + ]); }); test('row-height prop', async () => { @@ -226,6 +299,7 @@ test('row-height prop', async () => { poppable: false, rowHeight: 50, defaultDate: minDate, + lazyRender: false, }, }); @@ -241,8 +315,9 @@ test('formatter prop', async () => { maxDate, poppable: false, defaultDate: minDate, - formatter(day) { - const date = day.date.getDate(); + lazyRender: false, + formatter(day: CalendarDayItem) { + const date = day.date?.getDate(); switch (date) { case 11: @@ -276,6 +351,7 @@ test('title & footer slot', async () => { maxDate, poppable: false, defaultDate: minDate, + lazyRender: false, }, slots: { title: () => 'Custom Title', @@ -295,22 +371,26 @@ test('should reset when type changed', async () => { maxDate, poppable: false, defaultDate: minDate, + lazyRender: false, }, }); await later(); wrapper.find('.van-calendar__confirm').trigger('click'); - expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('2010/1/10'); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual( + new Date(2010, 0, 10) + ); - wrapper.setProps({ + await wrapper.setProps({ type: 'range', defaultDate: [minDate, getNextDay(minDate)], }); wrapper.find('.van-calendar__confirm').trigger('click'); - expect(formatRange(wrapper.emitted('confirm')[1][0])).toEqual( - '2010/1/10-2010/1/11' - ); + expect(wrapper.emitted<[Date]>('confirm')![1][0]).toEqual([ + new Date(2010, 0, 10), + new Date(2010, 0, 11), + ]); }); test('default-date prop in single type', async () => { @@ -320,17 +400,22 @@ test('default-date prop in single type', async () => { maxDate, defaultDate: getNextDay(minDate), poppable: false, + lazyRender: false, }, }); await later(); wrapper.find('.van-calendar__confirm').trigger('click'); - expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('2010/1/11'); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual( + new Date(2010, 0, 11) + ); - wrapper.setProps({ defaultDate: maxDate }); + await wrapper.setProps({ defaultDate: maxDate }); wrapper.find('.van-calendar__confirm').trigger('click'); - expect(formatDate(wrapper.emitted('confirm')[1][0])).toEqual('2010/1/20'); + expect(wrapper.emitted<[Date]>('confirm')![1][0]).toEqual( + new Date(2010, 0, 20) + ); }); test('default-date prop in range type', async () => { @@ -340,22 +425,24 @@ test('default-date prop in range type', async () => { minDate, maxDate, poppable: false, + lazyRender: false, }, }); await later(); - wrapper.setProps({ defaultDate: [] }); + await wrapper.setProps({ defaultDate: null }); 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'); + await days[15].trigger('click'); + await days[18].trigger('click'); wrapper.find('.van-calendar__confirm').trigger('click'); - expect(formatRange(wrapper.emitted('confirm')[0][0])).toEqual( - '2010/1/16-2010/1/19' - ); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual([ + new Date(2010, 0, 16), + new Date(2010, 0, 19), + ]); }); test('popup wrapper', async () => { @@ -364,10 +451,9 @@ test('popup wrapper', async () => { minDate, maxDate, defaultDate: minDate, - }, - listeners: { - input(value) { - wrapper.setProps({ value }); + show: false, + 'onUpdate:show': (show: boolean) => { + wrapper.setProps({ show }); }, }, }); @@ -375,13 +461,13 @@ test('popup wrapper', async () => { await later(); expect(wrapper.html()).toMatchSnapshot(); - wrapper.setProps({ value: true }); + await wrapper.setProps({ show: true }); await later(); expect(wrapper.html()).toMatchSnapshot(); - wrapper.find('.van-popup__close-icon').trigger('click'); - expect(wrapper.style.display).toEqual('none'); + await wrapper.find('.van-popup__close-icon').trigger('click'); + expect(wrapper.find('.van-calendar__popup').style.display).toEqual('none'); }); test('set show-mark prop to false', async () => { @@ -391,12 +477,13 @@ test('set show-mark prop to false', async () => { maxDate, showMark: false, poppable: false, + lazyRender: false, }, }); await later(); - expect(wrapper.find('.van-calendar__month-mark').element).toBeFalsy(); + expect(wrapper.find('.van-calendar__month-mark').exists()).toBeFalsy(); }); test('color prop when type is single', async () => { @@ -407,6 +494,7 @@ test('color prop when type is single', async () => { color: 'blue', poppable: false, defaultDate: minDate, + lazyRender: false, }, }); @@ -432,13 +520,16 @@ test('color prop when type is range', async () => { expect(wrapper.html()).toMatchSnapshot(); }); -test('close event', () => { +test('close event', async () => { + const onClose = jest.fn(); const wrapper = mount(Calendar, { props: { - value: true, + show: true, + onClose, }, }); - wrapper.setProps({ value: false }); - expect(wrapper.emitted('close')).toBeTruthy(); + await wrapper.setProps({ show: false }); + + expect(onClose).toHaveBeenCalledTimes(1); }); diff --git a/src/calendar/test/prop.legacy.js b/src/calendar/test/prop.spec.ts similarity index 59% rename from src/calendar/test/prop.legacy.js rename to src/calendar/test/prop.spec.ts index e4ce255bd..3a934a035 100644 --- a/src/calendar/test/prop.legacy.js +++ b/src/calendar/test/prop.spec.ts @@ -1,6 +1,6 @@ import { Calendar } from '..'; import { mount, later } from '../../../test'; -import { minDate, maxDate, formatRange, formatDate } from './utils'; +import { minDate, maxDate } from './utils'; test('max-range prop when type is range and showConfirm is false', async () => { const wrapper = mount(Calendar, { @@ -11,19 +11,23 @@ test('max-range prop when type is range and showConfirm is false', async () => { maxRange: 3, poppable: false, showConfirm: false, + lazyRender: false, }, }); await later(); const days = wrapper.findAll('.van-calendar__day'); - days.at(12).trigger('click'); - days.at(18).trigger('click'); + days[12].trigger('click'); + days[18].trigger('click'); - expect(formatRange(wrapper.emitted('select')[0][0])).toEqual('2010/1/13-'); - expect(formatRange(wrapper.emitted('select')[1][0])).toEqual( - '2010/1/13-2010/1/19' - ); + expect(wrapper.emitted<[Date]>('select')![0][0]).toEqual([ + new Date(2010, 0, 13), + ]); + expect(wrapper.emitted<[Date]>('select')![1][0]).toEqual([ + new Date(2010, 0, 13), + new Date(2010, 0, 19), + ]); expect(wrapper.emitted('confirm')).toBeFalsy(); }); @@ -35,19 +39,23 @@ test('max-range prop when type is range and showConfirm is true', async () => { maxDate, maxRange: 3, poppable: false, + lazyRender: false, }, }); await later(); const days = wrapper.findAll('.van-calendar__day'); - days.at(12).trigger('click'); - days.at(18).trigger('click'); + days[12].trigger('click'); + days[18].trigger('click'); - expect(formatRange(wrapper.emitted('select')[0][0])).toEqual('2010/1/13-'); - expect(formatRange(wrapper.emitted('select')[1][0])).toEqual( - '2010/1/13-2010/1/15' - ); + expect(wrapper.emitted<[Date]>('select')![0][0]).toEqual([ + new Date(2010, 0, 13), + ]); + expect(wrapper.emitted<[Date]>('select')![1][0]).toEqual([ + new Date(2010, 0, 13), + new Date(2010, 0, 15), + ]); expect(wrapper.emitted('confirm')).toBeFalsy(); }); @@ -60,86 +68,87 @@ test('max-range prop when type is multiple', async () => { maxRange: 2, poppable: false, showConfirm: false, + lazyRender: false, }, }); await later(); const days = wrapper.findAll('.van-calendar__day'); - days.at(13).trigger('click'); - days.at(14).trigger('click'); + days[13].trigger('click'); + days[14].trigger('click'); + days[15].trigger('click'); - expect(wrapper.emitted('select').length).toEqual(1); + expect(wrapper.emitted<[Date]>('select')![0][0]).toHaveLength(2); }); -test('show-title prop', () => { +test('show-title prop', async () => { const wrapper = mount(Calendar, { props: { - value: true, + show: true, }, }); - expect(wrapper.contains('.van-calendar__header-title')).toBeTruthy(); - wrapper.setProps({ showTitle: false }); - expect(wrapper.contains('.van-calendar__header-title')).toBeFalsy(); + expect(wrapper.find('.van-calendar__header-title').exists()).toBeTruthy(); + await wrapper.setProps({ showTitle: false }); + expect(wrapper.find('.van-calendar__header-title').exists()).toBeFalsy(); }); -test('show-subtitle prop', () => { +test('show-subtitle prop', async () => { const wrapper = mount(Calendar, { props: { - value: true, + show: true, }, }); - expect(wrapper.contains('.van-calendar__header-subtitle')).toBeTruthy(); - wrapper.setProps({ showSubtitle: false }); - expect(wrapper.contains('.van-calendar__header-subtitle')).toBeFalsy(); + expect(wrapper.find('.van-calendar__header-subtitle').exists()).toBeTruthy(); + await wrapper.setProps({ showSubtitle: false }); + expect(wrapper.find('.van-calendar__header-subtitle').exists()).toBeFalsy(); }); -test('hide close icon when there is no title', () => { +test('hide close icon when there is no title', async () => { const wrapper = mount(Calendar, { props: { - value: true, + show: true, }, }); - expect(wrapper.contains('.van-popup__close-icon')).toBeTruthy(); + expect(wrapper.find('.van-popup__close-icon').exists()).toBeTruthy(); - wrapper.setProps({ + await wrapper.setProps({ showTitle: false, showSubtitle: false, }); - expect(wrapper.contains('.van-popup__close-icon')).toBeFalsy(); + expect(wrapper.find('.van-popup__close-icon').exists()).toBeFalsy(); }); test('allow-same-day prop', async () => { - const select = jest.fn(); + const onSelect = jest.fn(); const wrapper = mount(Calendar, { props: { type: 'range', minDate, maxDate, poppable: false, - }, - listeners: { - select, + lazyRender: false, + onSelect, }, }); await later(); const days = wrapper.findAll('.van-calendar__day'); - days.at(9).trigger('click'); - days.at(9).trigger('click'); + days[9].trigger('click'); + days[9].trigger('click'); - expect(select).toHaveBeenLastCalledWith([minDate, null]); + expect(onSelect).toHaveBeenLastCalledWith([minDate]); - wrapper.setProps({ + await wrapper.setProps({ allowSameDay: true, }); - days.at(9).trigger('click'); - expect(select).toHaveBeenLastCalledWith([minDate, minDate]); + days[9].trigger('click'); + expect(onSelect).toHaveBeenLastCalledWith([minDate, minDate]); }); test('min-date after current time', () => { @@ -148,11 +157,14 @@ test('min-date after current time', () => { poppable: false, minDate: new Date(2200, 0, 1), maxDate: new Date(2200, 0, 2), + lazyRender: false, }, }); wrapper.find('.van-calendar__confirm').trigger('click'); - expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('2200/1/1'); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual( + new Date(2200, 0, 1) + ); }); test('min-date before current time', () => { @@ -161,11 +173,14 @@ test('min-date before current time', () => { poppable: false, minDate: new Date(1800, 0, 1), maxDate: new Date(1800, 0, 2), + lazyRender: false, }, }); wrapper.find('.van-calendar__confirm').trigger('click'); - expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('1800/1/2'); + expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual( + new Date(1800, 0, 2) + ); }); test('lazy-render prop', () => { @@ -184,10 +199,10 @@ test('lazy-render prop', () => { test('month-show event', async () => { const wrapper = mount(Calendar, { props: { - value: true, + show: true, }, }); - await later(); + await later(100); expect(wrapper.emitted('month-show')).toBeTruthy(); }); @@ -200,12 +215,13 @@ test('first day of week', async () => { minDate: new Date(2020, 7, 1), maxDate: new Date(2020, 7, 30), firstDayOfWeek: 2, + lazyRender: false, }, }); await later(); - expect(wrapper.find('.van-calendar__weekdays').text()[0]).toEqual('二'); + expect(wrapper.findAll('.van-calendar__weekday')[0].text()).toEqual('Tue'); const day = wrapper.find( '.van-calendar__month:first-of-type .van-calendar__day' @@ -222,16 +238,17 @@ test('readonly prop', async () => { maxDate, readonly: true, poppable: false, + lazyRender: false, }, }); await later(); const days = wrapper.findAll('.van-calendar__day'); - days.at(13).trigger('click'); + days[13].trigger('click'); expect(wrapper.emitted('select')).toBeFalsy(); - wrapper.setProps({ readonly: false }); - days.at(13).trigger('click'); + await wrapper.setProps({ readonly: false }); + days[13].trigger('click'); expect(wrapper.emitted('select')).toBeTruthy(); }); diff --git a/src/calendar/test/utils.js b/src/calendar/test/utils.js deleted file mode 100644 index 2034d3af9..000000000 --- a/src/calendar/test/utils.js +++ /dev/null @@ -1,19 +0,0 @@ -export const now = new Date(); -export const minDate = new Date(2010, 0, 10); -export const maxDate = new Date(2010, 0, 20); - -export function formatDate(date) { - if (date) { - return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; - } - - return ''; -} - -export function formatRange([start, end]) { - return `${formatDate(start)}-${formatDate(end)}`; -} - -export function formatMultiple(dates) { - return dates.map(formatDate).join(','); -} diff --git a/src/calendar/test/utils.ts b/src/calendar/test/utils.ts new file mode 100644 index 000000000..2a703b870 --- /dev/null +++ b/src/calendar/test/utils.ts @@ -0,0 +1,3 @@ +export const now = new Date(new Date().setHours(0, 0, 0, 0)); +export const minDate = new Date(2010, 0, 10); +export const maxDate = new Date(2010, 0, 20);