|
| 1 | +import {defineComponent} from 'vue' |
| 2 | +import '@testing-library/jest-dom/extend-expect' |
| 3 | +import {render, fireEvent} from '..' |
| 4 | + |
| 5 | +const ModalButton = defineComponent({ |
| 6 | + data() { |
| 7 | + return { |
| 8 | + modalOpen: false, |
| 9 | + } |
| 10 | + }, |
| 11 | + |
| 12 | + template: ` |
| 13 | + <button @click="modalOpen = true">open</button> |
| 14 | + |
| 15 | + <teleport to="body"> |
| 16 | + <div v-if="modalOpen" data-testid="teleported-modal"> |
| 17 | + This is a teleported modal! |
| 18 | + <button @click="modalOpen = false">close</button> |
| 19 | + </div> |
| 20 | + </teleport> |
| 21 | + `, |
| 22 | +}) |
| 23 | + |
| 24 | +test('Teleport', async () => { |
| 25 | + const {queryByText, getByText} = render(ModalButton) |
| 26 | + |
| 27 | + expect(queryByText('This is a teleported modal!')).not.toBeInTheDocument() |
| 28 | + |
| 29 | + // Open the modal |
| 30 | + await fireEvent.click(getByText('open')) |
| 31 | + |
| 32 | + const modal = getByText('This is a teleported modal!') |
| 33 | + |
| 34 | + expect(modal).toBeInTheDocument() |
| 35 | + expect(modal.parentNode.nodeName).toBe('BODY') |
| 36 | + |
| 37 | + // Close the modal |
| 38 | + await fireEvent.click(getByText('close')) |
| 39 | + |
| 40 | + expect(queryByText('This is a teleported modal!')).not.toBeInTheDocument() |
| 41 | +}) |
0 commit comments