Add Portal tests

src/lib/components/portal/portal.test.ts

@@ -0,0 +1,295 @@
+import svelte from "svelte-inline-compile";
+import { render } from "@testing-library/svelte";
+import Portal from "./Portal.svelte";
+import PortalGroup from "./PortalGroup.svelte";
+import { click } from "$lib/test-utils/interactions";
+
+function getPortalRoot() {
+  return document.getElementById('headlessui-portal-root')!
+}
+
+beforeEach(() => {
+  document.body.innerHTML = ''
+})
+
+it('should be possible to use a Portal', () => {
+  // Dummy assertion to trick TS compiler
+  expect(Portal).not.toBe(PortalGroup);
+
+  expect(getPortalRoot()).toBe(null)
+
+  render(svelte`
+    <main id="parent">
+      <Portal>
+        <p id="content">Contents...</p>
+      </Portal>
+    </main>
+  `)
+
+  let parent = document.getElementById('parent')
+  let content = document.getElementById('content')
+
+  expect(getPortalRoot()).not.toBe(null)
+
+  // Ensure the content is not part of the parent
+  expect(parent).not.toContainElement(content)
+
+  // Ensure the content does exist
+  expect(content).not.toBe(null)
+  expect(content).toHaveTextContent('Contents...')
+})
+
+it('should be possible to use multiple Portal elements', () => {
+  expect(getPortalRoot()).toBe(null)
+
+  render(svelte`
+    <main id="parent">
+      <Portal>
+        <p id="content1">Contents 1 ...</p>
+      </Portal>
+      <hr />
+      <Portal>
+        <p id="content2">Contents 2 ...</p>
+      </Portal>
+    </main>
+  `)
+
+  let parent = document.getElementById('parent')
+  let content1 = document.getElementById('content1')
+  let content2 = document.getElementById('content2')
+
+  expect(getPortalRoot()).not.toBe(null)
+
+  // Ensure the content1 is not part of the parent
+  expect(parent).not.toContainElement(content1)
+
+  // Ensure the content2 is not part of the parent
+  expect(parent).not.toContainElement(content2)
+
+  // Ensure the content does exist
+  expect(content1).not.toBe(null)
+  expect(content1).toHaveTextContent('Contents 1 ...')
+
+  // Ensure the content does exist
+  expect(content2).not.toBe(null)
+  expect(content2).toHaveTextContent('Contents 2 ...')
+})
+
+it('should cleanup the Portal root when the last Portal is unmounted', async () => {
+  expect(getPortalRoot()).toBe(null)
+
+  render(svelte`
+    <script>
+      let renderA = false;
+      let renderB = false;
+    </script>
+    <main id="parent">
+      <button id="a" on:click={() => renderA = !renderA}>
+        Toggle A
+      </button>
+      <button id="b" on:click={() => renderB = !renderB}>
+        Toggle B
+      </button>
+
+      {#if renderA}
+        <Portal>
+          <p id="content1">Contents 1 ...</p>
+        </Portal>
+      {/if}
+
+      {#if renderB}
+        <Portal>
+          <p id="content2">Contents 2 ...</p>
+        </Portal>
+      {/if}
+    </main>
+    `)
+
+  let a = document.getElementById('a')
+  let b = document.getElementById('b')
+
+  expect(getPortalRoot()).toBe(null)
+
+  // Let's render the first Portal
+  await click(a)
+
+  expect(getPortalRoot()).not.toBe(null)
+  expect(getPortalRoot().childNodes).toHaveLength(1)
+
+  // Let's render the second Portal
+  await click(b)
+
+  expect(getPortalRoot()).not.toBe(null)
+  expect(getPortalRoot().childNodes).toHaveLength(2)
+
+  // Let's remove the first portal
+  await click(a)
+
+  expect(getPortalRoot()).not.toBe(null)
+  expect(getPortalRoot().childNodes).toHaveLength(1)
+
+  // Let's remove the second Portal
+  await click(b)
+
+  expect(getPortalRoot()).toBe(null)
+
+  // Let's render the first Portal again
+  await click(a)
+
+  expect(getPortalRoot()).not.toBe(null)
+  expect(getPortalRoot().childNodes).toHaveLength(1)
+})
+
+it('should be possible to render multiple portals at the same time', async () => {
+  expect(getPortalRoot()).toBe(null)
+
+  render(svelte`
+    <script>
+      let renderA = true;
+      let renderB = true;
+      let renderC = true;
+    </script>
+    <main id="parent">
+      <button id="a" on:click={() => renderA = !renderA}>
+        Toggle A
+      </button>
+      <button id="b" on:click={() => renderB = !renderB}>
+        Toggle B
+      </button>
+      <button id="c" on:click={() => renderC = !renderC}>
+        Toggle C
+      </button>
+
+      <button
+        id="double"
+        on:click={() => {
+          renderA = !renderA;
+          renderB = !renderB;
+        }}
+      >
+        Toggle A & B{' '}
+      </button>
+
+      {#if renderA}
+        <Portal>
+          <p id="content1">Contents 1 ...</p>
+        </Portal>
+      {/if}
+
+      {#if renderB}
+        <Portal>
+          <p id="content2">Contents 2 ...</p>
+        </Portal>
+      {/if}
+
+      {#if renderC}
+        <Portal>
+          <p id="content3">Contents 3 ...</p>
+        </Portal>
+      {/if}
+    </main>
+  `)
+
+  expect(getPortalRoot()).not.toBe(null)
+  expect(getPortalRoot().childNodes).toHaveLength(3)
+
+  // Remove Portal 1
+  await click(document.getElementById('a'))
+  expect(getPortalRoot().childNodes).toHaveLength(2)
+
+  // Remove Portal 2
+  await click(document.getElementById('b'))
+  expect(getPortalRoot().childNodes).toHaveLength(1)
+
+  // Re-add Portal 1
+  await click(document.getElementById('a'))
+  expect(getPortalRoot().childNodes).toHaveLength(2)
+
+  // Remove Portal 3
+  await click(document.getElementById('c'))
+  expect(getPortalRoot().childNodes).toHaveLength(1)
+
+  // Remove Portal 1
+  await click(document.getElementById('a'))
+  expect(getPortalRoot()).toBe(null)
+
+  // Render A and B at the same time!
+  await click(document.getElementById('double'))
+  expect(getPortalRoot().childNodes).toHaveLength(2)
+})
+
+it('should be possible to tamper with the modal root and restore correctly', async () => {
+  expect(getPortalRoot()).toBe(null)
+
+  render(svelte`
+    <script>
+      let renderA = true;
+      let renderB = true;
+    </script>
+    <main id="parent">
+      <button id="a" on:click={() => renderA = !renderA}>
+        Toggle A
+      </button>
+      <button id="b" on:click={() => renderB = !renderB}>
+        Toggle B
+      </button>
+
+      {#if renderA}
+        <Portal>
+          <p id="content1">Contents 1 ...</p>
+        </Portal>
+      {/if}
+
+      {#if renderB}
+        <Portal>
+          <p id="content2">Contents 2 ...</p>
+        </Portal>
+      {/if}
+    </main>
+  `)
+
+  expect(getPortalRoot()).not.toBe(null)
+
+  // Tamper tamper
+  document.body.removeChild(document.getElementById('headlessui-portal-root')!)
+
+  // Hide Portal 1 and 2
+  await click(document.getElementById('a'))
+  await click(document.getElementById('b'))
+
+  expect(getPortalRoot()).toBe(null)
+
+  // Re-show Portal 1 and 2
+  await click(document.getElementById('a'))
+  await click(document.getElementById('b'))
+
+  expect(getPortalRoot()).not.toBe(null)
+  expect(getPortalRoot().childNodes).toHaveLength(2)
+})
+
+it('should be possible to force the Portal into a specific element using PortalGroup', async () => {
+  render(svelte`
+    <script>
+      let container = null;
+    </script>
+    <main>
+      <aside bind:this={container} id="group-1">
+        A
+      </aside>
+
+      <PortalGroup target={container}>
+        <section id="group-2">
+          <span>B</span>
+        </section>
+        <Portal>Next to A</Portal>
+      </PortalGroup>
+
+      <Portal>I am in the portal root</Portal>
+    </main>
+    `)
+
+  // The random whitespace in here is a little annoying but whatever
+  expect(document.body.innerHTML).toMatchInlineSnapshot(
+    `"<div><main><aside id=\\"group-1\\">A<div>Next to A</div></aside> <section id=\\"group-2\\"><span>B</span></section>  </main></div><div id=\\"headlessui-portal-root\\"><div>I am in the portal root</div></div>"`
+  )
+})