mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 22:49:15 +08:00
[bugfix] Tab: can swipe to disabled tab (#2064)
This commit is contained in:
neverland
GitHub
parent
70c42df851
commit
ef8bee73d8
153
packages/tab/test/__snapshots__/index.spec.js.snap
Normal file
153
packages/tab/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`click to switch tab 1`] = `
|
||||||
|
<div class="van-tabs van-tabs--line">
|
||||||
|
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||||
|
<div class="van-tabs__nav van-tabs__nav--line">
|
||||||
|
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||||
|
<div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
|
||||||
|
<div class="van-tab"><span class="van-ellipsis">title2</span></div>
|
||||||
|
<div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__content">
|
||||||
|
<div class="van-tab__pane" style="">Text
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="display: none;">
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="display: none;">
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`click to switch tab 2`] = `
|
||||||
|
<div class="van-tabs van-tabs--line">
|
||||||
|
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||||
|
<div class="van-tabs__nav van-tabs__nav--line">
|
||||||
|
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||||
|
<div class="van-tab"><span class="van-ellipsis">title1</span></div>
|
||||||
|
<div class="van-tab van-tab--active"><span class="van-ellipsis">title2</span></div>
|
||||||
|
<div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__content">
|
||||||
|
<div class="van-tab__pane" style="display: none;">Text
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="">Text
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="display: none;">
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`swipe to switch tab 1`] = `
|
||||||
|
<div class="van-tabs van-tabs--line">
|
||||||
|
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||||
|
<div class="van-tabs__nav van-tabs__nav--line">
|
||||||
|
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||||
|
<div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
|
||||||
|
<div class="van-tab"><span class="van-ellipsis">title2</span></div>
|
||||||
|
<div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__content">
|
||||||
|
<div class="van-tab__pane" style="">Text
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="display: none;">
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="display: none;">
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`swipe to switch tab 2`] = `
|
||||||
|
<div class="van-tabs van-tabs--line">
|
||||||
|
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||||
|
<div class="van-tabs__nav van-tabs__nav--line">
|
||||||
|
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||||
|
<div class="van-tab"><span class="van-ellipsis">title1</span></div>
|
||||||
|
<div class="van-tab van-tab--active"><span class="van-ellipsis">title2</span></div>
|
||||||
|
<div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__content">
|
||||||
|
<div class="van-tab__pane" style="display: none;">Text
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="">Text
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="display: none;">
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`swipe to switch tab 3`] = `
|
||||||
|
<div class="van-tabs van-tabs--line">
|
||||||
|
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||||
|
<div class="van-tabs__nav van-tabs__nav--line">
|
||||||
|
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||||
|
<div class="van-tab"><span class="van-ellipsis">title1</span></div>
|
||||||
|
<div class="van-tab van-tab--active"><span class="van-ellipsis">title2</span></div>
|
||||||
|
<div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__content">
|
||||||
|
<div class="van-tab__pane" style="display: none;">Text
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="">Text
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="display: none;">
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`swipe to switch tab 4`] = `
|
||||||
|
<div class="van-tabs van-tabs--line">
|
||||||
|
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||||
|
<div class="van-tabs__nav van-tabs__nav--line">
|
||||||
|
<div class="van-tabs__line" style="width: 0px;"></div>
|
||||||
|
<div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
|
||||||
|
<div class="van-tab"><span class="van-ellipsis">title2</span></div>
|
||||||
|
<div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-tabs__content">
|
||||||
|
<div class="van-tab__pane" style="">Text
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="display: none;">Text
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="van-tab__pane" style="display: none;">
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
63
packages/tab/test/index.spec.js
Normal file
63
packages/tab/test/index.spec.js
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import Tab from '..';
|
||||||
|
import Tabs from '../../tabs';
|
||||||
|
import { mount, later, triggerDrag } from '../../../test/utils';
|
||||||
|
|
||||||
|
function createWrapper(options) {
|
||||||
|
return mount({
|
||||||
|
template: `
|
||||||
|
<tabs @change="onChange" swipeable>
|
||||||
|
<tab title="title1">Text</tab>
|
||||||
|
<tab title="title2">Text</tab>
|
||||||
|
<tab title="title3" disabled>Text</tab>
|
||||||
|
</tabs>
|
||||||
|
`,
|
||||||
|
components: {
|
||||||
|
Tab,
|
||||||
|
Tabs
|
||||||
|
},
|
||||||
|
...options
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
test('click to switch tab', async() => {
|
||||||
|
const onChange = jest.fn();
|
||||||
|
const wrapper = createWrapper({
|
||||||
|
methods: {
|
||||||
|
onChange
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
|
||||||
|
const tabs = wrapper.findAll('.van-tab');
|
||||||
|
tabs.at(1).trigger('click');
|
||||||
|
tabs.at(2).trigger('click');
|
||||||
|
await later();
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
expect(onChange.mock.calls.length).toEqual(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('swipe to switch tab', async() => {
|
||||||
|
const onChange = jest.fn();
|
||||||
|
const wrapper = createWrapper({
|
||||||
|
methods: {
|
||||||
|
onChange
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const content = wrapper.find('.van-tabs__content');
|
||||||
|
await later();
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
triggerDrag(content, -100, 0);
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
expect(onChange.mock.calls.length).toEqual(1);
|
||||||
|
triggerDrag(content, -100, 0);
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
triggerDrag(content, 100, 0);
|
||||||
|
triggerDrag(content, 100, 0);
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
|
||||||
|
await later();
|
||||||
|
wrapper.destroy();
|
||||||
|
});
|
||||||
@ -298,8 +298,6 @@ export default create({
|
|||||||
}
|
}
|
||||||
index += diff;
|
index += diff;
|
||||||
}
|
}
|
||||||
|
|
||||||
return active;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// emit event when clicked
|
// emit event when clicked
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user