mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Collapse): update test cases (#8010)
* test(Collapse): update test cases * chore: update order
This commit is contained in:
neverland
GitHub
parent
ce7e9c177a
commit
1d11803470
@ -1,54 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`disable border 1`] = `
|
||||
<div class="van-collapse">
|
||||
<div class="van-collapse-item">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>a</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>c</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`lazy render collapse content 1`] = `
|
||||
<div class="van-collapse van-hairline--top-bottom">
|
||||
<div class="van-collapse-item" style="padding: 0px;">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>a</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-collapse-item--border" style="padding: 0px;">
|
||||
<div role="button" tabindex="0" aria-expanded="true" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
|
||||
<div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-collapse-item__wrapper">
|
||||
<div class="van-collapse-item__content">content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render collapse-item slot 1`] = `
|
||||
<div class="van-collapse van-hairline--top-bottom">
|
||||
<div class="van-collapse-item">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">this is icon<div class="van-cell__title">this is title</div>
|
||||
<div class="van-cell__value">this is value</div>this is right icon
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
23
src/collapse/test/__snapshots__/index.spec.js.snap
Normal file
23
src/collapse/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,23 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render slots of CollapseItem correctly 1`] = `
|
||||
<div class="van-collapse van-hairline--top-bottom">
|
||||
<div class="van-collapse-item">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded="false"
|
||||
disabled="false"
|
||||
>
|
||||
this is icon
|
||||
<div class="van-cell__title">
|
||||
this is title
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
this is value
|
||||
</div>
|
||||
this is right icon
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,182 +0,0 @@
|
||||
import Collapse from '..';
|
||||
import CollapseItem from '../../collapse-item';
|
||||
import { later, mount } from '../../../test';
|
||||
|
||||
const component = {
|
||||
template: `
|
||||
<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>
|
||||
`,
|
||||
props: {
|
||||
accordion: Boolean,
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: this.accordion ? '' : [],
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
test('basic mode', async () => {
|
||||
const wrapper = mount(component);
|
||||
|
||||
const titles = wrapper.findAll('.van-collapse-item__title');
|
||||
titles[0].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual(['first']);
|
||||
|
||||
await later();
|
||||
titles[1].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual(['first', 1]);
|
||||
|
||||
await later();
|
||||
titles[0].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual([1]);
|
||||
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test('accordion', async () => {
|
||||
const wrapper = mount(component, {
|
||||
props: {
|
||||
accordion: true,
|
||||
},
|
||||
});
|
||||
|
||||
const titles = wrapper.findAll('.van-collapse-item__title');
|
||||
titles[0].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual('first');
|
||||
|
||||
titles[1].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual(1);
|
||||
|
||||
await later();
|
||||
titles[0].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual('first');
|
||||
|
||||
titles[0].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual('');
|
||||
});
|
||||
|
||||
test('render collapse-item slot', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<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>
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
active: [],
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('disable border', () => {
|
||||
const wrapper = mount(component, {
|
||||
props: {
|
||||
border: false,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('lazy render collapse content', async () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<collapse v-model="active">
|
||||
<collapse-item title="a" name="first" style="padding: 0;">content</collapse-item>
|
||||
<collapse-item title="b" style="padding: 0;">{{ content }}</collapse-item>
|
||||
</collapse>
|
||||
`,
|
||||
components: {
|
||||
Collapse,
|
||||
CollapseItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: '',
|
||||
active: [],
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const titles = wrapper.findAll('.van-collapse-item__title');
|
||||
|
||||
titles[1].trigger('click');
|
||||
wrapper.vm.content = 'content';
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('toggle method', (done) => {
|
||||
mount({
|
||||
template: `
|
||||
<van-collapse v-model="active" >
|
||||
<van-collapse-item name="a" ref="a" />
|
||||
<van-collapse-item name="b" ref="b" />
|
||||
</van-collapse>
|
||||
`,
|
||||
data() {
|
||||
return { active: [] };
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.a.toggle();
|
||||
expect(this.active).toEqual(['a']);
|
||||
|
||||
this.$refs.b.toggle();
|
||||
expect(this.active).toEqual(['a', 'b']);
|
||||
|
||||
this.$refs.b.toggle(false);
|
||||
expect(this.active).toEqual(['a']);
|
||||
|
||||
this.$refs.a.toggle();
|
||||
expect(this.active).toEqual([]);
|
||||
|
||||
done();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('toggle method in accordion mode', (done) => {
|
||||
mount({
|
||||
template: `
|
||||
<van-collapse v-model="active" accordion>
|
||||
<van-collapse-item name="a" ref="a" />
|
||||
<van-collapse-item name="b" ref="b" />
|
||||
</van-collapse>
|
||||
`,
|
||||
data() {
|
||||
return { active: '' };
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.a.toggle();
|
||||
expect(this.active).toEqual('a');
|
||||
|
||||
this.$refs.b.toggle();
|
||||
expect(this.active).toEqual('b');
|
||||
|
||||
this.$refs.b.toggle(false);
|
||||
expect(this.active).toEqual('');
|
||||
|
||||
this.$refs.a.toggle();
|
||||
expect(this.active).toEqual('a');
|
||||
|
||||
done();
|
||||
},
|
||||
});
|
||||
});
|
||||
208
src/collapse/test/index.spec.js
Normal file
208
src/collapse/test/index.spec.js
Normal file
@ -0,0 +1,208 @@
|
||||
import { ref } from 'vue';
|
||||
import Collapse from '..';
|
||||
import CollapseItem from '../../collapse-item';
|
||||
import { later, mount } from '../../../test';
|
||||
|
||||
const Component = {
|
||||
props: {
|
||||
accordion: Boolean,
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: this.accordion ? '' : [],
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Collapse
|
||||
v-model={this.active}
|
||||
border={this.border}
|
||||
accordion={this.accordion}
|
||||
>
|
||||
<CollapseItem title="a" name="first">
|
||||
content
|
||||
</CollapseItem>
|
||||
<CollapseItem title="b">content</CollapseItem>
|
||||
<CollapseItem title="c">content</CollapseItem>
|
||||
</Collapse>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
test('should update active value when title is clicked', async () => {
|
||||
const wrapper = mount(Component);
|
||||
|
||||
const titles = wrapper.findAll('.van-collapse-item__title');
|
||||
titles[0].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual(['first']);
|
||||
|
||||
await later();
|
||||
titles[1].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual(['first', 1]);
|
||||
|
||||
await later();
|
||||
titles[0].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual([1]);
|
||||
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test('should update active value when title is clicked in accordion mode', async () => {
|
||||
const wrapper = mount(Component, {
|
||||
props: {
|
||||
accordion: true,
|
||||
},
|
||||
});
|
||||
|
||||
const titles = wrapper.findAll('.van-collapse-item__title');
|
||||
titles[0].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual('first');
|
||||
|
||||
titles[1].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual(1);
|
||||
|
||||
titles[0].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual('first');
|
||||
|
||||
await later();
|
||||
titles[0].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual('');
|
||||
});
|
||||
|
||||
test('should render slots of CollapseItem correctly', () => {
|
||||
const wrapper = mount({
|
||||
data() {
|
||||
return {
|
||||
active: [],
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Collapse v-model={this.active}>
|
||||
<CollapseItem
|
||||
v-slots={{
|
||||
title: () => 'this is title',
|
||||
value: () => 'this is value',
|
||||
icon: () => 'this is icon',
|
||||
'right-icon': () => 'this is right icon',
|
||||
}}
|
||||
/>
|
||||
</Collapse>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should not render border when border prop is false', () => {
|
||||
const wrapper = mount(Component, {
|
||||
props: {
|
||||
border: false,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-hairline--top-bottom').exists()).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should lazy render collapse content', async () => {
|
||||
const wrapper = mount({
|
||||
data() {
|
||||
return {
|
||||
active: [],
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Collapse v-model={this.active}>
|
||||
<CollapseItem title="a">content</CollapseItem>
|
||||
<CollapseItem title="b">
|
||||
<div class="foo" />
|
||||
</CollapseItem>
|
||||
</Collapse>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.foo').exists()).toBeFalsy();
|
||||
|
||||
const titles = wrapper.findAll('.van-collapse-item__title');
|
||||
await titles[1].trigger('click');
|
||||
expect(wrapper.find('.foo').exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should toggle collapse after calling the toggle method', async () => {
|
||||
const wrapper = mount({
|
||||
setup() {
|
||||
const itemA = ref();
|
||||
const itemB = ref();
|
||||
const active = ref([]);
|
||||
return {
|
||||
itemA,
|
||||
itemB,
|
||||
active,
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Collapse v-model={this.active}>
|
||||
<CollapseItem name="a" ref="itemA" />
|
||||
<CollapseItem name="b" ref="itemB" />
|
||||
</Collapse>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.itemA.toggle();
|
||||
expect(wrapper.vm.active).toEqual(['a']);
|
||||
|
||||
await later();
|
||||
wrapper.vm.itemB.toggle();
|
||||
expect(wrapper.vm.active).toEqual(['a', 'b']);
|
||||
|
||||
wrapper.vm.itemB.toggle(false);
|
||||
expect(wrapper.vm.active).toEqual(['a']);
|
||||
|
||||
wrapper.vm.itemA.toggle();
|
||||
expect(wrapper.vm.active).toEqual([]);
|
||||
});
|
||||
|
||||
test('should toggle collapse after calling the toggle method in accordion mode', async () => {
|
||||
const wrapper = mount({
|
||||
setup() {
|
||||
const itemA = ref();
|
||||
const itemB = ref();
|
||||
const active = ref([]);
|
||||
return {
|
||||
itemA,
|
||||
itemB,
|
||||
active,
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Collapse v-model={this.active} accordion>
|
||||
<CollapseItem name="a" ref="itemA" />
|
||||
<CollapseItem name="b" ref="itemB" />
|
||||
</Collapse>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.itemA.toggle();
|
||||
expect(wrapper.vm.active).toEqual('a');
|
||||
|
||||
wrapper.vm.itemB.toggle();
|
||||
expect(wrapper.vm.active).toEqual('b');
|
||||
|
||||
await later();
|
||||
wrapper.vm.itemB.toggle(false);
|
||||
expect(wrapper.vm.active).toEqual('');
|
||||
|
||||
wrapper.vm.itemA.toggle();
|
||||
expect(wrapper.vm.active).toEqual('a');
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user