import { mount } from '@vue/test-utils';
import { asyncExpect } from '@/tests/utils';
import moment from 'moment';
import DatePicker from '../';
import { $$ } from './utils';
import { sleep } from '../../../tests/utils';
const { RangePicker } = DatePicker;
describe('DatePicker with showTime', () => {
beforeEach(() => {
document.body.outerHTML = '';
});
it('should trigger onChange when select value', async () => {
const onChangeFn = jest.fn();
const onOpenChangeFn = jest.fn();
mount(
{
render() {
return ;
},
},
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
$$('.ant-calendar-date')[0].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();
mount(
{
render() {
return (
);
},
},
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
$$('.ant-calendar-ok-btn')[0].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();
mount(
{
render() {
return ;
},
},
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
$$('.ant-calendar-today-btn')[0].click();
});
await asyncExpect(() => {
expect(onOpenChangeFn).toHaveBeenCalledWith(false);
expect(onChangeFn).toHaveBeenCalled();
});
});
it('should have correct className when use12Hours is true', async () => {
mount(
{
render() {
return ;
},
},
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
expect($$('.ant-calendar-time-picker-column-4').length).toBe(0);
});
$$('.ant-calendar-today')[0].click();
await sleep();
$$('.ant-calendar-time-picker-btn')[0].click();
await asyncExpect(() => {
expect($$('.ant-calendar-time-picker-column-4').length).toBe(1);
});
});
});
describe('RangePicker with showTime', () => {
beforeEach(() => {
document.body.outerHTML = '';
});
it('should trigger onChange when select value', async () => {
const onChangeFn = jest.fn();
const onOpenChangeFn = jest.fn();
mount(
{
render() {
return ;
},
},
{ sync: false },
);
await asyncExpect(() => {
expect($$('.ant-calendar-time-picker-btn')[0].getAttribute('class').split(' ')).toContain(
'ant-calendar-time-picker-btn-disabled',
);
expect($$('.ant-calendar-ok-btn')[0].getAttribute('class').split(' ')).toContain(
'ant-calendar-ok-btn-disabled',
);
});
$$('.ant-calendar-date')[10].click();
$$('.ant-calendar-date')[11].click();
await asyncExpect(() => {
expect($$('.ant-calendar-time-picker-btn')[0].getAttribute('class').split(' ')).not.toContain(
'ant-calendar-time-picker-btn-disabled',
);
expect($$('.ant-calendar-ok-btn')[0].getAttribute('class').split(' ')).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();
mount(
{
render() {
return (
);
},
},
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
$$('.ant-calendar-date')[10].click();
$$('.ant-calendar-date')[11].click();
});
onChangeFn.mockClear();
$$('.ant-calendar-ok-btn')[0].click();
expect(onOkFn).toHaveBeenCalled();
expect(onOpenChangeFn).toHaveBeenCalledWith(false);
expect(onChangeFn).not.toHaveBeenCalled();
});
});