test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 04:08:34 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(test-utils): factor out mockImageLoad

Browse Source
This commit is contained in:
Herrington Darkholme 2020-09-05 12:17:37 +08:00 committed by jeremywu
parent 2566bd4cd5
commit 3b5c53994e
3 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/avatar/__tests__/avatar.spec.ts
View File

@ -1,20 +1,11 @@
import { mount } from '@vue/test-utils'
import { nextTick } from 'vue'
import Avatar from '../src/index.vue'
import { IMAGE_SUCCESS, IMAGE_FAIL } from '@element-plus/test-utils'
beforeAll(() => {
Object.defineProperty(global.Image.prototype, 'src', {
set(src) {
const event = new Event(
src === IMAGE_FAIL ? 'error' : 'load',
)
nextTick(() => this.dispatchEvent(event))
},
})
})
import { IMAGE_SUCCESS, IMAGE_FAIL, mockImageEvent } from '@element-plus/test-utils'
describe('Avatar.vue', () => {
beforeAll(mockImageEvent)
test('render test', () => {
const wrapper = mount(Avatar)
expect(wrapper.find('.el-avatar').exists()).toBe(true)

36
packages/image/__tests__/image.spec.ts
View File

@ -2,20 +2,17 @@ import { mount } from '@vue/test-utils'
import Image from '../src/index.vue'
import { nextTick } from 'vue'
import { IMAGE_SUCCESS, IMAGE_FAIL } from '../../test-utils/mock'
import { IMAGE_SUCCESS, IMAGE_FAIL, mockImageEvent } from '../../test-utils/mock'
// firstly wait for image event
// secondly wait for vue render
async function doubleWait() {
await nextTick()
await nextTick()
}
describe('Image.vue', () => {
beforeAll(() => {
Object.defineProperty(global.Image.prototype, 'src', {
set(src) {
const type = !src || src === IMAGE_FAIL ? 'error' : 'load'
const event = new Event(type)
this.dispatchEvent(event)
},
})
})
beforeAll(mockImageEvent)
test('render test', () => {
const wrapper = mount(Image)
@ -31,7 +28,7 @@ describe('Image.vue', () => {
},
})
expect(wrapper.find('.el-image__placeholder').exists()).toBe(true)
await nextTick()
await doubleWait()
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)
@ -44,8 +41,8 @@ describe('Image.vue', () => {
src: IMAGE_FAIL,
},
})
await doubleWait()
expect(wrapper.emitted('error')).toBeDefined()
await nextTick()
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)
@ -57,7 +54,7 @@ describe('Image.vue', () => {
const wrapper = mount(Image, {
props: { fit, src: IMAGE_SUCCESS },
})
await nextTick()
await doubleWait()
expect(wrapper.find('img').attributes('style')).toContain(`object-fit: ${fit};`)
}
})
@ -70,7 +67,7 @@ describe('Image.vue', () => {
previewSrcList: new Array(3).fill(IMAGE_SUCCESS),
},
})
await nextTick()
await doubleWait()
expect(wrapper.find('img').classes()).toContain('el-image__preview')
})
@ -84,7 +81,7 @@ describe('Image.vue', () => {
referrerpolicy: 'origin',
},
})
await nextTick()
await doubleWait()
expect(wrapper.find('img').attributes('alt')).toBe(alt)
expect(wrapper.find('img').attributes('referrerpolicy')).toBe('origin')
})
@ -97,9 +94,8 @@ describe('Image.vue', () => {
onClick: () => result = true,
},
})
await nextTick()
const inner = wrapper.find('.el-image__inner').element as HTMLElement
inner.click()
await doubleWait()
await wrapper.find('.el-image__inner').trigger('click')
expect(result).toBeTruthy()
})
@ -112,7 +108,7 @@ describe('Image.vue', () => {
previewSrcList: [IMAGE_SUCCESS],
},
})
await nextTick()
await doubleWait()
expect(wrapper.find('.el-image__inner').exists()).toBe(true)
await wrapper.find('.el-image__inner').trigger('click')
const viewer = wrapper.find('.el-image-viewer__wrapper')

13
packages/test-utils/mock.ts
View File

