test: add some unit tests (jd-opensource#2980)

src/packages/__VUE/calendar/__tests__/calendar.spec.tsx

@@ -0,0 +1,123 @@
+import { mount } from '@vue/test-utils';
+import { Calendar } from '@nutui/nutui';
+import { nextTick, ref } from 'vue';
+
+test('Calendar: props.showTitle', async () => {
+  const showTitle = ref(true);
+  const wrapper = mount(() => {
+    return <Calendar poppable={false} showTitle={showTitle.value} />;
+  });
+  expect(wrapper.find('.nut-calendar__header-title').exists()).toBeTruthy();
+  showTitle.value = false;
+  await nextTick();
+  expect(wrapper.find('.nut-calendar__header-title').exists()).toBeFalsy();
+});
+
+test('Calendar: props.showSubTitle', async () => {
+  const showSubTitle = ref(true);
+  const wrapper = mount(() => {
+    return <Calendar poppable={false} showSubTitle={showSubTitle.value} />;
+  });
+  expect(wrapper.find('.nut-calendar__header-subtitle').exists()).toBeTruthy();
+  showSubTitle.value = false;
+  await nextTick();
+  expect(wrapper.find('.nut-calendar__header-subtitle').exists()).toBeFalsy();
+});
+
+test('Calendar: props.showToday', async () => {
+  const showToday = ref(true);
+  const wrapper = mount(() => {
+    return <Calendar poppable={false} showToday={showToday.value} />;
+  });
+  await nextTick();
+  expect(wrapper.find('.nut-calendar__day-tips--curr').exists()).toBeTruthy();
+  showToday.value = false;
+  await nextTick();
+  expect(wrapper.find('.nut-calendar__day-tips--curr').exists()).toBeFalsy();
+});
+
+test('Calendar: props.firstDayOfWeek', async () => {
+  const wrapper = mount(() => {
+    return <Calendar poppable={false} firstDayOfWeek={2} startDate="2022-01-01" endDate="2022-01-31" />;
+  });
+  await nextTick();
+  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+  // 头部周第1个元素
+  const weekday = wrapper.findAll('.nut-calendar__weekday')[0].text();
+  expect(weekday).toEqual(weekdays[2]);
+  // 日期面板第7个元素, 判断最后一天的日期是否匹配
+  const calendarMonth = wrapper.find('.nut-calendar__month');
+  const monthTitle = calendarMonth.find('.nut-calendar__month-title').text();
+  const dayText = calendarMonth.findAll('.nut-calendar__day-value')[6].text();
+  const date = new Date(monthTitle.replace(/[年月]/g, '/') + dayText);
+  const index = date.getDay();
+  expect(index).toEqual(1);
+});
+
+test('Calendar: should render slot correctly', async () => {
+  const wrapper = mount(() => {
+    return (
+      <Calendar poppable={false} defaultValue="2022-03-18" startDate="2022-01-01" endDate="2022-12-31">
+        {{
+          btn: () => <div>近七天</div>,
+          'bottom-info': (date: any) =>
+            `${date.date ? (date.date.day <= 10 ? '上旬' : date.date.day <= 20 ? '中旬' : '下旬') : ''}`
+        }}
+      </Calendar>
+    );
+  });
+  await nextTick();
+  expect(wrapper.find('.nut-calendar__header').html()).toMatchSnapshot();
+  expect(wrapper.find('.nut-calendar__body').html()).toMatchSnapshot();
+});
+
+test('Calendar: scroll to date & click & choose event', async () => {
+  const onChoose = vi.fn();
+  const calRef = ref();
+  const wrapper = mount(() => {
+    return (
+      <Calendar
+        ref={calRef}
+        poppable={false}
+        defaultValue="2024-01-01"
+        startDate="2024-01-01"
+        endDate="2024-12-31"
+        onChoose={onChoose}
+      />
+    );
+  });
+
+  calRef.value.scrollToDate('2024-02-01');
+  await nextTick();
+  wrapper.findAll('.nut-calendar__days-item .nut-calendar__day')[2].trigger('click');
+  expect(onChoose).toBeCalledWith(['2024', '01', '02', '2024-01-02', '星期二']);
+  wrapper.findAll('.nut-calendar__days-item .nut-calendar__day')[15].trigger('click');
+  expect(onChoose).toBeCalledWith(['2024', '01', '15', '2024-01-15', '星期一']);
+});
+
+test('Calendar: customize the disable date', async () => {
+  const wrapper = mount(() => {
+    return (
+      <Calendar
+        poppable={false}
+        defaultValue="2024-01-01"
+        startDate="2024-01-01"
+        endDate="2024-12-31"
+        disabledDate={(date: string) => {
+          const disabledDate: { [key: string]: boolean } = {
+            '2024-01-05': true,
+            '2024-01-06': true,
+            '2024-01-10': true,
+            '2024-01-11': true,
+            '2024-01-12': true,
+            '2024-01-13': true,
+            '2024-01-14': true
+          };
+          return disabledDate[date];
+        }}
+      />
+    );
+  });
+  await nextTick();
+  expect(wrapper.findAll('.nut-calendar__day--disabled').length).toBeGreaterThan(7);
+});

src/packages/__VUE/invoice/__tests__/__snapshots__/invoice.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`base 1`] = `"<div class="nut-invoice"><form class="nut-form" action="#"><view class="nut-cell-group"><!--v-if--><!--v-if--><view class="nut-cell-group__wrap"><view class="nut-cell nut-form-item line" style=""><view class="nut-cell__title nut-form-item__label required">发票类型</view><view class="nut-cell__value nut-form-item__body"><view class="nut-form-item__body__slots"><view class="nut-radio-group nut-radio-group--vertical"><view class="nut-radio nut-radio--button "><view class="nut-radio__button nut-radio__button--active nut-radio__button--normal ">企业</view></view><view class="nut-radio nut-radio--button "><view class="nut-radio__button false nut-radio__button--normal ">个人或事业单位</view></view></view></view><!--v-if--></view></view><view class="nut-cell nut-form-item line" style=""><view class="nut-cell__title nut-form-item__label required">发票抬头</view><view class="nut-cell__value nut-form-item__body"><view class="nut-form-item__body__slots"><view class="nut-input nut-input--border nut-input-text"><view class="nut-input-value"><view class="nut-input-inner"><!--v-if--><view class="nut-input-box"><input type="text" class="input-text" style="text-align: left;" maxlength="" placeholder="请输入发票抬头" format-trigger="onChange" enterkeyhint="done"><!--v-if--></view><!--v-if--><view class="nut-input-right-box"></view></view></view></view></view><!--v-if--></view></view><view class="nut-cell nut-form-item line" style=""><view class="nut-cell__title nut-form-item__label">纳税人识别号</view><view class="nut-cell__value nut-form-item__body"><view class="nut-form-item__body__slots"><view class="nut-input nut-input--border nut-input-text"><view class="nut-input-value"><view class="nut-input-inner"><!--v-if--><view class="nut-input-box"><input type="text" class="input-text" style="text-align: left;" maxlength="" placeholder="请输入纳税人识别号" format-trigger="onChange" enterkeyhint="done"><!--v-if--></view><!--v-if--><view class="nut-input-right-box"></view></view></view></view></view><!--v-if--></view></view><view class="nut-cell nut-form-item line" style=""><view class="nut-cell__title nut-form-item__label required">注册地址</view><view class="nut-cell__value nut-form-item__body"><view class="nut-form-item__body__slots"><view class="nut-input nut-input--border nut-input-text"><view class="nut-input-value"><view class="nut-input-inner"><!--v-if--><view class="nut-input-box"><input type="text" class="input-text" style="text-align: left;" maxlength="" placeholder="请输入注册地址" format-trigger="onChange" enterkeyhint="done"><!--v-if--></view><!--v-if--><view class="nut-input-right-box"></view></view></view></view></view><!--v-if--></view></view><view class="nut-cell nut-form-item line" style=""><view class="nut-cell__title nut-form-item__label required">注册电话</view><view class="nut-cell__value nut-form-item__body"><view class="nut-form-item__body__slots"><view class="nut-input nut-input--border nut-input-text"><view class="nut-input-value"><view class="nut-input-inner"><!--v-if--><view class="nut-input-box"><input type="text" class="input-text" style="text-align: left;" maxlength="" placeholder="请输入注册电话" format-trigger="onChange" enterkeyhint="done"><!--v-if--></view><!--v-if--><view class="nut-input-right-box"></view></view></view></view></view><!--v-if--></view></view><view class="nut-cell nut-form-item line" style=""><view class="nut-cell__title nut-form-item__label">开户行</view><view class="nut-cell__value nut-form-item__body"><view class="nut-form-item__body__slots"><view class="nut-input nut-input--border nut-input-text"><view class="nut-input-value"><view class="nut-input-inner"><!--v-if--><view class="nut-input-box"><input type="text" class="input-text" style="text-align: left;" maxlength="" placeholder="请输入开户行" format-trigger="onChange" enterkeyhint="done"><!--v-if--></view><!--v-if--><view class="nut-input-right-box"></view></view></view></view></view><!--v-if--></view></view><view class="nut-cell nut-form-item line" style=""><view class="nut-cell__title nut-form-item__label">银行账户</view><view class="nut-cell__value nut-form-item__body"><view class="nut-form-item__body__slots"><view class="nut-input nut-input--border nut-input-text"><view class="nut-input-value"><view class="nut-input-inner"><!--v-if--><view class="nut-input-box"><input type="text" class="input-text" style="text-align: left;" maxlength="" placeholder="请输入银行账户" format-trigger="onChange" enterkeyhint="done"><!--v-if--></view><!--v-if--><view class="nut-input-right-box"></view></view></view></view></view><!--v-if--></view></view></view></view></form><div class="nut-invoice__submit"><view class="nut-button nut-button--primary nut-button--normal nut-button--round nut-button--block"><view class="nut-button__wrap"><!--v-if--><!--v-if--><view class="">提交审批</view></view></view></div></div>"`;

