ant-design-vue/components/date-picker/__tests__/RangePicker.test.js
tangjinzhou ff25efe185
update to antd3.8.3 (#159)
* refactor: align

* feat:  update align to 2.4.3

* feat: update trigger 2.5.4

* feat: update tooltip 3.7.2

* fix: align

* feat: update vc-calendar to 9.6.2

* feat: update vc-checkbox to 2.1.5

* feat: update vc-dialog to 7.1.8

* feat: update vc-from to 2.2.1

* feat: update vc-notification to 3.1.1

* test: update snapshots

* feat: update vc-tree to 1.12.6

* feat: update vc-table to 6.2.8

* feat: update vc-upload to 2.5.1

* feat: update vc-input-number to 4.0.12

* feat: update vc-tabs to 9.2.6

* refactor: vc-menu

* refactor: update vc-menu to 7.0.5

* style: remove unused

* feat: update pagination to 1.16.5

* feat: add vc-progress 2.2.5 tag

* feat: add vc-rate 2.4.0 tag

* feat: update vc-slider to 8.6.1

* fix: tooltip error

* style: delete conosle

* feat: update vc-steps to 3.1.1

* add vc-switch tag 1.6.0

* feat: update upload to 2.5.1

* fix: update vc-menu

* fix: update store

* fix: add ref dir

* fix: trigger mock shouldComponentUpdate

* fix: update vc-select

* revert: trigger lazyrenderbox

* fix: update vc-select

* fix: update vc-select

* fix: update vc-select

* fix: update vc-menu

* fix: update vc-slick ref

* update style to 3.8.2

* test: update snapshots

* update vc-select

* update util & affix

* feat: add drawer

* fix: support title add slot mode

* test: update affix test

* update alert

* update anchor

* update snapshots

* fix: doc and vc-drawer

* update select & auto-complete

* update back-top & grid

* feractor: avatar

* test: add drawer test

* update badge

* update button

* update card

* update divider

* feat: update vc-tabs to 9.3.6 and tabs

* add afterEnter callback

* update form

* fix: update drawer

* test: update snapshots

* update modal & notification

* test: update snapshots

* update message

* update locale-provider

* update dropdown

* update layout popconfirm popover

* update time-picker

* update menu

* update date-picker

* docs: update input docs

* update input

* update snapshots

* update table

* update test snapshots

* feat: update progress

* update checkbox

* feat: update spin

* update radio

* docs: slider steps timeline

* update list

* update transfer

* update collapse

* update cascader

* update upload
2018-09-05 21:28:54 +08:00

329 lines
10 KiB
JavaScript

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 <RangePicker
ranges={{
'My Birthday': [birthday, birthday],
}}
getCalendarContainer={trigger => 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 .ant-tag').trigger('click')
})
await asyncExpect(() => {
expect(rangeCalendarWrapper.html()).toMatchSnapshot()
})
})
it('highlight range when hover presetted range', async () => {
const wrapper = mount({
render () {
return <RangePicker
ranges={{
'This Month': [moment().startOf('month'), moment().endOf('month')],
}}
getCalendarContainer={trigger => 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 .ant-tag').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 <RangePicker
getCalendarContainer={trigger => 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 <div>
<RangePicker value={[moment(), moment().add(2, 'day')]} />
</div>
},
}, { 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)
await asyncExpect(() => {
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 .ant-tag')[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 .ant-tag')[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 .ant-tag')[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()
})
})
})