JS unit tests: update popover matcher (#54168)

* There was no use of the `toBePositionedPopover()` matcher without a wrapping `getWrappingPopoverElement()`, so this commit just moves `getWrappingPopoverElement` logic into `toBePositionedPopover` to save everyone the trouble.

* - detect whether element.closest( '.components-popover' ) returns an element
- change messaging based on error type

* tidied up null checks and message copy

packages/block-editor/src/components/media-replace-flow/test/index.js

@@ -32,16 +32,6 @@ function TestWrapper() {
 	);
 }
 
-/**
- * Returns the first found popover element up the DOM tree.
- *
- * @param {HTMLElement} element Element to start with.
- * @return {HTMLElement|null} Popover element, or `null` if not found.
- */
-function getWrappingPopoverElement( element ) {
-	return element.closest( '.components-popover' );
-}
-
 describe( 'General media replace flow', () => {
 	it( 'renders successfully', () => {
 		render( <TestWrapper /> );
@@ -67,11 +57,7 @@ describe( 'General media replace flow', () => {
 		);
 		const uploadMenu = screen.getByRole( 'menu' );
 
-		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( uploadMenu )
-			).toBePositionedPopover()
-		);
+		await waitFor( () => expect( uploadMenu ).toBePositionedPopover() );
 
 		await waitFor( () => expect( uploadMenu ).toBeVisible() );
 	} );
@@ -92,9 +78,7 @@ describe( 'General media replace flow', () => {
 			name: 'example.media (opens in a new tab)',
 		} );
 
-		await waitFor( () =>
-			expect( getWrappingPopoverElement( link ) ).toBePositionedPopover()
-		);
+		await waitFor( () => expect( link ).toBePositionedPopover() );
 
 		expect( link ).toHaveAttribute( 'href', 'https://example.media' );
 	} );
@@ -113,11 +97,9 @@ describe( 'General media replace flow', () => {
 
 		await waitFor( () =>
 			expect(
-				getWrappingPopoverElement(
-					screen.getByRole( 'link', {
-						name: 'example.media (opens in a new tab)',
-					} )
-				)
+				screen.getByRole( 'link', {
+					name: 'example.media (opens in a new tab)',
+				} )
 			).toBePositionedPopover()
 		);
 

packages/components/src/border-control/test/index.js

@@ -38,10 +38,6 @@ function createProps( customProps ) {
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 
-function getWrappingPopoverElement( element ) {
-	return element.closest( '.components-popover' );
-}
-
 const openPopover = async ( user ) => {
 	const toggleButton = screen.getByLabelText( toggleLabelRegex );
 	await user.click( toggleButton );
@@ -51,11 +47,7 @@ const openPopover = async ( user ) => {
 		name: /^Custom color picker/,
 	} );
 
-	await waitFor( () =>
-		expect(
-			getWrappingPopoverElement( pickerButton )
-		).toBePositionedPopover()
-	);
+	await waitFor( () => expect( pickerButton ).toBePositionedPopover() );
 };
 
 const getButton = ( name ) => {

packages/components/src/color-palette/test/index.tsx

@@ -19,10 +19,6 @@ const EXAMPLE_COLORS = [
 ];
 const INITIAL_COLOR = EXAMPLE_COLORS[ 0 ].color;
 
-function getWrappingPopoverElement( element: HTMLElement ) {
-	return element.closest( '.components-popover' );
-}
-
 const ControlledColorPalette = ( {
 	onChange,
 }: {
@@ -192,9 +188,7 @@ describe( 'ColorPalette', () => {
 		const dropdownColorInput = screen.getByLabelText( 'Hex color' );
 
 		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( dropdownColorInput )
-			).toBePositionedPopover()
+			expect( dropdownColorInput ).toBePositionedPopover()
 		);
 	} );
 

packages/components/src/toggle-group-control/test/index.tsx

@@ -21,10 +21,6 @@ import {
 } from '../index';
 import type { ToggleGroupControlProps } from '../types';
 
-function getWrappingPopoverElement( element: HTMLElement ) {
-	return element.closest( '.components-popover' );
-}
-
 const ControlledToggleGroupControl = ( {
 	value: valueProp,
 	onChange,
@@ -141,11 +137,7 @@ describe.each( [
 			'Click for Delicious Gnocchi'
 		);
 
-		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( tooltip )
-			).toBePositionedPopover()
-		);
+		await waitFor( () => expect( tooltip ).toBePositionedPopover() );
 
 		expect( tooltip ).toBeVisible();
 	} );

packages/components/src/tooltip/test/index.js

@@ -21,10 +21,6 @@ const props = {
 	delay: TOOLTIP_DELAY,
 };
 
-function getWrappingPopoverElement( element ) {
-	return element.closest( '.components-popover' );
-}
-
 describe( 'Tooltip', () => {
 	it( 'should not render the tooltip if multiple children are passed', async () => {
 		const user = userEvent.setup();
@@ -75,9 +71,7 @@ describe( 'Tooltip', () => {
 
 		// Wait for the tooltip element to be positioned (aligned with the button)
 		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
-			).toBePositionedPopover()
+			expect( screen.getByText( 'tooltip text' ) ).toBePositionedPopover()
 		);
 	} );
 
@@ -100,9 +94,7 @@ describe( 'Tooltip', () => {
 
 		// Wait for the tooltip element to be positioned (aligned with the button)
 		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
-			).toBePositionedPopover()
+			expect( screen.getByText( 'tooltip text' ) ).toBePositionedPopover()
 		);
 
 		await user.unhover( button );
@@ -146,9 +138,7 @@ describe( 'Tooltip', () => {
 
 		// Wait for the tooltip element to be positioned (aligned with the button)
 		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
-			).toBePositionedPopover()
+			expect( screen.getByText( 'tooltip text' ) ).toBePositionedPopover()
 		);
 	} );
 
@@ -174,9 +164,7 @@ describe( 'Tooltip', () => {
 
 		// Wait for the tooltip element to be positioned (aligned with the button)
 		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
-			).toBePositionedPopover()
+			expect( screen.getByText( 'tooltip text' ) ).toBePositionedPopover()
 		);
 	} );
 
