ソースを参照

fix: 日历组件单元测试,组件字段问题修复 (#1130)

lkjh3214 3 年 前
コミット
8962daddd5

ファイルの差分が大きいため隠しています
+ 1195 - 0
src/packages/__VUE/calendar/__tests__/__snapshots__/calendar.spec.ts.snap


+ 119 - 0
src/packages/__VUE/calendar/__tests__/calendar.spec.ts

@@ -0,0 +1,119 @@
+import { mount, config } from '@vue/test-utils';
+import Calendar from '../index.vue';
+import { nextTick, toRefs, reactive } from 'vue';
+import Icon from '../../icon/index.vue';
+import PopUp from '../../popup/index.vue';
+import Button from '../../button/index.vue';
+import OverLay from '../../overLay/index.vue';
+import CalendarItem from '../../calendaritem/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    [Icon.name]: Icon,
+    [PopUp.name]: PopUp,
+    [Button.name]: Button,
+    [OverLay.name]: OverLay,
+    [CalendarItem.name]: CalendarItem
+  };
+});
+test('show-title prop', async () => {
+  const wrapper = mount(Calendar, {
+    props: {
+      poppable: false,
+      defaultValue: '2022-03-18',
+      showTitle: true,
+      startDate: '2022-01-01',
+      endDate: '2022-12-31'
+    }
+  });
+  await nextTick();
+  expect(wrapper.find('.calendar-title').exists()).toBeTruthy();
+  await wrapper.setProps({ showTitle: false });
+  expect(wrapper.find('.calendar-title').exists()).toBeFalsy();
+});
+test('show-sub-title prop', async () => {
+  const wrapper = mount(Calendar, {
+    props: {
+      poppable: false,
+      defaultValue: '2022-03-18',
+      showSubTitle: true,
+      startDate: '2022-01-01',
+      endDate: '2022-12-31'
+    }
+  });
+  await nextTick();
+  expect(wrapper.find('.calendar-curr-month').exists()).toBeTruthy();
+  await wrapper.setProps({ showSubTitle: false });
+  expect(wrapper.find('.calendar-curr-month').exists()).toBeFalsy();
+});
+test('show-today prop', async () => {
+  const wrapper = mount(Calendar, {
+    props: {
+      poppable: false,
+      defaultValue: '2022-03-18',
+      showToday: true,
+      startDate: '2022-01-01',
+      endDate: '2022-12-31'
+    }
+  });
+  await nextTick();
+  expect(wrapper.find('.calendar-curr-tip-curr').exists()).toBeTruthy();
+  await wrapper.setProps({ showToday: false });
+  expect(wrapper.find('.calendar-curr-tip-curr').exists()).toBeFalsy();
+});
+
+test('should render slot correctly', async () => {
+  const wrapper = mount(Calendar, {
+    props: {
+      poppable: false,
+      defaultValue: '2022-03-18',
+      startDate: '2022-01-01',
+      endDate: '2022-12-31'
+    },
+    slots: {
+      btn: '<div class="d_div"> 最近七天</div>',
+      day: (date) => {
+        return `custom${date.date.day}`;
+      },
+      bottomInfo: (date) => `${date.date ? (date.date.day <= 10 ? '上旬' : date.date.day <= 20 ? '中旬' : '下旬') : ''}`
+    }
+  });
+  await nextTick();
+  expect(wrapper.find('.calendar-top-slot').html()).toContain('<div class="d_div"> 最近七天</div>');
+  expect(wrapper.find('.viewArea').html()).toMatchSnapshot();
+});
+
+test('select event when click item', async () => {
+  const wrapper = mount(Calendar, {
+    props: {
+      poppable: false,
+      defaultValue: '2022-03-18',
+      showToday: true,
+      isAutoBackFill: true,
+      startDate: '2022-01-01',
+      endDate: '2022-12-31'
+    }
+  });
+
+  await nextTick();
+  wrapper.findAll('.calendar-month-day')[15].trigger('click');
+  let arr: any = wrapper.emitted<[Date]>('select')![0][0];
+  expect(arr[3]).toEqual('2022-02-14');
+});
+test('choose event when click item', async () => {
+  const wrapper = mount(Calendar, {
+    props: {
+      poppable: false,
+      defaultValue: '2022-03-18',
+      showToday: true,
+      isAutoBackFill: true,
+      startDate: '2022-01-01',
+      endDate: '2022-12-31'
+    }
+  });
+
+  await nextTick();
+  wrapper.findAll('.calendar-month-day')[15].trigger('click');
+  let arr2: any = wrapper.emitted<[Date]>('choose')![0][0];
+  expect(arr2[3]).toEqual('2022-02-14');
+});

+ 1 - 0
src/packages/__VUE/calendar/index.taro.vue

@@ -62,6 +62,7 @@
     @select="select"
     :show-title="showTitle"
     :show-sub-title="showSubTitle"
+    :show-today="showToday"
   >
     <template v-slot:btn v-if="showTopBtn">
       <slot name="btn"> </slot>

+ 3 - 1
src/packages/__VUE/calendar/index.vue

@@ -22,13 +22,13 @@
       :start-text="startText"
       :end-text="endText"
       :default-value="defaultValue"
-      :show-today="showToday"
       :start-date="startDate"
       :end-date="endDate"
       @update="update"
       @close="close"
       @choose="choose"
       @select="select"
+      :show-today="showToday"
       :show-title="showTitle"
       :show-sub-title="showSubTitle"
     >
@@ -58,9 +58,11 @@
     :default-value="defaultValue"
     :start-date="startDate"
     :end-date="endDate"
+    @update="update"
     @close="close"
     @choose="choose"
     @select="select"
+    :show-today="showToday"
     :show-title="showTitle"
     :show-sub-title="showSubTitle"
   >