ant-design/components/date-picker/__tests__/RangePicker.test.js

391 lines
12 KiB
JavaScript

import React from 'react';
import { mount, render } from 'enzyme';
import moment from 'moment';
import DatePicker from '..';
import { setMockDate, resetMockDate } from '../../../tests/utils';
import { selectDate, openPanel } from './utils';
import focusTest from '../../../tests/shared/focusTest';
const { RangePicker } = DatePicker;
describe('RangePicker', () => {
focusTest(RangePicker);
beforeEach(() => {
setMockDate();
});
afterEach(() => {
resetMockDate();
});
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 Tag').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 Tag').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();
});
it('clear hover value after panel close', () => {
jest.useFakeTimers();
const wrapper = mount(
<div>
<RangePicker value={[moment(), moment().add(2, 'day')]} />
</div>,
);
wrapper.find('.ant-calendar-picker-input').simulate('click');
wrapper
.find('.ant-calendar-cell')
.at(25)
.simulate('click');
wrapper
.find('.ant-calendar-cell')
.at(27)
.simulate('mouseEnter');
document.dispatchEvent(new MouseEvent('mousedown'));
jest.runAllTimers();
wrapper.find('.ant-calendar-picker-input').simulate('click');
expect(
wrapper
.find('.ant-calendar-cell')
.at(23)
.hasClass('ant-calendar-in-range-cell'),
).toBe(true);
});
describe('preset range', () => {
it('static range', () => {
const range = [moment().subtract(2, 'd'), moment()];
const format = 'YYYY-MM-DD HH:mm:ss';
const wrapper = mount(<RangePicker ranges={{ 'recent two days': range }} format={format} />);
wrapper.find('.ant-calendar-picker-input').simulate('click');
wrapper.find('.ant-calendar-range-quick-selector Tag').simulate('click');
expect(
wrapper
.find('.ant-calendar-range-picker-input')
.first()
.getDOMNode().value,
).toBe(range[0].format(format));
expect(
wrapper
.find('.ant-calendar-range-picker-input')
.last()
.getDOMNode().value,
).toBe(range[1].format(format));
});
it('function range', () => {
const range = [moment().subtract(2, 'd'), moment()];
const format = 'YYYY-MM-DD HH:mm:ss';
const wrapper = mount(
<RangePicker ranges={{ 'recent two days': () => range }} format={format} />,
);
wrapper.find('.ant-calendar-picker-input').simulate('click');
wrapper.find('.ant-calendar-range-quick-selector Tag').simulate('click');
expect(
wrapper
.find('.ant-calendar-range-picker-input')
.first()
.getDOMNode().value,
).toBe(range[0].format(format));
expect(
wrapper
.find('.ant-calendar-range-picker-input')
.last()
.getDOMNode().value,
).toBe(range[1].format(format));
});
});
// https://github.com/ant-design/ant-design/issues/6999
it('input date manually', () => {
const wrapper = mount(<RangePicker open />);
const dateString = '2008-12-31';
const input = wrapper.find('.ant-calendar-input').first();
input.simulate('change', { target: { value: dateString } });
expect(input.getDOMNode().value).toBe(dateString);
});
it('triggers onOk when click on preset range', () => {
const handleOk = jest.fn();
const range = [moment().subtract(2, 'd'), moment()];
const wrapper = mount(<RangePicker ranges={{ 'recent two days': range }} onOk={handleOk} />);
wrapper.find('.ant-calendar-picker-input').simulate('click');
wrapper.find('.ant-calendar-range-quick-selector Tag').simulate('click');
expect(handleOk).toBeCalledWith(range);
});
// https://github.com/ant-design/ant-design/issues/9267
it('invali end date not throw error', () => {
const wrapper = mount(<RangePicker />);
wrapper.find('.ant-calendar-picker-input').simulate('click');
selectDate(wrapper, moment('2017-09-18'), 0);
selectDate(wrapper, moment('2017-10-18'), 1);
wrapper.find('.ant-calendar-picker-input').simulate('click');
expect(() =>
wrapper
.find('.ant-calendar-input')
.at(1)
.simulate('change', { target: { value: '2016-01-01' } }),
).not.toThrow();
});
it('changes year/month when under control', () => {
const wrapper = mount(<RangePicker value={[moment('2018-07-01'), moment('2018-07-02')]} />);
openPanel(wrapper);
expect(
wrapper
.find('.ant-calendar-my-select')
.first()
.text(),
).toBe('Jul2018');
wrapper
.find('.ant-calendar-prev-year-btn')
.first()
.simulate('click');
wrapper
.find('.ant-calendar-prev-month-btn')
.first()
.simulate('click');
expect(
wrapper
.find('.ant-calendar-my-select')
.first()
.text(),
).toBe('Jun2017');
});
// https://github.com/ant-design/ant-design/issues/11631
it('triggers onOpenChange when click on preset range', () => {
const handleOpenChange = jest.fn();
const range = [moment().subtract(2, 'd'), moment()];
const wrapper = mount(
<RangePicker onOpenChange={handleOpenChange} ranges={{ 'recent two days': range }} />,
);
wrapper.find('.ant-calendar-picker-input').simulate('click');
wrapper.find('.ant-calendar-range-quick-selector Tag').simulate('click');
expect(handleOpenChange).toBeCalledWith(false);
});
it('customize separator', () => {
const wrapper = mount(<RangePicker separator="test" />);
expect(wrapper.render()).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/13302
describe('in "month" mode, when the left and right panels select the same month', () => {
it('left panel and right panel could be the same month', () => {
const wrapper = mount(<RangePicker mode={['month', 'month']} />);
wrapper.setProps({ value: [moment(), moment()] });
expect(
wrapper
.find('.ant-calendar-range-picker-input')
.first()
.getDOMNode().value,
).toBe(
wrapper
.find('.ant-calendar-range-picker-input')
.last()
.getDOMNode().value,
);
});
it('the cell status is correct', () => {
const wrapper = mount(<RangePicker mode={['month', 'month']} />);
wrapper.find('.ant-calendar-picker-input').simulate('click');
wrapper
.find('.ant-calendar-range-left .ant-calendar-month-panel-cell')
.at(3)
.simulate('click');
wrapper
.find('.ant-calendar-range-right .ant-calendar-month-panel-cell')
.at(3)
.simulate('click');
expect(
wrapper
.find('.ant-calendar-range-left .ant-calendar-month-panel-cell')
.at(3)
.hasClass('ant-calendar-month-panel-selected-cell'),
).toBe(true);
expect(
wrapper
.find('.ant-calendar-range-left .ant-calendar-month-panel-cell')
.at(3)
.hasClass('ant-calendar-month-panel-selected-cell'),
).toBe(true);
expect(
wrapper
.find('.ant-calendar-range-left .ant-calendar-month-panel-cell')
.at(2)
.hasClass('ant-calendar-month-panel-cell-disabled'),
).toBe(false);
expect(
wrapper
.find('.ant-calendar-range-left .ant-calendar-month-panel-cell')
.at(4)
.hasClass('ant-calendar-month-panel-cell-disabled'),
).toBe(true);
expect(
wrapper
.find('.ant-calendar-range-right .ant-calendar-month-panel-cell')
.at(2)
.hasClass('ant-calendar-month-panel-cell-disabled'),
).toBe(true);
expect(
wrapper
.find('.ant-calendar-range-right .ant-calendar-month-panel-cell')
.at(4)
.hasClass('ant-calendar-month-panel-cell-disabled'),
).toBe(false);
});
});
});