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;
|
||||
}
|
||||
|
||||
return active;
|
||||
},
|
||||
|
||||
// emit event when clicked
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user