chore: update overlay tests and Popover dev page

dev/pages/Popover.tsx

@@ -15,8 +15,8 @@ export default function PopoverPage() {
   const [withBackdrop, setWithBackdrop] = useState(false);
   const [theme, setTheme] = useState('');
   const [useTooltip, setUseTooltip] = useState(false);
-  const [contentWidth, setContentWidth] = useState('');
-  const [contentHeight, setContentHeight] = useState('');
+  const [width, setWidth] = useState<string | null>(null);
+  const [height, setHeight] = useState<string | null>(null);
   const [content, setContent] = useState('This is the popover content');
   const [useRichContent, setUseRichContent] = useState(false);
 
@@ -50,8 +50,8 @@ export default function PopoverPage() {
             modal={modal}
             withBackdrop={withBackdrop}
             theme={theme}
-            contentWidth={contentWidth}
-            contentHeight={contentHeight}
+            width={width}
+            height={height}
             trigger={
               [
                 ...(triggerClick ? ['click'] : []),
@@ -182,20 +182,20 @@ export default function PopoverPage() {
           rich content
         </label>
         <label>
-          Content Width:
+          Width:
           <input
             type="text"
-            value={contentWidth}
-            onChange={(e) => setContentWidth(e.target.value)}
+            value={width || ''}
+            onChange={(e) => setWidth(e.target.value || null)}
             placeholder="e.g., 300px, 50%, etc."
           />
         </label>
         <label>
-          Content Height:
+          Height:
           <input
             type="text"
-            value={contentHeight}
-            onChange={(e) => setContentHeight(e.target.value)}
+            value={height || ''}
+            onChange={(e) => setHeight(e.target.value || null)}
             placeholder="e.g., 200px, auto, etc."
           />
         </label>

test/Popover.spec.tsx

@@ -1,53 +1,33 @@
-import { afterEach, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-react';
 import { Popover, type PopoverElement } from '../packages/react-components/src/Popover.js';
-import createOverlayCloseCatcher from './utils/createOverlayCloseCatcher.js';
 
 describe('Popover', () => {
-  const overlayTag = 'vaadin-popover-overlay';
-
-  const [ref, catcher] = createOverlayCloseCatcher<PopoverElement>(overlayTag, (ref) => {
-    ref.opened = false;
-  });
-
-  async function assert() {
+  async function assert(popover: PopoverElement) {
     await new Promise((r) => requestAnimationFrame(r));
     await new Promise((r) => requestAnimationFrame(r));
 
-    const overlay = document.querySelector(overlayTag);
-    expect(overlay).to.exist;
-
-    const childNodes = Array.from(overlay!.childNodes);
+    const childNodes = Array.from(popover.childNodes);
 
     const body = childNodes.find((node) => node.nodeType === Node.TEXT_NODE);
     expect(body).to.have.text('FooBar');
   }
 
-  afterEach(catcher);
-
   it('should use children if no renderer property set', async () => {
-    render(
-      <Popover ref={ref} opened>
-        FooBar
-      </Popover>,
-    );
+    render(<Popover opened>FooBar</Popover>);
 
-    await assert();
+    await assert(document.querySelector('vaadin-popover') as PopoverElement);
   });
 
   it('should use renderer prop if it is set', async () => {
-    render(<Popover ref={ref} opened renderer={() => <>FooBar</>}></Popover>);
+    render(<Popover opened renderer={() => <>FooBar</>}></Popover>);
 
-    await assert();
+    await assert(document.querySelector('vaadin-popover') as PopoverElement);
   });
 
   it('should use children as renderer prop', async () => {
-    render(
-      <Popover ref={ref} opened>
-        {() => <>FooBar</>}
-      </Popover>,
-    );
+    render(<Popover opened>{() => <>FooBar</>}</Popover>);
 
-    await assert();
+    await assert(document.querySelector('vaadin-popover') as PopoverElement);
   });
 });

test/Select.spec.tsx

@@ -32,9 +32,13 @@ describe('Select', () => {
 
     await user.click(valueButton);
 
-    const overlay = await findByQuerySelector('vaadin-select-overlay');
     await vi.waitFor(() => {
-      expect(overlay).to.have.text('FooBar');
+      const listBox = select.querySelector('vaadin-list-box, vaadin-select-list-box');
+      expect(listBox).to.exist;
+
+      const items = listBox!.querySelectorAll('vaadin-item, vaadin-select-item');
+      expect(items[0]).to.have.text('Foo');
+      expect(items[1]).to.have.text('Bar');
     });
   }