diff --git a/packages/components/cascader/__tests__/cascader.spec.ts b/packages/components/cascader/__tests__/cascader.spec.ts index 70b1202a1..56ed5341a 100644 --- a/packages/components/cascader/__tests__/cascader.spec.ts +++ b/packages/components/cascader/__tests__/cascader.spec.ts @@ -158,28 +158,30 @@ describe('Cascader', () => { const onChange = vi.fn() const wrapper = CascaderMount({ props: { + value: undefined, open: true, 'onUpdate:value': onUpdateValue, onChange, }, }) - expect(wrapper.find('.ix-selector-item').text()).toBe('Components/General/Button') - - await wrapper.setProps({ value: undefined }) - - expect(wrapper.find('.ix-selector-item').exists()).toBe(false) + expect(wrapper.find('.ix-selector-item').exists()).toBeFalsy() + await getAllOptionGroup(wrapper)[1].find('.ix-cascader-option').trigger('click') await getAllOptionGroup(wrapper)[2].find('.ix-cascader-option').trigger('click') - // expect(onUpdateValue).toBeCalledWith(['components', 'general', 'button']) - // expect(onChange).toBeCalledWith(['components', 'general', 'button'], undefined) + expect(onUpdateValue).toBeCalledWith(['components', 'general', 'button']) + expect(onChange).toBeCalledWith(['components', 'general', 'button'], undefined) await wrapper.setProps({ value: ['components', 'general', 'button'] }) - await getAllOptionGroup(wrapper)[2].find('.ix-cascader-option').trigger('click') - // expect(onUpdateValue).toBeCalledWith(['pro', 'pro-layout']) - // expect(onChange).toBeCalledWith(['pro', 'pro-layout'], ['components', 'general', 'button']) + expect(wrapper.find('.ix-selector-item').text()).toBe('Components/General/Button') + + await await wrapper.setProps({ expandedKeys: ['pro'] }) + await getAllOptionGroup(wrapper)[1].find('.ix-cascader-option').trigger('click') + + expect(onUpdateValue).toBeCalledWith(['pro', 'pro-layout']) + expect(onChange).toBeCalledWith(['pro', 'pro-layout'], ['components', 'general', 'button']) }) test('v-model:expandedKeys work', async () => { @@ -255,31 +257,33 @@ describe('Cascader', () => { const onChange = vi.fn() const wrapper = CascaderMount({ props: { + value: undefined, open: true, 'onUpdate:value': onUpdateValue, onChange, }, }) - expect(wrapper.findAll('.ix-selector-item').length).toBe(2) + expect(wrapper.find('.ix-selector-item').exists()).toBeFalsy() await wrapper.setProps({ value: [['components', 'general', 'button']] }) expect(wrapper.findAll('.ix-selector-item').length).toBe(1) - await getAllOptionGroup(wrapper)[2].find('.ix-cascader-option').trigger('click') - - // expect(onUpdateValue).toBeCalledWith([ - // ['components', 'general', 'button'], - // ['pro', 'pro-layout'], - // ]) - // expect(onChange).toBeCalledWith( - // [ - // ['components', 'general', 'button'], - // ['pro', 'pro-layout'], - // ], - // [['components', 'general', 'button']], - // ) + await await wrapper.setProps({ expandedKeys: ['pro'] }) + await getAllOptionGroup(wrapper)[1].find('.ix-cascader-option').trigger('click') + + expect(onUpdateValue).toBeCalledWith([ + ['components', 'general', 'button'], + ['pro', 'pro-layout'], + ]) + expect(onChange).toBeCalledWith( + [ + ['components', 'general', 'button'], + ['pro', 'pro-layout'], + ], + [['components', 'general', 'button']], + ) }) }) }) diff --git a/packages/components/cascader/src/Cascader.tsx b/packages/components/cascader/src/Cascader.tsx index 9d31e6195..b68dd8c44 100644 --- a/packages/components/cascader/src/Cascader.tsx +++ b/packages/components/cascader/src/Cascader.tsx @@ -5,7 +5,7 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import { computed, defineComponent, normalizeClass, provide, ref, toRef, watch } from 'vue' +import { computed, defineComponent, normalizeClass, provide, ref, toRaw, toRef, watch } from 'vue' import { useAccessorAndControl } from '@idux/cdk/forms' import { type VKey, callEmit, useState } from '@idux/cdk/utils' @@ -69,7 +69,12 @@ export default defineComponent({ toRef(props, 'multiple'), toRef(props, 'strategy'), toRef(accessor, 'value'), - keys => accessor.setValue(keys), + keys => { + const oldKeys = toRaw(accessor.value) + accessor.setValue(keys) + + callEmit(props.onChange, keys, oldKeys) + }, ) const { resolvedSelectedKeys, setValue } = selectedStateContext const selectedData = useSelectedData(resolvedSelectedKeys, mergedDataMap)