mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-03-07 15:47:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): [result] use JSX in Unit test (#8230)

Browse Source
This commit is contained in:
류한경 2022-06-13 15:57:29 +09:00 committed by GitHub
parent 932ff0c064
commit 39f122228b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
packages/components/result/__tests__/result.test.ts → packages/components/result/__tests__/result.test.tsx
View File

@ -1,62 +1,48 @@
import { nextTick, ref } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, test } from 'vitest'
import makeMount from '@element-plus/test-utils/make-mount'
import Result from '../src/result.vue'
const AXIOM = 'Rem is the best girl'
describe('Result.vue', () => {
const mount = makeMount(Result, {})
test('render test', () => {
const wrapper = mount()
const wrapper = mount(() => <Result />)
expect(wrapper.find('.el-result__icon').exists()).toBe(true)
expect(wrapper.classes()).toContain('el-result')
})
test('should render title props', () => {
const wrapper = mount({
props: {
title: AXIOM,
},
})
const wrapper = mount(() => <Result title={AXIOM} />)
expect(wrapper.find('.el-result__title').text()).toBe(AXIOM)
})
test('should render sub-title props', () => {
const wrapper = mount({
props: {
subTitle: AXIOM,
},
})
const wrapper = mount(() => <Result subTitle={AXIOM} />)
expect(wrapper.find('.el-result__subtitle').text()).toBe(AXIOM)
})
test('should render icon props', async () => {
const wrapper = mount({
props: {
icon: 'success',
},
})
const icon = ref('success')
const wrapper = mount(() => <Result icon={icon.value} />)
expect(wrapper.find('.el-result__icon svg').exists()).toBe(true)
expect(wrapper.find('.el-result__icon svg').classes()).toContain(
'icon-success'
)
await wrapper.setProps({
icon: 'error',
})
icon.value = 'error'
await nextTick()
expect(wrapper.find('.el-result__icon svg').exists()).toBe(true)
expect(wrapper.find('.el-result__icon svg').classes()).toContain(
'icon-error'
)
await wrapper.setProps({
icon: 'warning',
})
icon.value = 'warning'
await nextTick()
expect(wrapper.find('.el-result__icon svg').exists()).toBe(true)
expect(wrapper.find('.el-result__icon svg').classes()).toContain(
'icon-warning'
)
await wrapper.setProps({
icon: 'info',
})
icon.value = 'info'
await nextTick()
expect(wrapper.find('.el-result__icon svg').exists()).toBe(true)
expect(wrapper.find('.el-result__icon svg').classes()).toContain(
'icon-info'
@ -64,41 +50,49 @@ describe('Result.vue', () => {
})
test('should render icon slots', () => {
const wrapper = mount({
slots: {
icon: AXIOM,
},
})
const wrapper = mount(() => (
<Result
v-slots={{
icon: () => AXIOM,
}}
/>
))
expect(wrapper.find('.el-result__icon').exists()).toBe(true)
expect(wrapper.find('.el-result__icon').text()).toBe(AXIOM)
})
test('should render title slots', () => {
const wrapper = mount({
slots: {
title: AXIOM,
},
})
const wrapper = mount(() => (
<Result
v-slots={{
title: () => AXIOM,
}}
/>
))
expect(wrapper.find('.el-result__title').exists()).toBe(true)
expect(wrapper.find('.el-result__title').text()).toBe(AXIOM)
})
test('should render sub-title slots', () => {
const wrapper = mount({
slots: {
'sub-title': AXIOM,
},
})
const wrapper = mount(() => (
<Result
v-slots={{
'sub-title': () => AXIOM,
}}
/>
))
expect(wrapper.find('.el-result__subtitle').exists()).toBe(true)
expect(wrapper.find('.el-result__subtitle').text()).toBe(AXIOM)
})
test('should render extra slots', () => {
const wrapper = mount({
slots: {
extra: AXIOM,
},
})
const wrapper = mount(() => (
<Result
v-slots={{
extra: () => AXIOM,
}}
/>
))
expect(wrapper.find('.el-result__extra').exists()).toBe(true)
expect(wrapper.find('.el-result__extra').text()).toBe(AXIOM)
})