chore: Replace vue-portal with teleport

Author: afontcu

package.json

@@ -69,7 +69,6 @@
     "jest-serializer-vue": "^2.0.2",
     "kcd-scripts": "^7.5.1",
     "msw": "^0.21.3",
-    "portal-vue": "^2.1.7",
     "typescript": "^4.1.2",
     "vee-validate": "^4.0.2",
     "vue": "^3.0.4",

src/__tests__/teleport.js

@@ -0,0 +1,41 @@
+import {defineComponent} from 'vue'
+import '@testing-library/jest-dom/extend-expect'
+import {render, fireEvent} from '..'
+
+const ModalButton = defineComponent({
+  data() {
+    return {
+      modalOpen: false,
+    }
+  },
+
+  template: `
+    <button @click="modalOpen = true">open</button>
+
+    <teleport to="body">
+      <div v-if="modalOpen" data-testid="teleported-modal">
+        This is a teleported modal!
+        <button @click="modalOpen = false">close</button>
+      </div>
+    </teleport>
+  `,
+})
+
+test('Teleport', async () => {
+  const {queryByText, getByText} = render(ModalButton)
+
+  expect(queryByText('This is a teleported modal!')).not.toBeInTheDocument()
+
+  // Open the modal
+  await fireEvent.click(getByText('open'))
+
+  const modal = getByText('This is a teleported modal!')
+
+  expect(modal).toBeInTheDocument()
+  expect(modal.parentNode.nodeName).toBe('BODY')
+
+  // Close the modal
+  await fireEvent.click(getByText('close'))
+
+  expect(queryByText('This is a teleported modal!')).not.toBeInTheDocument()
+})