diff --git a/src/swipe/test/__snapshots__/index.spec.js.snap b/src/swipe/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..7a762ba3b --- /dev/null +++ b/src/swipe/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,129 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should not allow to drag swipe when touchable is false 1`] = ` +
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+
+ + + + + + +
+
+`; + +exports[`should render initial swipe correctly 1`] = ` +
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+
+ + + + + + +
+
+`; + +exports[`should render initial swipe correctly 2`] = ` +
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+
+ + + + + + +
+
+`; + +exports[`should render vertical swipe when using vertical prop 1`] = ` +
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+
+ + + + + + +
+
+`; diff --git a/src/swipe/test/index.legacy.js b/src/swipe/test/index.legacy.js deleted file mode 100644 index b0bf70edf..000000000 --- a/src/swipe/test/index.legacy.js +++ /dev/null @@ -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: ` - - 1 - 2 - 3 - - `, - 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: ` - - 1 - 2 - 3 - 4 - 5 - - `, - 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: ` - - 1 - 2 - 3 - 4 - - `, - 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]); -}); diff --git a/src/swipe/test/index.spec.js b/src/swipe/test/index.spec.js new file mode 100644 index 000000000..bcd88fc28 --- /dev/null +++ b/src/swipe/test/index.spec.js @@ -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 ( + + 1 + 2 + 3 + + ); + }, +}; + +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 ( + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + ); + }, + }); + + 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 ( + + + 1 + + + 2 + + + 3 + + + 4 + + + ); + }, + }); + + 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]); +});