element-plus/packages/hooks/__tests__/use-teleport.spec.ts
三咲智子 bbd16a08e9
refactor(hooks): refactor hooks (#4253)
* refactor(hooks): remove use-css-var

* refactor(hooks): remove use-events

* refactor(hooks): remove use-migrating

* refactor(hooks): remove use-transition

* refactor(hooks): named export useAttrs

* refactor(hooks): named export useFocus

* refactor(hooks): refactor useFormItem

* refactor(hooks): refactor useGlobalConfig

* refactor(hooks): refactor useLocale

* refactor(hooks): refactor useLockscreen

* refactor(hooks): refactor useModal

* refactor(hooks): refactor useModelToggle

* refactor(hooks): refactor usePreventGlobal

* refactor(hooks): refactor useRestoreActive

* refactor(hooks): refactor useTeleport

* refactor(hooks): refactor useThrottleRender

* refactor(hooks): refactor useTimeout

* refactor(hooks): refactor useTransitionFallthrogh
2021-11-29 15:58:44 +08:00

86 lines
1.8 KiB
TypeScript

import { ref, nextTick, h } from 'vue'
import { mount } from '@vue/test-utils'
import { useTeleport } from '../use-teleport'
const AXIOM = 'Rem is the best girl'
const Comp = {
setup() {
const appendToBody = ref(true)
const { showTeleport, hideTeleport, renderTeleport } = useTeleport(
() => h('div', AXIOM),
appendToBody
)
return () => {
return [
h(
'button',
{
class: 'show',
onClick: showTeleport,
},
'show'
),
h(
'button',
{
class: 'hide',
onClick: hideTeleport,
},
'hide'
),
h('button', {
class: 'toggle',
onClick: () => {
// toggle append to body.
appendToBody.value = !appendToBody.value
},
}),
renderTeleport(),
]
}
},
}
describe('useModal', () => {
let wrapper: ReturnType<typeof mount>
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)
})
})