github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

test: add date-picker

pull/165/head
tjz 2018-06-09 13:14:14 +08:00
parent 100d606aa0
commit 8c671fee94
12 changed files with 1783 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
components/date-picker/__tests__/DatePicker.test.js Normal file
View File

@ -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 <DatePicker open locale={locale} value={birthday} />
},
})
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 (
<DatePicker
showTime
value={this.value}
format='YYYY-MM-DD HH:mm:ss'
onChange={this.onChange}
/>
)
},
}
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 <DatePicker onChange={handleChange} />
},
}, { 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)
})
})

8
components/date-picker/__tests__/MonthPicker.test.js Normal file
View File

@ -0,0 +1,8 @@
import DatePicker from '..'
import focusTest from '../../../tests/shared/focusTest'
const { MonthPicker } = DatePicker
describe('MonthPicker', () => {
focusTest(MonthPicker)
})

327
components/date-picker/__tests__/RangePicker.test.js Normal file
View File

@ -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 <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 a').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 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 <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)
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()
})
})
})

21
components/date-picker/__tests__/WeekPicker.test.js Normal file
View File

@ -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 <WeekPicker style={{ width: '400px' }} />
},
}, { sync: false })
await asyncExpect(() => {
expect(wrapper.html()).toMatchSnapshot()
})
})
})

6
components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap Normal file
View File

