fix: 完善picker\datepicker\calendar 组件单元测试

src/packages/calendar/__test__/calendar.spec.js

@@ -1,75 +1,72 @@
-import { shallowMount, mount } from '@vue/test-utils'
-import Calendar from '../calendar.vue'
+import { shallowMount, mount } from '@vue/test-utils';
+import Calendar from '../calendar-slot.vue';
 import Vue from 'vue';
 
-
 describe('Calendar.vue', () => {
-    const wrapper = shallowMount(Calendar, {
-        propsData: { 
-            defaultValue: '2022-01-12',
-            startDate: '2020-02-01',
-            endDate:'2028-04-11'
-        }
-    });
+  const wrapper = shallowMount(Calendar, {
+    propsData: {
+      defaultValue: '2022-01-12',
+      startDate: '2020-02-01',
+      endDate: '2028-04-11',
+    },
+  });
 
-    it('是否可见', () => {
-        wrapper.setProps({isVisible: true });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-calendar').isVisible()).toBe(true);
-        })
+  it('是否可见', () => {
+    wrapper.setProps({ poppable: true });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-calendar').isVisible()).toBe(true);
     });
+  });
 
-    it('设置默认日期', () => {
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2022年01月');
-            expect(wrapper.findAll('.nut-calendar-month-item').at(0).find('.nut-calendar-month-day-active').text()).toBe('12');
-        })
+  it('设置默认日期', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2022年01月');
+      expect(wrapper.findAll('.nut-calendar-month-item').at(0).find('.nut-calendar-month-day-active').text()).toBe('12');
     });
+  });
 
-    it('选择日期', () => {
-        wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day').at(10).trigger('click');
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('5');
-
-        })
+  it('选择日期', () => {
+    wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day').at(10).trigger('click');
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('5');
     });
+  });
 });
 describe('Calendar.vue', () => {
-    const wrapper = shallowMount(Calendar, {
-        propsData: { 
-            type: 'range',
-            defaultValue: ['2022-02-22', '2022-02-25'],
-            startDate: '2022-02-01',
-            endDate:'2022-04-11'
-        }
-    });
+  const wrapper = shallowMount(Calendar, {
+    propsData: {
+      type: 'range',
+      defaultValue: ['2022-02-22', '2022-02-25'],
+      startDate: '2022-02-01',
+      endDate: '2022-04-11',
+      poppable: false,
+    },
+  });
 
-    it('区间选择', () => {
-        wrapper.setProps({isVisible: true });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-day-active').length).toBe(2);
-        })
+  it('区间选择', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-calendar-month-day-active').length).toBe(2);
     });
-    it('设置开始结束日期', () => {
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').length).toBe(3);
-        })
+  });
+  it('设置开始结束日期', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-calendar-month-item').length).toBe(3);
     });
-    it('设置默认日期', () => {
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2022年02月');
-            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('22 开始');
-            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('25 结束');
-        })
+  });
+  it('设置默认日期', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2022年02月');
+      expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('22  开始');
+      expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('25  结束');
     });
-    
-    it('选择日期', () => {
-        wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(14).trigger('click');
-        wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(16).trigger('click');
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('13 开始');
-            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('15 结束');
-        })
+  });
+
+  it('选择日期', () => {
+    wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(14).trigger('click');
+    wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(16).trigger('click');
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('13  开始');
+      expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('15  结束');
     });
-   
-});
+  });
+});

src/packages/datepicker/__test__/datapicker.spec.js

@@ -1,72 +1,71 @@
-import { shallowMount, mount } from '@vue/test-utils'
-import DatePicker from '../datepicker.vue'
+import { shallowMount, mount } from '@vue/test-utils';
+import DatePicker from '../datepicker.vue';
 import Vue from 'vue';
 
-
 describe('DatePicker.vue', () => {
-    it('日期', () => {
-        const wrapper = mount(DatePicker, {
-            propsData: { 
-                type: 'date' 
-            }
-        });
-        wrapper.setProps({type: 'date' });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-picker-list').length).toBe(3)
-        })
+  it('日期', () => {
+    const wrapper = mount(DatePicker, {
+      propsData: {
+        type: 'date',
+      },
+    });
+    wrapper.setProps({ type: 'date' });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-picker-list').length).toBe(3);
     });
+  });
 
-    it('日期时间', () => {
-        const wrapper = mount(DatePicker, {
-            propsData: { 
-                type: 'datetime' 
-            }
-        });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-picker-list').length).toBe(5)
-        })
+  it('日期时间', () => {
+    const wrapper = mount(DatePicker, {
+      propsData: {
+        type: 'datetime',
+      },
     });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-picker-list').length).toBe(5);
+    });
+  });
 