src/packages/__VUE/invoice/__tests__/invoice.spec.tsx

@@ -0,0 +1,93 @@
+import { mount } from '@vue/test-utils';
+import { Invoice, type InvoiceDataItem } from '@nutui/nutui';
+import { ref } from 'vue';
+
+test('base', () => {
+  const asyncValidator = (val: string) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
+      }, 1000);
+    });
+  };
+  const data = ref<InvoiceDataItem[]>([
+    {
+      type: 'radio',
+      label: '发票类型',
+      radioLabel: [
+        {
+          label: '企业'
+        },
+        {
+          label: '个人或事业单位'
+        }
+      ],
+      formItemProp: 'type',
+      required: true
+    },
+    {
+      label: '发票抬头',
+      placeholder: '请输入发票抬头',
+      formItemProp: 'name',
+      rules: [{ required: true, message: '请输入发票抬头' }],
+      required: true
+    },
+    {
+      label: '纳税人识别号',
+      placeholder: '请输入纳税人识别号',
+      formItemProp: 'num',
+      rules: [{ message: '请输入纳税人识别号' }]
+    },
+    {
+      label: '注册地址',
+      placeholder: '请输入注册地址',
+      formItemProp: 'adress',
+      rules: [{ required: true, message: '请输入地址' }],
+      required: true
+    },
+    {
+      label: '注册电话',
+      placeholder: '请输入注册电话',
+      formItemProp: 'tel',
+      rules: [
+        { required: true, message: '请输入联系电话' },
+        { validator: asyncValidator, message: '电话格式不正确' }
+      ],
+      required: true
+    },
+    {
+      label: '开户行',
+      placeholder: '请输入开户行',
+      formItemProp: 'bank'
+    },
+    {
+      label: '银行账户',
+      placeholder: '请输入银行账户',
+      formItemProp: 'account'
+    }
+  ]);
+
+  const formValue = ref({
+    type: '企业',
+    name: '',
+    num: '',
+    adress: '',
+    tel: '',
+    address: '',
+    bank: '',
+    account: ''
+  });
+
+  const submit = (valid: boolean, errors: any) => {
+    if (valid) {
+      console.log('success', formValue.value);
+    } else {
+      console.log('error submit!!', errors);
+    }
+  };
+  const wrapper = mount(() => {
+    return <Invoice data={data.value} formValue={formValue.value} onSubmit={submit} />;
+  });
+  const invoice = wrapper.find('.nut-invoice');
+  expect(invoice.element.outerHTML).toMatchSnapshot();
+});

src/packages/__VUE/signature/__tests__/__snapshots__/signature.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`props custom-class 1`] = `"data:image/png;base64,00"`;