mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-04 04:08:34 +08:00
104 lines
2.6 KiB
TypeScript
104 lines
2.6 KiB
TypeScript
import { defineComponent, h, nextTick, ref } from 'vue'
|
|
import { mount } from '@vue/test-utils'
|
|
import { NOOP } from '@vue/shared'
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
import { useTeleport } from '../use-teleport'
|
|
import type { VueWrapper } from '@vue/test-utils'
|
|
|
|
const AXIOM = 'Rem is the best girl'
|
|
|
|
const Comp = defineComponent({
|
|
setup() {
|
|
const appendToBody = ref(true)
|
|
const { showTeleport, hideTeleport, renderTeleport } = useTeleport(
|
|
() => h('div', AXIOM),
|
|
appendToBody
|
|
)
|
|
showTeleport()
|
|
|
|
return () => (
|
|
<>
|
|
<button class="show" onClick={showTeleport}>
|
|
show
|
|
</button>
|
|
<button class="hide" onClick={hideTeleport}>
|
|
hide
|
|
</button>
|
|
<button
|
|
class="toggle"
|
|
onClick={() => (appendToBody.value = !appendToBody.value)}
|
|
>
|
|
toggle
|
|
</button>
|
|
{renderTeleport()}
|
|
</>
|
|
)
|
|
},
|
|
})
|
|
|
|
describe('useTeleport', () => {
|
|
let wrapper: VueWrapper<InstanceType<typeof Comp>>
|
|
|
|
beforeEach(() => {
|
|
wrapper = mount(Comp)
|
|
})
|
|
|
|
afterEach(() => {
|
|
wrapper.unmount()
|
|
})
|
|
|
|
it('should render correctly', async () => {
|
|
await nextTick()
|
|
expect(wrapper.text()).not.toContain(AXIOM)
|
|
})
|
|
|
|
it('should render teleport to the DOM', async () => {
|
|
await nextTick()
|
|
expect(wrapper.text()).not.toContain(AXIOM)
|
|
|
|
await wrapper.find('.show').trigger('click')
|
|
|
|
expect(document.body.innerHTML).toContain(AXIOM)
|
|
|
|
await wrapper.find('.hide').trigger('click')
|
|
|
|
expect(document.body.innerHTML).not.toContain(AXIOM)
|
|
})
|
|
|
|
it('should render to the current wrapper instead of document.body', async () => {
|
|
await nextTick()
|
|
|
|
expect(wrapper.text()).not.toContain(AXIOM)
|
|
|
|
await wrapper.find('.toggle').trigger('click')
|
|
|
|
expect(wrapper.text()).toContain(AXIOM)
|
|
})
|
|
})
|
|
|
|
describe('useTeleport when isClient is false', () => {
|
|
const mockIsClient = false
|
|
|
|
beforeEach(() => {
|
|
vi.resetModules()
|
|
vi.doMock('@element-plus/utils', () => ({
|
|
isClient: mockIsClient,
|
|
}))
|
|
})
|
|
afterEach(() => {
|
|
vi.doUnmock('@element-plus/utils')
|
|
})
|
|
|
|
it('should get default value when isClient is false', async () => {
|
|
const { useTeleport: mockUseTeleport } = await import('../use-teleport')
|
|
const appendToBody = ref(true)
|
|
const { isTeleportVisible, showTeleport, hideTeleport, renderTeleport } =
|
|
mockUseTeleport(() => h('div', AXIOM), appendToBody)
|
|
|
|
expect(isTeleportVisible.value).toBeFalsy()
|
|
expect(showTeleport).toEqual(NOOP)
|
|
expect(hideTeleport).toEqual(NOOP)
|
|
expect(renderTeleport).toEqual(NOOP)
|
|
})
|
|
})
|