From 8c671fee9411f7f61fa7505dff33267240a4caed Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Sat, 9 Jun 2018 13:14:14 +0800 Subject: [PATCH] test: add date-picker --- .../date-picker/__tests__/DatePicker.test.js | 191 +++++ .../date-picker/__tests__/MonthPicker.test.js | 8 + .../date-picker/__tests__/RangePicker.test.js | 327 ++++++++ .../date-picker/__tests__/WeekPicker.test.js | 21 + .../__snapshots__/DatePicker.test.js.snap | 6 + .../__snapshots__/RangePicker.test.js.snap | 722 ++++++++++++++++++ .../__snapshots__/WeekPicker.test.js.snap | 6 + .../__snapshots__/other.test.js.snap | 272 +++++++ .../date-picker/__tests__/other.test.js | 41 + .../date-picker/__tests__/showTime.test.js | 156 ++++ components/date-picker/__tests__/utils.js | 32 + .../__tests__/Table.rowSelection.test.js | 2 +- 12 files changed, 1783 insertions(+), 1 deletion(-) create mode 100644 components/date-picker/__tests__/DatePicker.test.js create mode 100644 components/date-picker/__tests__/MonthPicker.test.js create mode 100644 components/date-picker/__tests__/RangePicker.test.js create mode 100644 components/date-picker/__tests__/WeekPicker.test.js create mode 100644 components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap create mode 100644 components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap create mode 100644 components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap create mode 100644 components/date-picker/__tests__/__snapshots__/other.test.js.snap create mode 100644 components/date-picker/__tests__/other.test.js create mode 100644 components/date-picker/__tests__/showTime.test.js create mode 100644 components/date-picker/__tests__/utils.js diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js new file mode 100644 index 000000000..c0ef7f6f7 --- /dev/null +++ b/components/date-picker/__tests__/DatePicker.test.js @@ -0,0 +1,191 @@ +import { mount } from '@vue/test-utils' +import { asyncExpect } from '@/tests/utils' +import moment from 'moment' +import MockDate from 'mockdate' +import DatePicker from '..' +import { + selectDateFromBody, + openPanel, + clearInput, + nextYear, + nextMonth, + hasSelected, + $$, +} from './utils' +import focusTest from '../../../tests/shared/focusTest' + +describe('DatePicker', () => { + focusTest(DatePicker) + + beforeEach(() => { + document.body.outerHTML = '' + MockDate.set(moment('2016-11-22')) + }) + + afterEach(() => { + MockDate.reset() + }) + + it('prop locale should works', async () => { + const locale = { + lang: { + placeholder: 'Избери дата', + rangePlaceholder: [ + 'Начална дата', + 'Крайна дата', + ], + today: 'Днес', + now: 'Сега', + backToToday: 'Към днес', + ok: 'Добре', + clear: 'Изчистване', + month: 'Месец', + year: 'Година', + timeSelect: 'Избор на час', + dateSelect: 'Избор на дата', + monthSelect: 'Избор на месец', + yearSelect: 'Избор на година', + decadeSelect: 'Десетилетие', + previousMonth: 'Предишен месец (PageUp)', + nextMonth: 'Следващ месец (PageDown)', + previousYear: 'Последна година (Control + left)', + nextYear: 'Следваща година (Control + right)', + previousDecade: 'Предишно десетилетие', + nextDecade: 'Следващо десетилетие', + previousCentury: 'Последен век', + nextCentury: 'Следващ век', + yearFormat: 'YYYY', + dateFormat: 'D M YYYY', + dayFormat: 'D', + dateTimeFormat: 'D M YYYY HH:mm:ss', + monthBeforeYear: true, + }, + timePickerLocale: { + placeholder: 'Избор на час', + }, + } + const birthday = moment('2000-01-01', 'YYYY-MM-DD') + const wrapper = mount({ + render () { + return + }, + }) + await asyncExpect(() => { + expect(wrapper.html()).toMatchSnapshot() + }) + }) + + // Fix https://github.com/ant-design/ant-design/issues/8885 + it('control value after panel closed', async () => { + const Test = { + data () { + return { + cleared: false, + value: moment(), + } + }, + methods: { + onChange (value) { + let cleared = this.cleared + + if (cleared) { + value = moment(moment(value).format('YYYY-MM-DD 12:12:12')) + cleared = false + } + + if (!value) { + cleared = true + } + this.value = value + this.cleared = cleared + }, + }, + render () { + return ( + + ) + }, + } + + const wrapper = mount(Test, { sync: false, attachToDocument: true }) + await asyncExpect(() => { + // clear input + clearInput(wrapper) + }) + await asyncExpect(() => { + openPanel(wrapper) + }) + await asyncExpect(() => { + selectDateFromBody(moment('2016-11-13')) + }, 0) + await asyncExpect(() => { + expect($$('.ant-calendar-input')[0].value).toBe('2016-11-13 12:12:12') + }) + await asyncExpect(() => { + selectDateFromBody(moment('2016-11-14')) + }) + await asyncExpect(() => { + expect($$('.ant-calendar-input')[0].value).toBe('2016-11-14 12:12:12') + }) + await asyncExpect(() => { + + }) + }) + + it('triggers onChange only when date was selected', async () => { + const handleChange = jest.fn() + const wrapper = mount({ + render () { + return + }, + }, { sync: false, attachToDocument: true }) + await asyncExpect(() => { + openPanel(wrapper) + }) + await asyncExpect(() => { + nextYear() + }, 0) + await asyncExpect(() => { + expect(handleChange).not.toBeCalled() + }) + await asyncExpect(() => { + nextMonth() + }) + await asyncExpect(() => { + expect(handleChange).not.toBeCalled() + }) + await asyncExpect(() => { + selectDateFromBody(moment('2017-12-22')) + }) + await asyncExpect(() => { + expect(handleChange).toBeCalled() + }) + await asyncExpect(() => { + + }) + }) + + it('clear input', async () => { + const wrapper = mount(DatePicker, { sync: false, attachToDocument: true }) + await asyncExpect(() => { + openPanel(wrapper) + }) + await asyncExpect(() => { + selectDateFromBody(moment('2016-11-23')) + }, 0) + await asyncExpect(() => { + clearInput(wrapper) + }) + await asyncExpect(() => { + openPanel(wrapper) + }) + await asyncExpect(() => { + expect(hasSelected(wrapper, moment('2016-11-22'))).toBe(true) + }, 0) + }) +}) diff --git a/components/date-picker/__tests__/MonthPicker.test.js b/components/date-picker/__tests__/MonthPicker.test.js new file mode 100644 index 000000000..2e115e9af --- /dev/null +++ b/components/date-picker/__tests__/MonthPicker.test.js @@ -0,0 +1,8 @@ +import DatePicker from '..' +import focusTest from '../../../tests/shared/focusTest' + +const { MonthPicker } = DatePicker + +describe('MonthPicker', () => { + focusTest(MonthPicker) +}) diff --git a/components/date-picker/__tests__/RangePicker.test.js b/components/date-picker/__tests__/RangePicker.test.js new file mode 100644 index 000000000..9d3108fe0 --- /dev/null +++ b/components/date-picker/__tests__/RangePicker.test.js @@ -0,0 +1,327 @@ +import { mount } from '@vue/test-utils' +import { asyncExpect } from '@/tests/utils' +import moment from 'moment' +import DatePicker from '../' +import { setMockDate, resetMockDate } from '../../../tests/utils' +import { selectDateFromBody, $$ } from './utils' +import focusTest from '../../../tests/shared/focusTest' + +const { RangePicker } = DatePicker + +describe('RangePicker', () => { + focusTest(RangePicker) + + beforeEach(() => { + document.body.outerHTML = '' + setMockDate() + }) + + afterEach(() => { + resetMockDate() + }) + + it('show month panel according to value', async () => { + const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn') + const wrapper = mount(RangePicker, { + propsData: { + getCalendarContainer: trigger => trigger, + format: 'YYYY/MM/DD', + showTime: true, + open: true, + }, + sync: false, + }) + await asyncExpect(() => { + wrapper.setProps({ value: [birthday, birthday] }) + }) + const rangeCalendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + expect(rangeCalendarWrapper.html()).toMatchSnapshot() + }) + }) + + it('switch to corresponding month panel when click presetted ranges', async () => { + const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn') + const wrapper = mount({ + render () { + return trigger} + format='YYYY/MM/DD' + showTime + open + /> + }, + }, { sync: false }) + + const rangeCalendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + rangeCalendarWrapper.find('.ant-calendar-range-quick-selector a').trigger('click') + }) + await asyncExpect(() => { + expect(rangeCalendarWrapper.html()).toMatchSnapshot() + }) + }) + + it('highlight range when hover presetted range', async () => { + const wrapper = mount({ + render () { + return trigger} + format='YYYY/MM/DD' + open + /> + }, + }, { sync: false }) + + let rangeCalendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + rangeCalendarWrapper.find('.ant-calendar-range-quick-selector a').trigger('mouseenter') + }) + rangeCalendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + expect(rangeCalendarWrapper.findAll('.ant-calendar-selected-day').length).toBe(2) + }) + }) + + it('should trigger onCalendarChange when change value', async () => { + const onCalendarChangeFn = jest.fn() + const wrapper = mount({ + render () { + return trigger} + onCalendarChange={onCalendarChangeFn} + open + /> + }, + }, { sync: false }) + const rangeCalendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + rangeCalendarWrapper.findAll('.ant-calendar-cell').at(15).trigger('click') + }) + expect(onCalendarChangeFn).toHaveBeenCalled() + }) + + // issue: https://github.com/ant-design/ant-design/issues/5872 + it('should not throw error when value is reset to `[]`', async () => { + const birthday = moment('2000-01-01', 'YYYY-MM-DD') + const wrapper = mount(RangePicker, { propsData: { + getCalendarContainer: trigger => trigger, + value: [birthday, birthday], + open: true, + }, sync: false }) + await asyncExpect(() => { + wrapper.setProps({ value: [] }) + }) + const rangeCalendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + expect(() => { + const cell = rangeCalendarWrapper.findAll('.ant-calendar-cell').at(15) + cell.trigger('click') + cell.trigger('click') + }).not.toThrow() + }) + }) + + // issue: https://github.com/ant-design/ant-design/issues/7077 + it('should not throw error when select after clear', async () => { + const wrapper = mount(RangePicker, { propsData: { + getCalendarContainer: trigger => trigger, + open: true, + }, sync: false }) + + let rangeCalendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + const cell = rangeCalendarWrapper.findAll('.ant-calendar-cell').at(15) + cell.trigger('click') + cell.trigger('click') + }) + + wrapper.find('.ant-calendar-picker-clear').trigger('click') + wrapper.find('.ant-calendar-picker-input').trigger('click') + rangeCalendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + expect(() => { + const cell = rangeCalendarWrapper.findAll('.ant-calendar-cell').at(15) + cell.trigger('click') + cell.trigger('click') + }).not.toThrow() + }) + }) + + it('clear hover value after panel close', async () => { + const wrapper = mount({ + render () { + return
+ +
+ }, + }, { sync: false, attachToDocument: true }) + await asyncExpect(() => { + wrapper.find('.ant-calendar-picker-input').trigger('click') + }) + await asyncExpect(() => { + $$('.ant-calendar-cell')[25].click() + $$('.ant-calendar-cell')[27].dispatchEvent(new MouseEvent('mouseenter')) + document.dispatchEvent(new MouseEvent('mousedown')) + }, 500) + + wrapper.find('.ant-calendar-picker-input').trigger('click') + await asyncExpect(() => { + expect($$('.ant-calendar-cell')[23].getAttribute('class').split(' ')).toContain('ant-calendar-in-range-cell') + }) + }) + + describe('preset range', () => { + beforeEach(() => { + document.body.outerHTML = '' + }) + it('static range', async () => { + const range = [moment().subtract(2, 'd'), moment()] + const format = 'YYYY-MM-DD HH:mm:ss' + const wrapper = mount(RangePicker, { propsData: { + ranges: { 'recent two days': range }, + format, + }, sync: false, attachToDocument: true }) + await asyncExpect(() => { + wrapper.find('.ant-calendar-picker-input').trigger('click') + }) + await asyncExpect(() => { + $$('.ant-calendar-range-quick-selector a')[0].click() + }, 500) + await asyncExpect(() => { + expect( + wrapper.findAll('.ant-calendar-range-picker-input').at(0).element.value + ).toBe(range[0].format(format)) + }) + await asyncExpect(() => { + const inputs = wrapper.findAll('.ant-calendar-range-picker-input') + expect( + inputs.at(inputs.length - 1).element.value + ).toBe(range[1].format(format)) + }) + await asyncExpect(() => { + + }) + }) + + it('function range', async () => { + const range = [moment().subtract(2, 'd'), moment()] + const format = 'YYYY-MM-DD HH:mm:ss' + const wrapper = mount(RangePicker, { + propsData: { + ranges: { 'recent two days': () => range }, + format, + }, + sync: false, + attachToDocument: true, + }) + await asyncExpect(() => { + wrapper.find('.ant-calendar-picker-input').trigger('click') + }) + await asyncExpect(() => { + $$('.ant-calendar-range-quick-selector a')[0].click() + }, 500) + await asyncExpect(() => { + expect( + wrapper.findAll('.ant-calendar-range-picker-input').at(0).element.value + ).toBe(range[0].format(format)) + }) + await asyncExpect(() => { + const inputs = wrapper.findAll('.ant-calendar-range-picker-input') + expect( + inputs.at(inputs.length - 1).element.value + ).toBe(range[1].format(format)) + }) + }) + }) + + // https://github.com/ant-design/ant-design/issues/6999 + it('input date manually', async () => { + mount(RangePicker, { propsData: { open: true }, sync: false, attachToDocument: true }) + const dateString = '2008-12-31' + let input = null + await asyncExpect(() => { + input = $$('.ant-calendar-input')[0] + input.value = dateString + }) + expect($$('.ant-calendar-input')[0].value).toBe(dateString) + }) + + it('triggers onOk when click on preset range', async () => { + const handleOk = jest.fn() + const range = [moment().subtract(2, 'd'), moment()] + const wrapper = mount(RangePicker, { propsData: { + ranges: { 'recent two days': range }, + }, listeners: { ok: handleOk }, sync: false, attachToDocument: true }) + + await asyncExpect(() => { + wrapper.find('.ant-calendar-picker-input').trigger('click') + }) + await asyncExpect(() => { + $$('.ant-calendar-range-quick-selector a')[0].click() + }, 500) + await asyncExpect(() => { + expect(handleOk).toBeCalledWith(range) + }) + }) + + // https://github.com/ant-design/ant-design/issues/9267 + it('invali end date not throw error', async () => { + const wrapper = mount(RangePicker, { sync: false, attachToDocument: true }) + await asyncExpect(() => { + wrapper.find('.ant-calendar-picker-input').trigger('click') + }) + await asyncExpect(() => { + selectDateFromBody(moment('2017-09-18'), 0) + selectDateFromBody(moment('2017-10-18'), 1) + }, 500) + await asyncExpect(() => { + wrapper.find('.ant-calendar-picker-input').trigger('click') + }) + await asyncExpect(() => { + const input = $$('.ant-calendar-input')[1] + + expect(() => { + input.value = '2016-01-01' + }).not.toThrow() + }) + }) +}) diff --git a/components/date-picker/__tests__/WeekPicker.test.js b/components/date-picker/__tests__/WeekPicker.test.js new file mode 100644 index 000000000..929882e64 --- /dev/null +++ b/components/date-picker/__tests__/WeekPicker.test.js @@ -0,0 +1,21 @@ +import { mount } from '@vue/test-utils' +import { asyncExpect } from '@/tests/utils' +import DatePicker from '..' +import focusTest from '../../../tests/shared/focusTest' + +const { WeekPicker } = DatePicker + +describe('WeekPicker', async () => { + focusTest(WeekPicker) + + it('should support style prop', async () => { + const wrapper = mount({ + render () { + return + }, + }, { sync: false }) + await asyncExpect(() => { + expect(wrapper.html()).toMatchSnapshot() + }) + }) +}) diff --git a/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap new file mode 100644 index 000000000..19813d29f --- /dev/null +++ b/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -0,0 +1,6 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DatePicker prop locale should works 1`] = ` +
+ +`; diff --git a/components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap b/components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap new file mode 100644 index 000000000..0728816c1 --- /dev/null +++ b/components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap @@ -0,0 +1,722 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RangePicker show month panel according to value 1`] = ` +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
一二三四五六日
+
27
+ 		+
28
+ 		+
29
+ 		+
30
+ 		+
31
+ 		+
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
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+ 		+
5
+ 		+
6
+
+
+
+
~ +
+
+
+ +
+
+
+
+
2月2000 + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
一二三四五六日
+
31
+ 		+
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
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+ 		+
5
+
+
6
+ 		+
7
+ 		+
8
+ 		+
9
+ 		+
10
+ 		+
11
+ 		+
12
+
+
+
+
+
+
+
+ Select time + Ok +
+
+
+
+
+
+`; + +exports[`RangePicker switch to corresponding month panel when click presetted ranges 1`] = ` +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + Sep2017
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SuMoTuWeThFrSa
+
27
+ 		+
28
+ 		+
29
+ 		+
30
+ 		+
31
+ 		+
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
+
+
1
+ 		+
2
+ 		+
3
+ 		+
4
+ 		+
5
+ 		+
6
+ 		+
7
+
+
+
+
~ +
+
+
+ +
+
+
+
+
Oct2017 + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SuMoTuWeThFrSa
+
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
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+
+
5
+ 		+
6
+ 		+
7
+ 		+
8
+ 		+
9
+ 		+
10
+ 		+
11
+
+
+
+
+
+
+
+ My Birthday +
+
+ Select time + Ok +
+
+
+
+
+
+`; diff --git a/components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap b/components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap new file mode 100644 index 000000000..80f2af8a1 --- /dev/null +++ b/components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap @@ -0,0 +1,6 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`WeekPicker should support style prop 1`] = ` + + +`; diff --git a/components/date-picker/__tests__/__snapshots__/other.test.js.snap b/components/date-picker/__tests__/__snapshots__/other.test.js.snap new file mode 100644 index 000000000..470ac8ccc --- /dev/null +++ b/components/date-picker/__tests__/__snapshots__/other.test.js.snap @@ -0,0 +1,272 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MonthPicker and WeekPicker render MonthPicker 1`] = ` +
+
+
+
+
+
+
+ + 1月2000 + + +
+
+
+
+ + 2000x + +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+ 一月 + + 二月 + + 三月 +
+ 四月 + + 五月 + + 六月 +
+ 七月 + + 八月 + + 九月 +
+ 十月 + + 十一月 + + 十二月 +
+
+
+
+
+
+ +
+
+
+
+`; + +exports[`MonthPicker and WeekPicker render WeekPicker 1`] = ` +
+
+
+
+
+
+
+ + 1月2000 + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
x一二三四五六日
52 +
27
+ 		+
28
+ 		+
29
+ 		+
30
+ 		+
31
+ 		+
+
1
+
+ 		+
+
2
+
+
1 +
3
+ 		+
4
+ 		+
5
+ 		+
6
+ 		+
7
+ 		+
8
+ 		+
9
+
2 +
10
+ 		+
11
+ 		+
12
+ 		+
13
+ 		+
14
+ 		+
15
+ 		+
16
+
3 +
17
+ 		+
18
+ 		+
19
+ 		+
20
+ 		+
21
+ 		+
22
+ 		+
23
+
4 +
24
+ 		+
25
+ 		+
26
+ 		+
27
+ 		+
28
+ 		+
29
+ 		+
30
+
5 +
31
+ 		+
1
+ 		+
2
+ 		+
3
+ 		+
4
+ 		+
5
+ 		+
6
+
+
+ +
+
+
+
+
+`; diff --git a/components/date-picker/__tests__/other.test.js b/components/date-picker/__tests__/other.test.js new file mode 100644 index 000000000..9febcd7cd --- /dev/null +++ b/components/date-picker/__tests__/other.test.js @@ -0,0 +1,41 @@ +import { mount } from '@vue/test-utils' +import { asyncExpect } from '@/tests/utils' +import moment from 'moment' +import DatePicker from '../' + +const { MonthPicker, WeekPicker } = DatePicker + +describe('MonthPicker and WeekPicker', () => { + it('render MonthPicker', async () => { + const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn') + const wrapper = mount(MonthPicker, { propsData: { open: true }, sync: false }) + await asyncExpect(() => { + wrapper.setProps({ value: birthday }) + }) + + const calendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + expect(calendarWrapper.html()).toMatchSnapshot() + }) + }) + + it('render WeekPicker', async () => { + const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn') + const wrapper = mount(WeekPicker, { propsData: { open: true }, sync: false }) + await asyncExpect(() => { + wrapper.setProps({ value: birthday }) + }) + const calendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + expect(calendarWrapper.html()).toMatchSnapshot() + }) + }) +}) diff --git a/components/date-picker/__tests__/showTime.test.js b/components/date-picker/__tests__/showTime.test.js new file mode 100644 index 000000000..1c72997f6 --- /dev/null +++ b/components/date-picker/__tests__/showTime.test.js @@ -0,0 +1,156 @@ +import { mount } from '@vue/test-utils' +import { asyncExpect } from '@/tests/utils' +import DatePicker from '../' + +const { RangePicker } = DatePicker + +describe('DatePicker with showTime', () => { + it('should trigger onChange when select value', async () => { + const onChangeFn = jest.fn() + const onOpenChangeFn = jest.fn() + const wrapper = mount({ + render () { + return + }, + }, { sync: false }) + + const calendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + calendarWrapper.findAll('.ant-calendar-date').at(0).trigger('click') + }) + await asyncExpect(() => { + expect(onChangeFn).toHaveBeenCalled() + expect(onOpenChangeFn).not.toHaveBeenCalled() + }) + }) + + it('should trigger onOk when press ok button', async () => { + const onOkFn = jest.fn() + const onOpenChangeFn = jest.fn() + const onChangeFn = jest.fn() + const wrapper = mount({ + render () { + return + }, + }, { sync: false }) + + const calendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + calendarWrapper.find('.ant-calendar-ok-btn').trigger('click') + }) + await asyncExpect(() => { + expect(onOkFn).toHaveBeenCalled() + expect(onOpenChangeFn).toHaveBeenCalledWith(false) + expect(onChangeFn).not.toHaveBeenCalled() + }) + }) + + it('should trigger onChange when click Now link', async () => { + const onOpenChangeFn = jest.fn() + const onChangeFn = jest.fn() + const wrapper = mount({ + render () { + return + }, + }, { sync: false }) + + const calendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + calendarWrapper.find('.ant-calendar-today-btn').trigger('click') + }) + await asyncExpect(() => { + expect(onOpenChangeFn).toHaveBeenCalledWith(false) + expect(onChangeFn).toHaveBeenCalled() + }) + }) + + it('should have correct className when use12Hours is true', async () => { + const wrapper = mount( + { + render () { + return + }, + }, { sync: false }) + const calendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + expect(calendarWrapper.findAll('.ant-calendar-time-picker-column-4').length).toBe(0) + }) + calendarWrapper.findAll('.ant-calendar-time-picker-btn').at(0).trigger('click') + await asyncExpect(() => { + expect(calendarWrapper.findAll('.ant-calendar-time-picker-column-4').length).toBe(1) + }) + }) +}) + +describe('RangePicker with showTime', async () => { + it('should trigger onChange when select value', async () => { + const onChangeFn = jest.fn() + const onOpenChangeFn = jest.fn() + const wrapper = mount( + { + render () { + return + }, + }, { sync: false }) + + const calendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + expect(calendarWrapper.find('.ant-calendar-time-picker-btn').classes()).toContain('ant-calendar-time-picker-btn-disabled') + expect(calendarWrapper.find('.ant-calendar-ok-btn').classes()).toContain('ant-calendar-ok-btn-disabled') + }) + calendarWrapper.findAll('.ant-calendar-date').at(10).trigger('click') + calendarWrapper.findAll('.ant-calendar-date').at(11).trigger('click') + await asyncExpect(() => { + expect(calendarWrapper.find('.ant-calendar-time-picker-btn').classes()).not.toContain('ant-calendar-time-picker-btn-disabled') + expect(calendarWrapper.find('.ant-calendar-ok-btn').classes()).not.toContain('ant-calendar-ok-btn-disabled') + }) + expect(onChangeFn).toHaveBeenCalled() + expect(onOpenChangeFn).not.toHaveBeenCalled() + }) + + it('hould trigger onOk when press ok button', async () => { + const onOkFn = jest.fn() + const onChangeFn = jest.fn() + const onOpenChangeFn = jest.fn() + const wrapper = mount({ + render () { + return + }, + }, { sync: false }) + + const calendarWrapper = mount({ + render () { + return wrapper.find({ name: 'Trigger' }).vm.getComponent() + }, + }, { sync: false }) + await asyncExpect(() => { + calendarWrapper.findAll('.ant-calendar-date').at(10).trigger('click') + calendarWrapper.findAll('.ant-calendar-date').at(11).trigger('click') + }) + onChangeFn.mockClear() + calendarWrapper.find('.ant-calendar-ok-btn').trigger('click') + expect(onOkFn).toHaveBeenCalled() + expect(onOpenChangeFn).toHaveBeenCalledWith(false) + expect(onChangeFn).not.toHaveBeenCalled() + }) +}) diff --git a/components/date-picker/__tests__/utils.js b/components/date-picker/__tests__/utils.js new file mode 100644 index 000000000..ba4fc5e06 --- /dev/null +++ b/components/date-picker/__tests__/utils.js @@ -0,0 +1,32 @@ +/* eslint-disable import/prefer-default-export */ +export function $$ (className) { + return document.body.querySelectorAll(className) +} +export function hasSelected (wrapper, date) { + return document.body.querySelector(`[title="${date.format('LL')}"][role="gridcell"]`).getAttribute('class').split(' ').includes('ant-calendar-selected-day') +} + +export function openPanel (wrapper) { + wrapper.find('.ant-calendar-picker-input').trigger('click') +} + +export function clearInput (wrapper) { + wrapper.find('.ant-calendar-picker-clear').trigger('click') +} + +export function nextYear () { + $$('.ant-calendar-next-year-btn')[0].click() +} + +export function nextMonth () { + $$('.ant-calendar-next-month-btn')[0].click() +} + +export function selectDateFromBody (date, index) { + let calendar = document.body + if (index !== undefined) { + calendar = document.body.querySelectorAll('.ant-calendar-range-part')[index] + } + calendar.querySelector(`[title="${date.format('LL')}"][role="gridcell"]`).click() +} + diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js index 47c5bbbf1..2c1a4af31 100644 --- a/components/table/__tests__/Table.rowSelection.test.js +++ b/components/table/__tests__/Table.rowSelection.test.js @@ -1,4 +1,4 @@ -import Vue from 'vue' + import { mount } from '@vue/test-utils' import { asyncExpect } from '@/tests/utils' import Table from '..'