fix: Remove element based on component lifecycle

Author: Bob Fanger

src/Portal.svelte

@@ -36,8 +36,8 @@
     }
 
     function destroy() {
-      if (el.parent) {
-        el.parent.removeChild(el);
+      if (el.parentNode) {
+        el.parentNode.removeChild(el);
       }
     }
 

test/Portal.test.js

@@ -1,8 +1,10 @@
 import { render } from "@testing-library/svelte";
 
 import TestPortalWrapper from "./TestPortalWrapper.svelte";
+import TestLifecycle from "./TestLifecycle.svelte";
+import { tick } from "svelte";
 
-describe("<Portal />", () => {
+describe("<Portal /> target", () => {
   let wrapper;
 
   beforeEach(() => {
@@ -42,3 +44,34 @@ describe("<Portal />", () => {
     expect(isPortalContainerEmpty).toBe(true);
   });
 });
+
+describe("<Portal /> lifecycle", () => {
+  let targetEl;
+  let lifecycleComponent;
+  beforeEach(() => {
+    let { container, component } = render(TestLifecycle);
+    lifecycleComponent = component;
+    targetEl = container.querySelector("#modals");
+  });
+  it("should be added and removed from dom", async () => {
+    expect(targetEl.children).toHaveLength(1);
+    lifecycleComponent.$set({ modalVisible: false });
+    await tick();
+    expect(targetEl.children).toHaveLength(0);
+    lifecycleComponent.$set({ modalVisible: true });
+    await tick();
+    expect(targetEl.children).toHaveLength(1);
+  });
+  it("should be removed from dom after after outro", async () => {
+    lifecycleComponent.$set({ containerVisible: false });
+    await tick();
+    expect(targetEl.children).toHaveLength(1);
+    await new Promise((resolve) => {
+      const unsubscribe = lifecycleComponent.$on("outroend", () => {
+        resolve();
+        unsubscribe();
+      });
+    });
+    expect(targetEl.children).toHaveLength(0);
+  });
+});

test/TestLifecycle.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { fade } from "svelte/transition";
+  import Portal from "../src/Portal.svelte";
+
+  export let modalVisible = true;
+  export let containerVisible = true;
+</script>
+
+{#if containerVisible}
+  <div out:fade={{ duration: 100 }} on:outroend>
+    {#if modalVisible}
+      <Portal target="#modals">
+        <div id="modal" />
+      </Portal>
+    {/if}
+  </div>
+{/if}
+<div id="modals" />