mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
4560adfdf8
* refactor(style): adjust component size to large/default/small * refactor(components): avatar size & use flex instead of block * refactor(components): adjust check button size * refactor(components): adjust tag size * refactor(components): adjust size doc * fix(components): datetime-picker demo style width * refactor(components): color-picker size & block to flex * refactor(components): adjust slider input size * refactor(components): adjust radio input size for demo * refactor(components): adjust select size & docs * refactor(components): adjust form radio size & docs * refactor(components): add windicss for docs * refactor(components): adjust skeleton avatar size to css var * refactor(components): simplify typography size demo * refactor(components): adjust dropdown size & demo * refactor(components): adjust descriptions size * fix(components): datetime-picker showcase class pollute global button * chore(ci): upgrade docs dependencies to fix ci * fix(ci): add highlight because vitepress not export it * fix(ci): disable line for no-console * fix(ci): remove mini to fix test * fix(style): code font size * fix(style): button span flex style * fix(style): button padding horizontal default 15px * refactor(components): adjust tag padding size & demo * refactor(components): adjust form line-height for input * refactor(components): adjust dropdown menu size & button padding * fix(style): picker separator block to flex center * fix: dropdown button span items-center * style: adjust input-with-icon & size demo & fix input vitepress load * chore: upgrade dependencies * chore: upgrade dependencies * ci: fix website build * ci: regenerate pnpm-lock.yaml * ci: use dev pnpm-lock * ci: update pnpm-lock.yaml
94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
import { nextTick } from 'vue'
|
|
import { mount } from '@vue/test-utils'
|
|
import { User } from '@element-plus/icons-vue'
|
|
import {
|
|
IMAGE_SUCCESS,
|
|
IMAGE_FAIL,
|
|
mockImageEvent,
|
|
} from '@element-plus/test-utils'
|
|
|
|
import Avatar from '../src/avatar.vue'
|
|
|
|
describe('Avatar.vue', () => {
|
|
mockImageEvent()
|
|
|
|
test('render test', () => {
|
|
const wrapper = mount(Avatar)
|
|
expect(wrapper.find('.el-avatar').exists()).toBe(true)
|
|
})
|
|
|
|
test('size is number', () => {
|
|
const wrapper = mount(Avatar, {
|
|
props: { size: 50 },
|
|
})
|
|
expect(wrapper.attributes('style')).toContain('--el-avatar-size: 50px;')
|
|
})
|
|
|
|
test('size is string', () => {
|
|
const wrapper = mount(Avatar, {
|
|
props: { size: 'small' },
|
|
})
|
|
expect(wrapper.classes()).toContain('el-avatar--small')
|
|
})
|
|
|
|
test('shape', () => {
|
|
const wrapper = mount(Avatar, {
|
|
props: { size: 'small', shape: 'square' },
|
|
})
|
|
expect(wrapper.classes()).toContain('el-avatar--square')
|
|
})
|
|
|
|
test('icon avatar', () => {
|
|
const wrapper = mount(Avatar, {
|
|
props: { icon: User },
|
|
})
|
|
expect(wrapper.classes()).toContain('el-avatar--icon')
|
|
expect(wrapper.findComponent(User).exists()).toBe(true)
|
|
})
|
|
|
|
test('image avatar', () => {
|
|
const wrapper = mount(Avatar, {
|
|
props: { src: IMAGE_SUCCESS },
|
|
})
|
|
expect(wrapper.find('img').exists()).toBe(true)
|
|
})
|
|
|
|
test('image fallback', async () => {
|
|
const wrapper = mount(Avatar, {
|
|
props: { src: IMAGE_FAIL },
|
|
slots: { default: 'fallback' },
|
|
})
|
|
await nextTick()
|
|
expect(wrapper.emitted('error')).toBeDefined()
|
|
await nextTick()
|
|
expect(wrapper.text()).toBe('fallback')
|
|
expect(wrapper.find('img').exists()).toBe(false)
|
|
})
|
|
|
|
test('image fit', () => {
|
|
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
|
|
for (const fit of fits) {
|
|
const wrapper = mount(Avatar, {
|
|
props: { fit, src: IMAGE_SUCCESS },
|
|
})
|
|
expect(wrapper.find('img').attributes('style')).toContain(
|
|
`object-fit: ${fit};`
|
|
)
|
|
}
|
|
})
|
|
|
|
test('src changed', async () => {
|
|
const wrapper = mount(Avatar, {
|
|
slots: { default: 'fallback' },
|
|
})
|
|
expect(wrapper.vm.hasLoadError).toBe(false)
|
|
await wrapper.setProps({ src: IMAGE_FAIL })
|
|
// wait error event trigger
|
|
await nextTick()
|
|
expect(wrapper.vm.hasLoadError).toBe(true)
|
|
await wrapper.setProps({ src: IMAGE_SUCCESS })
|
|
expect(wrapper.vm.hasLoadError).toBe(false)
|
|
expect(wrapper.find('img').exists()).toBe(true)
|
|
})
|
|
})
|