javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-08-16 12:04:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [image-viewer] dont persist image preview list (#20807)

Browse Source 
* fix(components): [image-viewer] dont persist image preview list

* chore: rearrange tests
This commit is contained in:
Noblet Ouways
2025-05-23 10:00:42 +02:00
committed by GitHub
parent c29eac5f81
commit 00c78d6fbf
3 changed files with 100 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/components/image-viewer/__tests__/image-viewer.test.tsx
View File

@ -1,7 +1,7 @@
import { nextTick } from 'vue'
import { mount } from '@vue/test-utils'
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'
async function doubleWait() {
@ -41,21 +41,22 @@ describe('<image-viewer />', () => {
test('manually switch image', async () => {
const wrapper = mount(
<ImageViewer urlList={[IMAGE_SUCCESS, IMAGE_SUCCESS]} />
<ImageViewer urlList={[IMAGE_SUCCESS, IMAGE_FAIL]} initialIndex={0} />
)
await doubleWait()
const viewer = wrapper.find('.el-image-viewer__wrapper')
expect(viewer.exists()).toBe(true)
const imgList = wrapper.findAll('.el-image-viewer__img')
expect(imgList[0].attributes('style')).not.contains('display: none;')
expect(imgList[1].attributes('style')).contains('display: none;')
const img = wrapper.find('.el-image-viewer__img')
expect(img.attributes('src')).toBe(IMAGE_SUCCESS)
wrapper.vm.setActiveItem(1)
await doubleWait()
expect(imgList[0].attributes('style')).contains('display: none;')
expect(imgList[1].attributes('style')).not.contains('display: none;')
expect(wrapper.find('.el-image-viewer__img').attributes('src')).toBe(
IMAGE_FAIL
)
expect(wrapper.findAll('.el-image-viewer__img').length).toBe(1)
wrapper.unmount()
})

26
packages/components/image-viewer/src/image-viewer.vue
View File

@ -83,19 +83,19 @@
</div>
<!-- CANVAS -->
<div :class="ns.e('canvas')">
<img
v-for="(url, i) in urlList"
v-show="i === activeIndex"
:ref="(el) => (imgRefs[i] = el as HTMLImageElement)"
:key="url"
:src="url"
:style="imgStyle"
:class="ns.e('img')"
:crossorigin="crossorigin"
@load="handleImgLoad"
@error="handleImgError"
@mousedown="handleMouseDown"
/>
<template v-for="(url, i) in urlList" :key="i">
<img
v-if="i === activeIndex"
:ref="(el) => (imgRefs[i] = el as HTMLImageElement)"
:src="url"
:style="imgStyle"
:class="ns.e('img')"
:crossorigin="crossorigin"
@load="handleImgLoad"
@error="handleImgError"
@mousedown="handleMouseDown"
/>
</template>
</div>
<slot />
</el-focus-trap>

152
packages/components/image/__tests__/image.test.tsx
View File

@ -31,64 +31,11 @@ const _mount = (template: string, data: Record<string, any>) =>
})
describe('Image.vue', () => {
mockImageEvent()
test('render test', () => {
const wrapper = mount(Image)
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 () => {
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down'] as const
for (const fit of fits) {
@ -114,15 +61,17 @@ describe('Image.vue', () => {
test('preview initial index test', async () => {
const props: ElImageProps = {
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,
}
const wrapper = mount(() => <Image {...props} />)
await doubleWait()
await wrapper.find('.el-image__inner').trigger('click')
expect(
wrapper.findAll('.el-image-viewer__img')[1].attributes('style')
).not.toContain('display: none')
expect(wrapper.find('.el-image-viewer__img').attributes('src')).toBe(
IMAGE_FAIL + 1
)
})
test('native loading attributes', async () => {
@ -166,21 +115,11 @@ describe('Image.vue', () => {
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 () => {
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(
`
<el-image
@ -199,9 +138,9 @@ describe('Image.vue', () => {
await doubleWait()
wrapper.vm.$refs.imageRef.showPreview()
await doubleWait()
expect(
wrapper.findAll('.el-image-viewer__img')[1].attributes('style')
).not.toContain('display: none')
expect(wrapper.find('.el-image-viewer__img').attributes('src')).toBe(
IMAGE_FAIL + 1
)
})
//@todo lazy image test
@ -261,4 +200,71 @@ describe('Image.vue', () => {
await doubleWait()
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()
})
})
})