mirror of
https://github.com/tenrok/vue2-datepicker.git
synced 2026-06-20 23:50:35 +03:00
refactor: 3.0
This commit is contained in:
mengxiong10
@@ -0,0 +1,277 @@
|
||||
import { shallowMount, createWrapper, mount } from '@vue/test-utils';
|
||||
import { format, parse } from 'date-fns';
|
||||
import DatePicker from '../src/date-picker.vue';
|
||||
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper.destroy();
|
||||
});
|
||||
|
||||
describe('DatePicker', () => {
|
||||
it('feat: open and close the popup', () => {
|
||||
wrapper = mount(DatePicker, {
|
||||
attachToDocument: true,
|
||||
});
|
||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
||||
// expect click input should show the popup
|
||||
const input = wrapper.find('input');
|
||||
input.trigger('click');
|
||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
||||
// expect click out side should hide the popup
|
||||
const bodyWrapper = createWrapper(document.body);
|
||||
bodyWrapper.trigger('mousedown');
|
||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
||||
// expect focus input should show the popop
|
||||
input.trigger('focus');
|
||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
||||
// expoce keydown tab should hide the popup
|
||||
input.trigger('keydown.tab');
|
||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
||||
});
|
||||
|
||||
it('feat: should init panel and calendar when reopen', () => {
|
||||
wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
defaultValue: new Date(2019, 9, 1),
|
||||
open: true,
|
||||
},
|
||||
});
|
||||
const yearBtn = wrapper.find('.mx-btn-current-year');
|
||||
yearBtn.trigger('click');
|
||||
// change to year panel
|
||||
expect(wrapper.find('.mx-calendar-panel-year').exists()).toBe(true);
|
||||
wrapper.setProps({ open: false });
|
||||
wrapper.setProps({ open: true });
|
||||
expect(wrapper.find('.mx-calendar-panel-year').exists()).toBe(false);
|
||||
});
|
||||
|
||||
it('prop: open', () => {
|
||||
wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
open: false,
|
||||
},
|
||||
});
|
||||
const { vm } = wrapper;
|
||||
vm.openPopup();
|
||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
||||
wrapper.setProps({ open: true });
|
||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
||||
vm.closePopup();
|
||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
|
||||
const emitted = wrapper.emitted();
|
||||
expect(emitted['update:open'][0][0]).toBe(true);
|
||||
expect(emitted['update:open'][1][0]).toBe(false);
|
||||
});
|
||||
|
||||
it('prop: disabled(should not show the popup)', () => {
|
||||
wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
disabled: true,
|
||||
},
|
||||
});
|
||||
const input = wrapper.find('input');
|
||||
expect(input.attributes('disabled')).toBe('disabled');
|
||||
input.trigger('click');
|
||||
expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
|
||||
});
|
||||
|
||||
it('prop: clearable', () => {
|
||||
wrapper = shallowMount(DatePicker, {
|
||||
propsData: {
|
||||
value: new Date(2019, 4, 10),
|
||||
defaultValue: new Date(2019, 4, 10),
|
||||
clearable: false,
|
||||
},
|
||||
// calendar-panel: default-value="Fri May 10 2019 00:00:00 GMT+0800 (CST)"
|
||||
// Exclude the impact of timezone
|
||||
scopedSlots: {
|
||||
content: '<div></div>',
|
||||
},
|
||||
});
|
||||
expect(wrapper.element).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('prop: editable', () => {
|
||||
wrapper = shallowMount(DatePicker, {
|
||||
propsData: {
|
||||
value: new Date(2019, 4, 10),
|
||||
defaultValue: new Date(2019, 4, 10),
|
||||
editable: false,
|
||||
},
|
||||
scopedSlots: {
|
||||
content: '<div></div>',
|
||||
},
|
||||
});
|
||||
expect(wrapper.element).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('prop: attrs of input', () => {
|
||||
wrapper = shallowMount(DatePicker, {
|
||||
propsData: {
|
||||
defaultValue: new Date(2019, 4, 10),
|
||||
placeholder: 'test placeholder',
|
||||
inputClass: 'test',
|
||||
inputAttr: {
|
||||
type: 'number',
|
||||
name: 'test',
|
||||
},
|
||||
},
|
||||
scopedSlots: {
|
||||
content: '<div></div>',
|
||||
},
|
||||
});
|
||||
expect(wrapper.element).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('prop: format', () => {
|
||||
wrapper = shallowMount(DatePicker, {
|
||||
propsData: {
|
||||
format: 'YYYY/MM/DD',
|
||||
value: new Date(2019, 9, 10),
|
||||
},
|
||||
});
|
||||
const input = wrapper.find('input').element;
|
||||
expect(input.value).toBe('2019/10/10');
|
||||
});
|
||||
|
||||
it('prop: custom format', () => {
|
||||
wrapper = shallowMount(DatePicker, {
|
||||
propsData: {
|
||||
valueType: 'format',
|
||||
value: '13/10/2019',
|
||||
format: {
|
||||
stringify(date) {
|
||||
return format(date, 'dd/MM/yyyy');
|
||||
},
|
||||
parse(value) {
|
||||
return parse(value, 'dd/MM/yyyy', new Date());
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
const input = wrapper.find('input').element;
|
||||
expect(input.value).toBe('13/10/2019');
|
||||
});
|
||||
|
||||
it('prop: valueType', () => {
|
||||
const value = new Date(2019, 9, 20);
|
||||
const emitValue = new Date(2019, 9, 22);
|
||||
wrapper = shallowMount(DatePicker, {
|
||||
propsData: {
|
||||
value,
|
||||
format: 'YYYY/MM/DD',
|
||||
},
|
||||
});
|
||||
const { vm } = wrapper;
|
||||
expect(vm.text).toBe('2019/10/20');
|
||||
vm.emitValue(emitValue);
|
||||
wrapper.setProps({ valueType: 'format', value: '2019/10/20' });
|
||||
expect(vm.text).toBe('2019/10/20');
|
||||
vm.emitValue(emitValue);
|
||||
wrapper.setProps({ valueType: 'timestamp', value: value.getTime() });
|
||||
expect(vm.text).toBe('2019/10/20');
|
||||
vm.emitValue(emitValue);
|
||||
wrapper.setProps({ valueType: 'DD/MM/YYYY', value: '20/10/2019' });
|
||||
expect(vm.text).toBe('2019/10/20');
|
||||
vm.emitValue(emitValue);
|
||||
const emitted = wrapper.emitted();
|
||||
expect(emitted.input).toEqual([
|
||||
[emitValue],
|
||||
['2019/10/22'],
|
||||
[emitValue.getTime()],
|
||||
['22/10/2019'],
|
||||
]);
|
||||
});
|
||||
|
||||
it('prop: shortcut', () => {
|
||||
const date = new Date(2019, 4, 10);
|
||||
wrapper = shallowMount(DatePicker, {
|
||||
propsData: {
|
||||
open: true,
|
||||
valueType: 'YYYY/MM/DD',
|
||||
shortcuts: [
|
||||
{
|
||||
text: 'Today',
|
||||
onClick() {
|
||||
return date;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const btn = wrapper.find('.mx-btn-shortcut');
|
||||
btn.trigger('click');
|
||||
const emitted = wrapper.emitted();
|
||||
expect(emitted.input).toEqual([['2019/05/10']]);
|
||||
});
|
||||
|
||||
it('prop: popupClass', () => {
|
||||
wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
open: true,
|
||||
popupClass: 'test',
|
||||
},
|
||||
});
|
||||
const popup = wrapper.find('.mx-datepicker-popup');
|
||||
expect(popup.classes()).toContain('test');
|
||||
});
|
||||
|
||||
it('prop: popupStyle', () => {
|
||||
wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
open: true,
|
||||
popupStyle: {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
});
|
||||
const popup = wrapper.find('.mx-datepicker-popup');
|
||||
expect(popup.element.style.color).toBe('red');
|
||||
});
|
||||
|
||||
it('prop: confirm', () => {
|
||||
wrapper = shallowMount(DatePicker, {
|
||||
propsData: {
|
||||
confirm: true,
|
||||
},
|
||||
});
|
||||
const { vm } = wrapper;
|
||||
vm.openPopup();
|
||||
const btn = wrapper.find('.mx-datepicker-btn-confirm');
|
||||
expect(btn.exists()).toBe(true);
|
||||
// click the date expect popup don't close
|
||||
vm.handleSelectDate(new Date(2018, 5, 5));
|
||||
expect(wrapper.emitted().input).toBeUndefined();
|
||||
expect(vm.popupVisible).toBe(true);
|
||||
btn.trigger('click');
|
||||
expect(wrapper.emitted().input[0][0]).toEqual(new Date(2018, 5, 5));
|
||||
expect(vm.popupVisible).toBe(false);
|
||||
});
|
||||
|
||||
it('prop: confirmText', () => {
|
||||
wrapper = shallowMount(DatePicker, {
|
||||
propsData: {
|
||||
open: true,
|
||||
confirm: true,
|
||||
confirmText: 'test',
|
||||
},
|
||||
});
|
||||
|
||||
const btn = wrapper.find('.mx-datepicker-btn-confirm');
|
||||
expect(btn.text()).toBe('test');
|
||||
});
|
||||
|
||||
it('prop: appendToBody', () => {
|
||||
wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
open: true,
|
||||
appendToBody: true,
|
||||
},
|
||||
});
|
||||
|
||||
const popup = wrapper.find('.mx-datepicker-popup');
|
||||
expect(popup.element.parentNode).toBe(document.body);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user