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

refactor(components): [tree-select] use JSX in Unit test (#9786)

Browse Source 
Co-authored-by: holazz <2418184580@qq.com>
This commit is contained in:
LIUCHAO 2022-09-17 08:30:03 +08:00 committed by GitHub
parent 599bd8e4ed
commit 5ec954c17e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
packages/components/tree-select/__tests__/tree-select.test.ts → packages/components/tree-select/__tests__/tree-select.test.tsx
View File

@ -1,7 +1,8 @@
import { h, nextTick, ref } from 'vue'
import { nextTick, ref } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, test, vi } from 'vitest'
import TreeSelect from '../src/tree-select.vue'
import type { RenderFunction } from 'vue'
import type { VueWrapper } from '@vue/test-utils'
import type ElSelect from '@element-plus/components/select'
@ -14,14 +15,9 @@ const createComponent = ({
slots?: Record<string, any>
props?: typeof TreeSelect['props']
} = {}) => {
// vm can not get component expose, use ref
const wrapperRef = ref()
const wrapperRef = ref<InstanceType<typeof TreeSelect>>()
const value = props.modelValue || ref('')
const wrapper = mount({
data() {
return {
modelValue: value,
data: [
const data = ref([
{
value: 1,
label: '一级 1',
@ -38,20 +34,22 @@ const createComponent = ({
},
],
},
],
'onUpdate:modelValue': (val: string) => (value.value = val),
renderAfterExpand: false,
...props,
}
},
])
const wrapper = mount({
render() {
return h(
TreeSelect,
{
...this.$data,
ref: (val: object) => (wrapperRef.value = val),
},
slots
return (
<TreeSelect
data={data.value}
renderAfterExpand={false}
{...props}
modelValue={value.value}
onUpdate:modelValue={(val: string) => (value.value = val)}
ref={(val: InstanceType<typeof TreeSelect>) =>
(wrapperRef.value = val)
}
v-slots={slots}
/>
)
},
})
@ -59,9 +57,9 @@ const createComponent = ({
return {
wrapper,
getWrapperRef: () =>
new Promise((resolve) =>
nextTick(() => resolve(wrapperRef.value))
) as Promise<InstanceType<typeof ElTree> & InstanceType<typeof ElSelect>>,
new Promise<InstanceType<typeof TreeSelect>>((resolve) =>
nextTick(() => resolve(wrapperRef.value!))
),
select: wrapper.findComponent({ name: 'ElSelect' }) as VueWrapper<
InstanceType<typeof ElSelect>
>,
@ -86,7 +84,7 @@ describe('TreeSelect.vue', () => {
expect(tree.findAll('.el-tree .el-tree-node').length).toBe(3)
expect(tree.findAll('.el-tree .el-select-dropdown__item').length).toBe(3)
wrapper.vm.data[0].children = []
wrapper.findComponent(TreeSelect).vm.data[0].children = []
await nextTick()
@ -164,7 +162,7 @@ describe('TreeSelect.vue', () => {
.find('.el-tree-node .el-select-dropdown__item.is-disabled')
.trigger('click')
await nextTick()
expect(wrapper.vm.modelValue).toBe('1')
expect(wrapper.findComponent(TreeSelect).vm.modelValue).toBe('1')
})
test('multiple', async () => {
@ -246,8 +244,7 @@ describe('TreeSelect.vue', () => {
await nextTick()
expect(tree.find('.el-select-dropdown__item').text()).toBe('1')
wrapper.vm.modelValue = '2'
await nextTick()
await wrapper.setProps({ modelValue: '2' })
expect(select.vm.selectedLabel).toBe('2')
})