mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Swipe): update test cases
This commit is contained in:
chenjiahan
parent
1c428f240c
commit
c02483cc4a
129
src/swipe/test/__snapshots__/index.spec.js.snap
Normal file
129
src/swipe/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,129 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should not allow to drag swipe when touchable is false 1`] = `
|
||||
<div class="van-swipe">
|
||||
<div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"
|
||||
class="van-swipe__track"
|
||||
>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-swipe__indicators">
|
||||
<i class="van-swipe__indicator van-swipe__indicator--active">
|
||||
</i>
|
||||
<i class="van-swipe__indicator">
|
||||
</i>
|
||||
<i class="van-swipe__indicator">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render initial swipe correctly 1`] = `
|
||||
<div class="van-swipe">
|
||||
<div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"
|
||||
class="van-swipe__track"
|
||||
>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-swipe__indicators">
|
||||
<i class="van-swipe__indicator van-swipe__indicator--active">
|
||||
</i>
|
||||
<i class="van-swipe__indicator">
|
||||
</i>
|
||||
<i class="van-swipe__indicator">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render initial swipe correctly 2`] = `
|
||||
<div class="van-swipe">
|
||||
<div style="transition-duration: 0ms; transform: translateX(-200px); width: 300px;"
|
||||
class="van-swipe__track"
|
||||
>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-swipe__indicators">
|
||||
<i class="van-swipe__indicator">
|
||||
</i>
|
||||
<i class="van-swipe__indicator">
|
||||
</i>
|
||||
<i class="van-swipe__indicator van-swipe__indicator--active">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render vertical swipe when using vertical prop 1`] = `
|
||||
<div class="van-swipe">
|
||||
<div style="transition-duration: 500ms; transform: translateY(-100px); height: 300px;"
|
||||
class="van-swipe__track van-swipe__track--vertical"
|
||||
>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div class="van-swipe-item"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-swipe__indicators van-swipe__indicators--vertical">
|
||||
<i class="van-swipe__indicator">
|
||||
</i>
|
||||
<i class="van-swipe__indicator van-swipe__indicator--active">
|
||||
</i>
|
||||
<i class="van-swipe__indicator">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,227 +0,0 @@
|
||||
import { mount, triggerDrag, later, trigger } from '../../../test';
|
||||
|
||||
function mockPageHidden() {
|
||||
let hidden = true;
|
||||
|
||||
Object.defineProperty(document, 'hidden', {
|
||||
get: () => hidden,
|
||||
});
|
||||
|
||||
trigger(window, 'visibilitychange');
|
||||
hidden = false;
|
||||
}
|
||||
|
||||
const Component = {
|
||||
template: `
|
||||
<van-swipe ref="swipe" v-bind="$props" v-on="$listeners">
|
||||
<van-swipe-item :style="style">1</van-swipe-item>
|
||||
<van-swipe-item :style="style">2</van-swipe-item>
|
||||
<van-swipe-item :style="style">3</van-swipe-item>
|
||||
</van-swipe>
|
||||
`,
|
||||
props: {
|
||||
vertical: Boolean,
|
||||
loop: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
touchable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
autoplay: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
initialSwipe: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
style: {
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
test('swipeTo method', async () => {
|
||||
const wrapper = mount(Component);
|
||||
const { swipe } = wrapper.vm.$refs;
|
||||
swipe.swipeTo(2);
|
||||
|
||||
await later(100);
|
||||
expect(swipe.active).toEqual(2);
|
||||
});
|
||||
|
||||
test('swipeTo method with immediate option', async () => {
|
||||
const wrapper = mount(Component);
|
||||
const { swipe } = wrapper.vm.$refs;
|
||||
swipe.swipeTo(2, {
|
||||
immediate: true,
|
||||
});
|
||||
|
||||
await later(100);
|
||||
expect(swipe.active).toEqual(2);
|
||||
});
|
||||
|
||||
test('prev and next method', async () => {
|
||||
const wrapper = mount(Component);
|
||||
const { swipe } = wrapper.vm.$refs;
|
||||
|
||||
swipe.next();
|
||||
await later(50);
|
||||
expect(swipe.active).toEqual(1);
|
||||
|
||||
swipe.prev();
|
||||
await later(50);
|
||||
expect(swipe.active).toEqual(0);
|
||||
});
|
||||
|
||||
test('initial swipe', () => {
|
||||
const wrapper = mount(Component);
|
||||
const { swipe } = wrapper.vm.$refs;
|
||||
|
||||
expect(swipe.active).toEqual(0);
|
||||
wrapper.setProps({ initialSwipe: 2 });
|
||||
expect(swipe.active).toEqual(2);
|
||||
});
|
||||
|
||||
test('vertical swipe', () => {
|
||||
const wrapper = mount(Component, {
|
||||
props: {
|
||||
vertical: true,
|
||||
},
|
||||
});
|
||||
const { swipe } = wrapper.vm.$refs;
|
||||
const track = wrapper.find('.van-swipe__track');
|
||||
|
||||
triggerDrag(track, 0, -100);
|
||||
expect(swipe.active).toEqual(1);
|
||||
});
|
||||
|
||||
test('untouchable', () => {
|
||||
const wrapper = mount(Component, {
|
||||
props: {
|
||||
touchable: false,
|
||||
},
|
||||
});
|
||||
const { swipe } = wrapper.vm.$refs;
|
||||
const track = wrapper.find('.van-swipe__track');
|
||||
|
||||
triggerDrag(track, 100, 0);
|
||||
expect(swipe.active).toEqual(0);
|
||||
});
|
||||
|
||||
test('loop', () => {
|
||||
const wrapper = mount(Component);
|
||||
const { swipe } = wrapper.vm.$refs;
|
||||
const track = wrapper.find('.van-swipe__track');
|
||||
|
||||
triggerDrag(track, -100, 0);
|
||||
expect(swipe.active).toEqual(1);
|
||||
triggerDrag(track, -100, 0);
|
||||
expect(swipe.active).toEqual(2);
|
||||
triggerDrag(track, -100, 0);
|
||||
expect(swipe.active).toEqual(3);
|
||||
triggerDrag(track, -100, 0);
|
||||
expect(swipe.active).toEqual(1);
|
||||
triggerDrag(track, 100, 0);
|
||||
expect(swipe.active).toEqual(0);
|
||||
triggerDrag(track, 100, 0);
|
||||
expect(swipe.active).toEqual(-1);
|
||||
triggerDrag(track, 100, 0);
|
||||
expect(swipe.active).toEqual(1);
|
||||
});
|
||||
|
||||
test('should pause auto play when page hidden', async () => {
|
||||
const change = jest.fn();
|
||||
mount(Component, {
|
||||
props: {
|
||||
loop: true,
|
||||
autoplay: 1,
|
||||
},
|
||||
listeners: {
|
||||
change,
|
||||
},
|
||||
});
|
||||
|
||||
mockPageHidden();
|
||||
await later(50);
|
||||
|
||||
expect(change).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
test('lazy-render prop', async () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-swipe :initial-swipe="active" lazy-render>
|
||||
<van-swipe-item><span>1</span></van-swipe-item>
|
||||
<van-swipe-item><span>2</span></van-swipe-item>
|
||||
<van-swipe-item><span>3</span></van-swipe-item>
|
||||
<van-swipe-item><span>4</span></van-swipe-item>
|
||||
<van-swipe-item><span>5</span></van-swipe-item>
|
||||
</van-swipe>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
const items = wrapper.findAll('.van-swipe-item');
|
||||
|
||||
const expectRender = (results) => {
|
||||
results.forEach((result, index) => {
|
||||
expect(items.at(index).contains('span')).toEqual(result);
|
||||
});
|
||||
};
|
||||
|
||||
expectRender([true, true, false, false, true]);
|
||||
|
||||
wrapper.setData({ active: 1 });
|
||||
expectRender([true, true, true, false, true]);
|
||||
|
||||
wrapper.setData({ active: 2 });
|
||||
expectRender([true, true, true, true, true]);
|
||||
});
|
||||
|
||||
test('lazy-render prop when loop is false', async () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-swipe :initial-swipe="active" :loop="false" lazy-render>
|
||||
<van-swipe-item><span>1</span></van-swipe-item>
|
||||
<van-swipe-item><span>2</span></van-swipe-item>
|
||||
<van-swipe-item><span>3</span></van-swipe-item>
|
||||
<van-swipe-item><span>4</span></van-swipe-item>
|
||||
</van-swipe>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
const items = wrapper.findAll('.van-swipe-item');
|
||||
|
||||
const expectRender = (results) => {
|
||||
results.forEach((result, index) => {
|
||||
expect(items.at(index).contains('span')).toEqual(result);
|
||||
});
|
||||
};
|
||||
|
||||
expectRender([true, true, false, false]);
|
||||
|
||||
wrapper.setData({ active: 1 });
|
||||
expectRender([true, true, true, false]);
|
||||
|
||||
wrapper.setData({ active: 2 });
|
||||
expectRender([true, true, true, true]);
|
||||
});
|
||||
298
src/swipe/test/index.spec.js
Normal file
298
src/swipe/test/index.spec.js
Normal file
@ -0,0 +1,298 @@
|
||||
import {
|
||||
mount,
|
||||
later,
|
||||
trigger,
|
||||
triggerDrag,
|
||||
mockGetBoundingClientRect,
|
||||
} from '../../../test';
|
||||
import Swipe from '..';
|
||||
import SwipeItem from '../../swipe-item';
|
||||
|
||||
let restore;
|
||||
|
||||
beforeEach(() => {
|
||||
restore = mockGetBoundingClientRect({
|
||||
width: 100,
|
||||
height: 100,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
restore();
|
||||
});
|
||||
|
||||
function mockPageHidden() {
|
||||
let hidden = true;
|
||||
|
||||
Object.defineProperty(document, 'hidden', {
|
||||
get: () => hidden,
|
||||
});
|
||||
|
||||
trigger(window, 'visibilitychange');
|
||||
hidden = false;
|
||||
}
|
||||
|
||||
const Component = {
|
||||
props: {
|
||||
vertical: Boolean,
|
||||
loop: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
touchable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
autoplay: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
initialSwipe: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const style = {
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
};
|
||||
return (
|
||||
<Swipe ref="swipe" {...this.$props}>
|
||||
<SwipeItem style={style}>1</SwipeItem>
|
||||
<SwipeItem style={style}>2</SwipeItem>
|
||||
<SwipeItem style={style}>3</SwipeItem>
|
||||
</Swipe>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
test('should swipe to specific swipe after calling the swipeTo method', async () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(Component, {
|
||||
props: {
|
||||
onChange,
|
||||
},
|
||||
});
|
||||
|
||||
const { swipe } = wrapper.vm.$refs;
|
||||
swipe.swipeTo(2);
|
||||
|
||||
await later(50);
|
||||
expect(onChange).toHaveBeenCalledWith(2);
|
||||
});
|
||||
|
||||
test('should allow to call swipeTo method with immediate option', async () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(Component, {
|
||||
props: {
|
||||
onChange,
|
||||
},
|
||||
});
|
||||
|
||||
const { swipe } = wrapper.vm.$refs;
|
||||
swipe.swipeTo(2, {
|
||||
immediate: true,
|
||||
});
|
||||
|
||||
await later(50);
|
||||
expect(onChange).toHaveBeenCalledWith(2);
|
||||
});
|
||||
|
||||
test('should swipe to next swipe after calling next method', async () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(Component, {
|
||||
props: {
|
||||
onChange,
|
||||
},
|
||||
});
|
||||
|
||||
const { swipe } = wrapper.vm.$refs;
|
||||
swipe.next();
|
||||
await later(50);
|
||||
expect(onChange).toHaveBeenCalledWith(1);
|
||||
});
|
||||
|
||||
test('should swipe to prev swipe after calling prev method', async () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(Component, {
|
||||
props: {
|
||||
onChange,
|
||||
},
|
||||
});
|
||||
|
||||
const { swipe } = wrapper.vm.$refs;
|
||||
swipe.prev();
|
||||
await later(50);
|
||||
expect(onChange).toHaveBeenCalledWith(2);
|
||||
});
|
||||
|
||||
test('should render initial swipe correctly', async () => {
|
||||
const wrapper = mount(Component);
|
||||
await later();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
await wrapper.setProps({ initialSwipe: 2 });
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render vertical swipe when using vertical prop', async () => {
|
||||
const wrapper = mount(Component, {
|
||||
props: {
|
||||
vertical: true,
|
||||
},
|
||||
});
|
||||
|
||||
const track = wrapper.find('.van-swipe__track');
|
||||
await triggerDrag(track, 0, -100);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should not allow to drag swipe when touchable is false', async () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(Component, {
|
||||
props: {
|
||||
onChange,
|
||||
touchable: false,
|
||||
},
|
||||
});
|
||||
|
||||
const track = wrapper.find('.van-swipe__track');
|
||||
|
||||
await triggerDrag(track, 100, 0);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
expect(onChange).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
test('should render swipe looply when using loop prop', async () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(Component, {
|
||||
props: {
|
||||
onChange,
|
||||
},
|
||||
});
|
||||
const track = wrapper.find('.van-swipe__track');
|
||||
|
||||
await triggerDrag(track, -100, 0);
|
||||
expect(onChange).toHaveBeenLastCalledWith(1);
|
||||
await triggerDrag(track, -100, 0);
|
||||
expect(onChange).toHaveBeenLastCalledWith(2);
|
||||
await triggerDrag(track, -100, 0);
|
||||
expect(onChange).toHaveBeenLastCalledWith(0);
|
||||
await triggerDrag(track, -100, 0);
|
||||
expect(onChange).toHaveBeenLastCalledWith(1);
|
||||
await triggerDrag(track, 100, 0);
|
||||
expect(onChange).toHaveBeenLastCalledWith(0);
|
||||
await triggerDrag(track, 100, 0);
|
||||
expect(onChange).toHaveBeenLastCalledWith(2);
|
||||
await triggerDrag(track, 100, 0);
|
||||
expect(onChange).toHaveBeenLastCalledWith(1);
|
||||
});
|
||||
|
||||
test('should pause auto play when page is hidden', async () => {
|
||||
const onChange = jest.fn();
|
||||
mount(Component, {
|
||||
props: {
|
||||
loop: true,
|
||||
autoplay: 1,
|
||||
onChange,
|
||||
},
|
||||
});
|
||||
|
||||
mockPageHidden();
|
||||
await later(50);
|
||||
expect(onChange).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
test('should render swipe item correctly when using lazy-render prop', async () => {
|
||||
const wrapper = mount({
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Swipe initialSwipe={this.active} lazyRender>
|
||||
<SwipeItem>
|
||||
<span>1</span>
|
||||
</SwipeItem>
|
||||
<SwipeItem>
|
||||
<span>2</span>
|
||||
</SwipeItem>
|
||||
<SwipeItem>
|
||||
<span>3</span>
|
||||
</SwipeItem>
|
||||
<SwipeItem>
|
||||
<span>4</span>
|
||||
</SwipeItem>
|
||||
<SwipeItem>
|
||||
<span>5</span>
|
||||
</SwipeItem>
|
||||
</Swipe>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
const items = wrapper.findAll('.van-swipe-item');
|
||||
|
||||
const expectRender = (results) => {
|
||||
results.forEach((result, index) => {
|
||||
expect(items[index].find('span').exists()).toEqual(result);
|
||||
});
|
||||
};
|
||||
|
||||
expectRender([true, true, false, false, true]);
|
||||
|
||||
await wrapper.setData({ active: 1 });
|
||||
expectRender([true, true, true, false, true]);
|
||||
|
||||
await wrapper.setData({ active: 2 });
|
||||
expectRender([true, true, true, true, true]);
|
||||
});
|
||||
|
||||
test('should render swipe item correctly when using lazy-render prop and loop is false', async () => {
|
||||
const wrapper = mount({
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Swipe initialSwipe={this.active} loop={false} lazyRender>
|
||||
<SwipeItem>
|
||||
<span>1</span>
|
||||
</SwipeItem>
|
||||
<SwipeItem>
|
||||
<span>2</span>
|
||||
</SwipeItem>
|
||||
<SwipeItem>
|
||||
<span>3</span>
|
||||
</SwipeItem>
|
||||
<SwipeItem>
|
||||
<span>4</span>
|
||||
</SwipeItem>
|
||||
</Swipe>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
const items = wrapper.findAll('.van-swipe-item');
|
||||
|
||||
const expectRender = (results) => {
|
||||
results.forEach((result, index) => {
|
||||
expect(items[index].find('span').exists()).toEqual(result);
|
||||
});
|
||||
};
|
||||
|
||||
expectRender([true, true, false, false]);
|
||||
|
||||
await wrapper.setData({ active: 1 });
|
||||
expectRender([true, true, true, false]);
|
||||
|
||||
await wrapper.setData({ active: 2 });
|
||||
expectRender([true, true, true, true]);
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user