test: update tests to not use context-menu overlay ID (#6869)

packages/context-menu/test/context.test.js

@@ -48,13 +48,13 @@ describe('context', () => {
     fire(target, 'vaadin-contextmenu');
 
     expect(menu._context.target).to.eql(target);
-    expect(menu.$.overlay.textContent).to.contain(target.textContent);
+    expect(menu._overlayElement.textContent).to.contain(target.textContent);
 
     menu.close();
     fire(another, 'vaadin-contextmenu');
 
     expect(menu._context.target).to.eql(another);
-    expect(menu.$.overlay.textContent).to.contain(another.textContent);
+    expect(menu._overlayElement.textContent).to.contain(another.textContent);
   });
 
   it('should use details as context details', () => {

packages/context-menu/test/dom/context-menu.test.js

@@ -64,7 +64,7 @@ describe('context-menu', () => {
       </vaadin-context-menu>
     `);
     await nextRender();
-    overlay = menu.$.overlay;
+    overlay = menu._overlayElement;
   });
 
   it('items', async () => {
@@ -84,7 +84,7 @@ describe('context-menu', () => {
     await nextRender();
 
     const subMenu = overlay.querySelector('vaadin-context-menu');
-    await expect(subMenu.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    await expect(subMenu._overlayElement).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 
   it('items overlay class', async () => {
@@ -94,7 +94,7 @@ describe('context-menu', () => {
     contextmenu(menu);
     await nextRender();
 
-    await expect(menu.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    await expect(menu._overlayElement).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 
   it('items overlay class nested', async () => {
@@ -106,6 +106,6 @@ describe('context-menu', () => {
     await nextRender();
 
     const subMenu = overlay.querySelector('vaadin-context-menu');
-    await expect(subMenu.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    await expect(subMenu._overlayElement).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 });

packages/context-menu/test/helpers.js

@@ -12,16 +12,16 @@ export async function openMenu(target, event = isTouch ? 'click' : 'mouseover')
 }
 
 export function getMenuItems(menu) {
-  return [...menu.$.overlay.querySelectorAll('[role="menu"] > :not([role="separator]"')];
+  return [...menu._overlayElement.querySelectorAll('[role="menu"] > :not([role="separator]"')];
 }
 
 export function getSubMenu(menu) {
-  return menu.$.overlay.querySelector('vaadin-context-menu');
+  return menu._overlayElement.querySelector('vaadin-context-menu');
 }
 
 export async function openSubMenus(menu) {
-  await oneEvent(menu.$.overlay, 'vaadin-overlay-open');
-  const itemElement = menu.$.overlay.querySelector('[aria-haspopup="true"]');
+  await oneEvent(menu._overlayElement, 'vaadin-overlay-open');
+  const itemElement = menu._overlayElement.querySelector('[aria-haspopup="true"]');
   if (itemElement) {
     itemElement.dispatchEvent(new CustomEvent('mouseover', { bubbles: true, composed: true }));
     const subMenu = getSubMenu(menu);

packages/context-menu/test/integration.test.js

@@ -34,7 +34,7 @@ describe('integration', () => {
     wrapper = fixtureSync('<menu-wrapper></menu-wrapper>');
     menu = wrapper.$.menu;
     button = wrapper.$.button;
-    overlay = menu.$.overlay;
+    overlay = menu._overlayElement;
   });
 
   it('should open context menu on .open(e)', () => {

packages/context-menu/test/items-theme.test.js

@@ -56,7 +56,7 @@ describe('items theme', () => {
 
   it('should propagate host theme attribute to the nested elements', () => {
     [rootMenu, subMenu, subMenu2].forEach((subMenu) => {
-      const overlay = subMenu.$.overlay;
+      const overlay = subMenu._overlayElement;
       const listBox = overlay.querySelector('vaadin-context-menu-list-box');
       const items = Array.from(listBox.querySelectorAll('vaadin-context-menu-item'));
 
@@ -84,7 +84,7 @@ describe('items theme', () => {
     await openMenu(getMenuItems(subMenu)[1]);
 
     [rootMenu, subMenu, subMenu2].forEach((subMenu) => {
-      const overlay = subMenu.$.overlay;
+      const overlay = subMenu._overlayElement;
       const listBox = overlay.querySelector('vaadin-context-menu-list-box');
       const items = Array.from(listBox.querySelectorAll('vaadin-context-menu-item'));
 

packages/context-menu/test/items.test.js

@@ -22,7 +22,7 @@ import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { getMenuItems, getSubMenu, openMenu } from './helpers.js';
 
 describe('items', () => {
-  let rootMenu, subMenu, target;
+  let rootMenu, subMenu, target, rootOverlay, subOverlay1;
 
   beforeEach(async () => {
     rootMenu = fixtureSync(`
@@ -47,8 +47,10 @@ describe('items', () => {
       { text: 'foo-2', keepOpen: true },
     ];
     await openMenu(target);
+    rootOverlay = rootMenu._overlayElement;
     await openMenu(getMenuItems(rootMenu)[0]);
     subMenu = getSubMenu(rootMenu);
+    subOverlay1 = subMenu._overlayElement;
   });
 
   afterEach(() => {
@@ -93,7 +95,7 @@ describe('items', () => {
   (isTouch ? it.skip : it)('should open the subMenu on the left side', async () => {
     subMenu.close();
     let rootItemRect = getMenuItems(rootMenu)[0].getBoundingClientRect();
-    rootMenu.$.overlay.style.left = `${window.innerWidth - rootItemRect.width * 1.5}px`;
+    rootOverlay.style.left = `${window.innerWidth - rootItemRect.width * 1.5}px`;
     await openMenu(getMenuItems(rootMenu)[0]);
     rootItemRect = getMenuItems(rootMenu)[0].getBoundingClientRect();
     const subItemRect = getMenuItems(subMenu)[0].getBoundingClientRect();
@@ -102,12 +104,12 @@ describe('items', () => {
 
   (isTouch ? it.skip : it)('should open the subMenu on the top if root menu is bottom-aligned', async () => {
     subMenu.close();
-    rootMenu.$.overlay.style.removeProperty('top');
-    rootMenu.$.overlay.style.bottom = '0px';
-    rootMenu.$.overlay.setAttribute('bottom-aligned', '');
+    rootOverlay.style.removeProperty('top');
+    rootOverlay.style.bottom = '0px';
+    rootOverlay.setAttribute('bottom-aligned', '');
     await openMenu(getMenuItems(rootMenu)[0]);
-    const rootMenuRect = rootMenu.$.overlay.getBoundingClientRect();
-    const subMenuRect = subMenu.$.overlay.getBoundingClientRect();
+    const rootMenuRect = rootOverlay.getBoundingClientRect();
+    const subMenuRect = subOverlay1.getBoundingClientRect();
     expect(subMenuRect.bottom).to.be.below(rootMenuRect.bottom);
   });
 
@@ -116,14 +118,13 @@ describe('items', () => {
     await nextRender(subMenu);
     const rootItem = getMenuItems(rootMenu)[0];
     const rootItemRect = rootItem.getBoundingClientRect();
-    const rootOverlay = rootMenu.$.overlay;
     rootOverlay.style.removeProperty('left');
     rootOverlay.style.right = `${rootItemRect.width}px`;
     rootOverlay.setAttribute('end-aligned', '');
     await openMenu(rootItem);
-    expect(subMenu.$.overlay.hasAttribute('end-aligned')).to.be.true;
+    expect(subOverlay1.hasAttribute('end-aligned')).to.be.true;
     const rootMenuRect = rootOverlay.$.content.getBoundingClientRect();
-    const subMenuRect = subMenu.$.overlay.$.content.getBoundingClientRect();
+    const subMenuRect = subOverlay1.$.content.getBoundingClientRect();
     expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left, 2);
   });
 
@@ -137,27 +138,26 @@ describe('items', () => {
 
     const rootItem = getMenuItems(rootMenu)[0];
     const rootItemRect = rootItem.getBoundingClientRect();
-    const rootOverlay = rootMenu.$.overlay;
     rootOverlay.style.removeProperty('left');
     rootOverlay.style.right = `${rootItemRect.width}px`;
     rootOverlay.setAttribute('end-aligned', '');
     padding = parseFloat(getComputedStyle(rootOverlay.$.content).paddingLeft) * 2;
 
     /* First sub-menu end-aligned */
     await openMenu(rootItem);
-    expect(subMenu.$.overlay.hasAttribute('end-aligned')).to.be.true;
+    expect(subOverlay1.hasAttribute('end-aligned')).to.be.true;
     const rootMenuRect = rootOverlay.$.content.getBoundingClientRect();
-    const subMenuRect = subMenu.$.overlay.$.content.getBoundingClientRect();
+    const subMenuRect = subOverlay1.$.content.getBoundingClientRect();
     expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left, 1);
 
     /* Second sub-menu left-aligned */
     const nestedItem = getMenuItems(subMenu)[2];
     const nestedItemRect = nestedItem.getBoundingClientRect();
-    padding = parseFloat(getComputedStyle(subMenu.$.overlay.$.content).paddingLeft) * 2;
+    padding = parseFloat(getComputedStyle(subOverlay1.$.content).paddingLeft) * 2;
     await openMenu(nestedItem);
     const subMenu2 = getSubMenu(subMenu);
-    expect(subMenu2.$.overlay.hasAttribute('end-aligned')).to.be.false;
-    const subMenu2Rect = subMenu2.$.overlay.$.content.getBoundingClientRect();
+    expect(subMenu2._overlayElement.hasAttribute('end-aligned')).to.be.false;
+    const subMenu2Rect = subMenu2._overlayElement.$.content.getBoundingClientRect();
     expect(subMenu2Rect.left).to.be.closeTo(nestedItemRect.right + padding / 2, 1);
   });
 
@@ -295,7 +295,7 @@ describe('items', () => {
   });
 
   it('should close on backdrop click', () => {
-    subMenu.$.overlay.$.backdrop.click();
+    subOverlay1.$.backdrop.click();
     expect(subMenu.opened).to.be.false;
   });
 
@@ -343,7 +343,7 @@ describe('items', () => {
 
   it('should not focus item if parent item is not focused', async () => {
     subMenu.close();
-    rootMenu.$.overlay.focus();
+    rootOverlay.focus();
     await openMenu(getMenuItems(rootMenu)[0]);
     expect(subMenu.opened).to.be.true;
     await nextRender(subMenu);
@@ -352,22 +352,22 @@ describe('items', () => {
 
   it('should focus first item in submenu on overlay element arrow down', async () => {
     subMenu.close();
-    rootMenu.$.overlay.focus();
+    rootOverlay.focus();
     await openMenu(getMenuItems(rootMenu)[0]);
     const item = getMenuItems(subMenu)[0];
     const spy = sinon.spy(item, 'focus');
-    arrowDownKeyDown(subMenu.$.overlay.$.overlay);
+    arrowDownKeyDown(subOverlay1.$.overlay);
     expect(spy.calledOnce).to.be.true;
   });
 
   it('should focus last item in submenu on overlay element arrow up', async () => {
     subMenu.close();
-    rootMenu.$.overlay.focus();
+    rootOverlay.focus();
     await openMenu(getMenuItems(rootMenu)[0]);
     const items = getMenuItems(subMenu);
     const item = items[items.length - 1];
     const spy = sinon.spy(item, 'focus');
-    arrowUpKeyDown(subMenu.$.overlay.$.overlay);
+    arrowUpKeyDown(subOverlay1.$.overlay);
     expect(spy.calledOnce).to.be.true;
   });
 
@@ -403,7 +403,7 @@ describe('items', () => {
   });
 
   it('should not call requestContentUpdate', () => {
-    const spy = sinon.spy(rootMenu.$.overlay, 'requestContentUpdate');
+    const spy = sinon.spy(rootOverlay, 'requestContentUpdate');
     rootMenu.requestContentUpdate();
     expect(spy.called).to.be.false;
   });
@@ -455,12 +455,12 @@ describe('items', () => {
 
       scrollElm = window.document.scrollingElement || window.document.querySelector('html');
 
-      rootOverlay = rootMenu.$.overlay;
-      subOverlay1 = subMenu.$.overlay;
+      rootOverlay = rootMenu._overlayElement;
+      subOverlay1 = subMenu._overlayElement;
 
       await openMenu(getMenuItems(subMenu)[2]);
       const subMenu2 = getSubMenu(subMenu);
-      subOverlay2 = subMenu2.$.overlay;
+      subOverlay2 = subMenu2._overlayElement;
       await nextFrame();
     });
 

packages/context-menu/test/lit-renderer-directives.test.js

@@ -31,7 +31,7 @@ describe('lit renderer directives', () => {
       beforeEach(async () => {
         contextMenu = await renderContextMenu(container, { content: 'Content' });
         target = contextMenu.querySelector('button');
-        overlay = contextMenu.$.overlay;
+        overlay = contextMenu._overlayElement;
       });
 
       it('should set `renderer` property when the directive is attached', () => {

packages/context-menu/test/overlay.test.js

@@ -15,7 +15,7 @@ describe('overlay', () => {
     menu.renderer = (root) => {
       root.textContent = 'OVERLAY CONTENT';
     };
-    overlay = menu.$.overlay;
+    overlay = menu._overlayElement;
     content = overlay.$.overlay.children[0];
     // Make content have a fixed size
     content.style.height = content.style.width = '100px';

packages/context-menu/test/properties.test.js

@@ -98,15 +98,15 @@ describe('properties', () => {
     it('should not close on `click`', () => {
       menu.closeOn = '';
 
-      menu.$.overlay.dispatchEvent(new CustomEvent('click'));
+      menu._overlayElement.dispatchEvent(new CustomEvent('click'));
 
       expect(menu.opened).to.eql(true);
     });
 
     it('should close on custom event', () => {
       menu.closeOn = 'foobar';
 
-      fire(menu.$.overlay, 'foobar');
+      fire(menu._overlayElement, 'foobar');
 
       expect(menu.opened).to.eql(false);
     });
@@ -165,7 +165,7 @@ describe('properties', () => {
     });
 
     it('should propagate theme attribute to overlay', () => {
-      expect(menu.$.overlay.getAttribute('theme')).to.equal('foo');
+      expect(menu._overlayElement.getAttribute('theme')).to.equal('foo');
     });
   });
 });

packages/context-menu/test/renderer.test.js

@@ -5,7 +5,7 @@ import './not-animated-styles.js';
 import '../vaadin-context-menu.js';
 
 describe('renderer', () => {
-  let menu, target;
+  let menu, target, overlay;
 
   beforeEach(() => {
     menu = fixtureSync(`
@@ -22,6 +22,7 @@ describe('renderer', () => {
       );
     });
     target = menu.querySelector('#target');
+    overlay = menu._overlayElement;
   });
 
   afterEach(() => {
@@ -34,19 +35,19 @@ describe('renderer', () => {
     fire(target, 'vaadin-contextmenu');
 
     expect(menu.renderer.callCount).to.equal(1);
-    expect(menu.$.overlay.textContent).to.contain('Renderer');
+    expect(overlay.textContent).to.contain('Renderer');
   });
 
   it('should have target in context', () => {
     fire(target, 'vaadin-contextmenu');
 
-    expect(menu.$.overlay.textContent).to.contain('target');
+    expect(overlay.textContent).to.contain('target');
   });
 
   it('should have detail in context', () => {
     fire(target, 'vaadin-contextmenu', { foo: 'bar' });
 
-    expect(menu.$.overlay.textContent).to.contain('bar');
+    expect(overlay.textContent).to.contain('bar');
   });
 
   it('should have contextMenu owner argument', () => {
@@ -102,11 +103,11 @@ describe('renderer', () => {
     };
     fire(target, 'vaadin-contextmenu');
 
-    expect(menu.$.overlay.textContent.trim()).to.equal('foo');
+    expect(overlay.textContent.trim()).to.equal('foo');
 
     menu.renderer = null;
 
-    expect(menu.$.overlay.textContent.trim()).to.equal('');
+    expect(overlay.textContent.trim()).to.equal('');
   });
 
   it('should not throw if requestContentUpdate() called before adding to DOM', () => {

packages/context-menu/test/selection.test.js

@@ -11,7 +11,7 @@ describe('selection', () => {
 
   beforeEach(() => {
     menu = fixtureSync('<vaadin-context-menu></vaadin-context-menu>');
-    overlay = menu.$.overlay;
+    overlay = menu._overlayElement;
     menu.renderer = (root) => {
       root.innerHTML = `
         <vaadin-list-box id="menu">

packages/context-menu/test/touch.test.js

@@ -51,7 +51,7 @@ describe('mobile support', () => {
 
   it('should align to bottom of the viewport', (done) => {
     listenOnce(menu, 'opened-changed', () => {
-      const styles = window.getComputedStyle(menu.$.overlay);
+      const styles = window.getComputedStyle(menu._overlayElement);
       expect(styles.alignItems).to.eql('stretch');
       expect(styles.justifyContent).to.eql('flex-end');
       done();

packages/menu-bar/test/a11y.test.js

@@ -21,7 +21,7 @@ describe('a11y', () => {
           ],
         },
       ];
-      overlay = menuBar._subMenu.$.overlay;
+      overlay = menuBar._subMenu._overlayElement;
       buttons = menuBar.querySelectorAll('vaadin-menu-bar-button');
       buttons[0].focus();
     });