mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(TreeSelect): update test cases (#8449)
This commit is contained in:
neverland
GitHub
parent
74e19f55d1
commit
fb36845d60
@ -1,41 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`content slot 1`] = `
|
|
||||||
<div class="van-tree-select" style="height: 300px;">
|
|
||||||
<div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
|
|
||||||
<div class="van-sidebar-item__text">group1
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</a></div>
|
|
||||||
<div class="van-tree-select__content">Custom Content</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`empty list 1`] = `
|
|
||||||
<div class="van-tree-select" style="height: 300px;">
|
|
||||||
<div class="van-sidebar van-tree-select__nav"></div>
|
|
||||||
<div class="van-tree-select__content"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`height prop 1`] = `
|
|
||||||
<div class="van-tree-select" style="height: 100vh;">
|
|
||||||
<div class="van-sidebar van-tree-select__nav"></div>
|
|
||||||
<div class="van-tree-select__content"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`nav render badge 1`] = `
|
|
||||||
<div class="van-tree-select" style="height: 300px;">
|
|
||||||
<div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
|
|
||||||
<div class="van-sidebar-item__text">group1<div class="van-badge van-sidebar-item__badge">3</div>
|
|
||||||
</div>
|
|
||||||
</a></div>
|
|
||||||
<div class="van-tree-select__content"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`selected-icon prop 1`] = `
|
|
||||||
<div class="van-ellipsis van-tree-select__item van-tree-select__item--active">city1<i class="van-icon van-icon-foo van-tree-select__selected">
|
|
||||||
<!----></i></div>
|
|
||||||
`;
|
|
||||||
56
src/tree-select/test/__snapshots__/index.spec.tsx.snap
Normal file
56
src/tree-select/test/__snapshots__/index.spec.tsx.snap
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should change selected icon when using selected-icon prop 1`] = `
|
||||||
|
<div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
|
||||||
|
city1
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-foo van-tree-select__selected">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render content slot correctly 1`] = `
|
||||||
|
<div class="van-tree-select"
|
||||||
|
style="height: 300px;"
|
||||||
|
>
|
||||||
|
<div class="van-sidebar van-tree-select__nav">
|
||||||
|
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
|
||||||
|
<div class="van-badge__wrapper van-sidebar-item__text">
|
||||||
|
group1
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="van-tree-select__content">
|
||||||
|
Custom Content
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render empty TreeSelect correctly 1`] = `
|
||||||
|
<div class="van-tree-select"
|
||||||
|
style="height: 300px;"
|
||||||
|
>
|
||||||
|
<div class="van-sidebar van-tree-select__nav">
|
||||||
|
</div>
|
||||||
|
<div class="van-tree-select__content">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render nav badge correctly 1`] = `
|
||||||
|
<div class="van-tree-select"
|
||||||
|
style="height: 300px;"
|
||||||
|
>
|
||||||
|
<div class="van-sidebar van-tree-select__nav">
|
||||||
|
<a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
|
||||||
|
<div class="van-badge__wrapper van-sidebar-item__text">
|
||||||
|
group1
|
||||||
|
<div class="van-badge van-badge--fixed">
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="van-tree-select__content">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,339 +0,0 @@
|
|||||||
import { TreeSelect } from '..';
|
|
||||||
import { mount } from '../../../test';
|
|
||||||
|
|
||||||
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],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'group2',
|
|
||||||
children: [mockItem],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
test('click-nav event', () => {
|
|
||||||
const onClickNav = jest.fn();
|
|
||||||
|
|
||||||
const wrapper = mount(TreeSelect, {
|
|
||||||
props: {
|
|
||||||
items: mockItems,
|
|
||||||
},
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
'click-nav': onClickNav,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const navItems = wrapper.findAll('.van-tree-select__nav-item');
|
|
||||||
navItems[1].trigger('click');
|
|
||||||
|
|
||||||
expect(onClickNav).toHaveBeenCalledWith(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click-item event', () => {
|
|
||||||
const onClickItem = jest.fn();
|
|
||||||
|
|
||||||
const wrapper = mount(TreeSelect, {
|
|
||||||
props: {
|
|
||||||
items: mockItems,
|
|
||||||
},
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
'click-item': onClickItem,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const items = wrapper.findAll('.van-tree-select__item');
|
|
||||||
items[0].trigger('click');
|
|
||||||
expect(onClickItem).toHaveBeenCalledWith(mockItem);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click disabled nav', () => {
|
|
||||||
const onClickNav = jest.fn();
|
|
||||||
|
|
||||||
const wrapper = mount(TreeSelect, {
|
|
||||||
props: {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
text: 'group1',
|
|
||||||
children: [mockItem],
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
'click-nav': onClickNav,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const items = wrapper.findAll('.van-tree-select__nav-item');
|
|
||||||
items[0].trigger('click');
|
|
||||||
expect(onClickNav).toHaveBeenCalledTimes(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click disabled item', () => {
|
|
||||||
const onClickItem = jest.fn();
|
|
||||||
const wrapper = mount(TreeSelect, {
|
|
||||||
props: {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
text: 'group1',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
...mockItem,
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
'click-item': onClickItem,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const items = wrapper.findAll('.van-tree-select__item');
|
|
||||||
items[0].trigger('click');
|
|
||||||
expect(onClickItem).toHaveBeenCalledTimes(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('content slot', () => {
|
|
||||||
const wrapper = mount(TreeSelect, {
|
|
||||||
props: {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
text: 'group1',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
slots: {
|
|
||||||
content: () => 'Custom Content',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('height prop', () => {
|
|
||||||
const wrapper = mount(TreeSelect, {
|
|
||||||
props: {
|
|
||||||
height: '100vh',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('nav render badge', () => {
|
|
||||||
const wrapper = mount(TreeSelect, {
|
|
||||||
props: {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
text: 'group1',
|
|
||||||
badge: 3,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.html()).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[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[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[0].trigger('click');
|
|
||||||
items[1].trigger('click');
|
|
||||||
expect(wrapper.vm.activeId).toEqual([mockItem.id, mockItem2.id]);
|
|
||||||
|
|
||||||
items[0].trigger('click');
|
|
||||||
items[1].trigger('click');
|
|
||||||
expect(wrapper.vm.activeId).toEqual([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('max prop', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-tree-select
|
|
||||||
:max="1"
|
|
||||||
:items="items"
|
|
||||||
:main-active-index="0"
|
|
||||||
:active-id.sync="activeId"
|
|
||||||
/>
|
|
||||||
`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeId: [],
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
text: 'group1',
|
|
||||||
children: [mockItem, mockItem2],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const items = wrapper.findAll('.van-tree-select__item');
|
|
||||||
items[0].trigger('click');
|
|
||||||
items[1].trigger('click');
|
|
||||||
expect(wrapper.vm.activeId).toEqual([mockItem.id]);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('className of nav', () => {
|
|
||||||
const wrapper = mount(TreeSelect, {
|
|
||||||
props: {
|
|
||||||
mainActiveIndex: 0,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
text: 'group1',
|
|
||||||
className: 'my-class',
|
|
||||||
children: [],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const items = wrapper.findAll('.van-tree-select__nav-item');
|
|
||||||
expect(items[0].element.classList.contains('my-class')).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should sync value before trigger click-item event', (done) => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-tree-select
|
|
||||||
:items="items"
|
|
||||||
:main-active-index="0"
|
|
||||||
:active-id.sync="activeId"
|
|
||||||
@click-item="onClickItem"
|
|
||||||
/>
|
|
||||||
`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeId: mockItem.id,
|
|
||||||
mainActiveIndex: 0,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
text: 'group1',
|
|
||||||
children: [mockItem, mockItem2],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClickItem() {
|
|
||||||
expect(wrapper.vm.activeId).toEqual(mockItem2.id);
|
|
||||||
done();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const items = wrapper.findAll('.van-tree-select__item');
|
|
||||||
items[1].trigger('click');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('selected-icon prop', () => {
|
|
||||||
const wrapper = mount(TreeSelect, {
|
|
||||||
props: {
|
|
||||||
items: mockItems,
|
|
||||||
activeId: 1,
|
|
||||||
mainActiveIndex: 0,
|
|
||||||
selectedIcon: 'foo',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.find('.van-tree-select__item')).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
232
src/tree-select/test/index.spec.tsx
Normal file
232
src/tree-select/test/index.spec.tsx
Normal file
@ -0,0 +1,232 @@
|
|||||||
|
import { TreeSelect } from '..';
|
||||||
|
import { mount } from '../../../test';
|
||||||
|
|
||||||
|
const mockItem = {
|
||||||
|
text: 'city1',
|
||||||
|
id: 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
const mockItem2 = {
|
||||||
|
text: 'city2',
|
||||||
|
id: 2,
|
||||||
|
};
|
||||||
|
|
||||||
|
const mockItems = [
|
||||||
|
{
|
||||||
|
text: 'group1',
|
||||||
|
children: [mockItem],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'group2',
|
||||||
|
children: [mockItem],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
test('should render empty TreeSelect correctly', () => {
|
||||||
|
expect(mount(TreeSelect).html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit click-nav event when nav item is clicked', () => {
|
||||||
|
const wrapper = mount(TreeSelect, {
|
||||||
|
props: {
|
||||||
|
items: mockItems,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const navItems = wrapper.findAll('.van-tree-select__nav-item');
|
||||||
|
navItems[1].trigger('click');
|
||||||
|
expect(wrapper.emitted('update:mainActiveIndex')?.[0]).toEqual([1]);
|
||||||
|
expect(wrapper.emitted('click-nav')?.[0]).toEqual([1]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit click-item event when item is clicked', () => {
|
||||||
|
const wrapper = mount(TreeSelect, {
|
||||||
|
props: {
|
||||||
|
items: mockItems,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const items = wrapper.findAll('.van-tree-select__item');
|
||||||
|
items[0].trigger('click');
|
||||||
|
expect(wrapper.emitted('update:activeId')?.[0]).toEqual([mockItem.id]);
|
||||||
|
expect(wrapper.emitted('click-item')?.[0]).toEqual([mockItem]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not emit click-nav event when disabled nav item is clicked', () => {
|
||||||
|
const wrapper = mount(TreeSelect, {
|
||||||
|
props: {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: 'group1',
|
||||||
|
children: [mockItem],
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const items = wrapper.findAll('.van-tree-select__nav-item');
|
||||||
|
items[0].trigger('click');
|
||||||
|
expect(wrapper.emitted('click-nav')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should not emit click-item event when disabled item is clicked', () => {
|
||||||
|
const wrapper = mount(TreeSelect, {
|
||||||
|
props: {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: 'group1',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
...mockItem,
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const items = wrapper.findAll('.van-tree-select__item');
|
||||||
|
items[0].trigger('click');
|
||||||
|
expect(wrapper.emitted('click-item')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render content slot correctly', () => {
|
||||||
|
const wrapper = mount(TreeSelect, {
|
||||||
|
props: {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: 'group1',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
content: () => 'Custom Content',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should change height when using height prop', () => {
|
||||||
|
const wrapper = mount(TreeSelect, {
|
||||||
|
props: {
|
||||||
|
height: '100vh',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.style.height).toEqual('100vh');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render nav badge correctly', () => {
|
||||||
|
const wrapper = mount(TreeSelect, {
|
||||||
|
props: {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: 'group1',
|
||||||
|
badge: 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should allow to select multiple items when activeId is array', async () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeId: [],
|
||||||
|
mainActiveIndex: 0,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: 'group1',
|
||||||
|
children: [mockItem, mockItem2],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<TreeSelect
|
||||||
|
v-model={[this.activeId, 'activeId']}
|
||||||
|
items={this.items}
|
||||||
|
mainActiveIndex={0}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const items = wrapper.findAll('.van-tree-select__item');
|
||||||
|
await items[0].trigger('click');
|
||||||
|
await items[1].trigger('click');
|
||||||
|
expect(wrapper.vm.activeId).toEqual([mockItem.id, mockItem2.id]);
|
||||||
|
|
||||||
|
await items[0].trigger('click');
|
||||||
|
await items[1].trigger('click');
|
||||||
|
expect(wrapper.vm.activeId).toEqual([]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should limit the selected item number when using max prop', async () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeId: [],
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: 'group1',
|
||||||
|
children: [mockItem, mockItem2],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<TreeSelect
|
||||||
|
v-model={[this.activeId, 'activeId']}
|
||||||
|
max={1}
|
||||||
|
items={this.items}
|
||||||
|
mainActiveIndex={0}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const items = wrapper.findAll('.van-tree-select__item');
|
||||||
|
await items[0].trigger('click');
|
||||||
|
await items[1].trigger('click');
|
||||||
|
expect(wrapper.vm.activeId).toEqual([mockItem.id]);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should allow to custom nav item className', () => {
|
||||||
|
const wrapper = mount(TreeSelect, {
|
||||||
|
props: {
|
||||||
|
mainActiveIndex: 0,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: 'group1',
|
||||||
|
className: 'my-class',
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const items = wrapper.findAll('.van-tree-select__nav-item');
|
||||||
|
expect(items[0].classes()).toContain('my-class');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should change selected icon when using selected-icon prop', () => {
|
||||||
|
const wrapper = mount(TreeSelect, {
|
||||||
|
props: {
|
||||||
|
items: mockItems,
|
||||||
|
activeId: 1,
|
||||||
|
mainActiveIndex: 0,
|
||||||
|
selectedIcon: 'foo',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.find('.van-tree-select__item').html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user