test: adds extra test for shadow dom and position:absolute

Author: iOvergaard

packages/uui-popover-container/lib/uui-popover-container.test.ts

@@ -1,7 +1,18 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { html, fixture, expect, aTimeout } from '@open-wc/testing';
 import { UUIPopoverContainerElement } from './uui-popover-container.element';
 import '@umbraco-ui/uui-button/lib';
 
+class DummyElementWithShadowDom extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot!.innerHTML = `<div style="height: 200px; overflow: auto;" id="scrollable-div">
+        <slot></slot>
+      </div>`;
+  }
+}
+customElements.define('dummy-shadow-dom', DummyElementWithShadowDom);
+
 describe('UUIPopoverContainerElement', () => {
   let element: UUIPopoverContainerElement;
 
@@ -32,7 +43,48 @@ describe('UUIPopoverContainerElement', () => {
       const testContainer = await fixture(html`
         <main>
           <div style="height: 300px; overflow: auto;" id="outer-scroll">
-            <div style="height: 200px; overflow: auto;" id="inner-scroll">
+            <dummy-shadow-dom>
+              <div style="height: 200px; overflow: auto;" id="inner-scroll">
+                <div style="height: 100px;"></div>
+                <uui-button id="trigger-button" popovertarget="test-popover"
+                  >Open</uui-button
+                >
+                <div style="height: 400px;"></div>
+              </div>
+            </dummy-shadow-dom>
+            <div style="height: 500px;"></div>
+          </div>
+          <uui-popover-container id="test-popover" popover>
+            Test content
+          </uui-popover-container>
+        </main>
+      `);
+
+      const popover = testContainer.querySelector(
+        '#test-popover',
+      ) as UUIPopoverContainerElement;
+      const button = testContainer.querySelector('#trigger-button');
+
+      // Trigger the popover open
+      button?.click();
+      await aTimeout(100);
+
+      // Access the private scroll parents array for testing
+      const scrollParents = popover._getScrollParents();
+
+      // Should find both scroll containers
+      expect(scrollParents.length).to.be.greaterThan(0);
+
+      // Should include the document.body as the last element
+      expect(scrollParents[scrollParents.length - 1]).to.equal(document.body);
+    });
+
+    it('should ignore scroll parents with position: absolute', async () => {
+      // Create a test structure with nested shadow DOM and scroll containers
+      const testContainer = await fixture(html`
+        <main>
+          <div style="height: 300px; overflow: auto;" id="outer-scroll">
+            <div style="position: absolute; top:0; left:0;" id="inner-scroll">
               <div style="height: 100px;"></div>
               <uui-button id="trigger-button" popovertarget="test-popover"
                 >Open</uui-button
@@ -50,20 +102,20 @@ describe('UUIPopoverContainerElement', () => {
       const popover = testContainer.querySelector(
         '#test-popover',
       ) as UUIPopoverContainerElement;
+      const innerScroll = testContainer.querySelector(
+        '#inner-scroll',
+      ) as HTMLElement;
       const button = testContainer.querySelector('#trigger-button');
 
       // Trigger the popover open
       button?.click();
-      await new Promise(resolve => setTimeout(resolve, 100));
+      await aTimeout(100);
 
       // Access the private scroll parents array for testing
       const scrollParents = popover._getScrollParents();
 
-      // Should find both scroll containers
-      expect(scrollParents.length).to.be.greaterThan(0);
-
-      // Should include the document.body as the last element
-      expect(scrollParents[scrollParents.length - 1]).to.equal(document.body);
+      // Should not contain the inner scroll since it's position: absolute
+      expect(scrollParents).to.not.include(innerScroll);
     });
 
     it('should reset scroll parents when called multiple times', async () => {
@@ -88,12 +140,12 @@ describe('UUIPopoverContainerElement', () => {
 
       // Open and close the popover multiple times
       button?.click();
-      await new Promise(resolve => setTimeout(resolve, 50));
+      await aTimeout(50);
       popover.hidePopover();
-      await new Promise(resolve => setTimeout(resolve, 50));
+      await aTimeout(50);
 
       button?.click();
-      await new Promise(resolve => setTimeout(resolve, 50));
+      await aTimeout(50);
 
       const scrollParents = popover._getScrollParents();