diff --git a/packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap index d5d7ed630..c717c4639 100644 --- a/packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap @@ -69,7 +69,7 @@ exports[`should render index slot correctly 1`] = ` `; -exports[`should swipe to currect index after calling the swipeTo method 1`] = ` +exports[`should swipe to current index after calling the swipeTo method 1`] = `
3 / 3
diff --git a/packages/vant/src/image-preview/test/function-call.spec.ts b/packages/vant/src/image-preview/test/function-call.spec.ts index 3eb380cf8..5d2588f56 100644 --- a/packages/vant/src/image-preview/test/function-call.spec.ts +++ b/packages/vant/src/image-preview/test/function-call.spec.ts @@ -1,6 +1,8 @@ -import { createApp } from 'vue'; +import { later, triggerDrag, mockGetBoundingClientRect } from '../../../test'; +import { createApp, nextTick } from 'vue'; import { ImagePreview } from '../function-call'; import ImagePreviewComponent from '../ImagePreview'; +import { images, triggerZoom } from './shared'; test('should expose ImagePreviewComponent in ImagePreview.Component', () => { expect(ImagePreview.Component.name).toEqual('van-image-preview'); @@ -11,3 +13,59 @@ test('should register component to app', () => { app.use(ImagePreview); expect(app.component(ImagePreviewComponent.name)).toBeTruthy(); }); + +test('should allow to use the teleport option', async () => { + const root = document.createElement('div'); + ImagePreview({ images: [], teleport: root }); + + await later(); + expect(root.querySelector('.van-image-preview')).toBeTruthy(); +}); + +test('should trigger onClose option correctly', async () => { + const onClose = jest.fn(); + const instance = ImagePreview({ + images, + startPosition: 1, + onClose, + }); + + await instance?.close(); + + expect(onClose).toHaveBeenCalledTimes(1); + expect(onClose).toHaveBeenCalledWith({ + index: 0, + url: images[0], + }); +}); + +test('should trigger onChange option correctly', async () => { + const onChange = jest.fn(); + ImagePreview({ + images, + startPosition: 0, + onChange, + }); + + await nextTick(); + const swipe = document.querySelector('.van-swipe__track') as HTMLDivElement; + triggerDrag(swipe, 1000, 0); + expect(onChange).toHaveBeenCalledWith(2); +}); + +test('should trigger onScale option correctly', async () => { + const restore = mockGetBoundingClientRect({ width: 100 }); + ImagePreview({ + images, + startPosition: 0, + onScale({ index, scale }) { + expect(index).toEqual(2); + expect(scale <= 2).toBeTruthy(); + }, + }); + + await later(); + const image = document.querySelector('img') as HTMLImageElement; + triggerZoom(image, 300, 300); + restore(); +}); diff --git a/packages/vant/src/image-preview/test/index.spec.ts b/packages/vant/src/image-preview/test/index.spec.ts index a808ba7e3..dd8467685 100644 --- a/packages/vant/src/image-preview/test/index.spec.ts +++ b/packages/vant/src/image-preview/test/index.spec.ts @@ -1,53 +1,13 @@ -import { nextTick } from 'vue'; -import { DOMWrapper } from '@vue/test-utils/dist/domWrapper'; import { mount, later, - trigger, triggerDrag, mockGetBoundingClientRect, } from '../../../test'; -import { ImagePreview } from '../function-call'; import ImagePreviewComponent from '../ImagePreview'; +import { images, triggerZoom } from './shared'; -const images = [ - 'https://img.yzcdn.cn/1.png', - 'https://img.yzcdn.cn/2.png', - 'https://img.yzcdn.cn/3.png', -]; - -function triggerTwoFingerTouchmove( - el: Element | DOMWrapper, - x: number, - y: number -) { - trigger(el, 'touchmove', -x, -y, { x, y }); -} - -function triggerZoom( - el: Element | DOMWrapper, - x: number, - y: number, - direction = 'in' -) { - trigger(el, 'touchstart', 0, 0, { x, y }); - - if (direction === 'in') { - triggerTwoFingerTouchmove(el, x / 4, y / 4); - triggerTwoFingerTouchmove(el, x / 3, y / 3); - triggerTwoFingerTouchmove(el, x / 2, y / 2); - triggerTwoFingerTouchmove(el, x, y); - } else if (direction === 'out') { - triggerTwoFingerTouchmove(el, x, y); - triggerTwoFingerTouchmove(el, x / 2, y / 2); - triggerTwoFingerTouchmove(el, x / 3, y / 3); - triggerTwoFingerTouchmove(el, x / 4, y / 4); - } - - trigger(el, 'touchend', 0, 0, { touchList: [] }); -} - -test('should swipe to currect index after calling the swipeTo method', async () => { +test('should swipe to current index after calling the swipeTo method', async () => { const wrapper = mount(ImagePreviewComponent, { props: { show: true, @@ -218,21 +178,6 @@ test('before close prop', async () => { expect(wrapper.emitted('close')![0]).toBeTruthy(); }); -test('function call', async () => { - ImagePreview({ images }); - ImagePreview({ images: images.slice(0, 1) }); - - await later(); - await nextTick(); - const wrapper = document.querySelector( - '.van-image-preview' - ) as HTMLDivElement; - const swipe = wrapper.querySelector('.van-swipe__track') as HTMLDivElement; - triggerDrag(swipe, 0, 0); - - expect(wrapper.querySelectorAll('img').length).toEqual(1); -}); - test('double click', async () => { const onScale = jest.fn(); const wrapper = mount(ImagePreviewComponent, { @@ -261,54 +206,6 @@ test('double click', async () => { }); }); -test('onClose option', async () => { - const onClose = jest.fn(); - const instance = ImagePreview({ - images, - startPosition: 1, - onClose, - }); - - await instance?.close(); - - expect(onClose).toHaveBeenCalledTimes(1); - expect(onClose).toHaveBeenCalledWith({ - index: 0, - url: images[0], - }); -}); - -test('onChange option', async () => { - const onChange = jest.fn(); - ImagePreview({ - images, - startPosition: 0, - onChange, - }); - - await nextTick(); - const swipe = document.querySelector('.van-swipe__track') as HTMLDivElement; - triggerDrag(swipe, 1000, 0); - expect(onChange).toHaveBeenCalledWith(2); -}); - -test('onScale option', async () => { - const restore = mockGetBoundingClientRect({ width: 100 }); - ImagePreview({ - images, - startPosition: 0, - onScale({ index, scale }) { - expect(index).toEqual(2); - expect(scale <= 2).toBeTruthy(); - }, - }); - - await later(); - const image = document.querySelector('img') as HTMLImageElement; - triggerZoom(image, 300, 300); - restore(); -}); - test('zoom in and drag image to move', async () => { const restore = mockGetBoundingClientRect({ width: 100, height: 100 }); @@ -357,27 +254,3 @@ test('zoom out', async () => { restore(); }); - -test('should allow to use the teleport option', async () => { - const element = document.createElement('div'); - element.id = 'parent-node'; - document.body.appendChild(element); - ImagePreview({ images, teleport: element }); - - await later(); - await nextTick(); - const wrapperDiv = document.querySelector( - '.van-image-preview' - ) as HTMLDivElement; - expect(wrapperDiv.parentElement?.parentElement?.id).toEqual(element.id); - document.body.removeChild(element); - - ImagePreview(images); - - await later(); - await nextTick(); - const wrapperBody = document.querySelector( - '.van-image-preview' - ) as HTMLDivElement; - expect(wrapperBody.parentElement?.parentElement).toEqual(document.body); -}); diff --git a/packages/vant/src/image-preview/test/shared.ts b/packages/vant/src/image-preview/test/shared.ts new file mode 100644 index 000000000..f5ea64fd4 --- /dev/null +++ b/packages/vant/src/image-preview/test/shared.ts @@ -0,0 +1,39 @@ +import { DOMWrapper } from '@vue/test-utils/dist/domWrapper'; +import { trigger } from '../../../test'; + +export const images = [ + 'https://img.yzcdn.cn/1.png', + 'https://img.yzcdn.cn/2.png', + 'https://img.yzcdn.cn/3.png', +]; + +function triggerTwoFingerTouchmove( + el: Element | DOMWrapper, + x: number, + y: number +) { + trigger(el, 'touchmove', -x, -y, { x, y }); +} + +export function triggerZoom( + el: Element | DOMWrapper, + x: number, + y: number, + direction = 'in' +) { + trigger(el, 'touchstart', 0, 0, { x, y }); + + if (direction === 'in') { + triggerTwoFingerTouchmove(el, x / 4, y / 4); + triggerTwoFingerTouchmove(el, x / 3, y / 3); + triggerTwoFingerTouchmove(el, x / 2, y / 2); + triggerTwoFingerTouchmove(el, x, y); + } else if (direction === 'out') { + triggerTwoFingerTouchmove(el, x, y); + triggerTwoFingerTouchmove(el, x / 2, y / 2); + triggerTwoFingerTouchmove(el, x / 3, y / 3); + triggerTwoFingerTouchmove(el, x / 4, y / 4); + } + + trigger(el, 'touchend', 0, 0, { touchList: [] }); +}