mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 03:08:21 +08:00
refactor(components): [descriptions] use JSX in Unit test (#8351)
This commit is contained in:
류한경
GitHub
parent
bc230e5c23
commit
40fa4a4b3e
@ -1,204 +0,0 @@
|
||||
import { nextTick } from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { describe, expect, test } from 'vitest'
|
||||
import ElTag from '@element-plus/components/tag'
|
||||
import Descriptions from '../src/index.vue'
|
||||
import DescriptionsItem from '../src/description-item'
|
||||
|
||||
const _mount = (template: string, data?: () => void, methods?: any) =>
|
||||
mount({
|
||||
components: {
|
||||
'el-descriptions': Descriptions,
|
||||
'el-descriptions-item': DescriptionsItem,
|
||||
'el-tag': ElTag,
|
||||
},
|
||||
template,
|
||||
data,
|
||||
methods,
|
||||
})
|
||||
|
||||
describe('Descriptions.vue', () => {
|
||||
test('render test', () => {
|
||||
const wrapper = _mount(`
|
||||
<el-descriptions title="title" extra="extra">
|
||||
<el-descriptions-item v-for="item in 4"></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
`)
|
||||
|
||||
expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
|
||||
expect(wrapper.find('.el-descriptions__extra').text()).toEqual('extra')
|
||||
expect(wrapper.findAll('.el-descriptions__label').length).toEqual(4)
|
||||
})
|
||||
|
||||
test('should render border props', () => {
|
||||
const wrapper = _mount(`
|
||||
<el-descriptions border>
|
||||
<el-descriptions-item v-for="item in 3" :label="item">{{ item }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
`)
|
||||
|
||||
expect(wrapper.find('table').classes()).toContain('is-bordered')
|
||||
})
|
||||
|
||||
test('should render align props', () => {
|
||||
const wrapper = _mount(`
|
||||
<el-descriptions border>
|
||||
<el-descriptions-item v-for="item in 3" :label="item" align="right" label-align="center">{{ item }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
`)
|
||||
|
||||
expect(wrapper.find('.el-descriptions__label').classes()).toContain(
|
||||
'is-center'
|
||||
)
|
||||
expect(wrapper.find('.el-descriptions__content').classes()).toContain(
|
||||
'is-right'
|
||||
)
|
||||
})
|
||||
|
||||
test('should render width props', () => {
|
||||
const wrapper = _mount(`
|
||||
<el-descriptions border>
|
||||
<el-descriptions-item v-for="item in 3" :label="item" width="50px" min-width="60px">{{ item }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
`)
|
||||
|
||||
expect(
|
||||
wrapper.find('.el-descriptions__label').attributes('style')
|
||||
).toContain('width: 50px; min-width: 60px;')
|
||||
expect(
|
||||
wrapper.find('.el-descriptions__content').attributes('style')
|
||||
).toContain('width: 50px; min-width: 60px;')
|
||||
})
|
||||
|
||||
test('should render class props', () => {
|
||||
const wrapper = _mount(`
|
||||
<el-descriptions border>
|
||||
<el-descriptions-item v-for="item in 3" :label="item" class-name="class-name" label-class-name="label-class-name">{{ item }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
`)
|
||||
|
||||
expect(wrapper.find('.el-descriptions__label').classes()).toContain(
|
||||
'label-class-name'
|
||||
)
|
||||
expect(wrapper.find('.el-descriptions__content').classes()).toContain(
|
||||
'class-name'
|
||||
)
|
||||
})
|
||||
|
||||
test('should render width props', () => {
|
||||
const wrapper = _mount(`
|
||||
<el-descriptions border>
|
||||
<el-descriptions-item v-for="item in 3" :label="item" width="50px" min-width="60px">{{ item }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
`)
|
||||
|
||||
expect(
|
||||
wrapper.find('.el-descriptions__label').attributes('style')
|
||||
).toContain('width: 50px; min-width: 60px;')
|
||||
expect(
|
||||
wrapper.find('.el-descriptions__content').attributes('style')
|
||||
).toContain('width: 50px; min-width: 60px;')
|
||||
})
|
||||
|
||||
test('should render column props', async () => {
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-descriptions :column="5" :border="border">
|
||||
<el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
`,
|
||||
() => {
|
||||
return {
|
||||
border: false,
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
expect(wrapper.find('tr').element.children.length).toEqual(5)
|
||||
wrapper.vm.border = true
|
||||
await nextTick()
|
||||
expect(wrapper.find('tr').element.children.length).toEqual(10)
|
||||
})
|
||||
|
||||
test('should render direction props', async () => {
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-descriptions :column="5" :direction="direction" border>
|
||||
<el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
`,
|
||||
() => {
|
||||
return {
|
||||
direction: 'horizontal',
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
expect(wrapper.find('tr').element.children.length).toEqual(10)
|
||||
expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
|
||||
wrapper.findAll('tr')[0].element.children[1].innerHTML
|
||||
)
|
||||
wrapper.vm.direction = 'vertical'
|
||||
await nextTick()
|
||||
expect(wrapper.find('tr').element.children.length).toEqual(5)
|
||||
expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
|
||||
wrapper.findAll('tr')[1].element.children[0].innerHTML
|
||||
)
|
||||
})
|
||||
|
||||
test('should render title slots', async () => {
|
||||
const wrapper = _mount(`
|
||||
<el-descriptions>
|
||||
<template #title>title</template>
|
||||
<el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
`)
|
||||
|
||||
expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
|
||||
})
|
||||
|
||||
test('should render span props', async () => {
|
||||
const wrapper = _mount(`
|
||||
<el-descriptions :column="3">
|
||||
<el-descriptions-item label="1">1</el-descriptions-item>
|
||||
<el-descriptions-item label="2" :span="2">2</el-descriptions-item>
|
||||
<el-descriptions-item label="3">3</el-descriptions-item>
|
||||
<el-descriptions-item label="4">4</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
`)
|
||||
|
||||
expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual(
|
||||
'2'
|
||||
)
|
||||
expect(wrapper.findAll('td')[3].element.getAttribute('colSpan')).toEqual(
|
||||
'2'
|
||||
)
|
||||
})
|
||||
|
||||
test('re-rendered when slots is updated', async () => {
|
||||
const CHANGE_VALUE = 'company'
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-descriptions v-for="(remark,index) in remarks" :key="index" :title="remark">
|
||||
<el-descriptions-item label="remark">
|
||||
<el-tag size="small">{{remark}}</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<button @click="onClick">click</button>
|
||||
`,
|
||||
() => {
|
||||
return {
|
||||
remarks: ['school', 'hospital'],
|
||||
}
|
||||
},
|
||||
{
|
||||
onClick() {
|
||||
this.remarks[0] = CHANGE_VALUE
|
||||
},
|
||||
}
|
||||
)
|
||||
wrapper.find('button').trigger('click')
|
||||
await nextTick()
|
||||
expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE)
|
||||
})
|
||||
})
|
||||
193
packages/components/descriptions/__tests__/descriptions.test.tsx
Normal file
193
packages/components/descriptions/__tests__/descriptions.test.tsx
Normal file
@ -0,0 +1,193 @@
|
||||
import { nextTick, ref } from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { describe, expect, test } from 'vitest'
|
||||
import ElTag from '@element-plus/components/tag'
|
||||
import ElDescriptions from '../src/index.vue'
|
||||
import ElDescriptionsItem from '../src/description-item'
|
||||
|
||||
describe('Descriptions.vue', () => {
|
||||
test('render test', () => {
|
||||
const wrapper = mount(() => (
|
||||
<ElDescriptions title="title" extra="extra">
|
||||
{Array.from({ length: 4 }).map(() => (
|
||||
<ElDescriptionsItem />
|
||||
))}
|
||||
</ElDescriptions>
|
||||
))
|
||||
|
||||
expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
|
||||
expect(wrapper.find('.el-descriptions__extra').text()).toEqual('extra')
|
||||
expect(wrapper.findAll('.el-descriptions__label').length).toEqual(4)
|
||||
})
|
||||
|
||||
test('should render border props', () => {
|
||||
const wrapper = mount(() => (
|
||||
<ElDescriptions border>
|
||||
<ElDescriptionsItem />
|
||||
</ElDescriptions>
|
||||
))
|
||||
|
||||
expect(wrapper.find('table').classes()).toContain('is-bordered')
|
||||
})
|
||||
|
||||
test('should render align props', () => {
|
||||
const wrapper = mount(() => (
|
||||
<ElDescriptions border>
|
||||
{Array.from({ length: 3 }).map(() => (
|
||||
<ElDescriptionsItem align="right" labelAlign="center" />
|
||||
))}
|
||||
</ElDescriptions>
|
||||
))
|
||||
|
||||
expect(wrapper.find('.el-descriptions__label').classes()).toContain(
|
||||
'is-center'
|
||||
)
|
||||
expect(wrapper.find('.el-descriptions__content').classes()).toContain(
|
||||
'is-right'
|
||||
)
|
||||
})
|
||||
|
||||
test('should render width props', () => {
|
||||
const wrapper = mount(() => (
|
||||
<ElDescriptions border>
|
||||
{Array.from({ length: 3 }).map(() => (
|
||||
<ElDescriptionsItem width="50px" min-width="60px" />
|
||||
))}
|
||||
</ElDescriptions>
|
||||
))
|
||||
|
||||
expect(
|
||||
wrapper.find('.el-descriptions__label').attributes('style')
|
||||
).toContain('width: 50px; min-width: 60px;')
|
||||
expect(
|
||||
wrapper.find('.el-descriptions__content').attributes('style')
|
||||
).toContain('width: 50px; min-width: 60px;')
|
||||
})
|
||||
|
||||
test('should render class props', () => {
|
||||
const wrapper = mount(() => (
|
||||
<ElDescriptions border>
|
||||
{Array.from({ length: 3 }).map(() => (
|
||||
<ElDescriptionsItem
|
||||
class-name="class-name"
|
||||
label-class-name="label-class-name"
|
||||
/>
|
||||
))}
|
||||
</ElDescriptions>
|
||||
))
|
||||
|
||||
expect(wrapper.find('.el-descriptions__label').classes()).toContain(
|
||||
'label-class-name'
|
||||
)
|
||||
expect(wrapper.find('.el-descriptions__content').classes()).toContain(
|
||||
'class-name'
|
||||
)
|
||||
})
|
||||
|
||||
test('should render column props', async () => {
|
||||
const border = ref(false)
|
||||
|
||||
const wrapper = mount(() => (
|
||||
<ElDescriptions column={5} border={border.value}>
|
||||
{Array.from({ length: 10 }).map(() => (
|
||||
<ElDescriptionsItem />
|
||||
))}
|
||||
</ElDescriptions>
|
||||
))
|
||||
|
||||
expect(wrapper.find('tr').element.children.length).toEqual(5)
|
||||
|
||||
border.value = true
|
||||
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.find('tr').element.children.length).toEqual(10)
|
||||
})
|
||||
|
||||
test('should render direction props', async () => {
|
||||
const direction = ref('horizontal')
|
||||
|
||||
const wrapper = mount(() => (
|
||||
<ElDescriptions column={5} direction={direction.value} border>
|
||||
{Array.from({ length: 10 }).map((item) => (
|
||||
<ElDescriptionsItem label={String(item)}>
|
||||
{String(item)}
|
||||
</ElDescriptionsItem>
|
||||
))}
|
||||
</ElDescriptions>
|
||||
))
|
||||
|
||||
expect(wrapper.find('tr').element.children.length).toEqual(10)
|
||||
expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
|
||||
wrapper.findAll('tr')[0].element.children[1].innerHTML
|
||||
)
|
||||
|
||||
direction.value = 'vertical'
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.find('tr').element.children.length).toEqual(5)
|
||||
expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
|
||||
wrapper.findAll('tr')[1].element.children[0].innerHTML
|
||||
)
|
||||
})
|
||||
|
||||
test('should render title slots', async () => {
|
||||
const wrapper = mount(() => (
|
||||
<ElDescriptions
|
||||
v-slots={{
|
||||
title: () => 'title',
|
||||
default: () =>
|
||||
Array.from({ length: 10 }).map(() => <ElDescriptionsItem />),
|
||||
}}
|
||||
></ElDescriptions>
|
||||
))
|
||||
|
||||
expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
|
||||
})
|
||||
|
||||
test('should render span props', async () => {
|
||||
const wrapper = mount(() => (
|
||||
<ElDescriptions>
|
||||
<ElDescriptionsItem label="1">1</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="2" span={2}>
|
||||
2
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="3">3</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="4">4</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
))
|
||||
|
||||
expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual(
|
||||
'2'
|
||||
)
|
||||
expect(wrapper.findAll('td')[3].element.getAttribute('colSpan')).toEqual(
|
||||
'2'
|
||||
)
|
||||
})
|
||||
|
||||
test('re-rendered when slots is updated', async () => {
|
||||
const CHANGE_VALUE = 'company'
|
||||
const remarks = ref(['school', 'hospital'])
|
||||
|
||||
const onClick = () => {
|
||||
remarks.value[0] = CHANGE_VALUE
|
||||
}
|
||||
|
||||
const wrapper = mount(() => (
|
||||
<>
|
||||
{remarks.value.map((remark, index) => (
|
||||
<ElDescriptions key={index} title={remark}>
|
||||
<ElDescriptionsItem label={remark}>
|
||||
<ElTag size="small">{remark}</ElTag>
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
))}
|
||||
<button onClick={onClick}>click</button>
|
||||
</>
|
||||
))
|
||||
|
||||
wrapper.find('button').trigger('click')
|
||||
await nextTick()
|
||||
expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE)
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user