mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-03 11:47:48 +08:00
refactor(components): [popover] use JSX in Unit test (#8337)
This commit is contained in:
zz
GitHub
parent
4d2ecf5ca8
commit
f5af4c84fd
73
packages/components/popover/__tests__/directive.test.tsx
Normal file
73
packages/components/popover/__tests__/directive.test.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import { nextTick, ref } from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { afterEach, describe, expect, it } from 'vitest'
|
||||
import { rAF } from '@element-plus/test-utils/tick'
|
||||
import Popover from '../src/popover.vue'
|
||||
import PopoverDirective, { VPopover } from '../src/directive'
|
||||
import type { PopoverInstance } from '../src/popover'
|
||||
|
||||
const AXIOM = 'Rem is the best boy'
|
||||
|
||||
const _mount = () => {
|
||||
const popoverRef = ref<PopoverInstance>()
|
||||
return mount(
|
||||
() => (
|
||||
<>
|
||||
<Popover
|
||||
ref={popoverRef}
|
||||
title="title"
|
||||
content={AXIOM}
|
||||
virtual-triggering
|
||||
trigger="click"
|
||||
/>
|
||||
<div v-popover={popoverRef.value} id="reference-node">
|
||||
trigger
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
{
|
||||
global: {
|
||||
directives: {
|
||||
[VPopover]: PopoverDirective,
|
||||
},
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
describe('v-popover', () => {
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = ''
|
||||
})
|
||||
|
||||
it('should render correctly', async () => {
|
||||
const wrapper = _mount()
|
||||
|
||||
await nextTick()
|
||||
expect(document.body.querySelector('.el-popover')?.innerHTML).toContain(
|
||||
AXIOM
|
||||
)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('should show popover when reference is mounted', async () => {
|
||||
const wrapper = _mount()
|
||||
|
||||
await nextTick()
|
||||
const refNode = '#reference-node'
|
||||
expect(wrapper.find(refNode).exists()).toBe(true)
|
||||
expect(
|
||||
document.body.querySelector('.el-popover')?.getAttribute('style')
|
||||
).toContain('display: none')
|
||||
|
||||
await wrapper.find(refNode).trigger('click', {
|
||||
button: 0,
|
||||
})
|
||||
await nextTick()
|
||||
await rAF()
|
||||
expect(
|
||||
document.body.querySelector('.el-popover')?.getAttribute('style')
|
||||
).not.toContain('display: none')
|
||||
wrapper.unmount()
|
||||
})
|
||||
})
|
||||
@ -1,27 +1,33 @@
|
||||
// @ts-nocheck
|
||||
import { h, nextTick } from 'vue'
|
||||
import { mount as _mount } from '@vue/test-utils'
|
||||
import { afterEach, describe, expect, it, test, vi } from 'vitest'
|
||||
import { nextTick, ref } from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { POPPER_CONTAINER_SELECTOR, useZIndex } from '@element-plus/hooks'
|
||||
import makeMount from '@element-plus/test-utils/make-mount'
|
||||
import { rAF } from '@element-plus/test-utils/tick'
|
||||
import { ElPopperTrigger } from '@element-plus/components/popper'
|
||||
import Popover from '../src/popover.vue'
|
||||
import type { VueWrapper } from '@vue/test-utils'
|
||||
import type { PopoverProps } from '../src/popover'
|
||||
|
||||
const AXIOM = 'Rem is the best girl'
|
||||
|
||||
const mount = makeMount(Popover, {
|
||||
slots: {
|
||||
default: () => AXIOM,
|
||||
reference: () => h('button', 'click me'),
|
||||
},
|
||||
props: {},
|
||||
global: {
|
||||
attachTo: document.body,
|
||||
},
|
||||
})
|
||||
const _mount = (props?: Partial<PopoverProps>) =>
|
||||
mount(
|
||||
{
|
||||
setup() {
|
||||
const slots = {
|
||||
default: () => AXIOM,
|
||||
reference: () => <button>click me</button>,
|
||||
}
|
||||
return () => <Popover {...props} v-slots={slots} />
|
||||
},
|
||||
},
|
||||
{
|
||||
attachTo: document.body,
|
||||
}
|
||||
)
|
||||
|
||||
describe('Popover.vue', () => {
|
||||
let wrapper: ReturnType<typeof mount>
|
||||
let wrapper: VueWrapper<any>
|
||||
const findContentComp = () =>
|
||||
wrapper.findComponent({
|
||||
name: 'ElPopperContent',
|
||||
@ -32,67 +38,54 @@ describe('Popover.vue', () => {
|
||||
document.body.innerHTML = ''
|
||||
})
|
||||
|
||||
test('render test', () => {
|
||||
wrapper = mount()
|
||||
it('render test', () => {
|
||||
wrapper = _mount()
|
||||
|
||||
expect(findContentComp().text()).toEqual(AXIOM)
|
||||
})
|
||||
|
||||
test('should render with title', () => {
|
||||
it('should render with title', () => {
|
||||
const title = 'test title'
|
||||
wrapper = mount({
|
||||
props: {
|
||||
title,
|
||||
},
|
||||
})
|
||||
wrapper = _mount({ title })
|
||||
|
||||
expect(findContentComp().text()).toContain(title)
|
||||
})
|
||||
|
||||
test("should modify popover's style with width", async () => {
|
||||
wrapper = mount({
|
||||
props: {
|
||||
width: 200,
|
||||
},
|
||||
})
|
||||
it(`should modify popover's style with width`, async () => {
|
||||
wrapper = _mount({ width: 200 })
|
||||
|
||||
const popperContent = findContentComp()
|
||||
expect(getComputedStyle(popperContent.element).width).toBe('200px')
|
||||
|
||||
await wrapper.setProps({
|
||||
width: '100vw',
|
||||
})
|
||||
await wrapper.setProps({ width: '100vw' })
|
||||
|
||||
expect(getComputedStyle(popperContent.element).width).toBe('100vw')
|
||||
})
|
||||
|
||||
test('the content should be overrode by slots', () => {
|
||||
it('the content should be overrode by slots', () => {
|
||||
const content = 'test content'
|
||||
wrapper = mount({
|
||||
props: {
|
||||
content,
|
||||
},
|
||||
})
|
||||
wrapper = _mount({ content })
|
||||
|
||||
expect(findContentComp().text()).toContain(AXIOM)
|
||||
})
|
||||
|
||||
test('should render content when no slots were passed', () => {
|
||||
it('should render content when no slots were passed', () => {
|
||||
const content = 'test content'
|
||||
const virtualRef = document.createElement('button')
|
||||
wrapper = makeMount(Popover, {
|
||||
props: {
|
||||
content,
|
||||
teleported: false,
|
||||
virtualRef,
|
||||
virtualTriggering: true,
|
||||
},
|
||||
})()
|
||||
wrapper = mount(() => (
|
||||
<Popover
|
||||
content={content}
|
||||
teleported={false}
|
||||
virtualRef={virtualRef}
|
||||
virtualTriggering
|
||||
/>
|
||||
))
|
||||
|
||||
expect(findContentComp().text()).toBe(content)
|
||||
})
|
||||
|
||||
test('popper z-index should be dynamical', () => {
|
||||
wrapper = mount()
|
||||
it('popper z-index should be dynamical', () => {
|
||||
wrapper = _mount()
|
||||
|
||||
const { currentZIndex } = useZIndex()
|
||||
expect(
|
||||
@ -100,18 +93,16 @@ describe('Popover.vue', () => {
|
||||
).toBeLessThanOrEqual(currentZIndex.value)
|
||||
})
|
||||
|
||||
test('defind hide method', async () => {
|
||||
wrapper = mount()
|
||||
const vm = wrapper.vm as any
|
||||
it('defind hide method', async () => {
|
||||
wrapper = _mount()
|
||||
const vm = wrapper.findComponent(Popover).vm
|
||||
|
||||
expect(vm.hide).toBeDefined()
|
||||
})
|
||||
|
||||
test('should be able to emit after-enter and after-leave', async () => {
|
||||
const wrapper = mount({
|
||||
attrs: {
|
||||
trigger: 'click',
|
||||
},
|
||||
})
|
||||
it('should be able to emit after-enter and after-leave', async () => {
|
||||
const wrapper = _mount({ trigger: 'click' })
|
||||
|
||||
await nextTick()
|
||||
const trigger$ = wrapper.findComponent(ElPopperTrigger)
|
||||
const triggerEl = trigger$.find('.el-tooltip__trigger')
|
||||
@ -120,48 +111,26 @@ describe('Popover.vue', () => {
|
||||
vi.runAllTimers()
|
||||
vi.useRealTimers()
|
||||
await rAF()
|
||||
expect(wrapper.emitted()).toHaveProperty('after-enter')
|
||||
expect(wrapper.findComponent(Popover).emitted()).toHaveProperty(
|
||||
'after-enter'
|
||||
)
|
||||
|
||||
vi.useFakeTimers()
|
||||
await triggerEl.trigger('click')
|
||||
vi.runAllTimers()
|
||||
vi.useRealTimers()
|
||||
await rAF()
|
||||
expect(wrapper.emitted()).toHaveProperty('after-leave')
|
||||
expect(wrapper.findComponent(Popover).emitted()).toHaveProperty(
|
||||
'after-leave'
|
||||
)
|
||||
})
|
||||
|
||||
test('test visible controlled mode trigger invalid', async () => {
|
||||
const wrapper = _mount(
|
||||
{
|
||||
components: {
|
||||
Popover,
|
||||
},
|
||||
template: `
|
||||
<Popover
|
||||
:visible="visible"
|
||||
trigger="click"
|
||||
:content="content"
|
||||
>
|
||||
<template #reference>
|
||||
<button>click me</button>
|
||||
</template>
|
||||
</Popover>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
content: AXIOM,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
attachTo: 'body',
|
||||
}
|
||||
)
|
||||
it('test visible controlled mode trigger invalid', async () => {
|
||||
const wrapper = _mount({ visible: false, trigger: 'click' })
|
||||
await nextTick()
|
||||
const trigger$ = wrapper.findComponent(ElPopperTrigger)
|
||||
const triggerEl = trigger$.find('.el-tooltip__trigger')
|
||||
const popoverDom = document.querySelector('.el-popper')
|
||||
const popoverDom: HTMLElement = document.querySelector('.el-popper')!
|
||||
|
||||
vi.useFakeTimers()
|
||||
await triggerEl.trigger('click')
|
||||
@ -171,52 +140,43 @@ describe('Popover.vue', () => {
|
||||
expect(popoverDom.style.display).toBe('none')
|
||||
|
||||
vi.useFakeTimers()
|
||||
wrapper.vm.visible = true
|
||||
await wrapper.setProps({ visible: true })
|
||||
vi.runAllTimers()
|
||||
vi.useRealTimers()
|
||||
await rAF()
|
||||
expect(popoverDom.style.display).not.toBe('none')
|
||||
|
||||
vi.useFakeTimers()
|
||||
wrapper.vm.visible = false
|
||||
await wrapper.setProps({ visible: false })
|
||||
vi.runAllTimers()
|
||||
vi.useRealTimers()
|
||||
await rAF()
|
||||
expect(popoverDom.style.display).toBe('none')
|
||||
})
|
||||
|
||||
test('test v-model:visible', async () => {
|
||||
const wrapper = _mount(
|
||||
it('test v-model:visible', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
components: {
|
||||
Popover,
|
||||
},
|
||||
template: `
|
||||
<Popover
|
||||
v-model:visible="visible"
|
||||
trigger="click"
|
||||
:content="content"
|
||||
>
|
||||
<template #reference>
|
||||
<button>click me</button>
|
||||
</template>
|
||||
</Popover>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
content: AXIOM,
|
||||
}
|
||||
setup() {
|
||||
const visible = ref(false)
|
||||
return () => (
|
||||
<Popover v-model={[visible.value, 'visible']} trigger="click">
|
||||
{{
|
||||
default: () => AXIOM,
|
||||
reference: () => <button>click me</button>,
|
||||
}}
|
||||
</Popover>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
attachTo: 'body',
|
||||
attachTo: document.body,
|
||||
}
|
||||
)
|
||||
await nextTick()
|
||||
const trigger$ = wrapper.findComponent(ElPopperTrigger)
|
||||
const triggerEl = trigger$.find('.el-tooltip__trigger')
|
||||
const popoverDom = document.querySelector('.el-popper')
|
||||
const popoverDom: HTMLElement = document.querySelector('.el-popper')!
|
||||
|
||||
vi.useFakeTimers()
|
||||
await triggerEl.trigger('click')
|
||||
@ -236,23 +196,21 @@ describe('Popover.vue', () => {
|
||||
describe('teleported API', () => {
|
||||
it('should mount on popper container', async () => {
|
||||
expect(document.body.innerHTML).toBe('')
|
||||
mount()
|
||||
_mount()
|
||||
|
||||
await nextTick()
|
||||
expect(
|
||||
document.body.querySelector(POPPER_CONTAINER_SELECTOR).innerHTML
|
||||
document.body.querySelector(POPPER_CONTAINER_SELECTOR)?.innerHTML
|
||||
).not.toBe('')
|
||||
})
|
||||
|
||||
it('should not mount on the popper container', async () => {
|
||||
expect(document.body.innerHTML).toBe('')
|
||||
mount({
|
||||
props: { teleported: false },
|
||||
})
|
||||
_mount({ teleported: false })
|
||||
|
||||
await nextTick()
|
||||
expect(
|
||||
document.body.querySelector(POPPER_CONTAINER_SELECTOR).innerHTML
|
||||
document.body.querySelector(POPPER_CONTAINER_SELECTOR)?.innerHTML
|
||||
).toBe('')
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user