From c304ebb54f3afa657b5c648b5fba9f0b1a6a03af Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Fri, 21 Jan 2022 17:40:30 +0800 Subject: [PATCH] refactor: cascader --- components/calendar/Header.tsx | 4 +- .../__tests__/__snapshots__/demo.test.js.snap | 149 ++++++++++-- .../__snapshots__/index.test.js.snap | 230 +++++++++++------- components/cascader/__tests__/index.test.js | 40 ++- .../generatePicker/generateRangePicker.tsx | 4 +- .../generatePicker/generateSinglePicker.tsx | 18 +- .../date-picker/generatePicker/props.ts | 4 +- .../__tests__/__snapshots__/demo.test.js.snap | 14 +- .../__tests__/__snapshots__/demo.test.js.snap | 10 +- .../__tests__/__snapshots__/demo.test.js.snap | 10 +- .../__tests__/__snapshots__/demo.test.js.snap | 8 +- .../__tests__/__snapshots__/demo.test.js.snap | 2 +- .../__tests__/__snapshots__/demo.test.js.snap | 43 +++- .../__tests__/__snapshots__/demo.test.js.snap | 15 +- .../__tests__/__snapshots__/demo.test.js.snap | 91 +++++-- .../__tests__/__snapshots__/demo.test.js.snap | 204 ++++++++++------ components/vc-select/BaseSelect.tsx | 6 + 17 files changed, 595 insertions(+), 257 deletions(-) diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index 4140751bf..0c122df61 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -45,7 +45,7 @@ function YearSelect(props: SharedProps) { options={options} value={year} class={`${prefixCls}-year-select`} - onChange={numYear => { + onChange={(numYear: number) => { let newDate = generateConfig.setYear(value, numYear); if (validRange) { @@ -108,7 +108,7 @@ function MonthSelect(props: SharedProps) { class={`${prefixCls}-month-select`} value={month} options={options} - onChange={newMonth => { + onChange={(newMonth: number) => { onChange(generateConfig.setMonth(value, newMonth)); }} getPopupContainer={() => divRef!.value!} diff --git a/components/cascader/__tests__/__snapshots__/demo.test.js.snap b/components/cascader/__tests__/__snapshots__/demo.test.js.snap index 4b5c340a7..3be89ef1c 100644 --- a/components/cascader/__tests__/__snapshots__/demo.test.js.snap +++ b/components/cascader/__tests__/__snapshots__/demo.test.js.snap @@ -1,62 +1,159 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/cascader/demo/basic.vue correctly 1`] = ` - - +
+ + +
+ Please select +
+ +
`; exports[`renders ./components/cascader/demo/change-on-select.vue correctly 1`] = ` - - +
+ + +
+ Please select +
+ +
`; -exports[`renders ./components/cascader/demo/custom-render.vue correctly 1`] = `Zhejiang /Hangzhou /West Lake ( 752100 ) `; +exports[`renders ./components/cascader/demo/custom-render.vue correctly 1`] = ` +
+ + +
Zhejiang ( ) + +
+
+`; -exports[`renders ./components/cascader/demo/custom-trigger.vue correctly 1`] = `Unselect   Change city`; +exports[`renders ./components/cascader/demo/custom-trigger.vue correctly 1`] = `Unselect   Change city`; exports[`renders ./components/cascader/demo/disabled-option.vue correctly 1`] = ` - - +
+ + +
+ Please select +
+ +
`; exports[`renders ./components/cascader/demo/fields-name.vue correctly 1`] = ` - - +
+ + +
+ Please select +
+ +
`; exports[`renders ./components/cascader/demo/hover.vue correctly 1`] = ` - - +
+ + +
+ Please select +
+ +
`; exports[`renders ./components/cascader/demo/lazy.vue correctly 1`] = ` - - +
+ + +
+ Please select +
+ +
+`; + +exports[`renders ./components/cascader/demo/multiple.vue correctly 1`] = ` +
+ + +
+
+ +
+
+
+
Please select +
+ + +
`; exports[`renders ./components/cascader/demo/search.vue correctly 1`] = ` - - +
+ + +
+ Please select +
+ +
`; exports[`renders ./components/cascader/demo/size.vue correctly 1`] = ` - - +
+ + +
+ Please select +
+ +


- - +
+ + +
+ Please select +
+ +


- - +
+ + +
+ Please select +
+ +


`; exports[`renders ./components/cascader/demo/suffix.vue correctly 1`] = ` - - - -ab +
+ + +
+ Please select +
+ +
+
+ + +
+ Please select +
+ +
`; diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.js.snap index 577a0d563..1ad489d6f 100644 --- a/components/cascader/__tests__/__snapshots__/index.test.js.snap +++ b/components/cascader/__tests__/__snapshots__/index.test.js.snap @@ -1,116 +1,160 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Cascader can be selected 1`] = ` -
-
    - - -
-
    - -
-
+ + `; exports[`Cascader can be selected 2`] = ` -
-
    - - -
-
    - -
-
    - -
-
+ + + `; exports[`Cascader can be selected 3`] = ` -
-
    - - -
-
    - -
-
    - -
-
+ + + `; exports[`Cascader popup correctly when panel is open 1`] = `
- -
-
-
    - - -
-
+
+
`; exports[`Cascader popup correctly with defaultValue 1`] = `
- -
-
-
    - - -
-
    - -
-
    - -
-
+
+ + +
`; -exports[`Cascader support controlled mode 1`] = `Zhejiang / Hangzhou / West Lake`; +exports[`Cascader support controlled mode 1`] = ` +
+ + +
Zhejiang + +
+
+`; diff --git a/components/cascader/__tests__/index.test.js b/components/cascader/__tests__/index.test.js index 13056583b..cba23baa4 100644 --- a/components/cascader/__tests__/index.test.js +++ b/components/cascader/__tests__/index.test.js @@ -46,6 +46,14 @@ function filter(inputValue, path) { return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1); } +function toggleOpen(wrapper) { + wrapper.find('.ant-select-selector').trigger('mousedown'); +} + +function isOpen(wrapper) { + return !!wrapper.findComponent({ name: 'Trigger' }).props().popupVisible; +} + describe('Cascader', () => { focusTest(Cascader); beforeEach(() => { @@ -65,7 +73,7 @@ describe('Cascader', () => { it('popup correctly when panel is open', async () => { const wrapper = mount(Cascader, { props: { options }, sync: false, attachTo: 'body' }); await asyncExpect(() => { - wrapper.find('input').trigger('click'); + toggleOpen(wrapper); }); expect($$('.ant-cascader-menus').length).toBe(1); await asyncExpect(() => { @@ -95,7 +103,7 @@ describe('Cascader', () => { }); await asyncExpect(() => { - wrapper.find('input').trigger('click'); + toggleOpen(wrapper); }); expect($$('.ant-cascader-menus').length).toBe(1); await asyncExpect(() => { @@ -106,9 +114,8 @@ describe('Cascader', () => { it('can be selected', async () => { const wrapper = mount(Cascader, { props: { options }, sync: false }); await asyncExpect(() => { - wrapper.find('input').trigger('click'); + toggleOpen(wrapper); }); - await asyncExpect(() => { $$('.ant-cascader-menu')[0].querySelectorAll('.ant-cascader-menu-item')[0].click(); }); @@ -134,23 +141,36 @@ describe('Cascader', () => { }); }); - it('backspace should work with `Cascader[showSearch]`', async () => { + fit('backspace should work with `Cascader[showSearch]`', async () => { const wrapper = mount(Cascader, { props: { options, showSearch: true }, sync: false }); await asyncExpect(() => { wrapper.find('input').element.value = '123'; wrapper.find('input').trigger('input'); }); await asyncExpect(() => { - expect(wrapper.vm.inputValue).toBe('123'); + expect(isOpen(wrapper)).toBeTruthy(); }); await asyncExpect(() => { wrapper.find('input').element.keyCode = KeyCode.BACKSPACE; wrapper.find('input').trigger('keydown'); }); await asyncExpect(() => { - // trigger onKeyDown will not trigger onChange by default, so the value is still '123' - expect(wrapper.vm.inputValue).toBe('123'); + expect(isOpen(wrapper)).toBeTruthy(); }); + await asyncExpect(() => { + wrapper.find('input').element.value = ''; + wrapper.find('input').trigger('input'); + }); + await asyncExpect(() => { + expect(isOpen(wrapper)).toBeTruthy(); + }); + // await asyncExpect(() => { + // wrapper.find('input').element.keyCode = KeyCode.BACKSPACE; + // wrapper.find('input').trigger('keydown'); + // }); + // await asyncExpect(() => { + // expect(isOpen(wrapper)).toBeFalsy(); + // }, 0); }); describe('limit filtered item count', () => { @@ -191,7 +211,6 @@ describe('Cascader', () => { }); it('negative limit', async () => { - const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const wrapper = mount(Cascader, { props: { options, showSearch: { filter, limit: -1 } }, sync: false, @@ -203,9 +222,6 @@ describe('Cascader', () => { await asyncExpect(() => { expect($$('.ant-cascader-menu-item').length).toBe(2); }, 0); - expect(errorSpy).toBeCalledWith( - "Warning: [antdv: Cascader] 'limit' of showSearch in Cascader should be positive number or false.", - ); }); }); }); diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index a094db1a6..ae153680a 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -11,6 +11,7 @@ import { getTimeProps, Components } from '.'; import { computed, defineComponent, nextTick, onMounted, ref } from 'vue'; import useConfigInject from '../../_util/hooks/useConfigInject'; import classNames from '../../_util/classNames'; +import type { CommonProps, RangePickerProps } from './props'; import { commonProps, rangePickerProps } from './props'; import type { PanelMode, RangeValue } from '../../vc-picker/interface'; import type { RangePickerSharedProps } from '../../vc-picker/RangePicker'; @@ -41,7 +42,8 @@ export default function generateRangePicker( 'renderExtraFooter', // 'separator', ], - setup(props, { expose, slots, attrs, emit }) { + setup(_props, { expose, slots, attrs, emit }) { + const props = _props as unknown as CommonProps & RangePickerProps; const formItemContext = useInjectFormItemContext(); devWarning( !attrs.getCalendarContainer, diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index 0fed14a3d..ffcf6aa97 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -11,6 +11,7 @@ import { getTimeProps, Components } from '.'; import { computed, defineComponent, nextTick, onMounted, ref } from 'vue'; import useConfigInject from '../../_util/hooks/useConfigInject'; import classNames from '../../_util/classNames'; +import type { CommonProps, DatePickerProps } from './props'; import { commonProps, datePickerProps } from './props'; import devWarning from '../../vc-util/devWarning'; @@ -21,14 +22,15 @@ export default function generateSinglePicker( extraProps: ExtraProps, ) { function getPicker(picker?: PickerMode, displayName?: string) { + const comProps = { + ...commonProps(), + ...datePickerProps(), + ...extraProps, + }; return defineComponent({ name: displayName, inheritAttrs: false, - props: { - ...commonProps(), - ...datePickerProps(), - ...extraProps, - }, + props: comProps, slots: [ 'suffixIcon', // 'clearIcon', @@ -41,7 +43,11 @@ export default function generateSinglePicker( 'renderExtraFooter', 'monthCellRender', ], - setup(props, { slots, expose, attrs, emit }) { + setup(_props, { slots, expose, attrs, emit }) { + // 兼容 vue 3.2.7 + const props = _props as unknown as CommonProps & + DatePickerProps & + ExtraProps; const formItemContext = useInjectFormItemContext(); devWarning( !(props.monthCellContentRender || slots.monthCellContentRender), diff --git a/components/date-picker/generatePicker/props.ts b/components/date-picker/generatePicker/props.ts index bcd3dad47..86281d6b8 100644 --- a/components/date-picker/generatePicker/props.ts +++ b/components/date-picker/generatePicker/props.ts @@ -18,7 +18,7 @@ import type { SharedTimeProps } from '../../vc-picker/panels/TimePanel'; import type { RangeDateRender, RangeInfo, RangeType } from '../../vc-picker/RangePicker'; import type { VueNode } from '../../_util/type'; -function commonProps() { +function commonProps() { return { id: String, dropdownClassName: String, @@ -138,7 +138,7 @@ export interface CommonProps { valueFormat?: string; } -function datePickerProps() { +function datePickerProps() { return { defaultPickerValue: { type: [String, Object] as PropType }, defaultValue: { type: [String, Object] as PropType }, diff --git a/components/empty/__tests__/__snapshots__/demo.test.js.snap b/components/empty/__tests__/__snapshots__/demo.test.js.snap index fbf9c049d..f2563e087 100644 --- a/components/empty/__tests__/__snapshots__/demo.test.js.snap +++ b/components/empty/__tests__/__snapshots__/demo.test.js.snap @@ -41,17 +41,23 @@ exports[`renders ./components/empty/demo/config-provider.vue correctly 1`] = `

TreeSelect

-
+
-
+

Cascader

- - +
+ + +
+ +
+ +

Transfer

diff --git a/components/input-number/__tests__/__snapshots__/demo.test.js.snap b/components/input-number/__tests__/__snapshots__/demo.test.js.snap index c926c85a5..9d2c51ced 100644 --- a/components/input-number/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input-number/__tests__/__snapshots__/demo.test.js.snap @@ -68,8 +68,14 @@ exports[`renders ./components/input-number/demo/addon.vue correctly 1`] = `
- - +
+ + +
+ cascader +
+ +
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap index c8e6eb6ea..32654a362 100644 --- a/components/input/__tests__/__snapshots__/demo.test.js.snap +++ b/components/input/__tests__/__snapshots__/demo.test.js.snap @@ -79,8 +79,14 @@ exports[`renders ./components/input/demo/group.vue correctly 1`] = `
- - +
+ + +
+ Select Address +
+ +
`; exports[`renders ./components/input/demo/password-input.vue correctly 1`] = ``; diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap index ae7340711..081bd8e0b 100644 --- a/components/layout/__tests__/__snapshots__/demo.test.js.snap +++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap @@ -94,7 +94,7 @@ exports[`renders ./components/layout/demo/fixed.vue correctly 1`] = ` - - - - -