ant-design/components/date-picker/__tests__/RangePicker.test.js
Flynn 071149cfbb feature:add onCalendarChange for RangePicker (#8355)
* feature:add onCalendarChange for RangePicker

The event trigger when start time or end time is changing, which is useful for districting range user can select.

* Update index.zh-CN.md

update doc

* Update index.zh-CN.md

* Update index.zh-CN.md
2017-12-01 10:50:25 +08:00

114 lines
3.9 KiB
JavaScript

import React from 'react';
import { mount, render } from 'enzyme';
import moment from 'moment';
import { RangePicker } from '../';
import focusTest from '../../../tests/shared/focusTest';
describe('RangePicker', () => {
focusTest(RangePicker);
it('show month panel according to value', () => {
const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
const wrapper = mount(
<RangePicker
getCalendarContainer={trigger => trigger}
format="YYYY/MM/DD"
showTime
open
/>
);
wrapper.setProps({ value: [birthday, birthday] });
expect(render(wrapper.find('Trigger').instance().getComponent()))
.toMatchSnapshot();
});
it('switch to corresponding month panel when click presetted ranges', () => {
const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
const wrapper = mount(
<RangePicker
ranges={{
'My Birthday': [birthday, birthday],
}}
getCalendarContainer={trigger => trigger}
format="YYYY/MM/DD"
showTime
open
/>
);
const rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
rangeCalendarWrapper.find('.ant-calendar-range-quick-selector a')
.simulate('click');
expect(render(wrapper.find('Trigger').instance().getComponent()))
.toMatchSnapshot();
});
it('highlight range when hover presetted range', () => {
const wrapper = mount(
<RangePicker
ranges={{
'This Month': [moment().startOf('month'), moment().endOf('month')],
}}
getCalendarContainer={trigger => trigger}
format="YYYY/MM/DD"
open
/>
);
let rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
rangeCalendarWrapper.find('.ant-calendar-range-quick-selector a')
.simulate('mouseEnter');
rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(rangeCalendarWrapper.find('.ant-calendar-selected-day').length).toBe(2);
});
it('should trigger onCalendarChange when change value', () => {
const onCalendarChangeFn = jest.fn();
const wrapper = mount(
<RangePicker
getCalendarContainer={trigger => trigger}
onCalendarChange={onCalendarChangeFn}
open
/>
);
const rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
rangeCalendarWrapper.find('.ant-calendar-cell').at(15).simulate('click');
expect(onCalendarChangeFn).toHaveBeenCalled();
});
// issue: https://github.com/ant-design/ant-design/issues/5872
it('should not throw error when value is reset to `[]`', () => {
const birthday = moment('2000-01-01', 'YYYY-MM-DD');
const wrapper = mount(
<RangePicker
getCalendarContainer={trigger => trigger}
value={[birthday, birthday]}
open
/>
);
wrapper.setProps({ value: [] });
const rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(() => rangeCalendarWrapper.find('.ant-calendar-cell').at(15).simulate('click').simulate('click'))
.not.toThrow();
});
// issue: https://github.com/ant-design/ant-design/issues/7077
it('should not throw error when select after clear', () => {
const wrapper = mount(
<RangePicker
getCalendarContainer={trigger => trigger}
open
/>
);
let rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
rangeCalendarWrapper.find('.ant-calendar-cell').at(15).simulate('click').simulate('click');
wrapper.update();
wrapper.find('.ant-calendar-picker-clear').hostNodes().simulate('click');
wrapper.find('.ant-calendar-picker-input').simulate('click');
rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(() => rangeCalendarWrapper.find('.ant-calendar-cell').at(15).simulate('click').simulate('click'))
.not.toThrow();
});
});