diff --git a/src/image-preview/test/__snapshots__/index.legacy.js.snap b/src/image-preview/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index a2337ec27..000000000 --- a/src/image-preview/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,71 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`close-icon prop 1`] = ` -
- -
-
-
-
1 / 0
-
-`; - -exports[`close-icon-position prop 1`] = ` -
- -
-
-
-
1 / 0
-
-`; - -exports[`cover slot 1`] = ` -
-
-
-
-
1 / 0
-
Custom Cover Content
-
-`; - -exports[`index slot 1`] = ` -
-
-
-
-
Custom Index
-
-`; - -exports[`render image 1`] = ` -
-
-
-
-
-
-
-
-
1 / 3
-
-`; - -exports[`set show-index prop to false 1`] = ` -
-
-
-
-
-`; - -exports[`zoom in and drag image to move 1`] = ` -
-
- -
-
-`; - -exports[`zoom in and drag image to move 2`] = `
`; diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap deleted file mode 100644 index d6f6ae45f..000000000 --- a/src/image-preview/test/__snapshots__/index.spec.js.snap +++ /dev/null @@ -1,50 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`should change close icon position when using close-icon-position prop 1`] = ` - - -`; - -exports[`should change close icon when using close-icon prop 1`] = ` - - -`; - -exports[`should render cover slot correctly 1`] = ` - -
-
- - -
-
-
-
-
-
- 1 / 0 -
-
- Custom Cover -
-
- -`; - -exports[`should render index slot correctly 1`] = ` -
- Custom Index: 0 -
-`; - -exports[`should swipe to currect index after calling the swipeTo method 1`] = ` -
- 3 / 3 -
-`; diff --git a/src/image-preview/test/__snapshots__/index.spec.ts.snap b/src/image-preview/test/__snapshots__/index.spec.ts.snap new file mode 100644 index 000000000..41f95f569 --- /dev/null +++ b/src/image-preview/test/__snapshots__/index.spec.ts.snap @@ -0,0 +1,188 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render image 1`] = ` + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ 1 / 3 +
+
+ +`; + +exports[`should change close icon position when using close-icon-position prop 1`] = ` + + +`; + +exports[`should change close icon when using close-icon prop 1`] = ` + + +`; + +exports[`should render cover slot correctly 1`] = ` + +
+
+ + +
+
+
+
+
+
+ 1 / 0 +
+
+ Custom Cover +
+
+ +`; + +exports[`should render index slot correctly 1`] = ` +
+ Custom Index: 0 +
+`; + +exports[`should swipe to currect index after calling the swipeTo method 1`] = ` +
+ 3 / 3 +
+`; + +exports[`zoom in and drag image to move 1`] = ` +DOMWrapper { + "element":
+ +
+ + + +
+ +
, + "style": CSSStyleDeclaration { + "0": "transition-duration", + "_importants": Object { + "transition-duration": undefined, + }, + "_length": 1, + "_onChange": [Function], + "_values": Object { + "transition-duration": ".3s", + }, + }, +} +`; + +exports[`zoom in and drag image to move 2`] = ` +DOMWrapper { + "element":
+ +
+ + + +
+ +
, + "style": CSSStyleDeclaration { + "0": "transition-duration", + "_importants": Object { + "transition-duration": undefined, + }, + "_length": 1, + "_onChange": [Function], + "_values": Object { + "transition-duration": ".3s", + }, + }, +} +`; diff --git a/src/image-preview/test/function.spec.js b/src/image-preview/test/function.spec.ts similarity index 91% rename from src/image-preview/test/function.spec.js rename to src/image-preview/test/function.spec.ts index 82010ddb4..6486f50f5 100644 --- a/src/image-preview/test/function.spec.js +++ b/src/image-preview/test/function.spec.ts @@ -7,7 +7,7 @@ test('should expose ImagePreviewComponent in ImagePreview.Component', () => { }); test('should register component to app', () => { - const app = createApp(); + const app = createApp(document.body); app.use(ImagePreview); expect(app.component(ImagePreviewComponent.name)).toBeTruthy(); }); diff --git a/src/image-preview/test/index.legacy.js b/src/image-preview/test/index.legacy.js deleted file mode 100644 index b6faecc4e..000000000 --- a/src/image-preview/test/index.legacy.js +++ /dev/null @@ -1,243 +0,0 @@ -import Vue from 'vue'; -import ImagePreview from '..'; -import ImagePreviewVue from '../ImagePreview'; -import { - later, - mount, - trigger, - triggerDrag, - mockGetBoundingClientRect, -} from '../../../test'; - -function triggerTwoFingerTouchmove(el, x, y) { - trigger(el, 'touchmove', -x, -y, { x, y }); -} - -function triggerZoom(el, x, y, 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: [] }); -} - -const images = [ - 'https://img01.yzcdn.cn/1.png', - 'https://img01.yzcdn.cn/2.png', - 'https://img01.yzcdn.cn/3.png', -]; - -test('render image', async () => { - const wrapper = mount(ImagePreviewVue, { - props: { images, value: true }, - }); - - expect(wrapper.html()).toMatchSnapshot(); - - await later(); - - const swipe = wrapper.find('.van-swipe-item'); - triggerDrag(swipe, 500, 0); - expect(wrapper.emitted('input')).toBeFalsy(); - expect(wrapper.emitted('change')[0][0]).toEqual(2); - - triggerDrag(swipe, 0, 0); - await later(250); - expect(wrapper.emitted('input')[0][0]).toEqual(false); -}); - -test('async close prop', async () => { - const wrapper = mount(ImagePreviewVue, { - props: { - images, - value: true, - asyncClose: true, - }, - listeners: { - input(value) { - wrapper.setProps({ value }); - }, - }, - }); - - const swipe = wrapper.find('.van-swipe__track'); - - // should not emit input or close event when tapped - triggerDrag(swipe, 0, 0); - await later(250); - expect(wrapper.emitted('input')).toBeFalsy(); - expect(wrapper.emitted('close')).toBeFalsy(); - - wrapper.vm.close(); - expect(wrapper.emitted('input')[0]).toBeTruthy(); - expect(wrapper.emitted('close')[0]).toBeTruthy(); -}); - -test('function call', (done) => { - ImagePreview(images); - ImagePreview(images.slice(0, 1)); - Vue.nextTick(() => { - const wrapper = document.querySelector('.van-image-preview'); - const swipe = wrapper.querySelector('.van-swipe__track'); - triggerDrag(swipe, 0, 0); - - expect(wrapper.querySelectorAll('img').length).toEqual(1); - done(); - }); -}); - -test('double click', async () => { - const onScale = jest.fn(); - const wrapper = mount(ImagePreviewVue, { - props: { - images, - value: true, - }, - listeners: { - scale: onScale, - }, - }); - - await later(); - const swipe = wrapper.find('.van-swipe-item'); - triggerDrag(swipe, 0, 0); - triggerDrag(swipe, 0, 0); - expect(onScale).toHaveBeenCalledWith({ - index: 0, - scale: 2, - }); - - await later(); - triggerDrag(swipe, 0, 0); - triggerDrag(swipe, 0, 0); - expect(onScale).toHaveBeenLastCalledWith({ - index: 0, - scale: 1, - }); -}); - -test('onClose option', () => { - const onClose = jest.fn(); - const instance = ImagePreview({ - images, - startPostion: 1, - onClose, - }); - - instance.close(); - - expect(onClose).toHaveBeenCalledTimes(1); - expect(onClose).toHaveBeenCalledWith({ - index: 0, - url: 'https://img01.yzcdn.cn/1.png', - }); -}); - -test('onChange option', async (done) => { - const instance = ImagePreview({ - images, - startPostion: 0, - onChange(index) { - expect(index).toEqual(2); - done(); - }, - }); - - const swipe = instance.$el.querySelector('.van-swipe__track'); - triggerDrag(swipe, 1000, 0); -}); - -test('onScale option', async (done) => { - const restore = mockGetBoundingClientRect({ width: 100 }); - const instance = ImagePreview({ - images, - startPosition: 0, - onScale({ index, scale }) { - expect(index).toEqual(2); - expect(scale <= 2).toBeTruthy(); - done(); - }, - }); - - await later(); - const image = instance.$el.querySelector('img'); - triggerZoom(image, 300, 300); - restore(); -}); - -test('zoom in and drag image to move', async () => { - const restore = mockGetBoundingClientRect({ width: 100, height: 100 }); - - const wrapper = mount(ImagePreviewVue, { - props: { images, value: true }, - }); - - await later(); - const image = wrapper.find('img'); - triggerZoom(image, 300, 300); - - // mock image size - ['naturalWidth', 'naturalHeight'].forEach((key) => { - Object.defineProperty(image.element, key, { value: 300 }); - }); - - // drag image before load - triggerDrag(image, 300, 300); - expect(wrapper.find('.van-image')).toMatchSnapshot(); - - // drag image after load - image.trigger('load'); - triggerDrag(image, 300, 300); - expect(wrapper.find('.van-image')).toMatchSnapshot(); - - restore(); -}); - -test('zoom out', async () => { - const restore = mockGetBoundingClientRect({ width: 100 }); - - const onScale = jest.fn(); - const wrapper = mount(ImagePreviewVue, { - props: { images, value: true }, - listeners: { - scale: onScale, - }, - }); - - await later(); - const image = wrapper.find('.van-image'); - triggerZoom(image, 300, 300, 'out'); - - expect(onScale).toHaveBeenLastCalledWith({ index: 0, scale: 1 }); - - restore(); -}); - -test('get container with function call ', async (done) => { - const element = document.createElement('div'); - document.body.appendChild(element); - ImagePreview({ images, teleport: element }); - - await Vue.nextTick(); - const wrapperDiv = document.querySelector('.van-image-preview'); - expect(wrapperDiv.parentNode).toEqual(element); - document.body.removeChild(element); - - ImagePreview(images); - - await Vue.nextTick(); - const wrapperBody = document.querySelector('.van-image-preview'); - expect(wrapperBody.parentNode).toEqual(document.body); - - done(); -}); diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js deleted file mode 100644 index 429032fae..000000000 --- a/src/image-preview/test/index.spec.js +++ /dev/null @@ -1,140 +0,0 @@ -import { mount , later } from '../../../test'; -import ImagePreviewComponent from '../ImagePreview'; - -import { trigger } from '../../utils'; - -const images = [ - 'https://img01.yzcdn.cn/1.png', - 'https://img01.yzcdn.cn/2.png', - 'https://img01.yzcdn.cn/3.png', -]; - -test('should swipe to currect index after calling the swipeTo method', async () => { - const wrapper = mount(ImagePreviewComponent, { - props: { - show: true, - images, - }, - }); - await later(); - wrapper.vm.swipeTo(2); - - await later(100); - expect(wrapper.find('.van-image-preview__index').html()).toMatchSnapshot(); -}); - -test('should allow to use the teleport prop', () => { - const root = document.createElement('div'); - mount(ImagePreviewComponent, { - props: { - show: true, - teleport: root, - }, - }); - - expect(root.querySelector('.van-image-preview')).toBeTruthy(); -}); - -test('should render cover slot correctly', () => { - const wrapper = mount(ImagePreviewComponent, { - props: { - show: true, - }, - slots: { - cover: () => 'Custom Cover', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('should render index slot correctly', () => { - const wrapper = mount(ImagePreviewComponent, { - props: { - show: true, - }, - slots: { - index: ({ index }) => `Custom Index: ${index}`, - }, - }); - - expect(wrapper.find('.van-image-preview__index').html()).toMatchSnapshot(); -}); - -test('should render close icon when using closeable prop', () => { - const wrapper = mount(ImagePreviewComponent, { - props: { - show: true, - images, - closeable: true, - }, - }); - - wrapper.find('.van-image-preview__close-icon').trigger('click'); - expect(wrapper.emitted('update:show')[0][0]).toEqual(false); -}); - -test('should change close icon when using close-icon prop', () => { - const wrapper = mount(ImagePreviewComponent, { - props: { - show: true, - closeable: true, - closeIcon: 'success', - }, - }); - - expect( - wrapper.find('.van-image-preview__close-icon').html() - ).toMatchSnapshot(); -}); - -test('should change close icon position when using close-icon-position prop', () => { - const wrapper = mount(ImagePreviewComponent, { - props: { - show: true, - closeable: true, - closeIconPosition: 'top-left', - }, - }); - - expect( - wrapper.find('.van-image-preview__close-icon').html() - ).toMatchSnapshot(); -}); - -test('should hide index when show-index prop is false', async () => { - const wrapper = mount(ImagePreviewComponent, { - props: { - show: true, - }, - }); - expect(wrapper.find('.van-image-preview__index').exists()).toBeTruthy(); - - await wrapper.setProps({ showIndex: false }); - expect(wrapper.find('.van-image-preview__index').exists()).toBeFalsy(); -}); - -test('should hide ImagePreview after popstate', async () => { - const wrapper = mount(ImagePreviewComponent, { - props: { - images, - show: true, - }, - }); - - trigger(window, 'popstate'); - expect(wrapper.emitted('update:show')[0][0]).toBeFalsy(); -}); - -test('should not hide ImagePreview after popstate when close-on-popstate is false', async () => { - const wrapper = mount(ImagePreviewComponent, { - props: { - images, - show: true, - closeOnPopstate: false, - }, - }); - - trigger(window, 'popstate'); - expect(wrapper.emitted('update:show')).toBeFalsy(); -}); diff --git a/src/image-preview/test/index.spec.ts b/src/image-preview/test/index.spec.ts new file mode 100644 index 000000000..9f80b8027 --- /dev/null +++ b/src/image-preview/test/index.spec.ts @@ -0,0 +1,384 @@ +import { + mount, + later, + triggerDrag, + mockGetBoundingClientRect, + trigger, +} from '../../../test'; +import ImagePreviewComponent from '../ImagePreview'; +import ImagePreview from '..'; +import { nextTick } from 'vue'; +import { DOMWrapper } from '@vue/test-utils/dist/domWrapper'; + +const images = [ + 'https://img01.yzcdn.cn/1.png', + 'https://img01.yzcdn.cn/2.png', + 'https://img01.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 () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + show: true, + images, + }, + }); + + await later(); + (wrapper.vm as Record).swipeTo(2); + + await later(100); + expect(wrapper.find('.van-image-preview__index').html()).toMatchSnapshot(); +}); + +test('should allow to use the teleport prop', () => { + const root = document.createElement('div'); + mount(ImagePreviewComponent, { + props: { + show: true, + teleport: root, + }, + }); + + expect(root.querySelector('.van-image-preview')).toBeTruthy(); +}); + +test('should render cover slot correctly', () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + show: true, + }, + slots: { + cover: () => 'Custom Cover', + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render index slot correctly', () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + show: true, + }, + slots: { + index: ({ index }) => `Custom Index: ${index}`, + }, + }); + + expect(wrapper.find('.van-image-preview__index').html()).toMatchSnapshot(); +}); + +test('should render close icon when using closeable prop', () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + show: true, + images, + closeable: true, + }, + }); + + wrapper.find('.van-image-preview__close-icon').trigger('click'); + expect(wrapper.emitted<[boolean]>('update:show')![0][0]).toEqual(false); +}); + +test('should change close icon when using close-icon prop', () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + show: true, + closeable: true, + closeIcon: 'success', + }, + }); + + expect( + wrapper.find('.van-image-preview__close-icon').html() + ).toMatchSnapshot(); +}); + +test('should change close icon position when using close-icon-position prop', () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + show: true, + closeable: true, + closeIconPosition: 'top-left', + }, + }); + + expect( + wrapper.find('.van-image-preview__close-icon').html() + ).toMatchSnapshot(); +}); + +test('should hide index when show-index prop is false', async () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + show: true, + }, + }); + expect(wrapper.find('.van-image-preview__index').exists()).toBeTruthy(); + + await wrapper.setProps({ showIndex: false }); + expect(wrapper.find('.van-image-preview__index').exists()).toBeFalsy(); +}); + +test('should hide ImagePreview after popstate', async () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + images, + show: true, + }, + }); + + window.dispatchEvent(new Event('popstate')); + expect(wrapper.emitted<[boolean]>('update:show')![0][0]).toBeFalsy(); +}); + +test('should not hide ImagePreview after popstate when close-on-popstate is false', async () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + images, + show: true, + closeOnPopstate: false, + }, + }); + + window.dispatchEvent(new Event('popstate')); + expect(wrapper.emitted('update:show')).toBeFalsy(); +}); + +test('render image', async () => { + const wrapper = mount(ImagePreviewComponent, { + props: { images, show: true }, + }); + + expect(wrapper.html()).toMatchSnapshot(); + + await later(); + + const swipe = wrapper.find('.van-swipe-item'); + await triggerDrag(swipe, 500, 0); + expect(wrapper.emitted('update:show')).toBeFalsy(); + expect(wrapper.emitted('change')![0]).toEqual([2]); + + triggerDrag(swipe, 0, 0); + await later(250); + expect(wrapper.emitted('update:show')![0]).toEqual([false]); +}); + +test('before close prop', async () => { + const wrapper = mount(ImagePreviewComponent, { + props: { + images, + show: true, + beforeClose: () => true, + }, + }); + + const swipe = wrapper.find('.van-swipe__track'); + + // should not emit input or close event when tapped + triggerDrag(swipe, 0, 0); + await later(250); + expect(wrapper.emitted('input')).toBeFalsy(); + expect(wrapper.emitted('close')).toBeFalsy(); + + await wrapper.setProps({ show: false }); + expect(wrapper.emitted('update:show')![0]).toBeTruthy(); + 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, { + props: { + images, + show: true, + onScale, + }, + }); + + await later(); + const swipe = wrapper.find('.van-swipe-item'); + triggerDrag(swipe, 0, 0); + triggerDrag(swipe, 0, 0); + expect(onScale).toHaveBeenCalledWith({ + index: 0, + scale: 2, + }); + + await later(); + triggerDrag(swipe, 0, 0); + triggerDrag(swipe, 0, 0); + expect(onScale).toHaveBeenLastCalledWith({ + index: 0, + scale: 1, + }); +}); + +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 }); + + const wrapper = mount(ImagePreviewComponent, { + props: { images, show: true }, + }); + + await later(); + const image = wrapper.find('img'); + triggerZoom(image, 300, 300); + + // mock image size + ['naturalWidth', 'naturalHeight'].forEach((key) => { + Object.defineProperty(image.element, key, { value: 300 }); + }); + + // drag image before load + triggerDrag(image, 300, 300); + expect(wrapper.find('.van-image')).toMatchSnapshot(); + + // drag image after load + image.trigger('load'); + triggerDrag(image, 300, 300); + expect(wrapper.find('.van-image')).toMatchSnapshot(); + + restore(); +}); + +test('zoom out', async () => { + const restore = mockGetBoundingClientRect({ width: 100, height: 100 }); + + const onScale = jest.fn(); + const wrapper = mount(ImagePreviewComponent, { + props: { + images, + show: true, + onScale, + }, + }); + + await later(); + const image = wrapper.find('.van-image'); + triggerZoom(image, 300, 300, 'out'); + + expect(onScale).toHaveBeenLastCalledWith({ index: 0, scale: 1 }); + + 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); +});