From 0cca7389d38b548db86966a347689dfda24015f3 Mon Sep 17 00:00:00 2001 From: JosonYang <258490116@qq.com> Date: Sun, 13 Mar 2022 23:57:16 +0800 Subject: [PATCH 1/3] test: add button & avatar unit test --- src/_common | 2 +- src/avatar/avatar-group-props.ts | 3 +- src/avatar/avatar.md | 4 +- src/avatar/props.ts | 5 +- src/avatar/type.ts | 2 +- src/button/button.md | 2 +- src/button/props.ts | 14 +- src/button/type.ts | 2 +- .../avatar/__snapshots__/props.test.js.snap | 147 ++++++++ test/unit/avatar/props.test.js | 76 +++++ .../button/__snapshots__/props.test.js.snap | 319 ++++++++++++++++++ test/unit/button/props.test.js | 155 +++++++++ 12 files changed, 717 insertions(+), 14 deletions(-) create mode 100644 test/unit/avatar/__snapshots__/props.test.js.snap create mode 100644 test/unit/avatar/props.test.js create mode 100644 test/unit/button/__snapshots__/props.test.js.snap create mode 100644 test/unit/button/props.test.js diff --git a/src/_common b/src/_common index 578cd570d..117de1651 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 578cd570d3de6104e4c581a5c401b535d470b82b +Subproject commit 117de165181401486d36eb18bde0f718f21e3ac5 diff --git a/src/avatar/avatar-group-props.ts b/src/avatar/avatar-group-props.ts index 0eeb28a30..2badfcd71 100644 --- a/src/avatar/avatar-group-props.ts +++ b/src/avatar/avatar-group-props.ts @@ -13,7 +13,8 @@ export default { type: String as PropType, 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`，`...`, `更多` */ diff --git a/src/avatar/avatar.md b/src/avatar/avatar.md index 7811f26da..2c559cba5 100644 --- a/src/avatar/avatar.md +++ b/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 diff --git a/src/avatar/props.ts b/src/avatar/props.ts index 48e8aef8f..ae59b0988 100644 --- a/src/avatar/props.ts +++ b/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, 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 */ diff --git a/src/avatar/type.ts b/src/avatar/type.ts index 5c5609bf1..0e2ceeec6 100644 --- a/src/avatar/type.ts +++ b/src/avatar/type.ts @@ -9,7 +9,7 @@ import { TNode } from '../common'; export interface TdAvatarProps { /** - * 头像替换文本，仅当图片存在时有效 + * 头像替换文本，仅当图片加载失败时有效 * @default '' */ alt?: string; diff --git a/src/button/button.md b/src/button/button.md index 02c53021c..6660283c8 100644 --- a/src/button/button.md +++ b/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 diff --git a/src/button/props.ts b/src/button/props.ts index 90ae0e874..715a52d8f 100644 --- a/src/button/props.ts +++ b/src/button/props.ts @@ -24,12 +24,13 @@ export default { }, /** 是否显示为加载状态 */ loading: Boolean, - /** 按钮形状，有二种：方形、圆角方形 */ + /** 按钮形状，有二种：方形、圆角方形 */ shape: { type: String as PropType, default: 'square' as TdButtonProps['shape'], validator(val: TdButtonProps['shape']): boolean { - return ['square', 'round'].includes(val!); + if (!val) return true; + return ['square', 'round'].includes(val); }, }, /** 组件尺寸 */ @@ -37,7 +38,8 @@ export default { type: String as PropType, 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); }, }, /** 组件风格，依次为品牌色、危险色 */ @@ -45,7 +47,8 @@ export default { type: String as PropType, 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); }, }, /** 按钮形式，基础、线框、文字 */ @@ -53,7 +56,8 @@ export default { type: String as PropType, 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); }, }, /** 点击时触发 */ diff --git a/src/button/type.ts b/src/button/type.ts index a2337e804..2952de23b 100644 --- a/src/button/type.ts +++ b/src/button/type.ts @@ -36,7 +36,7 @@ export interface TdButtonProps { */ loading?: boolean; /** - * 按钮形状，有二种：方形、圆角方形 + * 按钮形状，有二种：方形、圆角方形 * @default square */ shape?: 'square' | 'round'; diff --git a/test/unit/avatar/__snapshots__/props.test.js.snap b/test/unit/avatar/__snapshots__/props.test.js.snap new file mode 100644 index 000000000..e2aef1c44 --- /dev/null +++ b/test/unit/avatar/__snapshots__/props.test.js.snap @@ -0,0 +1,147 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Avatar :props alt 1`] = ` +
+
+ +
+ +
+`; + +exports[`Avatar :props badgeProps 1`] = ` +
+
+ +
+ +
+`; + +exports[`Avatar :props hideOnLoadFailed 1`] = ` +
+
+ + + +
+ +
+`; + +exports[`Avatar :props icon 1`] = ` +
+
+
+
+ text +
+
+
+ +
+`; + +exports[`Avatar :props icon 2`] = ` +
+
+
+ text +
+
+ +
+`; + +exports[`Avatar :props image 1`] = ` +
+
+ + + +
+ +
+`; + +exports[`Avatar :props shape 1`] = ` +
+
+ +
+ +
+`; + +exports[`Avatar :props shape 2`] = ` +
+
+ +
+ +
+`; + +exports[`Avatar :props size 1`] = ` +
+
+ +
+ +
+`; diff --git a/test/unit/avatar/props.test.js b/test/unit/avatar/props.test.js new file mode 100644 index 000000000..063c84e32 --- /dev/null +++ b/test/unit/avatar/props.test.js @@ -0,0 +1,76 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { mount } from '@vue/test-utils'; +import Avatar from '../../../src/avatar'; +import { h } from 'vue'; + +describe('Avatar', () => { + describe(':props', () => { + // 头像替换文本，仅当图片加载失败时有效: + it('alt', () => { + const wrapper = mount(Avatar, { + propsData: {"image":"https://tdesign.gtimg.com/mobile/demos/avatar_1.png","alt":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字: + it('badgeProps', () => { + const wrapper = mount(Avatar, { + propsData: {"image":"https://tdesign.gtimg.com/mobile/demos/avatar_1.png","badgeProps":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 加载失败时隐藏图片: false + it('hideOnLoadFailed', () => { + const wrapper = mount(Avatar, { + propsData: {"image":"https://tdesign.gtimg.com/mobile/demos/none.png","hideOnLoadFailed":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('icon', () => { + const fn = jest.fn(); + const wrapper = mount(Avatar, { + propsData: { + icon: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('icon', () => { + const fn = jest.fn(); + const wrapper = mount(Avatar, { + propsData: { + icon: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 图片地址: + it('image', () => { + const wrapper = mount(Avatar, { + propsData: {"image":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 形状: circle + it('shape', () => { + const wrapper = mount(Avatar, { + propsData: {"image":"https://tdesign.gtimg.com/mobile/demos/avatar_1.png","shape":"circle"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 形状: round + it('shape', () => { + const wrapper = mount(Avatar, { + propsData: {"image":"https://tdesign.gtimg.com/mobile/demos/avatar_1.png","shape":"round"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 尺寸，示例值：small/medium/large/24px/38px 等，默认为 large: + it('size', () => { + const wrapper = mount(Avatar, { + propsData: {"image":"https://tdesign.gtimg.com/mobile/demos/avatar_1.png","size":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + }); +}); \ No newline at end of file diff --git a/test/unit/button/__snapshots__/props.test.js.snap b/test/unit/button/__snapshots__/props.test.js.snap new file mode 100644 index 000000000..1a1e87ed2 --- /dev/null +++ b/test/unit/button/__snapshots__/props.test.js.snap @@ -0,0 +1,319 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Button :props block 1`] = ` + +`; + +exports[`Button :props content 1`] = ` + +`; + +exports[`Button :props content 2`] = ` + +`; + +exports[`Button :props disabled 1`] = ` + +`; + +exports[`Button :props disabled 2`] = ` + +`; + +exports[`Button :props ghost 1`] = ` + +`; + +exports[`Button :props icon 1`] = ` + +`; + +exports[`Button :props icon 2`] = ` + +`; + +exports[`Button :props loading 1`] = ` + +`; + +exports[`Button :props shape 1`] = ` + +`; + +exports[`Button :props shape 2`] = ` + +`; + +exports[`Button :props size 1`] = ` + +`; + +exports[`Button :props size 2`] = ` + +`; + +exports[`Button :props size 3`] = ` + +`; + +exports[`Button :props theme 1`] = ` + +`; + +exports[`Button :props theme 2`] = ` + +`; + +exports[`Button :props theme 3`] = ` + +`; + +exports[`Button :props variant 1`] = ` + +`; + +exports[`Button :props variant 2`] = ` + +`; + +exports[`Button :props variant 3`] = ` + +`; diff --git a/test/unit/button/props.test.js b/test/unit/button/props.test.js new file mode 100644 index 000000000..e0413569c --- /dev/null +++ b/test/unit/button/props.test.js @@ -0,0 +1,155 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { mount } from '@vue/test-utils'; +import Button from '../../../src/button'; +import { h } from 'vue'; + +describe('Button', () => { + describe(':props', () => { + // 是否为块级元素: false + it('block', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","block":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('content', () => { + const fn = jest.fn(); + const wrapper = mount(Button, { + propsData: { + content: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('content', () => { + const fn = jest.fn(); + const wrapper = mount(Button, { + propsData: { + content: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('disabled', () => { + const fn = jest.fn(); + const wrapper = mount(Button, { + propsData: { + disabled: true, + onClick: fn, + }, + }); + wrapper.trigger('click'); + expect(fn).not.toHaveBeenCalled(); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否禁用按钮: false + it('disabled', () => { + const wrapper = mount(Button, { + propsData: {"content":"按钮1","disabled":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否为幽灵按钮（镂空按钮）: false + it('ghost', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","ghost":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('icon', () => { + const fn = jest.fn(); + const wrapper = mount(Button, { + propsData: { + icon: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('icon', () => { + const fn = jest.fn(); + const wrapper = mount(Button, { + propsData: { + icon: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否显示为加载状态: false + it('loading', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","loading":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 按钮形状，有二种：方形、圆角方形 : square + it('shape', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","shape":"square"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 按钮形状，有二种：方形、圆角方形 : round + it('shape', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","shape":"round"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 组件尺寸: small + it('size', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","size":"small"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 组件尺寸: medium + it('size', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","size":"medium"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 组件尺寸: large + it('size', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","size":"large"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 组件风格，依次为品牌色、危险色: default + it('theme', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","theme":"default"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 组件风格，依次为品牌色、危险色: primary + it('theme', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","theme":"primary"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 组件风格，依次为品牌色、危险色: danger + it('theme', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","theme":"danger"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 按钮形式，基础、线框、文字: base + it('variant', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","variant":"base"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 按钮形式，基础、线框、文字: outline + it('variant', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","variant":"outline"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 按钮形式，基础、线框、文字: text + it('variant', () => { + const wrapper = mount(Button, { + propsData: {"content":"我是按钮","variant":"text"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + }); +}); \ No newline at end of file From cc58a908b54550d0804f65558d52f7d2e7ccebd7 Mon Sep 17 00:00:00 2001 From: JosonYang <258490116@qq.com> Date: Mon, 14 Mar 2022 10:33:31 +0800 Subject: [PATCH 2/3] test: add checkbox÷r&radio --- scripts/test/generate-coverage.js | 2 +- site/web/test-coverage.js | 135 ++-- src/_common | 2 +- src/badge/props.ts | 6 +- src/cell/props.ts | 3 +- src/checkbox/checkbox.md | 2 +- src/divider/props.ts | 6 +- .../back-top/__snapshots__/props.test.js.snap | 183 +++++ test/unit/back-top/props.test.js | 70 ++ .../badge/__snapshots__/props.test.js.snap | 159 ++++ test/unit/badge/props.test.js | 94 +++ .../cell/__snapshots__/props.test.js.snap | 270 +++++++ test/unit/cell/props.test.js | 171 +++++ test/unit/checkbox-group/props.test.js | 57 ++ .../checkbox/__snapshots__/props.test.js.snap | 708 ++++++++++++++++++ test/unit/checkbox/props.test.js | 162 ++++ .../divider/__snapshots__/props.test.js.snap | 104 +++ test/unit/divider/props.test.js | 95 +++ .../__snapshots__/props.test.js.snap | 45 ++ test/unit/radio-group/props.test.js | 51 ++ .../radio/__snapshots__/props.test.js.snap | 542 ++++++++++++++ test/unit/radio/props.test.js | 132 ++++ 22 files changed, 2941 insertions(+), 58 deletions(-) create mode 100644 test/unit/back-top/__snapshots__/props.test.js.snap create mode 100644 test/unit/back-top/props.test.js create mode 100644 test/unit/badge/__snapshots__/props.test.js.snap create mode 100644 test/unit/badge/props.test.js create mode 100644 test/unit/cell/__snapshots__/props.test.js.snap create mode 100644 test/unit/cell/props.test.js create mode 100644 test/unit/checkbox-group/props.test.js create mode 100644 test/unit/checkbox/__snapshots__/props.test.js.snap create mode 100644 test/unit/checkbox/props.test.js create mode 100644 test/unit/divider/__snapshots__/props.test.js.snap create mode 100644 test/unit/divider/props.test.js create mode 100644 test/unit/radio-group/__snapshots__/props.test.js.snap create mode 100644 test/unit/radio-group/props.test.js create mode 100644 test/unit/radio/__snapshots__/props.test.js.snap create mode 100644 test/unit/radio/props.test.js diff --git a/scripts/test/generate-coverage.js b/scripts/test/generate-coverage.js index 69086120e..bd7043812 100644 --- a/scripts/test/generate-coverage.js +++ b/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'); } }); diff --git a/site/web/test-coverage.js b/site/web/test-coverage.js index 726142386..7b1ecd607 100644 --- a/site/web/test-coverage.js +++ b/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%" } \ No newline at end of file diff --git a/src/_common b/src/_common index 117de1651..c550374f9 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 117de165181401486d36eb18bde0f718f21e3ac5 +Subproject commit c550374f92ed8a8b9da5cbb692a09c4cf2a6ba78 diff --git a/src/badge/props.ts b/src/badge/props.ts index 82ab48e12..c28af63a5 100644 --- a/src/badge/props.ts +++ b/src/badge/props.ts @@ -38,7 +38,8 @@ export default { type: String as PropType, 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, default: 'medium' as TdBadgeProps['size'], validator(val: TdBadgeProps['size']): boolean { - return ['small', 'medium'].includes(val!); + if (!val) return true; + return ['small', 'medium'].includes(val); }, }, }; diff --git a/src/cell/props.ts b/src/cell/props.ts index 72d77d73e..d023a2290 100644 --- a/src/cell/props.ts +++ b/src/cell/props.ts @@ -13,7 +13,8 @@ export default { type: String as PropType, 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); }, }, /** 是否显示右侧箭头 */ diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md index f2e196712..5f2d7f64f 100644 --- a/src/checkbox/checkbox.md +++ b/src/checkbox/checkbox.md @@ -19,7 +19,7 @@ label | String / Slot / Function | - | 主文案。TS 类型：`string | TNode` maxContentRow | Number | 5 | 内容最大行数限制 | N maxLabelRow | Number | 3 | 主文案最大行数限制 | N name | String | - | HTML 元素原生属性 | N -readonly | Boolean | false | 组件是否只读 | N +readonly | Boolean | false | 只读状态 | N value | String / Number | - | 复选框的值。TS 类型：`string | number` | N onChange | Function | | TS 类型：`(checked: boolean, context: { e: Event }) => void`
值变化时触发 | N diff --git a/src/divider/props.ts b/src/divider/props.ts index 7bd1d22c2..f0190b1bc 100644 --- a/src/divider/props.ts +++ b/src/divider/props.ts @@ -13,7 +13,8 @@ export default { type: String as PropType, default: 'center' as TdDividerProps['align'], validator(val: TdDividerProps['align']): boolean { - return ['left', 'right', 'center'].includes(val!); + if (!val) return true; + return ['left', 'right', 'center'].includes(val); }, }, /** 子元素 */ @@ -31,7 +32,8 @@ export default { type: String as PropType, default: 'horizontal' as TdDividerProps['layout'], validator(val: TdDividerProps['layout']): boolean { - return ['horizontal', 'vertical'].includes(val!); + if (!val) return true; + return ['horizontal', 'vertical'].includes(val); }, }, /** 分隔线颜色 */ diff --git a/test/unit/back-top/__snapshots__/props.test.js.snap b/test/unit/back-top/__snapshots__/props.test.js.snap new file mode 100644 index 000000000..d71da3e2b --- /dev/null +++ b/test/unit/back-top/__snapshots__/props.test.js.snap @@ -0,0 +1,183 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BackTop :props fixed 1`] = ` +
+ + + + + 返回 + +
+`; + +exports[`BackTop :props icon 1`] = ` +
+
+ text +
+ +
+`; + +exports[`BackTop :props icon 2`] = ` +
+ + + + +
+`; + +exports[`BackTop :props target 1`] = ` +
+ + + + + 返回 + +
+`; + +exports[`BackTop :props theme 1`] = ` +
+ + + + + 返回 + +
+`; + +exports[`BackTop :props theme 2`] = ` +
+ + + + + 返回 + +
+`; + +exports[`BackTop :props theme 3`] = ` +
+ + + + + 返回 + +
+`; + +exports[`BackTop :props theme 4`] = ` +
+ + + + + 返回 + +
+`; diff --git a/test/unit/back-top/props.test.js b/test/unit/back-top/props.test.js new file mode 100644 index 000000000..10d0c535b --- /dev/null +++ b/test/unit/back-top/props.test.js @@ -0,0 +1,70 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { mount } from '@vue/test-utils'; +import BackTop from '../../../src/back-top'; +import { h } from 'vue'; + +describe('BackTop', () => { + describe(':props', () => { + // 是否绝对定位固定到屏幕右下方: true + it('fixed', () => { + const wrapper = mount(BackTop, { + propsData: {"text":"返回","fixed":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('icon', () => { + const fn = jest.fn(); + const wrapper = mount(BackTop, { + propsData: { + icon: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('icon', () => { + const fn = jest.fn(); + const wrapper = mount(BackTop, { + propsData: { + icon: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 定位滚动到指定对象: + it('target', () => { + const wrapper = mount(BackTop, { + propsData: {"text":"返回","target":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 预设的样式类型: round + it('theme', () => { + const wrapper = mount(BackTop, { + propsData: {"text":"返回","theme":"round"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 预设的样式类型: half-round + it('theme', () => { + const wrapper = mount(BackTop, { + propsData: {"text":"返回","theme":"half-round"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 预设的样式类型: round-dark + it('theme', () => { + const wrapper = mount(BackTop, { + propsData: {"text":"返回","theme":"round-dark"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 预设的样式类型: half-round-dark + it('theme', () => { + const wrapper = mount(BackTop, { + propsData: {"text":"返回","theme":"half-round-dark"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + }); +}); \ No newline at end of file diff --git a/test/unit/badge/__snapshots__/props.test.js.snap b/test/unit/badge/__snapshots__/props.test.js.snap new file mode 100644 index 000000000..aec05f8c1 --- /dev/null +++ b/test/unit/badge/__snapshots__/props.test.js.snap @@ -0,0 +1,159 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Badge :props color 1`] = ` +
+
+ 0 +
+ 测试 +
+`; + +exports[`Badge :props count 1`] = ` +
+
+
+ text +
+
+ +
+`; + +exports[`Badge :props count 2`] = ` +
+
+ text +
+ +
+`; + +exports[`Badge :props dot 1`] = ` +
+
+ +
+ 测试 +
+`; + +exports[`Badge :props maxCount 1`] = ` +
+
+ 0 +
+ 测试 +
+`; + +exports[`Badge :props offset 1`] = ` +
+
+ 0 +
+ 测试 +
+`; + +exports[`Badge :props shape 1`] = ` +
+
+ 0 +
+ 测试 +
+`; + +exports[`Badge :props shape 2`] = ` +
+
+ 0 +
+ 测试 +
+`; + +exports[`Badge :props shape 3`] = ` +
+
+ 0 +
+ 测试 +
+`; + +exports[`Badge :props showZero 1`] = ` +
+
+ 0 +
+ 测试 +
+`; + +exports[`Badge :props size 1`] = ` +
+
+ 0 +
+ 测试 +
+`; + +exports[`Badge :props size 2`] = ` +
+
+ 0 +
+ 测试 +
+`; diff --git a/test/unit/badge/props.test.js b/test/unit/badge/props.test.js new file mode 100644 index 000000000..caec675f4 --- /dev/null +++ b/test/unit/badge/props.test.js @@ -0,0 +1,94 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { mount } from '@vue/test-utils'; +import Badge from '../../../src/badge'; +import { h } from 'vue'; + +describe('Badge', () => { + describe(':props', () => { + // 颜色: + it('color', () => { + const wrapper = mount(Badge, { + propsData: {"color":"","content":"测试"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('count', () => { + const fn = jest.fn(); + const wrapper = mount(Badge, { + propsData: { + count: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('count', () => { + const fn = jest.fn(); + const wrapper = mount(Badge, { + propsData: { + count: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否为红点: false + it('dot', () => { + const wrapper = mount(Badge, { + propsData: {"color":"green","content":"测试","dot":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 封顶的数字值: 99 + it('maxCount', () => { + const wrapper = mount(Badge, { + propsData: {"color":"green","content":"测试","maxCount":"99"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']: + it('offset', () => { + const wrapper = mount(Badge, { + propsData: {"color":"green","content":"测试","offset":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 形状: circle + it('shape', () => { + const wrapper = mount(Badge, { + propsData: {"color":"green","content":"测试","shape":"circle"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 形状: round + it('shape', () => { + const wrapper = mount(Badge, { + propsData: {"color":"green","content":"测试","shape":"round"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 形状: ribbon + it('shape', () => { + const wrapper = mount(Badge, { + propsData: {"color":"green","content":"测试","shape":"ribbon"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 当数值为 0 时，是否展示徽标: false + it('showZero', () => { + const wrapper = mount(Badge, { + propsData: {"color":"green","content":"测试","showZero":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 尺寸: small + it('size', () => { + const wrapper = mount(Badge, { + propsData: {"color":"green","content":"测试","size":"small"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 尺寸: medium + it('size', () => { + const wrapper = mount(Badge, { + propsData: {"color":"green","content":"测试","size":"medium"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + }); +}); \ No newline at end of file diff --git a/test/unit/cell/__snapshots__/props.test.js.snap b/test/unit/cell/__snapshots__/props.test.js.snap new file mode 100644 index 000000000..f08197496 --- /dev/null +++ b/test/unit/cell/__snapshots__/props.test.js.snap @@ -0,0 +1,270 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Cell :props align 1`] = ` +
+ + + + +
+`; + +exports[`Cell :props align 2`] = ` +
+ + + + +
+`; + +exports[`Cell :props align 3`] = ` +
+ + + + +
+`; + +exports[`Cell :props arrow 1`] = ` +
+ + + +
+ + + +
+
+`; + +exports[`Cell :props bordered 1`] = ` +
+ + + + +
+`; + +exports[`Cell :props description 1`] = ` +
+ + + + +
+`; + +exports[`Cell :props description 2`] = ` +
+ + + + +
+`; + +exports[`Cell :props hover 1`] = ` +
+ + + + +
+`; + +exports[`Cell :props image 1`] = ` +
+ + + + +
+`; + +exports[`Cell :props image 2`] = ` +
+ + + + +
+`; + +exports[`Cell :props leftIcon 1`] = ` +
+
+
+ text +
+
+ + + +
+`; + +exports[`Cell :props leftIcon 2`] = ` +
+
+ text +
+ + + +
+`; + +exports[`Cell :props note 1`] = ` +
+ + +
+
+ text +
+
+ +
+`; + +exports[`Cell :props note 2`] = ` +
+ + +
+ text +
+ +
+`; + +exports[`Cell :props required 1`] = ` +
+ + + + +
+`; + +exports[`Cell :props rightIcon 1`] = ` +
+ + + +
+
+ text +
+
+
+`; + +exports[`Cell :props rightIcon 2`] = ` +
+ + + +
+ text +
+
+`; + +exports[`Cell :props title 1`] = ` +
+ +
+
+ text +
+ + +
+ + +
+`; + +exports[`Cell :props title 2`] = ` +
+ +
+ text + + +
+ + +
+`; diff --git a/test/unit/cell/props.test.js b/test/unit/cell/props.test.js new file mode 100644 index 000000000..704343f83 --- /dev/null +++ b/test/unit/cell/props.test.js @@ -0,0 +1,171 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { mount } from '@vue/test-utils'; +import Cell from '../../../src/cell'; +import { h } from 'vue'; + +describe('Cell', () => { + describe(':props', () => { + // 内容的对齐方式，默认居中对齐: top + it('align', () => { + const wrapper = mount(Cell, { + propsData: {"align":"top"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 内容的对齐方式，默认居中对齐: middle + it('align', () => { + const wrapper = mount(Cell, { + propsData: {"align":"middle"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 内容的对齐方式，默认居中对齐: bottom + it('align', () => { + const wrapper = mount(Cell, { + propsData: {"align":"bottom"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否显示右侧箭头: false + it('arrow', () => { + const wrapper = mount(Cell, { + propsData: {"arrow":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否显示下边框: true + it('bordered', () => { + const wrapper = mount(Cell, { + propsData: {"bordered":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('description', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + description: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('description', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + description: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否开启点击反馈: + it('hover', () => { + const wrapper = mount(Cell, { + propsData: {"hover":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('image', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + image: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('image', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + image: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('leftIcon', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + leftIcon: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('leftIcon', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + leftIcon: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('note', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + note: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('note', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + note: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否显示表单必填星号: false + it('required', () => { + const wrapper = mount(Cell, { + propsData: {"required":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('rightIcon', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + rightIcon: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('rightIcon', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + rightIcon: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('title', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + title: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('title', () => { + const fn = jest.fn(); + const wrapper = mount(Cell, { + propsData: { + title: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + }); +}); \ No newline at end of file diff --git a/test/unit/checkbox-group/props.test.js b/test/unit/checkbox-group/props.test.js new file mode 100644 index 000000000..9b6aa19d3 --- /dev/null +++ b/test/unit/checkbox-group/props.test.js @@ -0,0 +1,57 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { mount } from '@vue/test-utils'; +import CheckboxGroup from '../../../src/checkbox-group'; +import { h } from 'vue'; + +describe('CheckboxGroup', () => { + describe(':props', () => { + + it('disabled', () => { + const fn = jest.fn(); + const wrapper = mount(CheckboxGroup, { + propsData: { + disabled: true, + onClick: fn, + }, + }); + wrapper.trigger('click'); + expect(fn).not.toHaveBeenCalled(); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否禁用组件: false + it('disabled', () => { + const wrapper = mount(CheckboxGroup, { + propsData: {"disabled":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 支持最多选中的数量: undefined + it('max', () => { + const wrapper = mount(CheckboxGroup, { + propsData: {"max":"undefined"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 统一设置内部复选框 HTML 属性: + it('name', () => { + const wrapper = mount(CheckboxGroup, { + propsData: {"name":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」: [] + it('options', () => { + const wrapper = mount(CheckboxGroup, { + propsData: {"options":"[]"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 选中值: [] + it('value', () => { + const wrapper = mount(CheckboxGroup, { + propsData: {"value":"[]"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + }); +}); \ No newline at end of file diff --git a/test/unit/checkbox/__snapshots__/props.test.js.snap b/test/unit/checkbox/__snapshots__/props.test.js.snap new file mode 100644 index 000000000..f775f6764 --- /dev/null +++ b/test/unit/checkbox/__snapshots__/props.test.js.snap @@ -0,0 +1,708 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Checkbox :props align 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props align 2`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props checkAll 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props checked 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props content 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props content 2`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props contentDisabled 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props default 1`] = ` +
+
+ + + + + + + +
+ text +
+ + +
+
+`; + +exports[`Checkbox :props default 2`] = ` +
+
+ + + + + + + + text + + +
+
+`; + +exports[`Checkbox :props disabled 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props icon 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props indeterminate 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props label 1`] = ` +
+
+ + + + + + + +
+ text +
+ + +
+
+`; + +exports[`Checkbox :props label 2`] = ` +
+
+ + + + + + + + text + + +
+
+`; + +exports[`Checkbox :props maxContentRow 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props maxLabelRow 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props name 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props readonly 1`] = ` +
+
+ + + + + + + + +
+
+`; + +exports[`Checkbox :props value 1`] = ` +
+
+ + + + + + + + +
+
+`; diff --git a/test/unit/checkbox/props.test.js b/test/unit/checkbox/props.test.js new file mode 100644 index 000000000..7752a474a --- /dev/null +++ b/test/unit/checkbox/props.test.js @@ -0,0 +1,162 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { mount } from '@vue/test-utils'; +import Checkbox from '../../../src/checkbox'; +import { h } from 'vue'; + +describe('Checkbox', () => { + describe(':props', () => { + // 复选框和内容相对位置: left + it('align', () => { + const wrapper = mount(Checkbox, { + propsData: {"align":"left"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 复选框和内容相对位置: right + it('align', () => { + const wrapper = mount(Checkbox, { + propsData: {"align":"right"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用: false + it('checkAll', () => { + const wrapper = mount(Checkbox, { + propsData: {"checkAll":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否选中: false + it('checked', () => { + const wrapper = mount(Checkbox, { + propsData: {"checked":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('content', () => { + const fn = jest.fn(); + const wrapper = mount(Checkbox, { + propsData: { + content: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('content', () => { + const fn = jest.fn(); + const wrapper = mount(Checkbox, { + propsData: { + content: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否禁用组件内容（content）触发选中: + it('contentDisabled', () => { + const wrapper = mount(Checkbox, { + propsData: {"contentDisabled":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('default', () => { + const fn = jest.fn(); + const wrapper = mount(Checkbox, { + propsData: { + default: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('default', () => { + const fn = jest.fn(); + const wrapper = mount(Checkbox, { + propsData: { + default: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('disabled', () => { + const fn = jest.fn(); + const wrapper = mount(Checkbox, { + propsData: { + disabled: true, + onClick: fn, + }, + }); + wrapper.trigger('click'); + expect(fn).not.toHaveBeenCalled(); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否禁用组件: undefined + it('disabled', () => { + const wrapper = mount(Checkbox, { + propsData: {"disabled":"undefined"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]: + it('icon', () => { + const wrapper = mount(Checkbox, { + propsData: {"icon":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否为半选: false + it('indeterminate', () => { + const wrapper = mount(Checkbox, { + propsData: {"indeterminate":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('label', () => { + const fn = jest.fn(); + const wrapper = mount(Checkbox, { + propsData: { + label: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('label', () => { + const fn = jest.fn(); + const wrapper = mount(Checkbox, { + propsData: { + label: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 内容最大行数限制: 5 + it('maxContentRow', () => { + const wrapper = mount(Checkbox, { + propsData: {"maxContentRow":"5"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 主文案最大行数限制: 3 + it('maxLabelRow', () => { + const wrapper = mount(Checkbox, { + propsData: {"maxLabelRow":"3"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// HTML 元素原生属性: + it('name', () => { + const wrapper = mount(Checkbox, { + propsData: {"name":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 只读状态: false + it('readonly', () => { + const wrapper = mount(Checkbox, { + propsData: {"readonly":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 复选框的值: + it('value', () => { + const wrapper = mount(Checkbox, { + propsData: {"value":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + }); +}); \ No newline at end of file diff --git a/test/unit/divider/__snapshots__/props.test.js.snap b/test/unit/divider/__snapshots__/props.test.js.snap new file mode 100644 index 000000000..58c2eb807 --- /dev/null +++ b/test/unit/divider/__snapshots__/props.test.js.snap @@ -0,0 +1,104 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Divider :props align 1`] = ` + +`; + +exports[`Divider :props align 2`] = ` + +`; + +exports[`Divider :props align 3`] = ` + +`; + +exports[`Divider :props content 1`] = ` + +`; + +exports[`Divider :props content 2`] = ` + +`; + +exports[`Divider :props dashed 1`] = ` + +`; + +exports[`Divider :props default 1`] = ` + +`; + +exports[`Divider :props default 2`] = ` + +`; + +exports[`Divider :props layout 1`] = ` + +`; + +exports[`Divider :props layout 2`] = ` + +`; + +exports[`Divider :props lineColor 1`] = ` + +`; diff --git a/test/unit/divider/props.test.js b/test/unit/divider/props.test.js new file mode 100644 index 000000000..a959e7486 --- /dev/null +++ b/test/unit/divider/props.test.js @@ -0,0 +1,95 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { mount } from '@vue/test-utils'; +import Divider from '../../../src/divider'; +import { h } from 'vue'; + +describe('Divider', () => { + describe(':props', () => { + // 文本位置（仅在水平分割线有效）: left + it('align', () => { + const wrapper = mount(Divider, { + propsData: {"align":"left"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 文本位置（仅在水平分割线有效）: right + it('align', () => { + const wrapper = mount(Divider, { + propsData: {"align":"right"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 文本位置（仅在水平分割线有效）: center + it('align', () => { + const wrapper = mount(Divider, { + propsData: {"align":"center"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('content', () => { + const fn = jest.fn(); + const wrapper = mount(Divider, { + propsData: { + content: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('content', () => { + const fn = jest.fn(); + const wrapper = mount(Divider, { + propsData: { + content: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否虚线（仅在水平分割线有效）: false + it('dashed', () => { + const wrapper = mount(Divider, { + propsData: {"dashed":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('default', () => { + const fn = jest.fn(); + const wrapper = mount(Divider, { + propsData: { + default: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('default', () => { + const fn = jest.fn(); + const wrapper = mount(Divider, { + propsData: { + default: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 分隔线类型有两种：水平和垂直: horizontal + it('layout', () => { + const wrapper = mount(Divider, { + propsData: {"layout":"horizontal"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 分隔线类型有两种：水平和垂直: vertical + it('layout', () => { + const wrapper = mount(Divider, { + propsData: {"layout":"vertical"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 分隔线颜色: + it('lineColor', () => { + const wrapper = mount(Divider, { + propsData: {"lineColor":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + }); +}); \ No newline at end of file diff --git a/test/unit/radio-group/__snapshots__/props.test.js.snap b/test/unit/radio-group/__snapshots__/props.test.js.snap new file mode 100644 index 000000000..7eb6a603a --- /dev/null +++ b/test/unit/radio-group/__snapshots__/props.test.js.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RadioGroup :props disabled 1`] = ` +
+ + + +
+`; + +exports[`RadioGroup :props name 1`] = ` +
+ + + +
+`; + +exports[`RadioGroup :props options 1`] = ` +
+ + + +
+`; + +exports[`RadioGroup :props value 1`] = ` +
+ + + +
+`; diff --git a/test/unit/radio-group/props.test.js b/test/unit/radio-group/props.test.js new file mode 100644 index 000000000..be8aa9898 --- /dev/null +++ b/test/unit/radio-group/props.test.js @@ -0,0 +1,51 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { mount } from '@vue/test-utils'; +import RadioGroup from '../../../src/radio-group'; +import { h } from 'vue'; + +describe('RadioGroup', () => { + describe(':props', () => { + + it('disabled', () => { + const fn = jest.fn(); + const wrapper = mount(RadioGroup, { + propsData: { + disabled: true, + onClick: fn, + }, + }); + wrapper.trigger('click'); + expect(fn).not.toHaveBeenCalled(); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否禁用全部子单选框: undefined + it('disabled', () => { + const wrapper = mount(RadioGroup, { + propsData: {"disabled":"undefined"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// HTML 元素原生属性: + it('name', () => { + const wrapper = mount(RadioGroup, { + propsData: {"name":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同: + it('options', () => { + const wrapper = mount(RadioGroup, { + propsData: {"options":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 选中的值: false + it('value', () => { + const wrapper = mount(RadioGroup, { + propsData: {"value":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + }); +}); \ No newline at end of file diff --git a/test/unit/radio/__snapshots__/props.test.js.snap b/test/unit/radio/__snapshots__/props.test.js.snap new file mode 100644 index 000000000..3b3e15947 --- /dev/null +++ b/test/unit/radio/__snapshots__/props.test.js.snap @@ -0,0 +1,542 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Radio :props align 1`] = ` +
+ + + + + + + + + + +
+`; + +exports[`Radio :props align 2`] = ` +
+ + + + + + + + + + +
+`; + +exports[`Radio :props checked 1`] = ` +
+ + + + + + + + + + +
+`; + +exports[`Radio :props content 1`] = ` +
+ + + + + + + + + +
+
+ text +
+
+ + + +
+`; + +exports[`Radio :props content 2`] = ` +
+ + + + + + + + + +
+ text +
+ + + +
+`; + +exports[`Radio :props contentDisabled 1`] = ` +
+ + + + + + + + + + +
+`; + +exports[`Radio :props default 1`] = ` +
+ + + + + + + + + +
+ text +
+ + + + + +
+`; + +exports[`Radio :props default 2`] = ` +
+ + + + + + + + + + text + + + + + +
+`; + +exports[`Radio :props disabled 1`] = ` +
+ + + + + + + + + + +
+`; + +exports[`Radio :props label 1`] = ` +
+ + + + + + + + + +
+ text +
+ + + + + +
+`; + +exports[`Radio :props label 2`] = ` +
+ + + + + + + + + + text + + + + + +
+`; + +exports[`Radio :props name 1`] = ` +
+ + + + + + + + + + +
+`; + +exports[`Radio :props value 1`] = ` +
+ + + + + + + + + + +
+`; diff --git a/test/unit/radio/props.test.js b/test/unit/radio/props.test.js new file mode 100644 index 000000000..32fa303ee --- /dev/null +++ b/test/unit/radio/props.test.js @@ -0,0 +1,132 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { mount } from '@vue/test-utils'; +import Radio from '../../../src/radio'; +import { h } from 'vue'; + +describe('Radio', () => { + describe(':props', () => { + // 复选框和内容相对位置: left + it('align', () => { + const wrapper = mount(Radio, { + propsData: {"align":"left"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 复选框和内容相对位置: right + it('align', () => { + const wrapper = mount(Radio, { + propsData: {"align":"right"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否选中: false + it('checked', () => { + const wrapper = mount(Radio, { + propsData: {"checked":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('content', () => { + const fn = jest.fn(); + const wrapper = mount(Radio, { + propsData: { + content: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('content', () => { + const fn = jest.fn(); + const wrapper = mount(Radio, { + propsData: { + content: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否禁用组件内容（content）触发选中: false + it('contentDisabled', () => { + const wrapper = mount(Radio, { + propsData: {"contentDisabled":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('default', () => { + const fn = jest.fn(); + const wrapper = mount(Radio, { + propsData: { + default: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('default', () => { + const fn = jest.fn(); + const wrapper = mount(Radio, { + propsData: { + default: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('disabled', () => { + const fn = jest.fn(); + const wrapper = mount(Radio, { + propsData: { + disabled: true, + onClick: fn, + }, + }); + wrapper.trigger('click'); + expect(fn).not.toHaveBeenCalled(); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 是否为禁用态: undefined + it('disabled', () => { + const wrapper = mount(Radio, { + propsData: {"disabled":"undefined"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。值为 fill-circle 表示图标为填充型图标，值为 stroke-line 表示图标为描边型图标: 'fill-circle' + it('icon', () => { + const wrapper = mount(Radio, { + propsData: {"icon":"'fill-circle'"}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + it('label', () => { + const fn = jest.fn(); + const wrapper = mount(Radio, { + propsData: { + label: () => h('div', 'text') + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + + it('label', () => { + const fn = jest.fn(); + const wrapper = mount(Radio, { + propsData: { + label: 'text' + }, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// HTML 元素原生属性: + it('name', () => { + const wrapper = mount(Radio, { + propsData: {"name":""}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + });// 单选按钮的值: false + it('value', () => { + const wrapper = mount(Radio, { + propsData: {"value":true}, + }); + expect(wrapper.wrapperElement).toMatchSnapshot(); + }); + }); +}); \ No newline at end of file From 743e43f7abce9ff617db83c9da77ef0f9cf4405e Mon Sep 17 00:00:00 2001 From: JosonYang <258490116@qq.com> Date: Thu, 17 Mar 2022 14:35:25 +0800 Subject: [PATCH 3/3] feat(search): add button ref --- scripts/test/setup.js | 3 +- src/_common | 2 +- src/check-group/index.ts | 5 - .../checkbox-group.md} | 0 .../checkbox-group.vue} | 4 +- src/checkbox-group/index.ts | 5 + .../style/css.js | 0 .../style/index.js | 0 src/checkbox/demos/group.vue | 4 +- src/checkbox/demos/mobile.vue | 20 +- src/components.ts | 2 +- src/image/image.md | 1 - src/image/props.ts | 6 +- src/search/search.vue | 7 +- test/ssr/__snapshots__/ssr.test.js.snap | 1344 ++++++++++++----- .../__snapshots__/props.test.js.snap | 28 + test/unit/checkbox-group/props.test.js | 24 - .../checkbox/__snapshots__/props.test.js.snap | 37 - test/unit/checkbox/props.test.js | 18 - .../image/__snapshots__/props.test.js.snap | 451 ++++++ test/unit/image/props.test.js | 119 ++ .../__snapshots__/props.test.js.snap | 11 - test/unit/radio-group/props.test.js | 18 - .../radio/__snapshots__/props.test.js.snap | 38 - test/unit/radio/props.test.js | 24 - 25 files changed, 1637 insertions(+), 534 deletions(-) delete mode 100644 src/check-group/index.ts rename src/{check-group/check-group.md => checkbox-group/checkbox-group.md} (100%) rename src/{check-group/check-group.vue => checkbox-group/checkbox-group.vue} (98%) create mode 100644 src/checkbox-group/index.ts rename src/{check-group => checkbox-group}/style/css.js (100%) rename src/{check-group => checkbox-group}/style/index.js (100%) create mode 100644 test/unit/checkbox-group/__snapshots__/props.test.js.snap create mode 100644 test/unit/image/__snapshots__/props.test.js.snap create mode 100644 test/unit/image/props.test.js diff --git a/scripts/test/setup.js b/scripts/test/setup.js index 7df51f440..4e0e6f597 100644 --- a/scripts/test/setup.js +++ b/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; }; diff --git a/src/_common b/src/_common index c550374f9..e4190e405 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit c550374f92ed8a8b9da5cbb692a09c4cf2a6ba78 +Subproject commit e4190e405044b5cca0782a5fedfa590ab624fe26 diff --git a/src/check-group/index.ts b/src/check-group/index.ts deleted file mode 100644 index 28534e58e..000000000 --- a/src/check-group/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import CheckGroup from './check-group.vue'; -import { withInstall, WithInstallType } from '../shared'; - -const _CheckGroup: WithInstallType = withInstall(CheckGroup); -export default _CheckGroup; diff --git a/src/check-group/check-group.md b/src/checkbox-group/checkbox-group.md similarity index 100% rename from src/check-group/check-group.md rename to src/checkbox-group/checkbox-group.md diff --git a/src/check-group/check-group.vue b/src/checkbox-group/checkbox-group.vue similarity index 98% rename from src/check-group/check-group.vue rename to src/checkbox-group/checkbox-group.vue index 12df3127d..0f269b653 100644 --- a/src/check-group/check-group.vue +++ b/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>([]); 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; diff --git a/src/checkbox-group/index.ts b/src/checkbox-group/index.ts new file mode 100644 index 000000000..2afd5f7b7 --- /dev/null +++ b/src/checkbox-group/index.ts @@ -0,0 +1,5 @@ +import CheckboxGroup from './checkbox-group.vue'; +import { withInstall, WithInstallType } from '../shared'; + +const _CheckboxGroup: WithInstallType = withInstall(CheckboxGroup); +export default _CheckboxGroup; diff --git a/src/check-group/style/css.js b/src/checkbox-group/style/css.js similarity index 100% rename from src/check-group/style/css.js rename to src/checkbox-group/style/css.js diff --git a/src/check-group/style/index.js b/src/checkbox-group/style/index.js similarity index 100% rename from src/check-group/style/index.js rename to src/checkbox-group/style/index.js diff --git a/src/checkbox/demos/group.vue b/src/checkbox/demos/group.vue index 44a264e40..a809151ee 100644 --- a/src/checkbox/demos/group.vue +++ b/src/checkbox/demos/group.vue @@ -1,10 +1,10 @@