mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
fix(ImagePreview): add test cases (#8282)
This commit is contained in:
nemo-shen
GitHub
parent
8d64c3b590
commit
4d17bced55
@ -1,71 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`close-icon prop 1`] = `
|
|
||||||
<div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-right">
|
|
||||||
<!----></i>
|
|
||||||
<div class="van-swipe van-image-preview__swipe">
|
|
||||||
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-image-preview__index">1 / 0</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`close-icon-position prop 1`] = `
|
|
||||||
<div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-left">
|
|
||||||
<!----></i>
|
|
||||||
<div class="van-swipe van-image-preview__swipe">
|
|
||||||
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-image-preview__index">1 / 0</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`cover slot 1`] = `
|
|
||||||
<div class="van-image-preview" name="van-fade">
|
|
||||||
<div class="van-swipe van-image-preview__swipe">
|
|
||||||
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-image-preview__index">1 / 0</div>
|
|
||||||
<div class="van-image-preview__cover">Custom Cover Content</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`index slot 1`] = `
|
|
||||||
<div class="van-image-preview" name="van-fade">
|
|
||||||
<div class="van-swipe van-image-preview__swipe">
|
|
||||||
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-image-preview__index">Custom Index</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render image 1`] = `
|
|
||||||
<div class="van-image-preview" name="van-fade">
|
|
||||||
<div class="van-swipe van-image-preview__swipe">
|
|
||||||
<div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
|
|
||||||
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
|
|
||||||
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
|
|
||||||
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-image-preview__index">1 / 3</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`set show-index prop to false 1`] = `
|
|
||||||
<div class="van-image-preview" name="van-fade">
|
|
||||||
<div class="van-swipe van-image-preview__swipe">
|
|
||||||
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`zoom in and drag image to move 1`] = `
|
|
||||||
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, 0px);"><img src="https://img01.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
|
|
||||||
<div class="van-image__loading">
|
|
||||||
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`zoom in and drag image to move 2`] = `<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(25px, 25px);"><img src="https://img01.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;"></div>`;
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`should change close icon position when using close-icon-position prop 1`] = `
|
|
||||||
<i class="van-badge__wrapper van-icon van-icon-clear van-image-preview__close-icon van-image-preview__close-icon--top-left"
|
|
||||||
role="button"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`should change close icon when using close-icon prop 1`] = `
|
|
||||||
<i class="van-badge__wrapper van-icon van-icon-success van-image-preview__close-icon van-image-preview__close-icon--top-right"
|
|
||||||
role="button"
|
|
||||||
>
|
|
||||||
</i>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`should render cover slot correctly 1`] = `
|
|
||||||
<transition-stub class="van-image-preview__overlay">
|
|
||||||
<div class="van-overlay">
|
|
||||||
</div>
|
|
||||||
</transition-stub>
|
|
||||||
<transition-stub>
|
|
||||||
<div class="van-popup van-popup--center van-image-preview">
|
|
||||||
<div class="van-swipe van-image-preview__swipe">
|
|
||||||
<div style="transition-duration: 300ms; transform: translateX(0px);"
|
|
||||||
class="van-swipe__track"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-image-preview__index">
|
|
||||||
1 / 0
|
|
||||||
</div>
|
|
||||||
<div class="van-image-preview__cover">
|
|
||||||
Custom Cover
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition-stub>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`should render index slot correctly 1`] = `
|
|
||||||
<div class="van-image-preview__index">
|
|
||||||
Custom Index: 0
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`should swipe to currect index after calling the swipeTo method 1`] = `
|
|
||||||
<div class="van-image-preview__index">
|
|
||||||
3 / 3
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
188
src/image-preview/test/__snapshots__/index.spec.ts.snap
Normal file
188
src/image-preview/test/__snapshots__/index.spec.ts.snap
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`render image 1`] = `
|
||||||
|
<transition-stub class="van-image-preview__overlay">
|
||||||
|
<div class="van-overlay">
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div class="van-popup van-popup--center van-image-preview">
|
||||||
|
<div class="van-swipe van-image-preview__swipe">
|
||||||
|
<div style="transition-duration: 300ms; transform: translateX(0px);"
|
||||||
|
class="van-swipe__track"
|
||||||
|
>
|
||||||
|
<div class="van-swipe-item van-image-preview__swipe-item">
|
||||||
|
</div>
|
||||||
|
<div class="van-swipe-item van-image-preview__swipe-item">
|
||||||
|
</div>
|
||||||
|
<div class="van-swipe-item van-image-preview__swipe-item">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-image-preview__index">
|
||||||
|
1 / 3
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should change close icon position when using close-icon-position prop 1`] = `
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-clear van-image-preview__close-icon van-image-preview__close-icon--top-left"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should change close icon when using close-icon prop 1`] = `
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success van-image-preview__close-icon van-image-preview__close-icon--top-right"
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render cover slot correctly 1`] = `
|
||||||
|
<transition-stub class="van-image-preview__overlay">
|
||||||
|
<div class="van-overlay">
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
<transition-stub>
|
||||||
|
<div class="van-popup van-popup--center van-image-preview">
|
||||||
|
<div class="van-swipe van-image-preview__swipe">
|
||||||
|
<div style="transition-duration: 300ms; transform: translateX(0px);"
|
||||||
|
class="van-swipe__track"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-image-preview__index">
|
||||||
|
1 / 0
|
||||||
|
</div>
|
||||||
|
<div class="van-image-preview__cover">
|
||||||
|
Custom Cover
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition-stub>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render index slot correctly 1`] = `
|
||||||
|
<div class="van-image-preview__index">
|
||||||
|
Custom Index: 0
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should swipe to currect index after calling the swipeTo method 1`] = `
|
||||||
|
<div class="van-image-preview__index">
|
||||||
|
3 / 3
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`zoom in and drag image to move 1`] = `
|
||||||
|
DOMWrapper {
|
||||||
|
"element": <div
|
||||||
|
class="van-image van-image-preview__image"
|
||||||
|
style="transition-duration: .3s;"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="van-image__img"
|
||||||
|
src="https://img01.yzcdn.cn/1.png"
|
||||||
|
style="object-fit: contain;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="van-image__loading"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="van-loading van-loading--spinner"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="van-loading__spinner van-loading__spinner--spinner"
|
||||||
|
>
|
||||||
|
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
|
||||||
|
</span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!---->
|
||||||
|
</div>,
|
||||||
|
"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": <div
|
||||||
|
class="van-image van-image-preview__image"
|
||||||
|
style="transition-duration: .3s;"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="van-image__img"
|
||||||
|
src="https://img01.yzcdn.cn/1.png"
|
||||||
|
style="object-fit: contain;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="van-image__loading"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="van-loading van-loading--spinner"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="van-loading__spinner van-loading__spinner--spinner"
|
||||||
|
>
|
||||||
|
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
<i />
|
||||||
|
|
||||||
|
</span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!---->
|
||||||
|
</div>,
|
||||||
|
"style": CSSStyleDeclaration {
|
||||||
|
"0": "transition-duration",
|
||||||
|
"_importants": Object {
|
||||||
|
"transition-duration": undefined,
|
||||||
|
},
|
||||||
|
"_length": 1,
|
||||||
|
"_onChange": [Function],
|
||||||
|
"_values": Object {
|
||||||
|
"transition-duration": ".3s",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
`;
|
||||||
@ -7,7 +7,7 @@ test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('should register component to app', () => {
|
test('should register component to app', () => {
|
||||||
const app = createApp();
|
const app = createApp(document.body);
|
||||||
app.use(ImagePreview);
|
app.use(ImagePreview);
|
||||||
expect(app.component(ImagePreviewComponent.name)).toBeTruthy();
|
expect(app.component(ImagePreviewComponent.name)).toBeTruthy();
|
||||||
});
|
});
|
||||||
@ -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();
|
|
||||||
});
|
|
||||||
@ -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();
|
|
||||||
});
|
|
||||||
384
src/image-preview/test/index.spec.ts
Normal file
384
src/image-preview/test/index.spec.ts
Normal file
@ -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<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 () => {
|
||||||
|
const wrapper = mount(ImagePreviewComponent, {
|
||||||
|
props: {
|
||||||
|
show: true,
|
||||||
|
images,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
(wrapper.vm as Record<string, any>).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);
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user