element-plus/packages/hooks/__tests__/use-teleport.vitest.tsx
三咲智子 aaf90d99d0
test: switch to vitest (#5991)
* test: use vitest

* test: add script and ci

* chore: improve tsconfig

* refactor: use-form-item

* fix: remove unused

* chore: improve scripts

* test: improve mock

* refactor: change coverage
2022-02-21 14:28:22 +08:00

76 lines
1.8 KiB
TypeScript

import { ref, nextTick, h, defineComponent } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, afterEach } 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
)
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('useModal', () => {
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)
})
})