fix(collapse): fix modelValue is undefined when close accrodion item

varletjs · Jan 20, 2022 · 0da3871 · 0da3871
1 parent 6c7df9f
commit 0da3871
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 9 deletions.
diff --git a/packages/varlet-ui/src/collapse/Collapse.vue b/packages/varlet-ui/src/collapse/Collapse.vue
@@ -38,16 +38,16 @@ export default defineComponent({
       return true
     }
 
-    const getValue = (value: number | string | undefined, isExpand: boolean): CollapseModelValue => {
-      if (!checkValue()) return
+    const getValue = (value: number | string, isExpand: boolean): CollapseModelValue => {
+      if (!checkValue()) return null
       if (isExpand) return props.accordion ? value : [...(props.modelValue as Array<string | number>), value]
 
       return props.accordion
-        ? undefined
+        ? null
         : (props.modelValue as Array<string | number>).filter((name: string | number) => name !== value)
     }
 
-    const updateItem = (value: number | string | undefined, isExpand: boolean) => {
+    const updateItem = (value: number | string, isExpand: boolean) => {
       const modelValue = getValue(value, isExpand)
 
       props['onUpdate:modelValue']?.(modelValue)

diff --git a/packages/varlet-ui/src/collapse/__tests__/index.spec.js b/packages/varlet-ui/src/collapse/__tests__/index.spec.js
@@ -5,7 +5,7 @@ import VarCollapse from '../Collapse'
 import VarCollapseItem from '../../collapse-item/CollapseItem'
 import { mount } from '@vue/test-utils'
 import { createApp } from 'vue'
-import { delay } from '../../utils/jest'
+import { delay, mockConsole } from '../../utils/jest'
 
 test('test collapse example', () => {
   const wrapper = mount(example)
@@ -71,6 +71,43 @@ test('test collapse modelValue and onChange', async () => {
   expect(changeHandle).toHaveBeenCalledTimes(2)
 })
 
+test('test invalid modelValue', async () => {
+  const errorFn = jest.fn()
+  const { mockRestore } = mockConsole('error', errorFn)
+  const template = `
+   <var-collapse v-model="value" :accordion="accordion">
+    <var-collapse-item title="test1" name="1">test1</var-collapse-item>
+    <var-collapse-item title="test2" name="2">test2</var-collapse-item>
+   </var-collapse>
+  `
+
+  const wrapper = mount({
+    components: {
+      [VarCollapse.name]: VarCollapse,
+      [VarCollapseItem.name]: VarCollapseItem,
+    },
+    data() {
+      return {
+        value: '1',
+        accordion: false,
+      }
+    },
+    template,
+  })
+
+  await delay(0)
+
+  await wrapper.setData({
+    value: ['1'],
+    accordion: true,
+  })
+
+  await delay(0)
+
+  expect(errorFn).toHaveBeenCalledTimes(2)
+  mockRestore()
+})
+
 test('test collapse accordion', async () => {
   const template = `
    <var-collapse v-model="value" accordion>

diff --git a/packages/varlet-ui/src/collapse/props.ts b/packages/varlet-ui/src/collapse/props.ts
@@ -1,10 +1,10 @@
 import type { PropType } from 'vue'
 
-export type CollapseModelValue = undefined | string | number | Array<string | number | undefined>
+export type CollapseModelValue = null | string | number | Array<string | number>
 
 export const props = {
   modelValue: {
-    type: [Array, String, Number] as PropType<string | number | Array<string | number>>,
+    type: [Array, String, Number] as PropType<null | string | number | Array<string | number>>,
   },
   accordion: {
     type: Boolean,

diff --git a/packages/varlet-ui/src/collapse/provide.ts b/packages/varlet-ui/src/collapse/provide.ts
@@ -5,7 +5,7 @@ import { CollapseItemProvider } from '../collapse-item/provide'
 export interface CollapseProvider {
   active: ComputedRef<number | string | Array<number | string> | undefined | null>
   offset: ComputedRef<boolean>
-  updateItem: (value: number | string | undefined, isExpand: boolean) => void
+  updateItem: (value: number | string, isExpand: boolean) => void
 }
 
 export const COLLAPSE_BIND_COLLAPSE_ITEM_KEY = Symbol('COLLAPSE_BIND_COLLAPSE_ITEM_KEY')

diff --git a/packages/varlet-ui/types/collapse.d.ts b/packages/varlet-ui/types/collapse.d.ts
@@ -1,6 +1,6 @@
 import { VarComponent } from './varComponent'
 
-export type CollapseModelValue = undefined | string | number | Array<string | number | undefined>
+export type CollapseModelValue = null | string | number | Array<string | number>
 
 export interface CollapseProps {
   modelValue?: CollapseModelValue