-    it('时间', () => {
-        const wrapper = mount(DatePicker, {
-            propsData: { 
-                type: 'time',
-                minuteStep: 15,
-                startHour: 10,
-                endHour: 16
-            }
-        });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-picker-list').length).toBe(2)
-            expect(wrapper.findAll('.nut-picker-list').at(1).findAll('.nut-picker-item').at(1).text()).toBe('15分')
-            expect(wrapper.findAll('.nut-picker-list').at(0).findAll('.nut-picker-item').at(1).text()).toBe('11时')
-            expect(wrapper.findAll('.nut-picker-list').at(0).findAll('.nut-picker-item').length).toBe(7)
-        })
+  it('时间', () => {
+    const wrapper = mount(DatePicker, {
+      propsData: {
+        type: 'time',
+        minuteStep: 15,
+        startHour: 10,
+        endHour: 16,
+      },
+    });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-picker-list').length).toBe(2);
+      expect(wrapper.findAll('.nut-picker-list').at(1).findAll('.nut-picker-item').at(1).text()).toBe('15分');
+      expect(wrapper.findAll('.nut-picker-list').at(0).findAll('.nut-picker-item').at(1).text()).toBe('11时');
+      expect(wrapper.findAll('.nut-picker-list').at(0).findAll('.nut-picker-item').length).toBe(7);
+    });
+  });
+
+  it('12小时制', () => {
+    const wrapper = mount(DatePicker, {
+      propsData: {
+        type: 'time',
+        isUse12Hours: true,
+        isAm: false,
+      },
+    });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-picker-list').length).toBe(3);
+      expect(wrapper.findAll('.nut-picker-list').at(0).findAll('.nut-picker-item').at(0).text()).toBe('12时');
+      expect(wrapper.findAll('.nut-picker-list-panel').at(2).attributes('style')).toContain('translate3d(0, -50px, 0)');
     });
+  });
 
-    it('12小时制', () => {
-        const wrapper = mount(DatePicker, {
-            propsData: { 
-                type: 'time',
-                isUse12Hours: true,
-                isAm: false
-            }
-        });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-picker-list').length).toBe(3)
-            expect(wrapper.findAll('.nut-picker-list').at(0).findAll('.nut-picker-item').at(0).text()).toBe('12时')
-            expect(wrapper.findAll('.nut-picker-list-panel').at(2).attributes('style')).toContain('translate3d(0, -36px, 0)');
-        })
+  it('标题', () => {
+    const wrapper = mount(DatePicker, {
+      propsData: {
+        title: '选择年月',
+      },
     });
-    
-    it('标题', () => {
-        const wrapper = mount(DatePicker, {
-            propsData: { 
-                title: '选择年月'
-            }
-        });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-picker-title').text()).toBe('选择年月');
-        })
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-picker-title').text()).toBe('选择年月');
     });
+  });
 });

src/packages/picker/__test__/picker.spec.js

@@ -1,72 +1,71 @@
-import { shallowMount, mount } from '@vue/test-utils'
-import Picker from '../picker.vue'
-import PickerSlot from '../picker-slot.vue'
+import { shallowMount, mount } from '@vue/test-utils';
+import Picker from '../picker.vue';
+import PickerSlot from '../picker-slot.vue';
 import Vue from 'vue';
 
-
 describe('Picker.vue', () => {
-    const wrapper = mount(Picker, {
-        propsData:{
-            listData: [
-                ['2019', '2020', '2021', '2022', '2023' ],
-                ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
-            ],
-        }
-    });
+  const wrapper = mount(Picker, {
+    propsData: {
+      listData: [
+        ['2019', '2020', '2021', '2022', '2023'],
+        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+      ],
+    },
+  });
 
-    it('调用PickerSlot个数', () => {
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-picker-list').length).toBe(2)
-        })
+  it('调用PickerSlot个数', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-picker-list').length).toBe(2);
     });
+  });
 
-    it('调用PickerSlot', () => {
-        return Vue.nextTick().then(function () {
-            expect(wrapper.contains(PickerSlot)).toBe(true)
-        })
+  it('调用PickerSlot', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.contains(PickerSlot)).toBe(true);
     });
+  });
 
-    it('未调用PickerSlot', () => {
-        wrapper.setProps({
-            listData: []
-        });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.contains(PickerSlot)).toBe(false)
-        })
+  it('未调用PickerSlot', () => {
+    wrapper.setProps({
+      listData: [],
+    });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.contains(PickerSlot)).toBe(false);
     });
+  });
 
-    it('自定义class', () => {
-        wrapper.setProps({customClassName: 'nut-picker-test' });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-picker').contains('.nut-picker-test')).toBe(true);
-        })
+  it('自定义class', () => {
+    wrapper.setProps({ customClassName: 'nut-picker-test' });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-picker').contains('.nut-picker-test')).toBe(true);
     });
+  });
 
-    it('标题', () => {
-        wrapper.setProps({title: '选择年月'});
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-picker-title').text()).toBe('选择年月');
-        })
+  it('标题', () => {
+    wrapper.setProps({ title: '选择年月' });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-picker-title').text()).toBe('选择年月');
     });
+  });
 });
 
 describe('PickerSlot.vue', () => {
-    const wrapper = shallowMount(PickerSlot, {
-        propsData:{
-            listData: ['2019', '2020', '2021', '2022', '2023' ],
-            defaultValue: '2020'
-        }
-    });
+  const wrapper = shallowMount(PickerSlot, {
+    propsData: {
+      listData: ['2019', '2020', '2021', '2022', '2023'],
+      defaultValue: '2020',
+    },
+  });
 
-    it('展示个数', () => {
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-picker-item').length).toBe(5);
-        })
+  it('展示个数', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-picker-item').length).toBe(5);
     });
+  });
 
-    it('设置默认值', () => {
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-picker-list-panel').attributes('style')).toContain('translate3d(0, -36px, 0)');
-        })
+  it('设置默认值', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-picker-list-panel').attributes('style')).toContain('translate3d(0, -50px, 0)');
     });
-});
+  });
+});