mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(ImagePreview): sort test cases
This commit is contained in:
chenjiahan
neverland
parent
4859d77623
commit
ebffeb4cda
@ -69,7 +69,7 @@ exports[`should render index slot correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should swipe to currect index after calling the swipeTo method 1`] = `
|
||||
exports[`should swipe to current index after calling the swipeTo method 1`] = `
|
||||
<div class="van-image-preview__index">
|
||||
3 / 3
|
||||
</div>
|
||||
|
||||
@ -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();
|
||||
});
|
||||
|
||||
@ -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<Element>,
|
||||
x: number,
|
||||
y: number
|
||||
) {
|
||||
trigger(el, 'touchmove', -x, -y, { x, y });
|
||||
}
|
||||
|
||||
function triggerZoom(
|
||||
el: Element | DOMWrapper<Element>,
|
||||
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);
|
||||
});
|
||||
|
||||
39
packages/vant/src/image-preview/test/shared.ts
Normal file
39
packages/vant/src/image-preview/test/shared.ts
Normal file
@ -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<Element>,
|
||||
x: number,
|
||||
y: number
|
||||
) {
|
||||
trigger(el, 'touchmove', -x, -y, { x, y });
|
||||
}
|
||||
|
||||
export function triggerZoom(
|
||||
el: Element | DOMWrapper<Element>,
|
||||
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: [] });
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user