mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-16 20:34:20 +08:00
fix(components): [image-viewer] dont persist image preview list (#20807)
* fix(components): [image-viewer] dont persist image preview list * chore: rearrange tests
This commit is contained in:
@ -1,7 +1,7 @@
|
|||||||
import { nextTick } from 'vue'
|
import { nextTick } from 'vue'
|
||||||
import { mount } from '@vue/test-utils'
|
import { mount } from '@vue/test-utils'
|
||||||
import { describe, expect, test } from 'vitest'
|
import { describe, expect, test } from 'vitest'
|
||||||
import { IMAGE_SUCCESS } from '@element-plus/test-utils/mock'
|
import { IMAGE_FAIL, IMAGE_SUCCESS } from '@element-plus/test-utils/mock'
|
||||||
import ImageViewer from '../src/image-viewer.vue'
|
import ImageViewer from '../src/image-viewer.vue'
|
||||||
|
|
||||||
async function doubleWait() {
|
async function doubleWait() {
|
||||||
@ -41,21 +41,22 @@ describe('<image-viewer />', () => {
|
|||||||
|
|
||||||
test('manually switch image', async () => {
|
test('manually switch image', async () => {
|
||||||
const wrapper = mount(
|
const wrapper = mount(
|
||||||
<ImageViewer urlList={[IMAGE_SUCCESS, IMAGE_SUCCESS]} />
|
<ImageViewer urlList={[IMAGE_SUCCESS, IMAGE_FAIL]} initialIndex={0} />
|
||||||
)
|
)
|
||||||
|
|
||||||
await doubleWait()
|
await doubleWait()
|
||||||
const viewer = wrapper.find('.el-image-viewer__wrapper')
|
const viewer = wrapper.find('.el-image-viewer__wrapper')
|
||||||
expect(viewer.exists()).toBe(true)
|
expect(viewer.exists()).toBe(true)
|
||||||
|
|
||||||
const imgList = wrapper.findAll('.el-image-viewer__img')
|
const img = wrapper.find('.el-image-viewer__img')
|
||||||
expect(imgList[0].attributes('style')).not.contains('display: none;')
|
expect(img.attributes('src')).toBe(IMAGE_SUCCESS)
|
||||||
expect(imgList[1].attributes('style')).contains('display: none;')
|
|
||||||
|
|
||||||
wrapper.vm.setActiveItem(1)
|
wrapper.vm.setActiveItem(1)
|
||||||
await doubleWait()
|
await doubleWait()
|
||||||
expect(imgList[0].attributes('style')).contains('display: none;')
|
expect(wrapper.find('.el-image-viewer__img').attributes('src')).toBe(
|
||||||
expect(imgList[1].attributes('style')).not.contains('display: none;')
|
IMAGE_FAIL
|
||||||
|
)
|
||||||
|
expect(wrapper.findAll('.el-image-viewer__img').length).toBe(1)
|
||||||
wrapper.unmount()
|
wrapper.unmount()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -83,19 +83,19 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- CANVAS -->
|
<!-- CANVAS -->
|
||||||
<div :class="ns.e('canvas')">
|
<div :class="ns.e('canvas')">
|
||||||
<img
|
<template v-for="(url, i) in urlList" :key="i">
|
||||||
v-for="(url, i) in urlList"
|
<img
|
||||||
v-show="i === activeIndex"
|
v-if="i === activeIndex"
|
||||||
:ref="(el) => (imgRefs[i] = el as HTMLImageElement)"
|
:ref="(el) => (imgRefs[i] = el as HTMLImageElement)"
|
||||||
:key="url"
|
:src="url"
|
||||||
:src="url"
|
:style="imgStyle"
|
||||||
:style="imgStyle"
|
:class="ns.e('img')"
|
||||||
:class="ns.e('img')"
|
:crossorigin="crossorigin"
|
||||||
:crossorigin="crossorigin"
|
@load="handleImgLoad"
|
||||||
@load="handleImgLoad"
|
@error="handleImgError"
|
||||||
@error="handleImgError"
|
@mousedown="handleMouseDown"
|
||||||
@mousedown="handleMouseDown"
|
/>
|
||||||
/>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<slot />
|
<slot />
|
||||||
</el-focus-trap>
|
</el-focus-trap>
|
||||||
|
@ -31,64 +31,11 @@ const _mount = (template: string, data: Record<string, any>) =>
|
|||||||
})
|
})
|
||||||
|
|
||||||
describe('Image.vue', () => {
|
describe('Image.vue', () => {
|
||||||
mockImageEvent()
|
|
||||||
|
|
||||||
test('render test', () => {
|
test('render test', () => {
|
||||||
const wrapper = mount(Image)
|
const wrapper = mount(Image)
|
||||||
expect(wrapper.find('.el-image').exists()).toBe(true)
|
expect(wrapper.find('.el-image').exists()).toBe(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
test('image load success test', async () => {
|
|
||||||
const alt = 'this ia alt'
|
|
||||||
const wrapper = mount({
|
|
||||||
setup() {
|
|
||||||
const props: ElImageProps = {
|
|
||||||
alt,
|
|
||||||
src: IMAGE_SUCCESS,
|
|
||||||
}
|
|
||||||
return () => <Image {...props} />
|
|
||||||
},
|
|
||||||
})
|
|
||||||
expect(wrapper.find('.el-image__placeholder').exists()).toBe(true)
|
|
||||||
await doubleWait()
|
|
||||||
expect(wrapper.find('.el-image__inner').exists()).toBe(true)
|
|
||||||
expect(wrapper.find('img').exists()).toBe(true)
|
|
||||||
await nextTick()
|
|
||||||
expect(wrapper.find('.el-image__placeholder').exists()).toBe(false)
|
|
||||||
expect(wrapper.find('.el-image__error').exists()).toBe(false)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('image load error test', async () => {
|
|
||||||
const wrapper = mount(Image, {
|
|
||||||
props: {
|
|
||||||
src: IMAGE_FAIL,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
await doubleWait()
|
|
||||||
wrapper.emitted('error') && expect(wrapper.emitted('error')).toBeDefined()
|
|
||||||
expect(wrapper.find('.el-image__inner').exists()).toBe(false)
|
|
||||||
expect(wrapper.find('img').exists()).toBe(false)
|
|
||||||
expect(wrapper.find('.el-image__error').exists()).toBe(true)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('image load sequence success test', async () => {
|
|
||||||
const wrapper = mount(Image, {
|
|
||||||
props: {
|
|
||||||
src: IMAGE_FAIL,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
wrapper.setProps({
|
|
||||||
src: IMAGE_SUCCESS,
|
|
||||||
})
|
|
||||||
expect(wrapper.find('.el-image__placeholder').exists()).toBe(true)
|
|
||||||
await doubleWait()
|
|
||||||
expect(wrapper.emitted('error')).toBeUndefined()
|
|
||||||
expect(wrapper.find('.el-image__inner').exists()).toBe(true)
|
|
||||||
expect(wrapper.find('img').exists()).toBe(true)
|
|
||||||
expect(wrapper.find('.el-image__placeholder').exists()).toBe(false)
|
|
||||||
expect(wrapper.find('.el-image__error').exists()).toBe(false)
|
|
||||||
})
|
|
||||||
|
|
||||||
test('imageStyle fit test', async () => {
|
test('imageStyle fit test', async () => {
|
||||||
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down'] as const
|
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down'] as const
|
||||||
for (const fit of fits) {
|
for (const fit of fits) {
|
||||||
@ -114,15 +61,17 @@ describe('Image.vue', () => {
|
|||||||
test('preview initial index test', async () => {
|
test('preview initial index test', async () => {
|
||||||
const props: ElImageProps = {
|
const props: ElImageProps = {
|
||||||
src: IMAGE_SUCCESS,
|
src: IMAGE_SUCCESS,
|
||||||
previewSrcList: Array.from<string>({ length: 3 }).fill(IMAGE_FAIL),
|
previewSrcList: Array.from<string>({ length: 3 }).map(
|
||||||
|
(_, idx) => IMAGE_FAIL + idx
|
||||||
|
),
|
||||||
initialIndex: 1,
|
initialIndex: 1,
|
||||||
}
|
}
|
||||||
const wrapper = mount(() => <Image {...props} />)
|
const wrapper = mount(() => <Image {...props} />)
|
||||||
await doubleWait()
|
await doubleWait()
|
||||||
await wrapper.find('.el-image__inner').trigger('click')
|
await wrapper.find('.el-image__inner').trigger('click')
|
||||||
expect(
|
expect(wrapper.find('.el-image-viewer__img').attributes('src')).toBe(
|
||||||
wrapper.findAll('.el-image-viewer__img')[1].attributes('style')
|
IMAGE_FAIL + 1
|
||||||
).not.toContain('display: none')
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
test('native loading attributes', async () => {
|
test('native loading attributes', async () => {
|
||||||
@ -166,21 +115,11 @@ describe('Image.vue', () => {
|
|||||||
expect(result).toBeTruthy()
|
expect(result).toBeTruthy()
|
||||||
})
|
})
|
||||||
|
|
||||||
test('emit load event', async () => {
|
|
||||||
const handleLoad = vi.fn()
|
|
||||||
const props: ElImageProps = {
|
|
||||||
src: IMAGE_SUCCESS,
|
|
||||||
onLoad: handleLoad,
|
|
||||||
}
|
|
||||||
const wrapper = mount(() => <Image {...props} />)
|
|
||||||
await doubleWait()
|
|
||||||
expect(wrapper.find('.el-image__inner').exists()).toBe(true)
|
|
||||||
expect(handleLoad).toBeCalled()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('manually open preview', async () => {
|
test('manually open preview', async () => {
|
||||||
const url = IMAGE_SUCCESS
|
const url = IMAGE_SUCCESS
|
||||||
const srcList = Array.from<string>({ length: 3 }).fill(IMAGE_FAIL)
|
const srcList = Array.from<string>({ length: 3 }).map(
|
||||||
|
(_, idx) => IMAGE_FAIL + idx
|
||||||
|
)
|
||||||
const wrapper = _mount(
|
const wrapper = _mount(
|
||||||
`
|
`
|
||||||
<el-image
|
<el-image
|
||||||
@ -199,9 +138,9 @@ describe('Image.vue', () => {
|
|||||||
await doubleWait()
|
await doubleWait()
|
||||||
wrapper.vm.$refs.imageRef.showPreview()
|
wrapper.vm.$refs.imageRef.showPreview()
|
||||||
await doubleWait()
|
await doubleWait()
|
||||||
expect(
|
expect(wrapper.find('.el-image-viewer__img').attributes('src')).toBe(
|
||||||
wrapper.findAll('.el-image-viewer__img')[1].attributes('style')
|
IMAGE_FAIL + 1
|
||||||
).not.toContain('display: none')
|
)
|
||||||
})
|
})
|
||||||
//@todo lazy image test
|
//@todo lazy image test
|
||||||
|
|
||||||
@ -261,4 +200,71 @@ describe('Image.vue', () => {
|
|||||||
await doubleWait()
|
await doubleWait()
|
||||||
expect(wrapper.find('.el-image-viewer__progress').exists()).toBe(true)
|
expect(wrapper.find('.el-image-viewer__progress').exists()).toBe(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
describe('load', () => {
|
||||||
|
mockImageEvent()
|
||||||
|
|
||||||
|
test('image load success test', async () => {
|
||||||
|
const alt = 'this ia alt'
|
||||||
|
const wrapper = mount({
|
||||||
|
setup() {
|
||||||
|
const props: ElImageProps = {
|
||||||
|
alt,
|
||||||
|
src: IMAGE_SUCCESS,
|
||||||
|
}
|
||||||
|
return () => <Image {...props} />
|
||||||
|
},
|
||||||
|
})
|
||||||
|
expect(wrapper.find('.el-image__placeholder').exists()).toBe(true)
|
||||||
|
await doubleWait()
|
||||||
|
expect(wrapper.find('.el-image__inner').exists()).toBe(true)
|
||||||
|
expect(wrapper.find('img').exists()).toBe(true)
|
||||||
|
await nextTick()
|
||||||
|
expect(wrapper.find('.el-image__placeholder').exists()).toBe(false)
|
||||||
|
expect(wrapper.find('.el-image__error').exists()).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('image load error test', async () => {
|
||||||
|
const wrapper = mount(Image, {
|
||||||
|
props: {
|
||||||
|
src: IMAGE_FAIL,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
await doubleWait()
|
||||||
|
wrapper.emitted('error') && expect(wrapper.emitted('error')).toBeDefined()
|
||||||
|
expect(wrapper.find('.el-image__inner').exists()).toBe(false)
|
||||||
|
expect(wrapper.find('img').exists()).toBe(false)
|
||||||
|
expect(wrapper.find('.el-image__error').exists()).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('image load sequence success test', async () => {
|
||||||
|
const wrapper = mount(Image, {
|
||||||
|
props: {
|
||||||
|
src: IMAGE_FAIL,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
wrapper.setProps({
|
||||||
|
src: IMAGE_SUCCESS,
|
||||||
|
})
|
||||||
|
expect(wrapper.find('.el-image__placeholder').exists()).toBe(true)
|
||||||
|
await doubleWait()
|
||||||
|
expect(wrapper.emitted('error')).toBeUndefined()
|
||||||
|
expect(wrapper.find('.el-image__inner').exists()).toBe(true)
|
||||||
|
expect(wrapper.find('img').exists()).toBe(true)
|
||||||
|
expect(wrapper.find('.el-image__placeholder').exists()).toBe(false)
|
||||||
|
expect(wrapper.find('.el-image__error').exists()).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('emit load event', async () => {
|
||||||
|
const handleLoad = vi.fn()
|
||||||
|
const props: ElImageProps = {
|
||||||
|
src: IMAGE_SUCCESS,
|
||||||
|
onLoad: handleLoad,
|
||||||
|
}
|
||||||
|
const wrapper = mount(() => <Image {...props} />)
|
||||||
|
await doubleWait()
|
||||||
|
expect(wrapper.find('.el-image__inner').exists()).toBe(true)
|
||||||
|
expect(handleLoad).toBeCalled()
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
Reference in New Issue
Block a user