From 0da38718b58ddac463965194e4160e1541318803 Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Thu, 20 Jan 2022 13:27:34 +0800
Subject: [PATCH] fix(collapse): fix modelValue is undefined when close
 accrodion item

---
 packages/varlet-ui/src/collapse/Collapse.vue  |  8 ++--
 .../src/collapse/__tests__/index.spec.js      | 39 ++++++++++++++++++-
 packages/varlet-ui/src/collapse/props.ts      |  4 +-
 packages/varlet-ui/src/collapse/provide.ts    |  2 +-
 packages/varlet-ui/types/collapse.d.ts        |  2 +-
 5 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/packages/varlet-ui/src/collapse/Collapse.vue b/packages/varlet-ui/src/collapse/Collapse.vue
index f3be67dd403..bcff98dae26 100644
--- 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
index 664fa0aa662..dfb7286a31f 100644
--- 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
index 9d6f5630b28..6ac445ba19d 100644
--- 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
index 90ee517f1e2..e8ae738f6d6 100644
--- 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
index 48634627180..febc3a842b6 100644
--- 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