refactor: remove date-fns && optimize code

__test__/date-picker.test.js

@@ -1,6 +1,7 @@
 import { shallowMount, createWrapper, mount } from '@vue/test-utils';
 import { format, parse } from 'date-fns';
-import DatePicker from '../src/date-picker.vue';
+import Popup from '../src/popup';
+import DatePicker from '../src/date-picker';
 
 let wrapper;
 
@@ -9,28 +10,28 @@ afterEach(() => {
 });
 
 describe('DatePicker', () => {
-  it('feat: open and close the popup', () => {
+  it('feat: open and close the popup', async () => {
     wrapper = mount(DatePicker, {
-      attachToDocument: true,
+      attachTo: document.body,
     });
     expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
     // expect click input should show the popup
     const input = wrapper.find('input');
-    input.trigger('mousedown');
+    await input.trigger('mousedown');
     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');
+    await bodyWrapper.trigger('mousedown');
     expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
     // expect focus input should show the popop
-    input.trigger('focus');
+    await input.trigger('focus');
     expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
     // expoce keydown tab should hide the popup
-    input.trigger('keydown.tab');
+    await input.trigger('keydown.tab');
     expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
   });
 
-  it('feat: should init panel and calendar when reopen', () => {
+  it('feat: should init panel and calendar when reopen', async () => {
     wrapper = mount(DatePicker, {
       propsData: {
         defaultValue: new Date(2019, 9, 1),
@@ -38,15 +39,15 @@ describe('DatePicker', () => {
       },
     });
     const yearBtn = wrapper.find('.mx-btn-current-year');
-    yearBtn.trigger('click');
+    await 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 });
+    await wrapper.setProps({ open: false });
+    await wrapper.setProps({ open: true });
     expect(wrapper.find('.mx-calendar-panel-year').exists()).toBe(false);
   });
 
-  it('prop: open', () => {
+  it('prop: open', async () => {
     wrapper = mount(DatePicker, {
       propsData: {
         open: false,
@@ -55,7 +56,7 @@ describe('DatePicker', () => {
     const { vm } = wrapper;
     vm.openPopup();
     expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
-    wrapper.setProps({ open: true });
+    await wrapper.setProps({ open: true });
     expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
     vm.closePopup();
     expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
@@ -161,7 +162,7 @@ describe('DatePicker', () => {
     expect(tableDate.element).toMatchSnapshot();
   });
 
-  it('prop: valueType', () => {
+  it('prop: valueType', async () => {
     const value = new Date(2019, 9, 20);
     const emitValue = new Date(2019, 9, 22);
     wrapper = shallowMount(DatePicker, {
@@ -173,13 +174,13 @@ describe('DatePicker', () => {
     const { vm } = wrapper;
     expect(vm.text).toBe('2019/10/20');
     vm.emitValue(emitValue);
-    wrapper.setProps({ valueType: 'format', value: '2019/10/20' });
+    await 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() });
+    await 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' });
+    await wrapper.setProps({ valueType: 'DD/MM/YYYY', value: '20/10/2019' });
     expect(vm.text).toBe('2019/10/20');
     vm.emitValue(emitValue);
     const emitted = wrapper.emitted();
@@ -191,12 +192,13 @@ describe('DatePicker', () => {
     ]);
   });
 
-  it('prop: shortcut', () => {
+  it('prop: shortcut', async () => {
     const date = new Date(2019, 4, 10);
     wrapper = shallowMount(DatePicker, {
       propsData: {
         open: true,
         valueType: 'YYYY/MM/DD',
+        range: false,
         shortcuts: [
           {
             text: 'Today',
@@ -207,12 +209,11 @@ describe('DatePicker', () => {
         ],
       },
     });
-
     const btn = wrapper.find('.mx-btn-shortcut');
-    btn.trigger('click');
+    await btn.trigger('click');
     const emitted = wrapper.emitted();
     expect(emitted.input).toEqual([['2019/05/10']]);
-    wrapper.setProps({
+    await wrapper.setProps({
       range: true,
       shortcuts: [
         {
@@ -234,7 +235,7 @@ describe('DatePicker', () => {
         popupClass: 'test',
       },
     });
-    const popup = wrapper.find('.mx-datepicker-popup');
+    const popup = wrapper.findComponent(Popup);
     expect(popup.classes()).toContain('test');
   });
 
@@ -247,25 +248,25 @@ describe('DatePicker', () => {
         },
       },
     });
-    const popup = wrapper.find('.mx-datepicker-popup');
+    const popup = wrapper.findComponent(Popup);
     expect(popup.element.style.color).toBe('red');
   });
 
-  it('prop: confirm', () => {
+  it('prop: confirm', async () => {
     wrapper = shallowMount(DatePicker, {
       propsData: {
         confirm: true,
       },
     });
     const { vm } = wrapper;
-    vm.openPopup();
+    await wrapper.find('input').trigger('focus');
     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');
+    await btn.trigger('click');
     expect(wrapper.emitted().input[0][0]).toEqual(new Date(2018, 5, 5));
     expect(vm.popupVisible).toBe(false);
   });
@@ -291,7 +292,7 @@ describe('DatePicker', () => {
       },
     });
 
-    const popup = wrapper.find('.mx-datepicker-popup');
+    const popup = wrapper.findComponent(Popup);
     expect(popup.element.parentNode).toBe(document.body);
   });
 
@@ -366,7 +367,7 @@ describe('DatePicker', () => {
     expect(wrapper.emitted().pick[0][0]).toEqual(new Date(2019, 8, 29));
   });
 
-  it('Ignore whitespace around separator on manual range input', () => {
+  it('Ignore whitespace around separator on manual range input', async () => {
     const rangeSeparator = ' ~ ';
     const text = '2020-02-12';
     wrapper = mount(DatePicker, {
@@ -378,13 +379,13 @@ describe('DatePicker', () => {
     });
     const input = wrapper.find('input');
 
-    input.setValue(`${text} ${rangeSeparator} ${text}`);
-    input.trigger('change');
-    input.setValue(`${text}${rangeSeparator.trim()}${text}`);
-    input.trigger('change');
-    wrapper.setProps({ rangeSeparator: ' - ' });
-    input.setValue(`${text} - ${text}`);
-    input.trigger('change');
+    await input.setValue(`${text} ${rangeSeparator} ${text}`);
+    await input.trigger('change');
+    await input.setValue(`${text}${rangeSeparator.trim()}${text}`);
+    await input.trigger('change');
+    await wrapper.setProps({ rangeSeparator: ' - ' });
+    await input.setValue(`${text} - ${text}`);
+    await input.trigger('change');
     expect(wrapper.emitted().input).toEqual([[[text, text]], [[text, text]], [[text, text]]]);
   });