[improvement] Collapse: log tips for incorrect value (#4122)

src/collapse-item/index.js

@@ -38,8 +38,14 @@ export default createComponent({
         return null;
       }
 
-      const { value } = this.parent;
-      return this.parent.accordion
+      const { value, accordion } = this.parent;
+
+      if (process.env.NODE_ENV !== 'production' && !accordion && !Array.isArray(value)) {
+        console.error('[Vant] Collapse: type of prop "value" should be Array');
+        return;
+      }
+
+      return accordion
         ? value === this.currentName
         : value.some(name => name === this.currentName);
     }

src/collapse/test/index.spec.js

@@ -1,19 +1,19 @@
+import Vue from 'vue';
 import Collapse from '..';
 import CollapseItem from '../../collapse-item';
 import { later, mount } from '../../../test/utils';
 
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+
 const component = {
   template: `
-  <collapse v-model="active" :accordion="accordion" :border="border">
-    <collapse-item title="a" name="first">content</collapse-item>
-    <collapse-item title="b">content</collapse-item>
-    <collapse-item title="c">content</collapse-item>
-  </collapse>
+  <van-collapse v-model="active" :accordion="accordion" :border="border">
+    <van-collapse-item title="a" name="first">content</van-collapse-item>
+    <van-collapse-item title="b">content</van-collapse-item>
+    <van-collapse-item title="c">content</van-collapse-item>
+  </van-collapse>
   `,
-  components: {
-    Collapse,
-    CollapseItem
-  },
   props: {
     accordion: Boolean,
     border: {
@@ -71,19 +71,15 @@ test('accordion', async () => {
 test('render collapse-item slot', () => {
   const wrapper = mount({
     template: `
-      <collapse v-model="active">
-        <collapse-item>
+      <van-collapse v-model="active">
+        <van-collapse-item>
           <template v-slot:title>this is title</template>
           <template v-slot:value>this is value</template>
           <template v-slot:icon>this is icon</template>
           <template v-slot:right-icon>this is right icon</template>
-        </collapse-item>
-      </collapse>
+        </van-collapse-item>
+      </van-collapse>
       `,
-    components: {
-      Collapse,
-      CollapseItem
-    },
     data() {
       return {
         active: []
@@ -130,3 +126,25 @@ test('lazy render collapse content', async () => {
   wrapper.vm.content = 'content';
   expect(wrapper).toMatchSnapshot();
 });
+
+test('warn when value type is incorrect', () => {
+  const originConsoleError = console.error;
+  const error = jest.fn();
+  console.error = error;
+
+  mount({
+    template: `
+    <van-collapse v-model="active">
+      <van-collapse-item title="a" name="first"></van-collapse-item>
+    </van-collapse>
+    `,
+    data() {
+      return {
+        active: 0
+      };
+    }
+  });
+
+  expect(error).toHaveBeenCalledTimes(1);
+  console.error = originConsoleError;
+});