@operato/popup 10.29.23 → 10.29.24

package/test/overlay-fit-size.test.ts

@@ -0,0 +1,42 @@
+import { expect } from '@open-wc/testing'
+import { html } from 'lit'
+
+import { openPopup } from '../src/open-popup.js'
+import { OxFloatingOverlay } from '../src/ox-floating-overlay.js'
+
+/*
+ * A popup of size 'fit' stands as tall as its content, and no taller than the screen.
+ * The other sizes are fractions of the screen; a form of five fields in a medium popup left half the card empty.
+ */
+async function openWith(height: number) {
+  const handle = openPopup(html`<div class="content" style="height: ${height}px">content</div>`, { size: 'fit', title: 'form' })
+  const overlay = document.getElementById(handle.name) as OxFloatingOverlay
+  await overlay.updateComplete
+  const card = overlay.renderRoot.querySelector('[overlayed]') as HTMLElement
+  const header = overlay.renderRoot.querySelector('[header]') as HTMLElement
+  return { handle, card, header }
+}
+
+describe("openPopup size 'fit'", () => {
+  it('stands at its content height', async () => {
+    const { handle, card, header } = await openWith(120)
+    const expected = header.getBoundingClientRect().height + 120
+
+    expect(card.getBoundingClientRect().height).to.be.closeTo(expected, 2)
+    handle.close()
+  })
+
+  it('stays inside the screen when the content is taller', async () => {
+    const { handle, card } = await openWith(5000)
+
+    expect(card.getBoundingClientRect().height).to.be.at.most(window.innerHeight - 32 + 0.5)
+    handle.close()
+  })
+
+  it('is no wider than the form width', async () => {
+    const { handle, card } = await openWith(120)
+
+    expect(card.getBoundingClientRect().width).to.be.at.most(Math.min(480, window.innerWidth - 32) + 0.5)
+    handle.close()
+  })
+})