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