mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 00:29:12 +08:00
82777bca93
* Unit Testing Added unit tests for the DatePicker show time field and month range relative start and end selection. * Remove duplicated test
454 lines
15 KiB
TypeScript
454 lines
15 KiB
TypeScript
import type { TriggerProps } from '@rc-component/trigger';
|
||
import dayjs from 'dayjs';
|
||
|
||
import 'dayjs/locale/mk'; // to test local in 'prop locale should works' test case
|
||
|
||
import React from 'react';
|
||
import { CloseCircleFilled } from '@ant-design/icons';
|
||
import userEvent from '@testing-library/user-event';
|
||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||
import MockDate from 'mockdate';
|
||
import dayJsGenerateConfig from 'rc-picker/lib/generate/dayjs';
|
||
|
||
import DatePicker from '..';
|
||
import { resetWarned } from '../../_util/warning';
|
||
import focusTest from '../../../tests/shared/focusTest';
|
||
import { fireEvent, render, screen, waitFor } from '../../../tests/utils';
|
||
import type { PickerLocale } from '../generatePicker';
|
||
import { closeCircleByRole, expectCloseCircle } from './utils';
|
||
|
||
dayjs.extend(customParseFormat);
|
||
|
||
let triggerProps: TriggerProps;
|
||
|
||
jest.mock('@rc-component/trigger', () => {
|
||
let Trigger = jest.requireActual('@rc-component/trigger/lib/mock');
|
||
Trigger = Trigger.default || Trigger;
|
||
const h: typeof React = jest.requireActual('react');
|
||
|
||
return {
|
||
default: h.forwardRef<HTMLElement, TriggerProps>((props, ref) => {
|
||
triggerProps = props;
|
||
return h.createElement(Trigger, { ref, ...props });
|
||
}),
|
||
__esModule: true,
|
||
};
|
||
});
|
||
|
||
describe('DatePicker', () => {
|
||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||
|
||
focusTest(DatePicker, { refFocus: true });
|
||
|
||
beforeEach(() => {
|
||
MockDate.set(dayjs('2016-11-22').valueOf());
|
||
});
|
||
|
||
afterEach(() => {
|
||
MockDate.reset();
|
||
errorSpy.mockReset();
|
||
});
|
||
|
||
afterAll(() => {
|
||
errorSpy.mockRestore();
|
||
});
|
||
|
||
it('prop locale should works', () => {
|
||
const locale = {
|
||
lang: {
|
||
locale: 'mk',
|
||
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 = dayjs('2000-01-01', 'YYYY-MM-DD');
|
||
const wrapper = render(<DatePicker open locale={locale as PickerLocale} value={birthday} />);
|
||
expect(Array.from(wrapper.container.children)).toMatchSnapshot();
|
||
});
|
||
|
||
it('disabled date', () => {
|
||
const disabledDate = (current: any) => current && current < dayjs().endOf('day');
|
||
const wrapper = render(<DatePicker disabledDate={disabledDate} open />);
|
||
expect(Array.from(wrapper.container.children)).toMatchSnapshot();
|
||
});
|
||
|
||
it('placeholder', () => {
|
||
const wrapper = render(<DatePicker placeholder={undefined} />);
|
||
expect(wrapper.container.querySelector('input')?.placeholder).toEqual('Select date');
|
||
});
|
||
|
||
it('showTime={{ showHour: true, showMinute: true }}', () => {
|
||
const { container } = render(
|
||
<DatePicker
|
||
defaultValue={dayjs()}
|
||
showTime={{ showHour: true, showMinute: true }}
|
||
format="YYYY-MM-DD"
|
||
open
|
||
/>,
|
||
);
|
||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(2);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(24);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
});
|
||
|
||
it('showTime={{ showMinute: true, showSecond: true }}', () => {
|
||
const { container } = render(
|
||
<DatePicker
|
||
defaultValue={dayjs()}
|
||
showTime={{ showMinute: true, showSecond: true }}
|
||
format="YYYY-MM-DD"
|
||
open
|
||
/>,
|
||
);
|
||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(2);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
});
|
||
|
||
it('showTime={{ showHour: true, showMinute: true, showSecond: true }}', () => {
|
||
const { container } = render(
|
||
<DatePicker
|
||
defaultValue={dayjs()}
|
||
showTime={{ showHour: true, showMinute: true, showSecond: true }}
|
||
format="YYYY-MM-DD"
|
||
open
|
||
/>,
|
||
);
|
||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(3);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(24);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[2]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
});
|
||
|
||
it('showTime={{ showHour: true, showSecond: true }}', () => {
|
||
const { container } = render(
|
||
<DatePicker
|
||
defaultValue={dayjs()}
|
||
showTime={{ showHour: true, showSecond: true }}
|
||
format="YYYY-MM-DD"
|
||
open
|
||
/>,
|
||
);
|
||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(2);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(24);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
});
|
||
|
||
it('showTime={{ showSecond: true }}', () => {
|
||
const { container } = render(
|
||
<DatePicker
|
||
defaultValue={dayjs()}
|
||
showTime={{ showSecond: true }}
|
||
format="YYYY-MM-DD"
|
||
open
|
||
/>,
|
||
);
|
||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(1);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
});
|
||
|
||
it('showTime={{ showMinute: true }}', () => {
|
||
const { container } = render(
|
||
<DatePicker
|
||
defaultValue={dayjs()}
|
||
showTime={{ showMinute: true }}
|
||
format="YYYY-MM-DD"
|
||
open
|
||
/>,
|
||
);
|
||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(1);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
});
|
||
|
||
it('showTime={{ showHour: true }}', () => {
|
||
const { container } = render(
|
||
<DatePicker
|
||
defaultValue={dayjs()}
|
||
showTime={{ showHour: true }}
|
||
format="YYYY-MM-DD"
|
||
open
|
||
/>,
|
||
);
|
||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(1);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(24);
|
||
});
|
||
|
||
it('showTime={{ }} (no true args)', () => {
|
||
const { container } = render(
|
||
<DatePicker
|
||
defaultValue={dayjs()}
|
||
showTime={{ }}
|
||
format="YYYY-MM-DD"
|
||
open
|
||
/>,
|
||
);
|
||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(0);
|
||
});
|
||
|
||
it('showTime should work correctly when format is custom function', () => {
|
||
const { container } = render(
|
||
<DatePicker
|
||
defaultValue={dayjs()}
|
||
showTime
|
||
format={(val) => val.format('YYYY-MM-DD')}
|
||
open
|
||
/>,
|
||
);
|
||
const fuousEvent = () => {
|
||
fireEvent.focus(container.querySelector('input')!);
|
||
};
|
||
const mouseDownEvent = () => {
|
||
fireEvent.mouseDown(container.querySelector('input')!);
|
||
};
|
||
expect(fuousEvent).not.toThrow();
|
||
expect(mouseDownEvent).not.toThrow();
|
||
});
|
||
|
||
it('showTime should work correctly when format is Array', () => {
|
||
const { container } = render(
|
||
<DatePicker defaultValue={dayjs()} showTime format={['YYYY-MM-DD HH:mm']} open />,
|
||
);
|
||
const fuousEvent = () => {
|
||
fireEvent.focus(container.querySelector('input')!);
|
||
};
|
||
const mouseDownEvent = () => {
|
||
fireEvent.mouseDown(container.querySelector('input')!);
|
||
};
|
||
expect(fuousEvent).not.toThrow();
|
||
expect(mouseDownEvent).not.toThrow();
|
||
});
|
||
|
||
it('12 hours', () => {
|
||
const { container } = render(
|
||
<DatePicker defaultValue={dayjs()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
|
||
);
|
||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(4);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(12);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[2]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[3]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(2);
|
||
});
|
||
|
||
it('24 hours', () => {
|
||
const { container } = render(
|
||
<DatePicker defaultValue={dayjs()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
|
||
);
|
||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(3);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(24);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[2]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
});
|
||
|
||
it('DatePicker.RangePicker with defaultValue and showTime', () => {
|
||
const startDate = dayjs('1982-02-12');
|
||
const endDate = dayjs('1982-02-22');
|
||
|
||
const { container } = render(
|
||
<DatePicker.RangePicker defaultValue={[startDate, endDate]} showTime open />,
|
||
);
|
||
|
||
const m = container.querySelector('.ant-picker-header-view .ant-picker-month-btn')?.innerHTML;
|
||
const y = container.querySelector('.ant-picker-header-view .ant-picker-year-btn')?.innerHTML;
|
||
expect(m).toBe(startDate.format('MMM'));
|
||
expect(y).toBe(startDate.format('YYYY'));
|
||
expect(container.querySelectorAll('.ant-picker-time-panel').length).toBe(1);
|
||
});
|
||
|
||
it('placement api work correctly', () => {
|
||
const { rerender } = render(<DatePicker.RangePicker open placement="topLeft" />);
|
||
expect(triggerProps?.builtinPlacements).toEqual(
|
||
expect.objectContaining({
|
||
topLeft: expect.objectContaining({ offset: [0, -4], points: ['bl', 'tl'] }),
|
||
}),
|
||
);
|
||
|
||
rerender(<DatePicker.RangePicker open placement="topRight" />);
|
||
expect(triggerProps?.builtinPlacements).toEqual(
|
||
expect.objectContaining({
|
||
topRight: expect.objectContaining({ offset: [0, -4], points: ['br', 'tr'] }),
|
||
}),
|
||
);
|
||
|
||
rerender(<DatePicker.RangePicker open placement="bottomLeft" />);
|
||
expect(triggerProps?.builtinPlacements).toEqual(
|
||
expect.objectContaining({
|
||
bottomLeft: expect.objectContaining({ offset: [0, 4], points: ['tl', 'bl'] }),
|
||
}),
|
||
);
|
||
|
||
rerender(<DatePicker.RangePicker open placement="bottomRight" />);
|
||
expect(triggerProps?.builtinPlacements).toEqual(
|
||
expect.objectContaining({
|
||
bottomRight: expect.objectContaining({ offset: [0, 4], points: ['tr', 'br'] }),
|
||
}),
|
||
);
|
||
});
|
||
|
||
it('legacy dropdownClassName', () => {
|
||
resetWarned();
|
||
|
||
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||
const { container } = render(<DatePicker dropdownClassName="legacy" open />);
|
||
expect(errSpy).toHaveBeenCalledWith(
|
||
'Warning: [antd: DatePicker] `dropdownClassName` is deprecated. Please use `popupClassName` instead.',
|
||
);
|
||
expect(container.querySelector('.legacy')).toBeTruthy();
|
||
|
||
errSpy.mockRestore();
|
||
});
|
||
|
||
it('support DatePicker.generatePicker', () => {
|
||
const MyDatePicker = DatePicker.generatePicker(dayJsGenerateConfig);
|
||
const { container } = render(<MyDatePicker />);
|
||
expect(container.firstChild).toMatchSnapshot();
|
||
});
|
||
|
||
it('kk:mm format', () => {
|
||
const { container } = render(
|
||
<DatePicker defaultValue={dayjs()} format="kk:mm" showTime open />,
|
||
);
|
||
expect(container.querySelectorAll('.ant-picker-time-panel-column').length).toBe(2);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[0]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(24);
|
||
expect(
|
||
container
|
||
.querySelectorAll('.ant-picker-time-panel-column')?.[1]
|
||
.querySelectorAll('.ant-picker-time-panel-cell').length,
|
||
).toBe(60);
|
||
});
|
||
|
||
it('allows or prohibits clearing as applicable', async () => {
|
||
const somepoint = dayjs('2023-08-01');
|
||
const { rerender } = render(<DatePicker value={somepoint} />);
|
||
|
||
const { role, options } = closeCircleByRole;
|
||
await userEvent.hover(screen.getByRole(role, options));
|
||
await waitFor(() => expectCloseCircle(true));
|
||
|
||
rerender(<DatePicker value={somepoint} allowClear={false} />);
|
||
await waitFor(() => expectCloseCircle(false));
|
||
|
||
rerender(<DatePicker value={somepoint} allowClear={{ clearIcon: <CloseCircleFilled /> }} />);
|
||
await waitFor(() => expectCloseCircle(true));
|
||
|
||
rerender(
|
||
<DatePicker
|
||
value={somepoint}
|
||
allowClear={{ clearIcon: <div data-testid="custom-clear" /> }}
|
||
/>,
|
||
);
|
||
await waitFor(() => expectCloseCircle(false));
|
||
await userEvent.hover(screen.getByTestId('custom-clear'));
|
||
|
||
rerender(<DatePicker value={somepoint} allowClear={{}} />);
|
||
await waitFor(() => expectCloseCircle(true));
|
||
});
|
||
});
|