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