@ -0,0 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DatePicker prop locale should works 1`] = `
<span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Избери дата" class="ant-calendar-picker-input ant-input"><i class="anticon anticon-cross-circle ant-calendar-picker-clear"></i><span class="ant-calendar-picker-icon"></span></div>
</span>
`;

722
components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap Normal file
View File

@ -0,0 +1,722 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RangePicker show month panel according to value 1`] = `
<div>
<div class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft" style="left: -999px; top: -1002px;">
<div tabindex="0" class="ant-calendar ant-calendar-range ant-calendar-time ant-calendar-picker-container-content">
<div class="ant-calendar-panel">
<div class="ant-calendar-date-panel">
<div class="ant-calendar-range-part ant-calendar-range-left">
<div class="ant-calendar-input-wrap">
<div class="ant-calendar-date-input-wrap">
<input placeholder="Start date" class="ant-calendar-input ">
</div>
</div>
<div style="outline: none;">
<div class="ant-calendar-header">
<div style="position: relative;">
<a role="button" title="Last year (Control + left)" class="ant-calendar-prev-year-btn"></a>
<a role="button" title="Previous month (PageUp)" class="ant-calendar-prev-month-btn"></a><span class="ant-calendar-my-select"><a role="button" title="Choose a month" class="ant-calendar-month-select">1月</a><a role="button" title="Choose a year" class="ant-calendar-year-select">2000</a></span></div>
</div>
<div class="ant-calendar-body">
<table cellspacing="0" role="grid" class="ant-calendar-table">
<thead>
<tr role="row">
<th role="columnheader" title="周一" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">一</span></th>
<th role="columnheader" title="周二" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">二</span></th>
<th role="columnheader" title="周三" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">三</span></th>
<th role="columnheader" title="周四" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">四</span></th>
<th role="columnheader" title="周五" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">五</span></th>
<th role="columnheader" title="周六" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">六</span></th>
<th role="columnheader" title="周日" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">日</span></th>
</tr>
</thead>
<tbody class="ant-calendar-tbody">
<tr role="row" class="ant-calendar-active-week">
<td role="gridcell" title="1999年12月27日" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-date">27</div>
</td>
<td role="gridcell" title="1999年12月28日" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-date">28</div>
</td>
<td role="gridcell" title="1999年12月29日" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-date">29</div>
</td>
<td role="gridcell" title="1999年12月30日" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-date">30</div>
</td>
<td role="gridcell" title="1999年12月31日" class="ant-calendar-cell ant-calendar-last-month-cell ant-calendar-last-day-of-month">
<div class="ant-calendar-date">31</div>
</td>
<td role="gridcell" title="2000年1月1日" class="ant-calendar-cell ant-calendar-selected-start-date ant-calendar-selected-end-date ant-calendar-selected-day">
<div aria-selected="true" class="ant-calendar-date">1</div>
</td>
<td role="gridcell" title="2000年1月2日" class="ant-calendar-cell">
<div class="ant-calendar-date">2</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="2000年1月3日" class="ant-calendar-cell">
<div class="ant-calendar-date">3</div>
</td>
<td role="gridcell" title="2000年1月4日" class="ant-calendar-cell">
<div class="ant-calendar-date">4</div>
</td>
<td role="gridcell" title="2000年1月5日" class="ant-calendar-cell">
<div class="ant-calendar-date">5</div>
</td>
<td role="gridcell" title="2000年1月6日" class="ant-calendar-cell">
<div class="ant-calendar-date">6</div>
</td>
<td role="gridcell" title="2000年1月7日" class="ant-calendar-cell">
<div class="ant-calendar-date">7</div>
</td>
<td role="gridcell" title="2000年1月8日" class="ant-calendar-cell">
<div class="ant-calendar-date">8</div>
</td>
<td role="gridcell" title="2000年1月9日" class="ant-calendar-cell">
<div class="ant-calendar-date">9</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="2000年1月10日" class="ant-calendar-cell">
<div class="ant-calendar-date">10</div>
</td>
<td role="gridcell" title="2000年1月11日" class="ant-calendar-cell">
<div class="ant-calendar-date">11</div>
</td>
<td role="gridcell" title="2000年1月12日" class="ant-calendar-cell">
<div class="ant-calendar-date">12</div>
</td>
<td role="gridcell" title="2000年1月13日" class="ant-calendar-cell">
<div class="ant-calendar-date">13</div>
</td>
<td role="gridcell" title="2000年1月14日" class="ant-calendar-cell">
<div class="ant-calendar-date">14</div>
</td>
<td role="gridcell" title="2000年1月15日" class="ant-calendar-cell">
<div class="ant-calendar-date">15</div>
</td>
<td role="gridcell" title="2000年1月16日" class="ant-calendar-cell">
<div class="ant-calendar-date">16</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="2000年1月17日" class="ant-calendar-cell">
<div class="ant-calendar-date">17</div>
</td>
<td role="gridcell" title="2000年1月18日" class="ant-calendar-cell">
<div class="ant-calendar-date">18</div>
</td>
<td role="gridcell" title="2000年1月19日" class="ant-calendar-cell">
<div class="ant-calendar-date">19</div>
</td>
<td role="gridcell" title="2000年1月20日" class="ant-calendar-cell">
<div class="ant-calendar-date">20</div>
</td>
<td role="gridcell" title="2000年1月21日" class="ant-calendar-cell">
<div class="ant-calendar-date">21</div>
</td>
<td role="gridcell" title="2000年1月22日" class="ant-calendar-cell">
<div class="ant-calendar-date">22</div>
</td>
<td role="gridcell" title="2000年1月23日" class="ant-calendar-cell">
<div class="ant-calendar-date">23</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="2000年1月24日" class="ant-calendar-cell">
<div class="ant-calendar-date">24</div>
</td>
<td role="gridcell" title="2000年1月25日" class="ant-calendar-cell">
<div class="ant-calendar-date">25</div>
</td>
<td role="gridcell" title="2000年1月26日" class="ant-calendar-cell">
<div class="ant-calendar-date">26</div>
</td>
<td role="gridcell" title="2000年1月27日" class="ant-calendar-cell">
<div class="ant-calendar-date">27</div>
</td>
<td role="gridcell" title="2000年1月28日" class="ant-calendar-cell">
<div class="ant-calendar-date">28</div>
</td>
<td role="gridcell" title="2000年1月29日" class="ant-calendar-cell">
<div class="ant-calendar-date">29</div>
</td>
<td role="gridcell" title="2000年1月30日" class="ant-calendar-cell">
<div class="ant-calendar-date">30</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="2000年1月31日" class="ant-calendar-cell ant-calendar-last-day-of-month">
<div class="ant-calendar-date">31</div>
</td>
<td role="gridcell" title="2000年2月1日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">1</div>
</td>
<td role="gridcell" title="2000年2月2日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">2</div>
</td>
<td role="gridcell" title="2000年2月3日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">3</div>
</td>
<td role="gridcell" title="2000年2月4日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">4</div>
</td>
<td role="gridcell" title="2000年2月5日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">5</div>
</td>
<td role="gridcell" title="2000年2月6日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">6</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div><span class="ant-calendar-range-middle">~</span>
<div class="ant-calendar-range-part ant-calendar-range-right">
<div class="ant-calendar-input-wrap">
<div class="ant-calendar-date-input-wrap">
<input placeholder="End date" class="ant-calendar-input ">
</div>
</div>
<div style="outline: none;">
<div class="ant-calendar-header">
<div style="position: relative;"><span class="ant-calendar-my-select"><a role="button" title="Choose a month" class="ant-calendar-month-select">2月</a><a role="button" title="Choose a year" class="ant-calendar-year-select">2000</a></span>
<a title="Next month (PageDown)"
class="ant-calendar-next-month-btn"></a>
<a title="Next year (Control + right)" class="ant-calendar-next-year-btn"></a>
</div>
</div>
<div class="ant-calendar-body">
<table cellspacing="0" role="grid" class="ant-calendar-table">
<thead>
<tr role="row">
<th role="columnheader" title="周一" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">一</span></th>
<th role="columnheader" title="周二" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">二</span></th>
<th role="columnheader" title="周三" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">三</span></th>
<th role="columnheader" title="周四" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">四</span></th>
<th role="columnheader" title="周五" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">五</span></th>
<th role="columnheader" title="周六" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">六</span></th>
<th role="columnheader" title="周日" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">日</span></th>
</tr>
</thead>
<tbody class="ant-calendar-tbody">
<tr role="row" class="">
<td role="gridcell" title="2000年1月31日" class="ant-calendar-cell ant-calendar-last-month-cell ant-calendar-last-day-of-month">
<div class="ant-calendar-date">31</div>
</td>
<td role="gridcell" title="2000年2月1日" class="ant-calendar-cell">
<div class="ant-calendar-date">1</div>
</td>
<td role="gridcell" title="2000年2月2日" class="ant-calendar-cell">
<div class="ant-calendar-date">2</div>
</td>
<td role="gridcell" title="2000年2月3日" class="ant-calendar-cell">
<div class="ant-calendar-date">3</div>
</td>
<td role="gridcell" title="2000年2月4日" class="ant-calendar-cell">
<div class="ant-calendar-date">4</div>
</td>
<td role="gridcell" title="2000年2月5日" class="ant-calendar-cell">
<div class="ant-calendar-date">5</div>
</td>
<td role="gridcell" title="2000年2月6日" class="ant-calendar-cell">
<div class="ant-calendar-date">6</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="2000年2月7日" class="ant-calendar-cell">
<div class="ant-calendar-date">7</div>
</td>
<td role="gridcell" title="2000年2月8日" class="ant-calendar-cell">
<div class="ant-calendar-date">8</div>
</td>
<td role="gridcell" title="2000年2月9日" class="ant-calendar-cell">
<div class="ant-calendar-date">9</div>
</td>
<td role="gridcell" title="2000年2月10日" class="ant-calendar-cell">
<div class="ant-calendar-date">10</div>
</td>
<td role="gridcell" title="2000年2月11日" class="ant-calendar-cell">
<div class="ant-calendar-date">11</div>
</td>
<td role="gridcell" title="2000年2月12日" class="ant-calendar-cell">
<div class="ant-calendar-date">12</div>
</td>
<td role="gridcell" title="2000年2月13日" class="ant-calendar-cell">
<div class="ant-calendar-date">13</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="2000年2月14日" class="ant-calendar-cell">
<div class="ant-calendar-date">14</div>
</td>
<td role="gridcell" title="2000年2月15日" class="ant-calendar-cell">
<div class="ant-calendar-date">15</div>
</td>
<td role="gridcell" title="2000年2月16日" class="ant-calendar-cell">
<div class="ant-calendar-date">16</div>
</td>
<td role="gridcell" title="2000年2月17日" class="ant-calendar-cell">
<div class="ant-calendar-date">17</div>
</td>
<td role="gridcell" title="2000年2月18日" class="ant-calendar-cell">
<div class="ant-calendar-date">18</div>
</td>
<td role="gridcell" title="2000年2月19日" class="ant-calendar-cell">
<div class="ant-calendar-date">19</div>
</td>
<td role="gridcell" title="2000年2月20日" class="ant-calendar-cell">
<div class="ant-calendar-date">20</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="2000年2月21日" class="ant-calendar-cell">
<div class="ant-calendar-date">21</div>
</td>
<td role="gridcell" title="2000年2月22日" class="ant-calendar-cell">
<div class="ant-calendar-date">22</div>
</td>
<td role="gridcell" title="2000年2月23日" class="ant-calendar-cell">
<div class="ant-calendar-date">23</div>
</td>
<td role="gridcell" title="2000年2月24日" class="ant-calendar-cell">
<div class="ant-calendar-date">24</div>
</td>
<td role="gridcell" title="2000年2月25日" class="ant-calendar-cell">
<div class="ant-calendar-date">25</div>
</td>
<td role="gridcell" title="2000年2月26日" class="ant-calendar-cell">
<div class="ant-calendar-date">26</div>
</td>
<td role="gridcell" title="2000年2月27日" class="ant-calendar-cell">
<div class="ant-calendar-date">27</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="2000年2月28日" class="ant-calendar-cell">
<div class="ant-calendar-date">28</div>
</td>
<td role="gridcell" title="2000年2月29日" class="ant-calendar-cell ant-calendar-last-day-of-month">
<div class="ant-calendar-date">29</div>
</td>
<td role="gridcell" title="2000年3月1日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">1</div>
</td>
<td role="gridcell" title="2000年3月2日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">2</div>
</td>
<td role="gridcell" title="2000年3月3日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">3</div>
</td>
<td role="gridcell" title="2000年3月4日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">4</div>
</td>
<td role="gridcell" title="2000年3月5日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">5</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="2000年3月6日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">6</div>
</td>
<td role="gridcell" title="2000年3月7日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">7</div>
</td>
<td role="gridcell" title="2000年3月8日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">8</div>
</td>
<td role="gridcell" title="2000年3月9日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">9</div>
</td>
<td role="gridcell" title="2000年3月10日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">10</div>
</td>
<td role="gridcell" title="2000年3月11日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">11</div>
</td>
<td role="gridcell" title="2000年3月12日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">12</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ant-calendar-footer ant-calendar-range-bottom ant-calendar-footer-show-ok">
<div class="ant-calendar-footer-btn">
<a role="button" class="ant-calendar-time-picker-btn">Select time</a>
<a role="button" class="ant-calendar-ok-btn">Ok</a>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`RangePicker switch to corresponding month panel when click presetted ranges 1`] = `
<div>
<div class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft" style="left: -999px; top: -1002px;">
<div tabindex="0" class="ant-calendar ant-calendar-range ant-calendar-time ant-calendar-range-with-ranges ant-calendar-time ant-calendar-range-with-ranges ant-calendar-picker-container-content">
<div class="ant-calendar-panel">
<div class="ant-calendar-date-panel">
<div class="ant-calendar-range-part ant-calendar-range-left">
<div class="ant-calendar-input-wrap">
<div class="ant-calendar-date-input-wrap">
<input placeholder="Start date" class="ant-calendar-input ">
</div>
</div>
<div style="outline: none;">
<div class="ant-calendar-header">
<div style="position: relative;">
<a role="button" title="Last year (Control + left)" class="ant-calendar-prev-year-btn"></a>
<a role="button" title="Previous month (PageUp)" class="ant-calendar-prev-month-btn"></a><span class="ant-calendar-my-select"><a role="button" title="Choose a month" class="ant-calendar-month-select">Sep</a><a role="button" title="Choose a year" class="ant-calendar-year-select">2017</a></span></div>
</div>
<div class="ant-calendar-body">
<table cellspacing="0" role="grid" class="ant-calendar-table">
<thead>
<tr role="row">
<th role="columnheader" title="Sun" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Su</span></th>
<th role="columnheader" title="Mon" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Mo</span></th>
<th role="columnheader" title="Tue" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Tu</span></th>
<th role="columnheader" title="Wed" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">We</span></th>
<th role="columnheader" title="Thu" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Th</span></th>
<th role="columnheader" title="Fri" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Fr</span></th>
<th role="columnheader" title="Sat" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Sa</span></th>
</tr>
</thead>
<tbody class="ant-calendar-tbody">
<tr role="row" class="">
<td role="gridcell" title="August 27, 2017" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-date">27</div>
</td>
<td role="gridcell" title="August 28, 2017" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-date">28</div>
</td>
<td role="gridcell" title="August 29, 2017" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-date">29</div>
</td>
<td role="gridcell" title="August 30, 2017" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-date">30</div>
</td>
<td role="gridcell" title="August 31, 2017" class="ant-calendar-cell ant-calendar-last-month-cell ant-calendar-last-day-of-month">
<div class="ant-calendar-date">31</div>
</td>
<td role="gridcell" title="September 1, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">1</div>
</td>
<td role="gridcell" title="September 2, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">2</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="September 3, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">3</div>
</td>
<td role="gridcell" title="September 4, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">4</div>
</td>
<td role="gridcell" title="September 5, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">5</div>
</td>
<td role="gridcell" title="September 6, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">6</div>
</td>
<td role="gridcell" title="September 7, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">7</div>
</td>
<td role="gridcell" title="September 8, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">8</div>
</td>
<td role="gridcell" title="September 9, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">9</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="September 10, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">10</div>
</td>
<td role="gridcell" title="September 11, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">11</div>
</td>
<td role="gridcell" title="September 12, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">12</div>
</td>
<td role="gridcell" title="September 13, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">13</div>
</td>
<td role="gridcell" title="September 14, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">14</div>
</td>
<td role="gridcell" title="September 15, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">15</div>
</td>
<td role="gridcell" title="September 16, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">16</div>
</td>
</tr>
<tr role="row" class="ant-calendar-current-week">
<td role="gridcell" title="September 17, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">17</div>
</td>
<td role="gridcell" title="September 18, 2017" class="ant-calendar-cell ant-calendar-today ant-calendar-selected-date">
<div class="ant-calendar-date">18</div>
</td>
<td role="gridcell" title="September 19, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">19</div>
</td>
<td role="gridcell" title="September 20, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">20</div>
</td>
<td role="gridcell" title="September 21, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">21</div>
</td>
<td role="gridcell" title="September 22, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">22</div>
</td>
<td role="gridcell" title="September 23, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">23</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="September 24, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">24</div>
</td>
<td role="gridcell" title="September 25, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">25</div>
</td>
<td role="gridcell" title="September 26, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">26</div>
</td>
<td role="gridcell" title="September 27, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">27</div>
</td>
<td role="gridcell" title="September 28, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">28</div>
</td>
<td role="gridcell" title="September 29, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">29</div>
</td>
<td role="gridcell" title="September 30, 2017" class="ant-calendar-cell ant-calendar-last-day-of-month">
<div class="ant-calendar-date">30</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="October 1, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">1</div>
</td>
<td role="gridcell" title="October 2, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">2</div>
</td>
<td role="gridcell" title="October 3, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">3</div>
</td>
<td role="gridcell" title="October 4, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">4</div>
</td>
<td role="gridcell" title="October 5, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">5</div>
</td>
<td role="gridcell" title="October 6, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">6</div>
</td>
<td role="gridcell" title="October 7, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">7</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div><span class="ant-calendar-range-middle">~</span>
<div class="ant-calendar-range-part ant-calendar-range-right">
<div class="ant-calendar-input-wrap">
<div class="ant-calendar-date-input-wrap">
<input placeholder="End date" class="ant-calendar-input ">
</div>
</div>
<div style="outline: none;">
<div class="ant-calendar-header">
<div style="position: relative;"><span class="ant-calendar-my-select"><a role="button" title="Choose a month" class="ant-calendar-month-select">Oct</a><a role="button" title="Choose a year" class="ant-calendar-year-select">2017</a></span>
<a title="Next month (PageDown)"
class="ant-calendar-next-month-btn"></a>
<a title="Next year (Control + right)" class="ant-calendar-next-year-btn"></a>
</div>
</div>
<div class="ant-calendar-body">
<table cellspacing="0" role="grid" class="ant-calendar-table">
<thead>
<tr role="row">
<th role="columnheader" title="Sun" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Su</span></th>
<th role="columnheader" title="Mon" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Mo</span></th>
<th role="columnheader" title="Tue" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Tu</span></th>
<th role="columnheader" title="Wed" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">We</span></th>
<th role="columnheader" title="Thu" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Th</span></th>
<th role="columnheader" title="Fri" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Fr</span></th>
<th role="columnheader" title="Sat" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">Sa</span></th>
</tr>
</thead>
<tbody class="ant-calendar-tbody">
<tr role="row" class="">
<td role="gridcell" title="October 1, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">1</div>
</td>
<td role="gridcell" title="October 2, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">2</div>
</td>
<td role="gridcell" title="October 3, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">3</div>
</td>
<td role="gridcell" title="October 4, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">4</div>
</td>
<td role="gridcell" title="October 5, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">5</div>
</td>
<td role="gridcell" title="October 6, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">6</div>
</td>
<td role="gridcell" title="October 7, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">7</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="October 8, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">8</div>
</td>
<td role="gridcell" title="October 9, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">9</div>
</td>
<td role="gridcell" title="October 10, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">10</div>
</td>
<td role="gridcell" title="October 11, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">11</div>
</td>
<td role="gridcell" title="October 12, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">12</div>
</td>
<td role="gridcell" title="October 13, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">13</div>
</td>
<td role="gridcell" title="October 14, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">14</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="October 15, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">15</div>
</td>
<td role="gridcell" title="October 16, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">16</div>
</td>
<td role="gridcell" title="October 17, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">17</div>
</td>
<td role="gridcell" title="October 18, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">18</div>
</td>
<td role="gridcell" title="October 19, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">19</div>
</td>
<td role="gridcell" title="October 20, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">20</div>
</td>
<td role="gridcell" title="October 21, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">21</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="October 22, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">22</div>
</td>
<td role="gridcell" title="October 23, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">23</div>
</td>
<td role="gridcell" title="October 24, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">24</div>
</td>
<td role="gridcell" title="October 25, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">25</div>
</td>
<td role="gridcell" title="October 26, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">26</div>
</td>
<td role="gridcell" title="October 27, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">27</div>
</td>
<td role="gridcell" title="October 28, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">28</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="October 29, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">29</div>
</td>
<td role="gridcell" title="October 30, 2017" class="ant-calendar-cell">
<div class="ant-calendar-date">30</div>
</td>
<td role="gridcell" title="October 31, 2017" class="ant-calendar-cell ant-calendar-last-day-of-month">
<div class="ant-calendar-date">31</div>
</td>
<td role="gridcell" title="November 1, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">1</div>
</td>
<td role="gridcell" title="November 2, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">2</div>
</td>
<td role="gridcell" title="November 3, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">3</div>
</td>
<td role="gridcell" title="November 4, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">4</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" title="November 5, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">5</div>
</td>
<td role="gridcell" title="November 6, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">6</div>
</td>
<td role="gridcell" title="November 7, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">7</div>
</td>
<td role="gridcell" title="November 8, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">8</div>
</td>
<td role="gridcell" title="November 9, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">9</div>
</td>
<td role="gridcell" title="November 10, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">10</div>
</td>
<td role="gridcell" title="November 11, 2017" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-date">11</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="ant-calendar-footer ant-calendar-range-bottom ant-calendar-footer-show-ok">
<div class="ant-calendar-footer-extra ant-calendar-range-quick-selector">
<a>My Birthday</a>
</div>
<div class="ant-calendar-footer-btn">
<a role="button" class="ant-calendar-time-picker-btn ant-calendar-time-picker-btn-disabled">Select time</a>
<a role="button" class="ant-calendar-ok-btn ant-calendar-ok-btn-disabled">Ok</a>
</div>
</div>
</div>
</div>
</div>
</div>
`;

6
components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap Normal file
View File

@ -0,0 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`WeekPicker should support style prop 1`] = `
<span class="ant-calendar-picker" style="width: 400px;"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></span>
</span>
`;

272
components/date-picker/__tests__/__snapshots__/other.test.js.snap Normal file
View File

@ -0,0 +1,272 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
<div>
<div class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft" style="left: -999px; top: -1002px;">
<div tabindex="0" class="ant-calendar ant-calendar-month-calendar ant-calendar-month ant-calendar-picker-container-content">
<div class="ant-calendar-month-calendar-content">
<div class="ant-calendar-month-header-wrap">
<div class="ant-calendar-header">
<div style="position: relative;">
<a role="button" title="Last year (Control + left)" class="ant-calendar-prev-year-btn"></a>
<a role="button" title="Previous month (PageUp)" class="ant-calendar-prev-month-btn"></a><span class="ant-calendar-my-select"><a role="button" title="Choose a month" class="ant-calendar-month-select">1月</a><a role="button" title="Choose a year" class="ant-calendar-year-select">2000</a></span>
<a title="Next month (PageDown)"
class="ant-calendar-next-month-btn"></a>
<a title="Next year (Control + right)" class="ant-calendar-next-year-btn"></a>
</div>
<div class="ant-calendar-month-panel">
<div>
<div class="ant-calendar-month-panel-header">
<a role="button" title="Last year (Control + left)" class="ant-calendar-month-panel-prev-year-btn"></a>
<a role="button" title="Choose a year" class="ant-calendar-month-panel-year-select"><span class="ant-calendar-month-panel-year-select-content">2000</span><span class="ant-calendar-month-panel-year-select-arrow">x</span></a>
<a role="button" title="Next year (Control + right)" class="ant-calendar-month-panel-next-year-btn"></a>
</div>
<div class="ant-calendar-month-panel-body">
<table cellspacing="0" role="grid" class="ant-calendar-month-panel-table">
<tbody class="ant-calendar-month-panel-tbody">
<tr role="row">
<td role="gridcell" title="一月" class="ant-calendar-month-panel-cell ant-calendar-month-panel-selected-cell">
<a class="ant-calendar-month-panel-month">一月</a>
</td>
<td role="gridcell" title="二月" class="ant-calendar-month-panel-cell">
<a class="ant-calendar-month-panel-month">二月</a>
</td>
<td role="gridcell" title="三月" class="ant-calendar-month-panel-cell">
<a class="ant-calendar-month-panel-month">三月</a>
</td>
</tr>
<tr role="row">
<td role="gridcell" title="四月" class="ant-calendar-month-panel-cell">
<a class="ant-calendar-month-panel-month">四月</a>
</td>
<td role="gridcell" title="五月" class="ant-calendar-month-panel-cell">
<a class="ant-calendar-month-panel-month">五月</a>
</td>
<td role="gridcell" title="六月" class="ant-calendar-month-panel-cell">
<a class="ant-calendar-month-panel-month">六月</a>
</td>
</tr>
<tr role="row">
<td role="gridcell" title="七月" class="ant-calendar-month-panel-cell">
<a class="ant-calendar-month-panel-month">七月</a>
</td>
<td role="gridcell" title="八月" class="ant-calendar-month-panel-cell">
<a class="ant-calendar-month-panel-month">八月</a>
</td>
<td role="gridcell" title="九月" class="ant-calendar-month-panel-cell">
<a class="ant-calendar-month-panel-month">九月</a>
</td>
</tr>
<tr role="row">
<td role="gridcell" title="十月" class="ant-calendar-month-panel-cell">
<a class="ant-calendar-month-panel-month">十月</a>
</td>
<td role="gridcell" title="十一月" class="ant-calendar-month-panel-cell">
<a class="ant-calendar-month-panel-month">十一月</a>
</td>
<td role="gridcell" title="十二月" class="ant-calendar-month-panel-cell">
<a class="ant-calendar-month-panel-month">十二月</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!---->
</div>
</div>
</div>
</div>
`;
exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
<div>
<div class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft" style="left: -999px; top: -1002px;">
<div tabindex="0" class="ant-calendar ant-calendar-week-number ant-calendar-picker-container-content">
<div class="ant-calendar-panel">
<div class="ant-calendar-date-panel">
<div class="ant-calendar-header">
<div style="position: relative;">
<a role="button" title="Last year (Control + left)" class="ant-calendar-prev-year-btn"></a>
<a role="button" title="Previous month (PageUp)" class="ant-calendar-prev-month-btn"></a><span class="ant-calendar-my-select"><a role="button" title="Choose a month" class="ant-calendar-month-select">1月</a><a role="button" title="Choose a year" class="ant-calendar-year-select">2000</a></span>
<a title="Next month (PageDown)"
class="ant-calendar-next-month-btn"></a>
<a title="Next year (Control + right)" class="ant-calendar-next-year-btn"></a>
</div>
</div>
<div class="ant-calendar-body">
<table cellspacing="0" role="grid" class="ant-calendar-table">
<thead>
<tr role="row">
<th role="columnheader" class="ant-calendar-column-header ant-calendar-week-number-header"><span class="ant-calendar-column-header-inner">x</span></th>
<th role="columnheader" title="周一" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">一</span></th>
<th role="columnheader" title="周二" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">二</span></th>
<th role="columnheader" title="周三" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">三</span></th>
<th role="columnheader" title="周四" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">四</span></th>
<th role="columnheader" title="周五" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">五</span></th>
<th role="columnheader" title="周六" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">六</span></th>
<th role="columnheader" title="周日" class="ant-calendar-column-header"><span class="ant-calendar-column-header-inner">日</span></th>
</tr>
</thead>
<tbody class="ant-calendar-tbody">
<tr role="row" class="ant-calendar-active-week">
<td role="gridcell" class="ant-calendar-week-number-cell">52</td>
<td role="gridcell" title="1999年12月27日" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-calendar-date">27</div>
</td>
<td role="gridcell" title="1999年12月28日" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-calendar-date">28</div>
</td>
<td role="gridcell" title="1999年12月29日" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-calendar-date">29</div>
</td>
<td role="gridcell" title="1999年12月30日" class="ant-calendar-cell ant-calendar-last-month-cell">
<div class="ant-calendar-calendar-date">30</div>
</td>
<td role="gridcell" title="1999年12月31日" class="ant-calendar-cell ant-calendar-last-month-cell ant-calendar-last-day-of-month">
<div class="ant-calendar-calendar-date">31</div>
</td>
<td role="gridcell" title="2000年1月1日" class="ant-calendar-cell ant-calendar-selected-date ant-calendar-selected-day">
<div class="ant-calendar-selected-day">
<div class="ant-calendar-date">1</div>
</div>
</td>
<td role="gridcell" title="2000年1月2日" class="ant-calendar-cell">
<div class="ant-calendar-selected-day">
<div class="ant-calendar-date">2</div>
</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" class="ant-calendar-week-number-cell">1</td>
<td role="gridcell" title="2000年1月3日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">3</div>
</td>
<td role="gridcell" title="2000年1月4日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">4</div>
</td>
<td role="gridcell" title="2000年1月5日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">5</div>
</td>
<td role="gridcell" title="2000年1月6日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">6</div>
</td>
<td role="gridcell" title="2000年1月7日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">7</div>
</td>
<td role="gridcell" title="2000年1月8日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">8</div>
</td>
<td role="gridcell" title="2000年1月9日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">9</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" class="ant-calendar-week-number-cell">2</td>
<td role="gridcell" title="2000年1月10日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">10</div>
</td>
<td role="gridcell" title="2000年1月11日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">11</div>
</td>
<td role="gridcell" title="2000年1月12日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">12</div>
</td>
<td role="gridcell" title="2000年1月13日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">13</div>
</td>
<td role="gridcell" title="2000年1月14日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">14</div>
</td>
<td role="gridcell" title="2000年1月15日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">15</div>
</td>
<td role="gridcell" title="2000年1月16日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">16</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" class="ant-calendar-week-number-cell">3</td>
<td role="gridcell" title="2000年1月17日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">17</div>
</td>
<td role="gridcell" title="2000年1月18日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">18</div>
</td>
<td role="gridcell" title="2000年1月19日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">19</div>
</td>
<td role="gridcell" title="2000年1月20日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">20</div>
</td>
<td role="gridcell" title="2000年1月21日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">21</div>
</td>
<td role="gridcell" title="2000年1月22日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">22</div>
</td>
<td role="gridcell" title="2000年1月23日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">23</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" class="ant-calendar-week-number-cell">4</td>
<td role="gridcell" title="2000年1月24日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">24</div>
</td>
<td role="gridcell" title="2000年1月25日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">25</div>
</td>
<td role="gridcell" title="2000年1月26日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">26</div>
</td>
<td role="gridcell" title="2000年1月27日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">27</div>
</td>
<td role="gridcell" title="2000年1月28日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">28</div>
</td>
<td role="gridcell" title="2000年1月29日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">29</div>
</td>
<td role="gridcell" title="2000年1月30日" class="ant-calendar-cell">
<div class="ant-calendar-calendar-date">30</div>
</td>
</tr>
<tr role="row" class="">
<td role="gridcell" class="ant-calendar-week-number-cell">5</td>
<td role="gridcell" title="2000年1月31日" class="ant-calendar-cell ant-calendar-last-day-of-month">
<div class="ant-calendar-calendar-date">31</div>
</td>
<td role="gridcell" title="2000年2月1日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-calendar-date">1</div>
</td>
<td role="gridcell" title="2000年2月2日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-calendar-date">2</div>
</td>
<td role="gridcell" title="2000年2月3日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-calendar-date">3</div>
</td>
<td role="gridcell" title="2000年2月4日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-calendar-date">4</div>
</td>
<td role="gridcell" title="2000年2月5日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-calendar-date">5</div>
</td>
<td role="gridcell" title="2000年2月6日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="ant-calendar-calendar-date">6</div>
</td>
</tr>
</tbody>
</table>
</div>
<!---->
</div>
</div>
</div>
</div>
</div>
`;

41
components/date-picker/__tests__/other.test.js Normal file
View File

@ -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()
})
})
})

156
components/date-picker/__tests__/showTime.test.js Normal file
View File

@ -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 <DatePicker showTime open onChange={onChangeFn} onOpenChange={onOpenChangeFn} />
},
}, { 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 <DatePicker showTime open onChange={onChangeFn} onOk={onOkFn} onOpenChange={onOpenChangeFn} />
},
}, { 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 <DatePicker showTime open onChange={onChangeFn} onOpenChange={onOpenChangeFn} />
},
}, { 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 <DatePicker showTime={{ use12Hours: true }} open />
},
}, { 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 <RangePicker showTime open onChange={onChangeFn} onOpenChange={onOpenChangeFn} />
},
}, { 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 <RangePicker showTime open onOk={onOkFn} onChange={onChangeFn} onOpenChange={onOpenChangeFn} />
},
}, { 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()
})
})

32
components/date-picker/__tests__/utils.js Normal file
View File

@ -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()
}

2
components/table/__tests__/Table.rowSelection.test.js
View File

@ -1,4 +1,4 @@
import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Table from '..'