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

This commit is contained in:
neverland 2019-08-15 17:50:04 +08:00 committed by GitHub
parent b06cfabe8c
commit 2dc4ab147d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 19 deletions

View File

@ -38,8 +38,14 @@ export default createComponent({
return null; return null;
} }
const { value } = this.parent; const { value, accordion } = this.parent;
return this.parent.accordion
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 === this.currentName
: value.some(name => name === this.currentName); : value.some(name => name === this.currentName);
} }

View File

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