From 8eb6afb9b08e4ca80feb3a8204870a3ed0bd1d4b Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Sat, 17 Oct 2020 11:22:41 +0800 Subject: [PATCH] fix: unit test --- components/_util/responsiveObserve.ts | 4 +- components/affix/__tests__/index.test.js | 15 +-- components/auto-complete/index.tsx | 4 +- .../__snapshots__/index.test.js.snap | 2 +- components/card/Card.tsx | 2 +- components/checkbox/Group.tsx | 8 +- .../config-provider/__tests__/index.test.js | 4 +- components/grid/Col.tsx | 14 +-- components/grid/Row.tsx | 12 +-- .../__snapshots__/index.test.js.snap | 20 +++- components/select/index.tsx | 99 +++++++++++-------- components/vc-select2/generate.tsx | 3 +- 12 files changed, 105 insertions(+), 82 deletions(-) diff --git a/components/_util/responsiveObserve.ts b/components/_util/responsiveObserve.ts index b4b744664..7fc1cbf53 100644 --- a/components/_util/responsiveObserve.ts +++ b/components/_util/responsiveObserve.ts @@ -42,7 +42,7 @@ const responsiveObserve = { if (!subscribers.size) this.unregister(); }, unregister() { - Object.keys(responsiveMap).forEach((screen: Breakpoint) => { + Object.keys(responsiveMap).forEach((screen: string) => { const matchMediaQuery = responsiveMap[screen]!; const handler = this.matchHandlers[matchMediaQuery]; handler?.mql.removeListener(handler?.listener); @@ -50,7 +50,7 @@ const responsiveObserve = { subscribers.clear(); }, register() { - Object.keys(responsiveMap).forEach((screen: Breakpoint) => { + Object.keys(responsiveMap).forEach((screen: string) => { const matchMediaQuery = responsiveMap[screen]!; const listener = ({ matches }: { matches: boolean }) => { this.dispatch({ diff --git a/components/affix/__tests__/index.test.js b/components/affix/__tests__/index.test.js index f0b9354d5..d8422deef 100644 --- a/components/affix/__tests__/index.test.js +++ b/components/affix/__tests__/index.test.js @@ -19,17 +19,10 @@ const AffixMounter = { render() { return ( -
-
- this.$refs.container} - ref="affix" - {...{ props: this.$props }} - > - - -
+
+ this.$refs.container} ref="affix"> + +
); }, diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index 08c2063b2..60f946ad6 100644 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -140,6 +140,6 @@ AutoComplete.install = function(app: App) { }; export default AutoComplete as typeof AutoComplete & { - readonly Option: typeof AutoComplete.Option; - readonly OptGroup: typeof AutoComplete.OptGroup; + readonly Option: typeof Option; + readonly OptGroup: typeof OptGroup; }; diff --git a/components/button/__tests__/__snapshots__/index.test.js.snap b/components/button/__tests__/__snapshots__/index.test.js.snap index b45ab8461..845b99e3a 100644 --- a/components/button/__tests__/__snapshots__/index.test.js.snap +++ b/components/button/__tests__/__snapshots__/index.test.js.snap @@ -59,7 +59,7 @@ exports[`Button should not render as link button when href is undefined 1`] = ` `; exports[`Button should support link button 1`] = ` - + link button `; diff --git a/components/card/Card.tsx b/components/card/Card.tsx index c969ee6a3..6a40f3416 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -96,7 +96,7 @@ const Card = defineComponent({ } = this.$props; const { $slots } = this; const children = getSlot(this); - const getPrefixCls = this.configProvider.getPrefixCls; + const { getPrefixCls } = this.configProvider; const prefixCls = getPrefixCls('card', customizePrefixCls); const tabBarExtraContent = getComponent(this, 'tabBarExtraContent'); diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx index 1cfe27638..ee3fb8a0e 100644 --- a/components/checkbox/Group.tsx +++ b/components/checkbox/Group.tsx @@ -19,9 +19,9 @@ export default defineComponent({ props: { name: PropTypes.string, prefixCls: PropTypes.string, - defaultValue: { type: Array as PropType>}, - value: { type: Array as PropType>}, - options: {type: Array as PropType>}, + defaultValue: { type: Array as PropType> }, + value: { type: Array as PropType> }, + options: { type: Array as PropType> }, disabled: PropTypes.looseBool, onChange: PropTypes.func, }, @@ -48,7 +48,7 @@ export default defineComponent({ }, methods: { getOptions() { - const { options, $slots } = this; + const { options = [], $slots } = this; return options.map(option => { if (typeof option === 'string') { return { diff --git a/components/config-provider/__tests__/index.test.js b/components/config-provider/__tests__/index.test.js index 34c5b691d..6e563182a 100644 --- a/components/config-provider/__tests__/index.test.js +++ b/components/config-provider/__tests__/index.test.js @@ -8,11 +8,11 @@ describe('ConfigProvider', () => { mountTest({ render() { return ( -
+ <>
-
+ ); }, }); diff --git a/components/grid/Col.tsx b/components/grid/Col.tsx index bac7e59e1..d1b0ee783 100644 --- a/components/grid/Col.tsx +++ b/components/grid/Col.tsx @@ -89,16 +89,16 @@ const ACol = defineComponent({ let mergedStyle: CSSProperties = {}; if (gutter) { mergedStyle = { - ...(gutter[0]! > 0 + ...(gutter[0] > 0 ? { - paddingLeft: gutter[0]! / 2, - paddingRight: gutter[0]! / 2, + paddingLeft: `${gutter[0] / 2}px`, + paddingRight: `${gutter[0] / 2}px`, } : {}), - ...(gutter[1]! > 0 + ...(gutter[1] > 0 ? { - paddingTop: gutter[1]! / 2, - paddingBottom: gutter[1]! / 2, + paddingTop: `${gutter[1] / 2}px`, + paddingBottom: `${gutter[1] / 2}px`, } : {}), ...mergedStyle, @@ -109,7 +109,7 @@ const ACol = defineComponent({ } return ( -
+
{slots.default?.()}
); diff --git a/components/grid/Row.tsx b/components/grid/Row.tsx index 8c7a5f25f..ae7f3a9ee 100644 --- a/components/grid/Row.tsx +++ b/components/grid/Row.tsx @@ -104,16 +104,16 @@ const ARow = defineComponent({ [`${prefixCls}-${align}`]: align, }); const rowStyle = { - ...(gutter[0]! > 0 + ...(gutter[0] > 0 ? { - marginLeft: gutter[0]! / -2, - marginRight: gutter[0]! / -2, + marginLeft: `${gutter[0] / -2}px`, + marginRight: `${gutter[0] / -2}px`, } : {}), - ...(gutter[1]! > 0 + ...(gutter[1] > 0 ? { - marginTop: gutter[1]! / -2, - marginBottom: gutter[1]! / 2, + marginTop: `${gutter[1] / -2}px`, + marginBottom: `${gutter[1] / -2}px`, } : {}), }; diff --git a/components/grid/__tests__/__snapshots__/index.test.js.snap b/components/grid/__tests__/__snapshots__/index.test.js.snap index d0976028f..dd1aea276 100644 --- a/components/grid/__tests__/__snapshots__/index.test.js.snap +++ b/components/grid/__tests__/__snapshots__/index.test.js.snap @@ -3,12 +3,24 @@ exports[`Grid renders wrapped Col correctly 1`] = `
-
+
+ +
+
+
+
-
`; -exports[`Grid should render Col 1`] = `
`; +exports[`Grid should render Col 1`] = ` +
+ +
+`; -exports[`Grid should render Row 1`] = `
`; +exports[`Grid should render Row 1`] = ` +
+ +
+`; diff --git a/components/select/index.tsx b/components/select/index.tsx index 84592ea11..c2062ab6e 100644 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -31,26 +31,29 @@ export interface InternalSelectProps extends Omit, 'mode'> } export interface SelectPropsTypes - extends Omit, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill' | 'class' | 'style'> { + extends Omit< + InternalSelectProps, + 'inputIcon' | 'mode' | 'getInputElement' | 'backfill' | 'class' | 'style' + > { mode?: 'multiple' | 'tags'; } -export type SelectTypes = SelectPropsTypes +export type SelectTypes = SelectPropsTypes; export const SelectProps = { - ...omit(props, ['inputIcon' ,'mode' ,'getInputElement' ,'backfill' ,'class' ,'style']), + ...omit(props, ['inputIcon', 'mode', 'getInputElement', 'backfill', 'class', 'style']), value: { - type: [Array, Object, String, Number] as PropType + type: [Array, Object, String, Number] as PropType, }, defaultValue: { - type: [Array, Object, String, Number] as PropType + type: [Array, Object, String, Number] as PropType, }, suffixIcon: PropTypes.VNodeChild, itemIcon: PropTypes.VNodeChild, size: PropTypes.oneOf(tuple('small', 'middle', 'large', undefined, 'default')), - mode: PropTypes.oneOf(tuple('multiple', 'tags')), + mode: PropTypes.oneOf(tuple('multiple', 'tags', 'SECRET_COMBOBOX_MODE_DO_NOT_USE')), bordered: PropTypes.looseBool.def(true), transitionName: PropTypes.string.def('slide-up'), choiceTransitionName: PropTypes.string.def(''), -} +}; const Select = defineComponent({ name: 'ASelect', @@ -60,7 +63,7 @@ const Select = defineComponent({ props: SelectProps, SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE', emits: ['change', 'update:value'], - setup(props: any, {attrs, emit}) { + setup(props: any, { attrs, emit }) { const selectRef = ref(null); const configProvider = inject('configProvider', defaultConfigProvider); @@ -77,8 +80,8 @@ const Select = defineComponent({ } }; - const mode = computed(()=>{ - const { mode } = props + const mode = computed(() => { + const { mode } = props; if ((mode as any) === 'combobox') { return undefined; @@ -91,32 +94,41 @@ const Select = defineComponent({ return mode; }); - const mergedClassName = computed(()=> classNames( - { - [`${props.prefixCls}-lg`]: props.size === 'large', - [`${props.prefixCls}-sm`]: props.size === 'small', - [`${props.prefixCls}-rtl`]: props.direction === 'rtl', - [`${props.prefixCls}-borderless`]: !props.bordered, - }, - attrs.class, - )); - const triggerChange=(...args: any[])=>{ - console.log(args) - emit('update:value', ...args) - emit('change', ...args) - } + const mergedClassName = computed(() => + classNames( + { + [`${props.prefixCls}-lg`]: props.size === 'large', + [`${props.prefixCls}-sm`]: props.size === 'small', + [`${props.prefixCls}-rtl`]: props.direction === 'rtl', + [`${props.prefixCls}-borderless`]: !props.bordered, + }, + attrs.class, + ), + ); + const triggerChange = (...args: any[]) => { + console.log(args); + emit('update:value', ...args); + emit('change', ...args); + }; return { mergedClassName, mode, focus, blur, configProvider, - triggerChange - } + triggerChange, + }; }, render() { - const {configProvider, mode, mergedClassName,triggerChange, $slots: slots, $props} = this as any; - const props: SelectTypes = $props + const { + configProvider, + mode, + mergedClassName, + triggerChange, + $slots: slots, + $props, + } = this as any; + const props: SelectTypes = $props; const { prefixCls: customizePrefixCls, notFoundContent, @@ -126,10 +138,14 @@ const Select = defineComponent({ dropdownClassName, direction, virtual, - dropdownMatchSelectWidth + dropdownMatchSelectWidth, } = props; - const { getPrefixCls, renderEmpty, getPopupContainer: getContextPopupContainer } = configProvider + const { + getPrefixCls, + renderEmpty, + getPopupContainer: getContextPopupContainer, + } = configProvider; const prefixCls = getPrefixCls('select', customizePrefixCls); const isMultiple = mode === 'multiple' || mode === 'tags'; @@ -138,8 +154,8 @@ const Select = defineComponent({ let mergedNotFound: VNodeChild; if (notFoundContent !== undefined) { mergedNotFound = notFoundContent; - } else if(slots.notFoundContent){ - mergedNotFound = slots.notFoundContent() + } else if (slots.notFoundContent) { + mergedNotFound = slots.notFoundContent(); } else if (mode === 'combobox') { mergedNotFound = null; } else { @@ -147,11 +163,14 @@ const Select = defineComponent({ } // ===================== Icons ===================== - const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons({ - ...this.$props, - multiple: isMultiple, - prefixCls, - }, slots); + const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons( + { + ...this.$props, + multiple: isMultiple, + prefixCls, + }, + slots, + ); const selectProps = omit(props, [ 'prefixCls', @@ -187,9 +206,9 @@ const Select = defineComponent({ onChange={triggerChange} > {slots?.default()} - - } -}) + ; + }, +}); /* istanbul ignore next */ Select.install = function(app: App) { app.component(Select.name, Select); diff --git a/components/vc-select2/generate.tsx b/components/vc-select2/generate.tsx index 230ec974a..663c1f286 100644 --- a/components/vc-select2/generate.tsx +++ b/components/vc-select2/generate.tsx @@ -73,7 +73,6 @@ export const props = { // Options options: PropTypes.array, - children: PropTypes.array.def([]), mode: PropTypes.string, // Value @@ -163,7 +162,7 @@ export const props = { * Do not use in production environment. */ internalProps: PropTypes.object.def({}), -} +}; export interface SelectProps { prefixCls?: string;