Merge pull request #31 from Tencent/feat/unit-test

Feat/unit test

scripts/test/generate-coverage.js

@@ -38,7 +38,7 @@ fs.readFile(resolveCwd('test/unit/coverage/index.html'), 'utf8', (err, html) =>
     });
 
     const finalRes = `module.exports = ${JSON.stringify(result, null, 2)}`;
-    fs.writeFileSync(resolveCwd('site/sites/test-coverage.js'), finalRes);
+    fs.writeFileSync(resolveCwd('site/web/test-coverage.js'), finalRes);
     console.log('successful re-generate coverage');
   }
 });

scripts/test/setup.js

@@ -2,13 +2,14 @@ import { config } from '@vue/test-utils';
 import { createApp } from 'vue';
 import { renderToString } from '@vue/server-renderer';
 import TDesign from '@/index';
+import DemoBlock from '../../site/mobile/components/demo-block.vue';
 
 config.global.plugins = [TDesign];
 
 config.global.createSSRApp = (comp) => {
   const app = createApp(comp);
   app.config.globalProperties.$route = {};
-  app.use(TDesign);
+  app.use(TDesign).component('tdesign-demo-block', DemoBlock);
   const html = renderToString(app);
   return html;
 };

site/web/test-coverage.js

@@ -1,118 +1,153 @@
 module.exports = {
-  "": "93.1%",
-  "actionSheet": "84.61%",
+  "": "93.84%",
+  "actionSheet": "24.48%",
   "actionSheet/demos": "0%",
   "actionSheet/style": "0%",
-  "badge": "100%",
+  "avatar": "91.17%",
+  "avatarGroup": "35.89%",
+  "avatarGroup/style": "0%",
+  "avatar/demos": "0%",
+  "avatar/style": "0%",
+  "backTop": "93.93%",
+  "backTop/demos": "0%",
+  "backTop/style": "0%",
+  "badge": "88.57%",
+  "badge/demos": "0%",
   "badge/style": "0%",
-  "button": "100%",
-  "buttonGroup": "100%",
+  "button": "91.17%",
+  "buttonGroup": "83.33%",
   "buttonGroup/style": "0%",
   "button/demos": "0%",
   "button/style": "0%",
   "cell": "100%",
-  "cellGroup": "100%",
+  "cellGroup": "92.85%",
   "cellGroup/style": "0%",
   "cell/demos": "0%",
   "cell/style": "0%",
-  "checkGroup": "100%",
+  "checkGroup": "13.97%",
   "checkGroup/style": "0%",
-  "checkbox": "61.4%",
+  "checkbox": "35.41%",
   "checkbox/demos": "0%",
   "checkbox/style": "0%",
-  "collapse": "41.02%",
+  "collapse": "27.1%",
   "collapse/demos": "0%",
   "collapse/style": "0%",
-  "countDown": "100%",
+  "countDown": "73.68%",
   "countDown/demos": "0%",
   "countDown/style": "0%",
-  "dialog": "34.78%",
+  "dateTimePicker": "12.3%",
+  "dateTimePicker/demos": "0%",
+  "dateTimePicker/style": "0%",
+  "dialog": "24.13%",
   "dialog/demos": "0%",
   "dialog/style": "0%",
-  "divider": "80%",
+  "divider": "70%",
   "divider/style": "0%",
-  "drawer": "100%",
+  "drawer": "42.85%",
   "drawer/demos": "0%",
   "drawer/style": "0%",
-  "dropdownMenu": "34.37%",
+  "dropdownMenu": "0%",
   "dropdownMenu/demos": "0%",
   "dropdownMenu/style": "0%",
-  "fab": "100%",
+  "fab": "57.14%",
   "fab/style": "0%",
-  "icon/demos": "0%",
-  "indexes": "100%",
+  "grid": "41.07%",
+  "grid/demos": "0%",
+  "grid/style": "0%",
+  "image": "31.37%",
+  "imageViewer": "8.62%",
+  "imageViewer/demos": "0%",
+  "imageViewer/style": "0%",
+  "image/demos": "0%",
+  "image/style": "0%",
+  "indexes": "23.89%",
   "indexes/demos": "0%",
   "indexes/style": "0%",
-  "input": "80%",
+  "input": "29.82%",
   "input/demos": "0%",
   "input/style": "0%",
-  "mask": "100%",
+  "list": "26.49%",
+  "list/demos": "0%",
+  "list/style": "0%",
+  "loading": "39.13%",
+  "loading/demos": "0%",
+  "loading/icon": "57.14%",
+  "loading/style": "0%",
+  "mask": "76.92%",
   "mask/demos": "0%",
   "mask/style": "0%",
-  "message": "41.93%",
+  "message": "32.75%",
   "message/demos": "0%",
   "message/style": "0%",
-  "navbar": "100%",
+  "navbar": "50%",
   "navbar/demos": "0%",
   "navbar/style": "0%",
-  "noticeBar": "88.88%",
+  "noticeBar": "0%",
   "noticeBar/demos": "0%",
   "noticeBar/style": "0%",
-  "picker": "11.04%",
+  "picker": "12.65%",
   "picker/demos": "0%",
   "picker/style": "0%",
-  "popup": "77.77%",
+  "popup": "34.88%",
   "popup/demos": "0%",
   "popup/style": "0%",
-  "preview": "100%",
-  "preview/demos": "0%",
-  "preview/style": "0%",
-  "progress": "72.72%",
-  "progress/demos": "0%",
+  "progress": "54.54%",
   "progress/style": "0%",
-  "radio": "90.9%",
-  "radioGroup": "100%",
+  "radio": "32.72%",
+  "radioGroup": "48%",
   "radioGroup/style": "0%",
   "radio/demos": "0%",
   "radio/style": "0%",
-  "rate": "100%",
+  "rate": "30%",
   "rate/demos": "0%",
   "rate/style": "0%",
-  "searchField": "100%",
-  "searchField/demos": "0%",
-  "searchField/style": "0%",
-  "segmentedControl": "100%",
-  "segmentedControl/demos": "0%",
-  "segmentedControl/style": "0%",
-  "shared": "55.26%",
-  "shared/useCountDown": "16.66%",
-  "shared/useToggle": "63.63%",
-  "slider": "8.57%",
+  "search": "28.94%",
+  "search/demos": "0%",
+  "search/style": "0%",
+  "shared": "66.66%",
+  "shared/useChildSlots": "10.52%",
+  "shared/useCountDown": "21.05%",
+  "shared/useDefault": "7.89%",
+  "shared/useEmitEvent": "33.33%",
+  "shared/useInterval": "0%",
+  "shared/useToggle": "14.28%",
+  "skeleton": "31.25%",
+  "skeleton/demos": "0%",
+  "skeleton/style": "0%",
+  "slider": "10.28%",
   "slider/demos": "0%",
   "slider/style": "0%",
-  "stepper": "90.9%",
+  "stepper": "35.55%",
   "stepper/demos": "0%",
   "stepper/style": "0%",
-  "steps": "80%",
+  "steps": "32.46%",
   "steps/demos": "0%",
   "steps/style": "0%",
+  "sticky": "29.78%",
+  "sticky/demos": "0%",
+  "sticky/style": "0%",
   "style": "0%",
-  "swiper": "80%",
+  "swipeCell": "15.38%",
+  "swipeCell/demos": "0%",
+  "swipeCell/style": "0%",
+  "swiper": "14.28%",
   "swiper/demos": "0%",
   "swiper/style": "0%",
-  "switch": "100%",
+  "switch": "51.72%",
   "switch/demos": "0%",
   "switch/style": "0%",
-  "tabBar": "70%",
+  "tabBar": "40.9%",
   "tabBar/demos": "0%",
   "tabBar/style": "0%",
-  "tabs": "85.71%",
+  "tabs": "29%",
   "tabs/demos": "0%",
   "tabs/style": "0%",
-  "tag": "24.59%",
+  "tag": "39.7%",
   "tag/demos": "0%",
   "tag/style": "0%",
-  "toast": "35%",
+  "textarea": "23.07%",
+  "textarea/style": "0%",
+  "toast": "34.32%",
   "toast/demos": "0%",
   "toast/style": "0%"
 }