@@ -282,7 +270,7 @@ describe( 'Tooltip', () => {
 		// Wait for the tooltip element to be positioned (aligned with the button)
 		await waitFor( () =>
 			expect(
-				getWrappingPopoverElement( screen.getByText( 'shortcut text' ) )
+				screen.getByText( 'shortcut text' )
 			).toBePositionedPopover()
 		);
 	} );
@@ -315,9 +303,7 @@ describe( 'Tooltip', () => {
 
 		// Wait for the tooltip element to be positioned (aligned with the button)
 		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( screen.getByText( '⇧⌘,' ) )
-			).toBePositionedPopover()
+			expect( screen.getByText( '⇧⌘,' ) ).toBePositionedPopover()
 		);
 	} );
 } );

packages/nux/src/components/dot-tip/test/index.js

@@ -27,6 +27,7 @@ describe( 'DotTip', () => {
 			</DotTip>
 		);
 
+		// Wait for the dialog element to be positioned (aligned with the button)
 		await waitFor( () =>
 			expect( screen.getByRole( 'dialog' ) ).toBePositionedPopover()
 		);

test/unit/config/matchers/to-be-positioned-popover.js

@@ -5,10 +5,18 @@
  * @param {HTMLElement} element Popover element.
  */
 function toBePositionedPopover( element ) {
-	const pass = element.classList.contains( 'is-positioned' );
+	const popover = element?.closest( '.components-popover' );
+	const isPopoverPositioned = popover?.classList.contains( 'is-positioned' );
+	const pass = !! isPopoverPositioned;
+
 	return {
 		pass,
-		message: () => `Received element is ${ pass ? '' : 'not ' }positioned`,
+		message: () => {
+			const is = pass ? 'is' : 'is not';
+			return ! popover
+				? `Received element ${ is } a popover element or its descendant.`
+				: `Received element ${ is } positioned`;
+		},
 	};
 }