fix(ImagePreview): add test cases (#8282)

This commit is contained in:
nemo-shen
2021-03-06 20:09:21 +08:00
committed by GitHub
parent 8d64c3b590
commit 4d17bced55
7 changed files with 573 additions and 505 deletions
@@ -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>
`;
@@ -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",
},
},
}
`;