fix: unit test

feat-dayjs
Amour1688 2020-10-17 11:22:41 +08:00
parent 01096b556d
commit 8eb6afb9b0
12 changed files with 105 additions and 82 deletions

View File

@ -42,7 +42,7 @@ const responsiveObserve = {
if (!subscribers.size) this.unregister(); if (!subscribers.size) this.unregister();
}, },
unregister() { unregister() {
Object.keys(responsiveMap).forEach((screen: Breakpoint) => { Object.keys(responsiveMap).forEach((screen: string) => {
const matchMediaQuery = responsiveMap[screen]!; const matchMediaQuery = responsiveMap[screen]!;
const handler = this.matchHandlers[matchMediaQuery]; const handler = this.matchHandlers[matchMediaQuery];
handler?.mql.removeListener(handler?.listener); handler?.mql.removeListener(handler?.listener);
@ -50,7 +50,7 @@ const responsiveObserve = {
subscribers.clear(); subscribers.clear();
}, },
register() { register() {
Object.keys(responsiveMap).forEach((screen: Breakpoint) => { Object.keys(responsiveMap).forEach((screen: string) => {
const matchMediaQuery = responsiveMap[screen]!; const matchMediaQuery = responsiveMap[screen]!;
const listener = ({ matches }: { matches: boolean }) => { const listener = ({ matches }: { matches: boolean }) => {
this.dispatch({ this.dispatch({

View File

@ -19,17 +19,10 @@ const AffixMounter = {
render() { render() {
return ( return (
<div> <div ref="container" class="container">
<div ref="container" class="container"> <Affix class="fixed" target={() => this.$refs.container} ref="affix">
<Affix <Button type="primary">Fixed at the top of container</Button>
class="fixed" </Affix>
target={() => this.$refs.container}
ref="affix"
{...{ props: this.$props }}
>
<Button type="primary">Fixed at the top of container</Button>
</Affix>
</div>
</div> </div>
); );
}, },

View File

@ -140,6 +140,6 @@ AutoComplete.install = function(app: App) {
}; };
export default AutoComplete as typeof AutoComplete & { export default AutoComplete as typeof AutoComplete & {
readonly Option: typeof AutoComplete.Option; readonly Option: typeof Option;
readonly OptGroup: typeof AutoComplete.OptGroup; readonly OptGroup: typeof OptGroup;
}; };

View File

@ -59,7 +59,7 @@ exports[`Button should not render as link button when href is undefined 1`] = `
`; `;
exports[`Button should support link button 1`] = ` exports[`Button should support link button 1`] = `
<a target="_blank" href="http://ant.design" class="ant-btn"> <a target="_blank" class="ant-btn" href="http://ant.design">
<!----><span>link button</span> <!----><span>link button</span>
</a> </a>
`; `;

View File

@ -96,7 +96,7 @@ const Card = defineComponent({
} = this.$props; } = this.$props;
const { $slots } = this; const { $slots } = this;
const children = getSlot(this); const children = getSlot(this);
const getPrefixCls = this.configProvider.getPrefixCls; const { getPrefixCls } = this.configProvider;
const prefixCls = getPrefixCls('card', customizePrefixCls); const prefixCls = getPrefixCls('card', customizePrefixCls);
const tabBarExtraContent = getComponent(this, 'tabBarExtraContent'); const tabBarExtraContent = getComponent(this, 'tabBarExtraContent');

View File

@ -19,9 +19,9 @@ export default defineComponent({
props: { props: {
name: PropTypes.string, name: PropTypes.string,
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
defaultValue: { type: Array as PropType<Array<CheckboxValueType>>}, defaultValue: { type: Array as PropType<Array<CheckboxValueType>> },
value: { type: Array as PropType<Array<CheckboxValueType>>}, value: { type: Array as PropType<Array<CheckboxValueType>> },
options: {type: Array as PropType<Array<CheckboxOptionType | string>>}, options: { type: Array as PropType<Array<CheckboxOptionType | string>> },
disabled: PropTypes.looseBool, disabled: PropTypes.looseBool,
onChange: PropTypes.func, onChange: PropTypes.func,
}, },
@ -48,7 +48,7 @@ export default defineComponent({
}, },
methods: { methods: {
getOptions() { getOptions() {
const { options, $slots } = this; const { options = [], $slots } = this;
return options.map(option => { return options.map(option => {
if (typeof option === 'string') { if (typeof option === 'string') {
return { return {

View File

@ -8,11 +8,11 @@ describe('ConfigProvider', () => {
mountTest({ mountTest({
render() { render() {
return ( return (
<div> <>
<ConfigProvider> <ConfigProvider>
<div /> <div />
</ConfigProvider> </ConfigProvider>
</div> </>
); );
}, },
}); });

View File

@ -89,16 +89,16 @@ const ACol = defineComponent<ColProps>({
let mergedStyle: CSSProperties = {}; let mergedStyle: CSSProperties = {};
if (gutter) { if (gutter) {
mergedStyle = { mergedStyle = {
...(gutter[0]! > 0 ...(gutter[0] > 0
? { ? {
paddingLeft: gutter[0]! / 2, paddingLeft: `${gutter[0] / 2}px`,
paddingRight: gutter[0]! / 2, paddingRight: `${gutter[0] / 2}px`,
} }
: {}), : {}),
...(gutter[1]! > 0 ...(gutter[1] > 0
? { ? {
paddingTop: gutter[1]! / 2, paddingTop: `${gutter[1] / 2}px`,
paddingBottom: gutter[1]! / 2, paddingBottom: `${gutter[1] / 2}px`,
} }
: {}), : {}),
...mergedStyle, ...mergedStyle,
@ -109,7 +109,7 @@ const ACol = defineComponent<ColProps>({
} }
return ( return (
<div style={mergedStyle} class={classes}> <div class={classes} style={mergedStyle}>
{slots.default?.()} {slots.default?.()}
</div> </div>
); );

View File

@ -104,16 +104,16 @@ const ARow = defineComponent<RowProps>({
[`${prefixCls}-${align}`]: align, [`${prefixCls}-${align}`]: align,
}); });
const rowStyle = { const rowStyle = {
...(gutter[0]! > 0 ...(gutter[0] > 0
? { ? {
marginLeft: gutter[0]! / -2, marginLeft: `${gutter[0] / -2}px`,
marginRight: gutter[0]! / -2, marginRight: `${gutter[0] / -2}px`,
} }
: {}), : {}),
...(gutter[1]! > 0 ...(gutter[1] > 0
? { ? {
marginTop: gutter[1]! / -2, marginTop: `${gutter[1] / -2}px`,
marginBottom: gutter[1]! / 2, marginBottom: `${gutter[1] / -2}px`,
} }
: {}), : {}),
}; };

View File

@ -3,12 +3,24 @@
exports[`Grid renders wrapped Col correctly 1`] = ` exports[`Grid renders wrapped Col correctly 1`] = `
<div class="ant-row" style="margin-left: -10px; margin-right: -10px;"> <div class="ant-row" style="margin-left: -10px; margin-right: -10px;">
<div> <div>
<div class="ant-col ant-col-12" style="padding-left: 10px; padding-right: 10px;"></div> <div class="ant-col ant-col-12" style="padding-left: 10px; padding-right: 10px;">
<!---->
</div>
</div>
<div class="ant-col ant-col-12" style="padding-left: 10px; padding-right: 10px;">
<!---->
</div> </div>
<div class="ant-col ant-col-12" style="padding-left: 10px; padding-right: 10px;"></div>
</div> </div>
`; `;
exports[`Grid should render Col 1`] = `<div class="ant-col ant-col-2"></div>`; exports[`Grid should render Col 1`] = `
<div class="ant-col ant-col-2">
<!---->
</div>
`;
exports[`Grid should render Row 1`] = `<div class="ant-row"></div>`; exports[`Grid should render Row 1`] = `
<div class="ant-row">
<!---->
</div>
`;

View File

@ -31,26 +31,29 @@ export interface InternalSelectProps<VT> extends Omit<RcSelectProps<VT>, 'mode'>
} }
export interface SelectPropsTypes<VT> export interface SelectPropsTypes<VT>
extends Omit<InternalSelectProps<VT>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill' | 'class' | 'style'> { extends Omit<
InternalSelectProps<VT>,
'inputIcon' | 'mode' | 'getInputElement' | 'backfill' | 'class' | 'style'
> {
mode?: 'multiple' | 'tags'; mode?: 'multiple' | 'tags';
} }
export type SelectTypes = SelectPropsTypes<SelectValue> export type SelectTypes = SelectPropsTypes<SelectValue>;
export const SelectProps = { export const SelectProps = {
...omit(props, ['inputIcon' ,'mode' ,'getInputElement' ,'backfill' ,'class' ,'style']), ...omit(props, ['inputIcon', 'mode', 'getInputElement', 'backfill', 'class', 'style']),
value: { value: {
type: [Array, Object, String, Number] as PropType<SelectValue> type: [Array, Object, String, Number] as PropType<SelectValue>,
}, },
defaultValue: { defaultValue: {
type: [Array, Object, String, Number] as PropType<SelectValue> type: [Array, Object, String, Number] as PropType<SelectValue>,
}, },
suffixIcon: PropTypes.VNodeChild, suffixIcon: PropTypes.VNodeChild,
itemIcon: PropTypes.VNodeChild, itemIcon: PropTypes.VNodeChild,
size: PropTypes.oneOf(tuple('small', 'middle', 'large', undefined, 'default')), 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), bordered: PropTypes.looseBool.def(true),
transitionName: PropTypes.string.def('slide-up'), transitionName: PropTypes.string.def('slide-up'),
choiceTransitionName: PropTypes.string.def(''), choiceTransitionName: PropTypes.string.def(''),
} };
const Select = defineComponent({ const Select = defineComponent({
name: 'ASelect', name: 'ASelect',
@ -60,7 +63,7 @@ const Select = defineComponent({
props: SelectProps, props: SelectProps,
SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE', SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
emits: ['change', 'update:value'], emits: ['change', 'update:value'],
setup(props: any, {attrs, emit}) { setup(props: any, { attrs, emit }) {
const selectRef = ref(null); const selectRef = ref(null);
const configProvider = inject('configProvider', defaultConfigProvider); const configProvider = inject('configProvider', defaultConfigProvider);
@ -77,8 +80,8 @@ const Select = defineComponent({
} }
}; };
const mode = computed(()=>{ const mode = computed(() => {
const { mode } = props const { mode } = props;
if ((mode as any) === 'combobox') { if ((mode as any) === 'combobox') {
return undefined; return undefined;
@ -91,32 +94,41 @@ const Select = defineComponent({
return mode; return mode;
}); });
const mergedClassName = computed(()=> classNames( const mergedClassName = computed(() =>
{ classNames(
[`${props.prefixCls}-lg`]: props.size === 'large', {
[`${props.prefixCls}-sm`]: props.size === 'small', [`${props.prefixCls}-lg`]: props.size === 'large',
[`${props.prefixCls}-rtl`]: props.direction === 'rtl', [`${props.prefixCls}-sm`]: props.size === 'small',
[`${props.prefixCls}-borderless`]: !props.bordered, [`${props.prefixCls}-rtl`]: props.direction === 'rtl',
}, [`${props.prefixCls}-borderless`]: !props.bordered,
attrs.class, },
)); attrs.class,
const triggerChange=(...args: any[])=>{ ),
console.log(args) );
emit('update:value', ...args) const triggerChange = (...args: any[]) => {
emit('change', ...args) console.log(args);
} emit('update:value', ...args);
emit('change', ...args);
};
return { return {
mergedClassName, mergedClassName,
mode, mode,
focus, focus,
blur, blur,
configProvider, configProvider,
triggerChange triggerChange,
} };
}, },
render() { render() {
const {configProvider, mode, mergedClassName,triggerChange, $slots: slots, $props} = this as any; const {
const props: SelectTypes = $props configProvider,
mode,
mergedClassName,
triggerChange,
$slots: slots,
$props,
} = this as any;
const props: SelectTypes = $props;
const { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
notFoundContent, notFoundContent,
@ -126,10 +138,14 @@ const Select = defineComponent({
dropdownClassName, dropdownClassName,
direction, direction,
virtual, virtual,
dropdownMatchSelectWidth dropdownMatchSelectWidth,
} = props; } = props;
const { getPrefixCls, renderEmpty, getPopupContainer: getContextPopupContainer } = configProvider const {
getPrefixCls,
renderEmpty,
getPopupContainer: getContextPopupContainer,
} = configProvider;
const prefixCls = getPrefixCls('select', customizePrefixCls); const prefixCls = getPrefixCls('select', customizePrefixCls);
const isMultiple = mode === 'multiple' || mode === 'tags'; const isMultiple = mode === 'multiple' || mode === 'tags';
@ -138,8 +154,8 @@ const Select = defineComponent({
let mergedNotFound: VNodeChild; let mergedNotFound: VNodeChild;
if (notFoundContent !== undefined) { if (notFoundContent !== undefined) {
mergedNotFound = notFoundContent; mergedNotFound = notFoundContent;
} else if(slots.notFoundContent){ } else if (slots.notFoundContent) {
mergedNotFound = slots.notFoundContent() mergedNotFound = slots.notFoundContent();
} else if (mode === 'combobox') { } else if (mode === 'combobox') {
mergedNotFound = null; mergedNotFound = null;
} else { } else {
@ -147,11 +163,14 @@ const Select = defineComponent({
} }
// ===================== Icons ===================== // ===================== Icons =====================
const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons({ const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons(
...this.$props, {
multiple: isMultiple, ...this.$props,
prefixCls, multiple: isMultiple,
}, slots); prefixCls,
},
slots,
);
const selectProps = omit(props, [ const selectProps = omit(props, [
'prefixCls', 'prefixCls',
@ -187,9 +206,9 @@ const Select = defineComponent({
onChange={triggerChange} onChange={triggerChange}
> >
{slots?.default()} {slots?.default()}
</RcSelect> </RcSelect>;
} },
}) });
/* istanbul ignore next */ /* istanbul ignore next */
Select.install = function(app: App) { Select.install = function(app: App) {
app.component(Select.name, Select); app.component(Select.name, Select);

View File

@ -73,7 +73,6 @@ export const props = {
// Options // Options
options: PropTypes.array, options: PropTypes.array,
children: PropTypes.array.def([]),
mode: PropTypes.string, mode: PropTypes.string,
// Value // Value
@ -163,7 +162,7 @@ export const props = {
* Do not use in production environment. * Do not use in production environment.
*/ */
internalProps: PropTypes.object.def({}), internalProps: PropTypes.object.def({}),
} };
export interface SelectProps<OptionsType extends object[], ValueType> { export interface SelectProps<OptionsType extends object[], ValueType> {
prefixCls?: string; prefixCls?: string;