mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] TreeSelect: add test cases of multiple select (#4139)
This commit is contained in:
parent
3edc90774e
commit
67fc817cfd
@ -1,26 +1,37 @@
|
||||
import Vue from 'vue';
|
||||
import TreeSelect from '..';
|
||||
import { mount } from '../../../test/utils';
|
||||
|
||||
Vue.use(TreeSelect);
|
||||
|
||||
test('empty list', () => {
|
||||
expect(mount(TreeSelect)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
const mockItem = {
|
||||
text: 'city1',
|
||||
id: 1
|
||||
};
|
||||
|
||||
const mockItem2 = {
|
||||
text: 'city2',
|
||||
id: 2
|
||||
};
|
||||
|
||||
const mockItems = [
|
||||
{
|
||||
text: 'group1',
|
||||
children: [mockItem]
|
||||
}
|
||||
];
|
||||
|
||||
test('click-nav event', () => {
|
||||
const onNavClick = jest.fn();
|
||||
const onClickNav = jest.fn();
|
||||
const item = {
|
||||
text: 'city1',
|
||||
id: 1
|
||||
};
|
||||
|
||||
const wrapper = mount(TreeSelect, {
|
||||
propsData: {
|
||||
items: [
|
||||
{
|
||||
text: 'group1',
|
||||
children: [item]
|
||||
}
|
||||
]
|
||||
items: mockItems
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
@ -30,8 +41,9 @@ test('click-nav event', () => {
|
||||
}
|
||||
});
|
||||
|
||||
const items = wrapper.findAll('.van-tree-select__nav-item');
|
||||
items.at(0).trigger('click');
|
||||
const navItems = wrapper.findAll('.van-tree-select__nav-item');
|
||||
navItems.at(0).trigger('click');
|
||||
|
||||
expect(onNavClick).toHaveBeenCalledWith(0);
|
||||
expect(onClickNav).toHaveBeenCalledWith(0);
|
||||
});
|
||||
@ -39,19 +51,10 @@ test('click-nav event', () => {
|
||||
test('click-item event', () => {
|
||||
const onItemClick = jest.fn();
|
||||
const onClickItem = jest.fn();
|
||||
const item = {
|
||||
text: 'city1',
|
||||
id: 1
|
||||
};
|
||||
|
||||
const wrapper = mount(TreeSelect, {
|
||||
propsData: {
|
||||
items: [
|
||||
{
|
||||
text: 'group1',
|
||||
children: [item]
|
||||
}
|
||||
]
|
||||
items: mockItems
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
@ -63,23 +66,19 @@ test('click-item event', () => {
|
||||
|
||||
const items = wrapper.findAll('.van-tree-select__item');
|
||||
items.at(0).trigger('click');
|
||||
expect(onItemClick).toHaveBeenCalledWith(item);
|
||||
expect(onClickItem).toHaveBeenCalledWith(item);
|
||||
expect(onItemClick).toHaveBeenCalledWith(mockItem);
|
||||
expect(onClickItem).toHaveBeenCalledWith(mockItem);
|
||||
});
|
||||
|
||||
test('click disabled nav', () => {
|
||||
const onClickNav = jest.fn();
|
||||
const item = {
|
||||
text: 'city1',
|
||||
id: 1
|
||||
};
|
||||
|
||||
const wrapper = mount(TreeSelect, {
|
||||
propsData: {
|
||||
items: [
|
||||
{
|
||||
text: 'group1',
|
||||
children: [item],
|
||||
children: [mockItem],
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
@ -105,8 +104,7 @@ test('click disabled item', () => {
|
||||
text: 'group1',
|
||||
children: [
|
||||
{
|
||||
text: 'city1',
|
||||
id: 1,
|
||||
...mockItem,
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
@ -151,3 +149,87 @@ test('height prop', () => {
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('use sync modifier in main-active-index', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:main-active-index.sync="mainActiveIndex"
|
||||
/>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
mainActiveIndex: -1,
|
||||
items: mockItems
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const navItems = wrapper.findAll('.van-tree-select__nav-item');
|
||||
navItems.at(0).trigger('click');
|
||||
|
||||
expect(wrapper.vm.mainActiveIndex).toEqual(0);
|
||||
});
|
||||
|
||||
test('use sync modifier in active-id', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:main-active-index="0"
|
||||
:active-id.sync="activeId"
|
||||
/>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
activeId: mockItem.id,
|
||||
mainActiveIndex: 0,
|
||||
items: [
|
||||
{
|
||||
text: 'group1',
|
||||
children: [mockItem, mockItem2]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const items = wrapper.findAll('.van-tree-select__item');
|
||||
items.at(1).trigger('click');
|
||||
|
||||
expect(wrapper.vm.activeId).toEqual(mockItem2.id);
|
||||
});
|
||||
|
||||
test('multiple select', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:main-active-index="0"
|
||||
:active-id.sync="activeId"
|
||||
/>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
activeId: [],
|
||||
mainActiveIndex: 0,
|
||||
items: [
|
||||
{
|
||||
text: 'group1',
|
||||
children: [mockItem, mockItem2]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const items = wrapper.findAll('.van-tree-select__item');
|
||||
items.at(0).trigger('click');
|
||||
items.at(1).trigger('click');
|
||||
expect(wrapper.vm.activeId).toEqual([mockItem.id, mockItem2.id]);
|
||||
|
||||
items.at(0).trigger('click');
|
||||
items.at(1).trigger('click');
|
||||
expect(wrapper.vm.activeId).toEqual([]);
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user