107 lines
2.4 KiB
JavaScript
107 lines
2.4 KiB
JavaScript
import { ref } from 'vue';
|
|
import { mount } from '@vue/test-utils';
|
|
import Sidebar from '..';
|
|
import SidebarItem from '../../sidebar-item';
|
|
|
|
test('should emit change event when active item changed', () => {
|
|
const onChange = jest.fn();
|
|
const wrapper = mount({
|
|
render() {
|
|
return (
|
|
<Sidebar onChange={onChange}>
|
|
<SidebarItem>Text</SidebarItem>
|
|
<SidebarItem>Text</SidebarItem>
|
|
</Sidebar>
|
|
);
|
|
},
|
|
});
|
|
|
|
const items = wrapper.findAll('.van-sidebar-item');
|
|
|
|
items[0].trigger('click');
|
|
expect(onChange).toHaveBeenCalledTimes(0);
|
|
|
|
items[1].trigger('click');
|
|
expect(onChange).toHaveBeenCalledWith(1);
|
|
});
|
|
|
|
test('should emit click event when SidebarItem is clicked', () => {
|
|
const onClick = jest.fn();
|
|
const wrapper = mount({
|
|
render() {
|
|
return (
|
|
<Sidebar>
|
|
<SidebarItem onClick={onClick}>Text</SidebarItem>
|
|
</Sidebar>
|
|
);
|
|
},
|
|
});
|
|
|
|
wrapper.find('.van-sidebar-item').trigger('click');
|
|
expect(onClick).toHaveBeenCalledWith(0);
|
|
});
|
|
|
|
test('should update v-model when active item changed', () => {
|
|
const onChange = jest.fn();
|
|
const wrapper = mount({
|
|
setup() {
|
|
return {
|
|
active: ref(0),
|
|
};
|
|
},
|
|
render() {
|
|
return (
|
|
<Sidebar v-model={this.active} onChange={onChange}>
|
|
<SidebarItem>Text</SidebarItem>
|
|
<SidebarItem>Text</SidebarItem>
|
|
</Sidebar>
|
|
);
|
|
},
|
|
});
|
|
|
|
wrapper.findAll('.van-sidebar-item')[1].trigger('click');
|
|
expect(wrapper.vm.active).toEqual(1);
|
|
expect(onChange).toHaveBeenCalledWith(1);
|
|
expect(onChange).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
test('should not update v-model when disabled SidebarItem is clicked', () => {
|
|
const wrapper = mount({
|
|
setup() {
|
|
return {
|
|
active: ref(0),
|
|
};
|
|
},
|
|
render() {
|
|
return (
|
|
<Sidebar v-model={this.active}>
|
|
<SidebarItem>Text</SidebarItem>
|
|
<SidebarItem disabled>Text</SidebarItem>
|
|
</Sidebar>
|
|
);
|
|
},
|
|
});
|
|
|
|
wrapper.findAll('.van-sidebar-item')[1].trigger('click');
|
|
expect(wrapper.vm.active).toEqual(0);
|
|
});
|
|
|
|
test('should render title slot correctly', () => {
|
|
const wrapper = mount({
|
|
setup() {
|
|
return {
|
|
active: ref(0),
|
|
};
|
|
},
|
|
render() {
|
|
return (
|
|
<Sidebar v-model={this.active}>
|
|
<SidebarItem v-slots={{ title: () => 'Custom Title' }} />
|
|
</Sidebar>
|
|
);
|
|
},
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
});
|