src/avatar/avatar-group-props.ts

@@ -13,7 +13,8 @@ export default {
     type: String as PropType<TdAvatarGroupProps['cascading']>,
     default: 'right-up' as TdAvatarGroupProps['cascading'],
     validator(val: TdAvatarGroupProps['cascading']): boolean {
-      return ['left-up', 'right-up'].includes(val!);
+      if (!val) return true;
+      return ['left-up', 'right-up'].includes(val);
     },
   },
   /** 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` */

src/avatar/avatar.md

@@ -5,8 +5,8 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-alt | String | - | 头像替换文本，仅当图片存在时有效 | N
-badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`TdBadgeProps` `import { TdBadgeProps } from '@Badge'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/avatar/type.ts) | N
+alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
+badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/avatar/type.ts) | N
 hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N
 icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 image | String | - | 图片地址 | N

src/avatar/props.ts

@@ -8,7 +8,7 @@ import { TdAvatarProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  /** 头像替换文本，仅当图片存在时有效 */
+  /** 头像替换文本，仅当图片加载失败时有效 */
   alt: {
     type: String,
     default: '',
@@ -33,7 +33,8 @@ export default {
     type: String as PropType<TdAvatarProps['shape']>,
     default: 'circle' as TdAvatarProps['shape'],
     validator(val: TdAvatarProps['shape']): boolean {
-      return ['circle', 'round'].includes(val!);
+      if (!val) return true;
+      return ['circle', 'round'].includes(val);
     },
   },
   /** 尺寸，示例值：small/medium/large/24px/38px 等，默认为 large */

src/avatar/type.ts

@@ -9,7 +9,7 @@ import { TNode } from '../common';
 
 export interface TdAvatarProps {
   /**
-   * 头像替换文本，仅当图片存在时有效
+   * 头像替换文本，仅当图片加载失败时有效
    * @default ''
    */
   alt?: string;

src/badge/props.ts

@@ -38,7 +38,8 @@ export default {
     type: String as PropType<TdBadgeProps['shape']>,
     default: 'circle' as TdBadgeProps['shape'],
     validator(val: TdBadgeProps['shape']): boolean {
-      return ['circle', 'round', 'ribbon'].includes(val!);
+      if (!val) return true;
+      return ['circle', 'round', 'ribbon'].includes(val);
     },
   },
   /** 当数值为 0 时，是否展示徽标 */
@@ -48,7 +49,8 @@ export default {
     type: String as PropType<TdBadgeProps['size']>,
     default: 'medium' as TdBadgeProps['size'],
     validator(val: TdBadgeProps['size']): boolean {
-      return ['small', 'medium'].includes(val!);
+      if (!val) return true;
+      return ['small', 'medium'].includes(val);
     },
   },
 };

src/button/button.md

@@ -11,7 +11,7 @@ disabled | Boolean | false | 是否禁用按钮 | N
 ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
 icon | Slot / Function | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 loading | Boolean | false | 是否显示为加载状态 | N
-shape | String | square | 按钮形状，有二种：方形、圆角方形。可选项：square/round | N
+shape | String | square | 按钮形状，有二种：方形、圆角方形 。可选项：square/round | N
 size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger | N
 variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/text | N

src/button/props.ts

@@ -24,36 +24,40 @@ export default {
   },
   /** 是否显示为加载状态 */
   loading: Boolean,
-  /** 按钮形状，有二种：方形、圆角方形 */
+  /** 按钮形状，有二种：方形、圆角方形  */
   shape: {
     type: String as PropType<TdButtonProps['shape']>,
     default: 'square' as TdButtonProps['shape'],
     validator(val: TdButtonProps['shape']): boolean {
-      return ['square', 'round'].includes(val!);
+      if (!val) return true;
+      return ['square', 'round'].includes(val);
     },
   },
   /** 组件尺寸 */
   size: {
     type: String as PropType<TdButtonProps['size']>,
     default: 'medium' as TdButtonProps['size'],
     validator(val: TdButtonProps['size']): boolean {
-      return ['small', 'medium', 'large'].includes(val!);
+      if (!val) return true;
+      return ['small', 'medium', 'large'].includes(val);
     },
   },
   /** 组件风格，依次为品牌色、危险色 */
   theme: {
     type: String as PropType<TdButtonProps['theme']>,
     default: 'default' as TdButtonProps['theme'],
     validator(val: TdButtonProps['theme']): boolean {
-      return ['default', 'primary', 'danger'].includes(val!);
+      if (!val) return true;
+      return ['default', 'primary', 'danger'].includes(val);
     },
   },
   /** 按钮形式，基础、线框、文字 */
   variant: {
     type: String as PropType<TdButtonProps['variant']>,
     default: 'base' as TdButtonProps['variant'],
     validator(val: TdButtonProps['variant']): boolean {
-      return ['base', 'outline', 'text'].includes(val!);
+      if (!val) return true;
+      return ['base', 'outline', 'text'].includes(val);
     },
   },
   /** 点击时触发 */

src/button/type.ts

@@ -36,7 +36,7 @@ export interface TdButtonProps {
    */
   loading?: boolean;
   /**
-   * 按钮形状，有二种：方形、圆角方形
+   * 按钮形状，有二种：方形、圆角方形 
    * @default square
    */
   shape?: 'square' | 'round';

src/cell/props.ts

@@ -13,7 +13,8 @@ export default {
     type: String as PropType<TdCellProps['align']>,
     default: 'middle' as TdCellProps['align'],
     validator(val: TdCellProps['align']): boolean {
-      return ['top', 'middle', 'bottom'].includes(val!);
+      if (!val) return true;
+      return ['top', 'middle', 'bottom'].includes(val);
     },
   },
   /** 是否显示右侧箭头 */

src/check-group/check-group.vue → src/checkbox-group/checkbox-group.vue

@@ -30,7 +30,7 @@ import {
 import { useChildSlots, useDefault } from '../shared';
 
 const { prefix } = config;
-const name = `${prefix}-check-group`;
+const name = `${prefix}-checkbox-group`;
 
 export interface Child {
   value: string | number;
@@ -54,7 +54,7 @@ export default defineComponent({
     const checkedMap = ref({});
     const optionList = ref<Array<CheckboxOptionObj>>([]);
     const intersectionLen = computed(() => {
-      const values = optionList.value.map((item) => item.value);
+      const values = optionList.value?.map((item) => item.value);
       if (groupCheckValue.value instanceof Array) {
         const n = intersection(groupCheckValue.value, values);
         return n.length;