Check popover positioning by adding and testing is-positioned class (#…

…46429)
WordPress · Dec 9, 2022 · abc4dbd · abc4dbd
1 parent 8810e56
commit abc4dbd
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
@@ -4,7 +4,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
+      class="components-popover block-editor-url-popover is-positioned"
       style="position: absolute; left: 0px; top: 0px;"
       tabindex="-1"
     >
@@ -52,7 +52,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
+      class="components-popover block-editor-url-popover is-positioned"
       style="position: absolute; left: 0px; top: 0px;"
       tabindex="-1"
     >
@@ -107,7 +107,7 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
 <div>
   <span>
     <div
-      class="components-popover block-editor-url-popover"
+      class="components-popover block-editor-url-popover is-positioned"
       style="position: absolute; left: 0px; top: 0px;"
       tabindex="-1"
     >

diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
@@ -472,6 +472,7 @@ const UnforwardedPopover = (
 			placement={ computedPlacement }
 			className={ classnames( 'components-popover', className, {
 				'is-expanded': isExpanded,
+				'is-positioned': x !== null && y !== null,
 				// Use the 'alternate' classname for 'toolbar' variant for back compat.
 				[ `is-${
 					computedVariant === 'toolbar'

diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
@@ -3,7 +3,7 @@
 exports[`DotTip should render correctly 1`] = `
 <div
   aria-label="Editor tips"
-  class="components-popover nux-dot-tip"
+  class="components-popover nux-dot-tip is-positioned"
   role="dialog"
   style="position: absolute; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0; left: 0px; top: 0px;"
   tabindex="-1"

diff --git a/test/unit/config/matchers/to-be-positioned-popover.js b/test/unit/config/matchers/to-be-positioned-popover.js
@@ -5,7 +5,7 @@
  * @param {HTMLElement} element Popover element.
  */
 function toBePositionedPopover( element ) {
-	const pass = element.style.top !== '' && element.style.left !== '';
+	const pass = element.classList.contains( 'is-positioned' );
 	return {
 		pass,
 		message: () => `Received element is ${ pass ? '' : 'not ' }positioned`,