@ -1,3 +1,16 @@
import { nextTick } from 'vue'
export const IMAGE_SUCCESS = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFmklEQVR4Xu2ba2wUVRTH/2cWtlaooFQwKpr4CkESTQBNUAkodGeaKFGD2u6WGPyAmmAEEZmpj1VhBghE/KKGBIztDIXAByWBnQ1oQREfARNiDDHiF1+ooBiksVt295hFiqSdxx3KdmcH5uv+z+3//O65c19TwgX+0AWePy4CuFgBISCQ3J6+DFLuVQKmg2k4gK3xuvwr6+9e+Xe57YViCCRttY1ALX2S/asIPLRB1jvLCSEUAFK2egKgYf0T5a6TxdhtmxqXfl8uCBUHMHfP4rqeE0OOeyS4w5T1hsgCmLNTvaWYp299EpxoyvpX5YBQ8QpotlvvkMBfeCbHvMpUjOejCSCjPSYROrySY/B+SzYmRRJA0tZWEfCcJwBGz81yvDZN6eL5hlDxIZCyta8BTPBLjIv5sVbjyp/8dEF/ryiAlL3kJkD6TsQ0STS5vWHZPhFtEE1FAYiUf28yBaZ7OpRle4IkJ6KtGIDZexfU1hyv/QXASBGjBeYpHYrxmYg2iKZiAFIZdSGIVouaLVJx0obE8v2ielFdRQA83pkemc/lDgE0StRopF6CSVuzCGgWTb6ku7T+aHztpLUng8SIaAe9ApJ265MEflvE3P8a/t2UjTHBYsTUgwqgKauOk4p0gAhxMXunVcwfmYpxX6AYQfGgAWjqTNdL3bndRDRe0NsZGYPXWLKxIGiciH5QAJye8r4UWfE5mWbCE1ZCXy+SUFBN2QEo2+fXjKK6zSDcH9Rcr55i0vj2mUsPnmu8V1xZAZxKXhq+G6A7z9U8Mx+zFOOKc433iysbgNKYj3XnNoHoXj8T3r/z+6ZsPDiwNtyjHQE07dTGSAU8QkX4LlSY6Ndh9UfWnT1Ht2QXjeZifC8INw7UOAMfE2MgB6NdhaFo65ih/+bkxRFAMqPuIaK7xM3zu6ZszO3Vt2S1CcwobXPD8TAfoZjU6LSb7AdgWmd6yLW5nqArrm5T1mtDC+A/Y3tNWe/XqY4VkLK1fwBcItp9DGZLNqQwA2DmgiUbQ0Hgs/NyBpBRD4PoqigBKOWSGxuv2XxruscXQNJWDxJoXJQAMPCnJev9XuouQ0D9PMjcXQ1DAIx9pqJP7tupLrOAZhMhEaUKAGOjqehNYgBsdSOBHo0UAOBlU9ZfFwOQUd8honmRAsA8y1SMrWIAbHUFgRZHCUCe6LqNiWU/igHIaCoR9KgAYMZRS9GvFF4Kp7LqU2B6KzoAeKulGLOEASRtrZkAK0IAVEsxlgsDaM6ojRLRtqgAIImntTcYu4UBpLKtU8D8aRQAMJD/uSZeu2t6Oi8MILldHU8SfRMFAG67wN7cHFeCcz5svaZ4koWvosO9FGbdlI1Wt850BNCSXTSMOX4iEhVAaDAT+o5AAEriVEYrgHBmj+8FI7QVwJzLjei+fPOUN0rnG46P66FoMqMdIUK9SBWEGIDvjZIrgFRGOyR6qBlWAMzQLEU3vDrRvQJsdR+BJlZzBYh8VuM1BHYSQehCMpwVwF1mwqjrewYotBk69RK0tS0AHq7eChC7UPEYAto6As6c9VfdLED8tJkwfL9DcH8J2upqgBZWbwXgalPWD/v59wCgvQTgNb8GSr+H7x3AB0zZuF3EuyuA5oz6jET0pkgjYQPAzEstxSh1oO/jVQFzALzn20IIK0CKFa5vm7niBxHvHgsh9QEQfSDSSP8KWDSaOe54GyvS3sA0vMuUjemibbgPgWzrVInZ8RChb+N9AQSdRkXNiul4qikbn4hp4f5/g7N3vDAiXpCOEcj/IwpG0VT02Nl/9NSOshjvGMinMaJJ9OqYeYulGLODxHkml7TVZ8GYT0Q3uDfKXQxaY8n6i06aZnvJDGKaB8JMAo0IYk5UW7r5BbAtNhRz22YYf4jGlXT+vRuktSrUXgRQhZ12Xi1f8BXwL38cy1+mrtJNAAAAAElFTkSuQmCC'
export const IMAGE_FAIL = 'data:image/png;base64,fail'
export function mockImageEvent() {
Object.defineProperty(global.Image.prototype, 'src', {
set(src) {
const evt = !src || src === IMAGE_FAIL
? 'error' : 'load'
const event = new Event(evt)
nextTick(() => this.dispatchEvent(event))
},
})
}