alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(SidebarItem): add disabled prop (#4325)

Browse Source
This commit is contained in:
neverland
2019-09-02 19:44:14 +08:00
committed by GitHub
parent 52f3de8cf8
commit 329e751351
8 changed files with 144 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sidebar/test/__snapshots__/demo.spec.js.snap
+52 -26
View File
@@ -2,32 +2,58 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
<div class="van-sidebar-item__text">标签名称
<!---->
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名称
<!---->
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名称
<!---->
</div>
</a></div>
</div>
<div>
<div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">8</div>
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99</div>
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99+</div>
</div>
</a></div>
<div class="van-grid">
<div class="van-grid-item" style="flex-basis: 50%;">
<div class="van-grid-item__content van-grid-item__content--center">
<h3 class="demo-sidebar-title">基础用法</h3>
<div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
<div class="van-sidebar-item__text">标签名
<!---->
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名
<!---->
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名
<!---->
</div>
</a></div>
</div>
</div>
<div class="van-grid-item" style="flex-basis: 50%;">
<div class="van-grid-item__content van-grid-item__content--center">
<h3 class="demo-sidebar-title">显示徽标</h3>
<div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
<div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">8</div>
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">99</div>
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">99+</div>
</div>
</a></div>
</div>
</div>
<div class="van-grid-item" style="flex-basis: 50%;">
<div class="van-grid-item__content van-grid-item__content--center">
<h3 class="demo-sidebar-title">禁用选项</h3>
<div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
<div class="van-sidebar-item__text">标签名
<!---->
</div>
</a> <a class="van-sidebar-item van-sidebar-item--disabled van-hairline">
<div class="van-sidebar-item__text">标签名
<!---->
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名
<!---->
</div>
</a></div>
</div>
</div>
</div>
</div>
`;
src/sidebar/test/index.spec.js
+30 -15
View File
@@ -1,20 +1,20 @@
import { mount } from '../../../test/utils';
import Vue from 'vue';
import Sidebar from '..';
import SidebarItem from '../../sidebar-item';
Vue.use(Sidebar);
Vue.use(SidebarItem);
test('click event & change event', () => {
const onClick = jest.fn();
const onChange = jest.fn();
const wrapper = mount({
template: `
<sidebar @change="onChange">
<sidebar-item @click="onClick">Text</sidebar-item>
</sidebar>
<van-sidebar @change="onChange">
<van-sidebar-item @click="onClick">Text</van-sidebar-item>
</van-sidebar>
`,
components: {
Sidebar,
SidebarItem
},
methods: {
onClick,
onChange
@@ -30,15 +30,11 @@ test('click event & change event', () => {
test('v-model', () => {
const wrapper = mount({
template: `
<sidebar v-model="active">
<sidebar-item>Text</sidebar-item>
<sidebar-item>Text</sidebar-item>
</sidebar>
<van-sidebar v-model="active">
<van-sidebar-item>Text</van-sidebar-item>
<van-sidebar-item>Text</van-sidebar-item>
</van-sidebar>
`,
components: {
Sidebar,
SidebarItem
},
data() {
return {
active: 0
@@ -50,6 +46,25 @@ test('v-model', () => {
expect(wrapper.vm.active).toEqual(1);
});
test('disabled prop', () => {
const wrapper = mount({
template: `
<van-sidebar v-model="active">
<van-sidebar-item>Text</van-sidebar-item>
<van-sidebar-item disabled>Text</van-sidebar-item>
</van-sidebar>
`,
data() {
return {
active: 0
};
}
});
wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
expect(wrapper.vm.active).toEqual(0);
});
test('without parent', () => {
const consoleError = console.error;
try {