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', () => {
|
||||
const app = createApp();
|
||||
const app = createApp(document.body);
|
||||
app.use(ImagePreview);
|
||||
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