From 5757be515072a24e19fc262810b2196c116ac762 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Thu, 26 Aug 2021 17:03:24 +0800 Subject: [PATCH] test: update calendar test --- components/calendar/Header.tsx | 15 +- .../__snapshots__/index.test.js.snap | 668 +++++++++--------- components/calendar/__tests__/index.test.js | 179 ++--- .../generatePicker/generateSinglePicker.tsx | 10 +- 4 files changed, 448 insertions(+), 424 deletions(-) diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index 374e186d9..4140751bf 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -156,12 +156,23 @@ export interface CalendarHeaderProps { export default defineComponent>({ name: 'CalendarHeader', inheritAttrs: false, + props: [ + 'mode', + 'prefixCls', + 'value', + 'validRange', + 'generateConfig', + 'locale', + 'mode', + 'fullscreen', + ] as any, setup(_props, { attrs }) { const divRef = ref(null); return () => { - const { prefixCls, fullscreen, mode, onChange, onModeChange } = attrs; + const props = { ..._props, ...attrs }; + const { prefixCls, fullscreen, mode, onChange, onModeChange } = props; const sharedProps = { - ...attrs, + ...props, onChange, fullscreen, divRef, diff --git a/components/calendar/__tests__/__snapshots__/index.test.js.snap b/components/calendar/__tests__/__snapshots__/index.test.js.snap index 25f7282a1..079e0a9c6 100644 --- a/components/calendar/__tests__/__snapshots__/index.test.js.snap +++ b/components/calendar/__tests__/__snapshots__/index.test.js.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Calendar Calendar should support locale 1`] = ` -
-
-
+
+
+
2018年 @@ -11,7 +11,7 @@ exports[`Calendar Calendar should support locale 1`] = `
-
+
Oct @@ -19,382 +19,378 @@ exports[`Calendar Calendar should support locale 1`] = `
-
+
-
- -
- - - - - - - - - - - - - - - - - + + +
SuMoTuWeThFrSa
-
-
30
-
- +
+
+ +
+ + + + + + + + + + + + + + + - + - + - + - + - + - + - - - - + + + - + - + - + - + - + - + - - - - + + + - + - + - + - + - + - + - - - - + + + - + - + - + - + - + - + - - - - + + + - + - + - + - + - + - + - - - - + + + - + - + - + - + - + - + - - -
SuMoTuWeThFrSa
+
+
30
+
+ +
- - 		-
-
01
-
- +
+
+
01
+
+ +
- - 		-
-
02
-
- +
+
+
02
+
+ +
- - 		-
-
03
-
- +
+
+
03
+
+ +
- - 		-
-
04
-
- +
+
+
04
+
+ +
- - 		-
-
05
-
- +
+
+
05
+
+ +
- - 		-
-
06
-
- +
+
+
06
+
+ +
- -
-
-
07
-
- +
+
+
07
+
+ +
- - 		-
-
08
-
- +
+
+
08
+
+ +
- - 		-
-
09
-
- +
+
+
09
+
+ +
- - 		-
-
10
-
- +
+
+
10
+
+ +
- - 		-
-
11
-
- +
+
+
11
+
+ +
- - 		-
-
12
-
- +
+
+
12
+
+ +
- - 		-
-
13
-
- +
+
+
13
+
+ +
- -
-
-
14
-
- +
+
+
14
+
+ +
- - 		-
-
15
-
- +
+
+
15
+
+ +
- - 		-
-
16
-
- +
+
+
16
+
+ +
- - 		-
-
17
-
- +
+
+
17
+
+ +
- - 		-
-
18
-
- +
+
+
18
+
+ +
- - 		-
-
19
-
- +
+
+
19
+
+ +
- - 		-
-
20
-
- +
+
+
20
+
+ +
- -
-
-
21
-
- +
+
+
21
+
+ +
- - 		-
-
22
-
- +
+
+
22
+
+ +
- - 		-
-
23
-
- +
+
+
23
+
+ +
- - 		-
-
24
-
- +
+
+
24
+
+ +
- - 		-
-
25
-
- +
+
+
25
+
+ +
- - 		-
-
26
-
- +
+
+
26
+
+ +
- - 		-
-
27
-
- +
+
+
27
+
+ +
- -
-
-
28
-
- +
+
+
28
+
+ +
- - 		-
-
29
-
- +
+
+
29
+
+ +
- - 		-
-
30
-
- +
+
+
30
+
+ +
- - 		-
-
31
-
- +
+
+
31
+
+ +
- - 		-
-
01
-
- +
+
+
01
+
+ +
- - 		-
-
02
-
- +
+
+
02
+
+ +
- - 		-
-
03
-
- +
+
+
03
+
+ +
- -
-
-
04
-
- +
+
+
04
+
+ +
- - 		-
-
05
-
- +
+
+
05
+
+ +
- - 		-
-
06
-
- +
+
+
06
+
+ +
- - 		-
-
07
-
- +
+
+
07
+
+ +
- - 		-
-
08
-
- +
+
+
08
+
+ +
- - 		-
-
09
-
- +
+
+
09
+
+ +
- - 		-
-
10
-
- +
+
+
10
+
+ +
- -
+
+
+
`; diff --git a/components/calendar/__tests__/index.test.js b/components/calendar/__tests__/index.test.js index 8f6ebdee8..e547a3062 100644 --- a/components/calendar/__tests__/index.test.js +++ b/components/calendar/__tests__/index.test.js @@ -1,4 +1,4 @@ -import Moment from 'moment'; +import dayjs from 'dayjs'; import { mount } from '@vue/test-utils'; import { asyncExpect } from '@/tests/utils'; import MockDate from 'mockdate'; @@ -6,15 +6,26 @@ import Calendar from '..'; import Header from '../Header'; import mountTest from '../../../tests/shared/mountTest'; import { sleep } from '../../../tests/utils'; +import generateConfig from '../../vc-picker/generate/dayjs'; -function $$(className) { - return document.body.querySelectorAll(className); -} describe('Calendar', () => { mountTest(Calendar); beforeEach(() => { document.body.innerHTML = ''; }); + + function openSelect(wrapper, className) { + wrapper.find(className).find('.ant-select-selector').trigger('mousedown'); + } + + function findSelectItem(wrapper) { + return wrapper.findAll('.ant-select-item-option'); + } + + function clickSelectItem(wrapper, index = 0) { + findSelectItem(wrapper)[index].trigger('click'); + } + it('Calendar should be selectable', async () => { const onSelect = jest.fn(); const wrapper = mount( @@ -26,18 +37,18 @@ describe('Calendar', () => { { sync: false }, ); await asyncExpect(() => { - wrapper.findAll('.ant-fullcalendar-cell')[0].trigger('click'); + wrapper.findAll('.ant-picker-cell')[0].trigger('click'); }); await asyncExpect(() => { expect(onSelect).toHaveBeenCalledWith(expect.anything()); const value = onSelect.mock.calls[0][0]; - expect(Moment.isMoment(value)).toBe(true); + expect(dayjs.isDayjs(value)).toBe(true); }); }); it('only Valid range should be selectable', async () => { const onSelect = jest.fn(); - const validRange = [Moment('2018-02-02'), Moment('2018-02-18')]; + const validRange = [dayjs('2018-02-02'), dayjs('2018-02-18')]; const wrapper = mount( { render() { @@ -45,7 +56,7 @@ describe('Calendar', () => { ); }, @@ -53,15 +64,15 @@ describe('Calendar', () => { { sync: false }, ); await asyncExpect(() => { - wrapper.findAll('[title="February 1, 2018"]')[0].trigger('click'); - wrapper.findAll('[title="February 2, 2018"]')[0].trigger('click'); + wrapper.findAll('[title="2018-02-01"]')[0].trigger('click'); + wrapper.findAll('[title="2018-02-02"]')[0].trigger('click'); expect(onSelect.mock.calls.length).toBe(1); }); }); it('dates other than in valid range should be disabled', async () => { const onSelect = jest.fn(); - const validRange = [Moment('2018-02-02'), Moment('2018-02-18')]; + const validRange = [dayjs('2018-02-02'), dayjs('2018-02-18')]; const wrapper = mount( { render() { @@ -69,7 +80,7 @@ describe('Calendar', () => { ); }, @@ -77,17 +88,15 @@ describe('Calendar', () => { { sync: false }, ); await asyncExpect(() => { - wrapper.findAll('[title="February 20, 2018"]')[0].trigger('click'); - expect(wrapper.find('[title="February 20, 2018"]').classes()).toContain( - 'ant-fullcalendar-disabled-cell', - ); + wrapper.findAll('[title="2018-02-20"]')[0].trigger('click'); + expect(wrapper.find('[title="2018-02-20"]').classes()).toContain('ant-picker-cell-disabled'); expect(onSelect.mock.calls.length).toBe(0); }); }); it('months other than in valid range should be disabled', async () => { const onSelect = jest.fn(); - const validRange = [Moment('2018-02-02'), Moment('2018-05-18')]; + const validRange = [dayjs('2018-02-02'), dayjs('2018-05-18')]; const wrapper = mount( { render() { @@ -95,7 +104,7 @@ describe('Calendar', () => { ); @@ -104,24 +113,24 @@ describe('Calendar', () => { { sync: false }, ); await asyncExpect(() => { - expect(wrapper.findAll('[title="Jan"]')[0].classes()).toContain( - 'ant-fullcalendar-month-panel-cell-disabled', + expect(wrapper.findAll('[title="2018-01"]')[0].classes()).toContain( + 'ant-picker-cell-disabled', ); - expect(wrapper.findAll('[title="Feb"]')[0].classes()).not.toContain( - 'ant-fullcalendar-month-panel-cell-disabled', + expect(wrapper.findAll('[title="2018-02"]')[0].classes()).not.toContain( + 'ant-picker-cell-disabled', ); - expect(wrapper.findAll('[title="Jun"]')[0].classes()).toContain( - 'ant-fullcalendar-month-panel-cell-disabled', + expect(wrapper.findAll('[title="2018-06"]')[0].classes()).toContain( + 'ant-picker-cell-disabled', ); - wrapper.findAll('[title="Jan"]')[0].trigger('click'); - wrapper.findAll('[title="Mar"]')[0].trigger('click'); + wrapper.findAll('[title="2018-01"]')[0].trigger('click'); + wrapper.findAll('[title="2018-03"]')[0].trigger('click'); expect(onSelect.mock.calls.length).toBe(1); }); }); it('months other than in valid range should not be shown in header', async () => { document.body.innerHTML = ''; - const validRange = [Moment('2017-02-02'), Moment('2018-05-18')]; + const validRange = [dayjs('2017-02-02'), dayjs('2018-05-18')]; // eslint-disable-next-line no-unused-vars const wrapper = mount( { @@ -131,30 +140,30 @@ describe('Calendar', () => { }, { sync: false, attachTo: 'body' }, ); - await asyncExpect(() => { - wrapper - .findAll('.ant-fullcalendar-year-select .ant-select-selector')[0] - .element.dispatchEvent(new MouseEvent('mousedown')); - }); - await asyncExpect(() => { - expect($$('.ant-select-item-option').length).toBe(2); - }, 100); + await sleep(); + openSelect(wrapper, '.ant-picker-calendar-year-select'); + await sleep(); + clickSelectItem(wrapper); + await sleep(); + openSelect(wrapper, '.ant-picker-calendar-month-select'); + await sleep(); + // 2 years and 11 months + expect(wrapper.findAll('.ant-select-item-option').length).toBe(13); }); it('getDateRange should returns a disabledDate function', async () => { - const validRange = [Moment('2018-02-02'), Moment('2018-05-18')]; + const validRange = [dayjs('2018-02-02'), dayjs('2018-05-18')]; const wrapper = mount(Calendar, { props: { validRange, - defaultValue: Moment('2018-02-02'), + defaultValue: dayjs('2018-02-02'), }, sync: false, }); await asyncExpect(() => { - const instance = wrapper.vm; - const disabledDate = instance.getDateRange(validRange); - expect(disabledDate(Moment('2018-06-02'))).toBe(true); - expect(disabledDate(Moment('2018-04-02'))).toBe(false); + const { disabledDate } = wrapper.getComponent({ name: 'PickerPanel' }).props(); + expect(disabledDate(dayjs('2018-06-02'))).toBe(true); + expect(disabledDate(dayjs('2018-04-02'))).toBe(false); }); }); @@ -163,10 +172,10 @@ describe('Calendar', () => { const yearMode = 'year'; const wrapper = mount(Calendar, { sync: false }); await sleep(50); - expect(wrapper.vm.sMode).toEqual(monthMode); + expect(wrapper.getComponent({ name: 'CalendarHeader' }).props().mode).toEqual(monthMode); wrapper.setProps({ mode: 'year' }); await sleep(50); - expect(wrapper.vm.sMode).toEqual(yearMode); + expect(wrapper.getComponent({ name: 'CalendarHeader' }).props().mode).toEqual(yearMode); }); it('Calendar should switch mode', async () => { @@ -181,17 +190,17 @@ describe('Calendar', () => { sync: false, }); await asyncExpect(() => { - expect(wrapper.vm.sMode).toEqual(yearMode); + expect(wrapper.getComponent({ name: 'CalendarHeader' }).props().mode).toEqual(yearMode); wrapper.setProps({ mode: monthMode }); }); await asyncExpect(() => { - expect(wrapper.vm.sMode).toEqual(monthMode); + expect(wrapper.getComponent({ name: 'CalendarHeader' }).props().mode).toEqual(monthMode); expect(onPanelChangeStub).toHaveBeenCalledTimes(0); }); }); it('Calendar should support locale', async () => { - MockDate.set(Moment('2018-10-19')); + MockDate.set(dayjs('2018-10-19')); // eslint-disable-next-line const zhCN = require('../locale/zh_CN').default; const wrapper = mount(Calendar, { @@ -208,7 +217,7 @@ describe('Calendar', () => { it('should trigger onPanelChange when click last month of date', () => { const onPanelChange = jest.fn(); - const date = new Moment('1990-09-03'); + const date = new dayjs('1990-09-03'); const wrapper = mount(Calendar, { props: { value: date, @@ -216,7 +225,7 @@ describe('Calendar', () => { }, sync: false, }); - wrapper.findAll('.ant-fullcalendar-cell')[0].trigger('click'); + wrapper.findAll('.ant-picker-cell')[0].trigger('click'); expect(onPanelChange).toHaveBeenCalled(); expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1); @@ -224,7 +233,7 @@ describe('Calendar', () => { it('switch should work correctly without prop mode', async () => { const onPanelChange = jest.fn(); - const date = new Moment(new Date(Date.UTC(2017, 7, 9, 8))); + const date = new dayjs(new Date(Date.UTC(2017, 7, 9, 8))); const wrapper = mount(Calendar, { props: { value: date, @@ -234,13 +243,13 @@ describe('Calendar', () => { attachTo: 'body', }); await sleep(300); - expect(wrapper.vm.sMode).toBe('month'); - expect(wrapper.findAll('.ant-fullcalendar-table').length).toBe(1); - expect(wrapper.findAll('.ant-fullcalendar-month-panel-table').length).toBe(0); + expect(wrapper.getComponent({ name: 'CalendarHeader' }).props().mode).toBe('month'); + expect(wrapper.findAll('.ant-picker-date-panel').length).toBe(1); + expect(wrapper.findAll('.ant-picker-month-panel').length).toBe(0); await wrapper.findAll('.ant-radio-button-input[value="year"]')[0].trigger('change'); await sleep(300); - expect(wrapper.findAll('.ant-fullcalendar-table').length).toBe(0); - expect(wrapper.findAll('.ant-fullcalendar-month-panel-table').length).toBe(1); + expect(wrapper.findAll('.ant-picker-date-panel').length).toBe(0); + expect(wrapper.findAll('.ant-picker-month-panel').length).toBe(1); expect(onPanelChange).toHaveBeenCalled(); expect(onPanelChange.mock.calls[0][1]).toEqual('year'); }); @@ -252,7 +261,9 @@ describe('Calendar', () => { render() { return (
{ }, ); await sleep(50); - wrapper.findAll('.ant-select-selector')[0].element.dispatchEvent(new MouseEvent('mousedown')); + openSelect(wrapper, '.ant-picker-calendar-year-select'); await sleep(50); - $$('.ant-select-item-option')[0].click(); + clickSelectItem(wrapper); await sleep(50); }; it('if value.month > end.month, set value.month to end.month', async () => { - const value = new Moment('1990-01-03'); - const start = new Moment('2019-04-01'); - const end = new Moment('2019-11-01'); + const value = new dayjs('1990-01-03'); + const start = new dayjs('2019-04-01'); + const end = new dayjs('2019-11-01'); const onValueChange = jest.fn(); await createWrapper(start, end, value, onValueChange); expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('3')); }); it('if value.month > end.month, set value.month to end.month1', async () => { - const value = new Moment('1990-01-03'); - const start = new Moment('2019-04-01'); - const end = new Moment('2019-11-01'); + const value = new dayjs('1990-01-03'); + const start = new dayjs('2019-04-01'); + const end = new dayjs('2019-11-01'); const onValueChange = jest.fn(); await createWrapper(start, end, value, onValueChange); expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('3')); }); it('if start.month > value.month, set value.month to start.month ', async () => { - const value = new Moment('1990-01-03'); - const start = new Moment('2019-11-01'); - const end = new Moment('2019-03-01'); + const value = new dayjs('1990-01-03'); + const start = new dayjs('2019-11-01'); + const end = new dayjs('2019-03-01'); const onValueChange = jest.fn(); await createWrapper(start, end, value, onValueChange); expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('10')); }); it('onMonthChange should work correctly', async () => { - const start = new Moment('2018-11-01'); - const end = new Moment('2019-03-01'); - const value = new Moment('2018-12-03'); + const start = new dayjs('2018-11-01'); + const end = new dayjs('2019-03-01'); + const value = new dayjs('2018-12-03'); const onValueChange = jest.fn(); const wrapper = mount( { render() { return (
); }, @@ -322,33 +335,31 @@ describe('Calendar', () => { attachTo: 'body', }, ); - await sleep(50); - wrapper - .findAll('.ant-fullcalendar-month-select .ant-select-selector')[0] - .element.dispatchEvent(new MouseEvent('mousedown')); - await sleep(50); - wrapper.findAll('.ant-select-item-option')[0].trigger('click'); - await sleep(50); + await sleep(); + openSelect(wrapper, '.ant-picker-calendar-month-select'); + await sleep(); + clickSelectItem(wrapper); expect(onValueChange).toHaveBeenCalledWith(value.month(10)); }); it('onTypeChange should work correctly', () => { const onTypeChange = jest.fn(); - const value = new Moment('2018-12-03'); + const value = new dayjs('2018-12-03'); const wrapper = mount({ render() { return (
); }, }); - const buttons = wrapper.findAll('.ant-radio-button-input'); - buttons[buttons.length - 1].trigger('change'); + wrapper.findAll('input[type="radio"]')[1].trigger('change'); expect(onTypeChange).toHaveBeenCalledWith('year'); }); }); diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index a8cf7baba..64b4f218a 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -86,6 +86,12 @@ export default function generateSinglePicker( emit('update:open', open); emit('openChange', open); }; + const onFocus = () => { + emit('focus'); + }; + const onBlur = () => { + emit('blur'); + }; const onPanelChange = (date: DateType, mode: PanelMode | null) => { const value = maybeToString(date); emit('panelChange', value, mode); @@ -206,8 +212,8 @@ export default function generateSinglePicker( direction={direction.value} onChange={onChange} onOpenChange={onOpenChange} - onFocus={props.onFocus} - onBlur={props.onBlur} + onFocus={onFocus} + onBlur={onBlur} onPanelChange={onPanelChange} onOk={onOk} />