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