[improvement] TreeSelect: add test cases of multiple select (#4139)

This commit is contained in:
neverland 2019-08-18 08:47:29 +08:00 committed by GitHub
parent 3edc90774e
commit 67fc817cfd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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([]);
});