From fd5c517804f80280de2ddf69df801e56496844c6 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Mon, 7 Nov 2022 07:12:20 -0700
Subject: [PATCH 1/3] NavigationToggle: wait for tooltip positioning in unit
 test

---
 .../test/__snapshots__/index.js.snap          |  3 +-
 .../navigation-toggle/test/index.js           | 40 +++++++++++++++++--
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/__snapshots__/index.js.snap b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/__snapshots__/index.js.snap
index f08a738cdcaedf..7e0c60c0954683 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/__snapshots__/index.js.snap
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/__snapshots__/index.js.snap
@@ -26,11 +26,12 @@ exports[`NavigationToggle when in full screen mode should display a default site
       <div
         aria-hidden="true"
         class="components-popover components-tooltip"
-        style="position: absolute;"
+        style="position: absolute; left: 0px; top: 1px;"
         tabindex="-1"
       >
         <div
           class="components-popover__content"
+          style="max-height: -4px; overflow: auto;"
         >
           Toggle navigation
         </div>
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
index 159a48b2d7989e..591eaf90f90bbd 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -24,9 +24,27 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 
 jest.mock( '@wordpress/core-data' );
 
+// Find an enclosing popover around `element`, and then check if it's been
+// already positioned (by setting the `top` and `left` styles) by the
+// `@floating-ui/react` library's `useFloating` hook. This happens asynchronously
+// so the test code will need to wait for it.
+function isPopover( element ) {
+	if ( ! element ) {
+		return false;
+	}
+
+	const popover = element.closest( '.components-popover' );
+	if ( ! popover ) {
+		return false;
+	}
+
+	const { top, left } = popover.style;
+	return top !== '' && left !== '' ? 'positioned' : 'not-positioned';
+}
+
 describe( 'NavigationToggle', () => {
 	describe( 'when in full screen mode', () => {
-		it( 'should display a user uploaded site icon if it exists', () => {
+		it( 'should display a user uploaded site icon if it exists', async () => {
 			useSelect.mockImplementation( ( cb ) => {
 				return cb( () => ( {
 					getCurrentTemplateNavigationPanelSubMenu: () => 'root',
@@ -40,12 +58,21 @@ describe( 'NavigationToggle', () => {
 
 			render( <NavigationToggle /> );
 
+			// The `NavigationToggle` component auto-focuses on mount, and that
+			// causes the button tooltip to appear and to be positioned relative
+			// to the button. It happens async and we need to wait for it.
+			await waitFor( () =>
+				expect(
+					isPopover( screen.getByText( 'Toggle navigation' ) )
+				).toBe( 'positioned' )
+			);
+
 			const siteIcon = screen.getByAltText( 'Site Icon' );
 
 			expect( siteIcon ).toBeVisible();
 		} );
 
-		it( 'should display a default site icon if no user uploaded site icon exists', () => {
+		it( 'should display a default site icon if no user uploaded site icon exists', async () => {
 			useSelect.mockImplementation( ( cb ) => {
 				return cb( () => ( {
 					getCurrentTemplateNavigationPanelSubMenu: () => 'root',
@@ -59,6 +86,13 @@ describe( 'NavigationToggle', () => {
 
 			const { container } = render( <NavigationToggle /> );
 
+			// wait for the button tooltip to appear and to be positioned
+			await waitFor( () =>
+				expect(
+					isPopover( screen.getByText( 'Toggle navigation' ) )
+				).toBe( 'positioned' )
+			);
+
 			expect(
 				screen.queryByAltText( 'Site Icon' )
 			).not.toBeInTheDocument();

From ee016bb3b9cea64faf3a8b8ea1c2f535a2999b0f Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Tue, 8 Nov 2022 07:40:13 -0700
Subject: [PATCH 2/3] Try with a custom matcher

---
 .../navigation-toggle/test/index.js           | 84 +++++++++++++------
 1 file changed, 60 insertions(+), 24 deletions(-)

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
index 591eaf90f90bbd..2deec0399a0ab0 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
@@ -24,24 +24,56 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 
 jest.mock( '@wordpress/core-data' );
 
-// Find an enclosing popover around `element`, and then check if it's been
-// already positioned (by setting the `top` and `left` styles) by the
-// `@floating-ui/react` library's `useFloating` hook. This happens asynchronously
-// so the test code will need to wait for it.
-function isPopover( element ) {
-	if ( ! element ) {
-		return false;
-	}
-
-	const popover = element.closest( '.components-popover' );
-	if ( ! popover ) {
-		return false;
-	}
-
-	const { top, left } = popover.style;
-	return top !== '' && left !== '' ? 'positioned' : 'not-positioned';
+/**
+ * Whether the element has been positioned.
+ * True if `top` and `left` have been set, false otherwise.
+ *
+ * @param {Element} element Element to check.
+ * @return {boolean} True if positioned, false otherwise.
+ */
+function isElementPositioned( element ) {
+	const { getComputedStyle } = element.ownerDocument.defaultView;
+
+	const { top, left } = getComputedStyle( element );
+	return top !== '' && left !== '';
 }
 
+/**
+ * Custom jest matcher.
+ * Determines whether an element has been positioned or not.
+ *
+ * @param {Element} element Element to check.
+ * @return {Object} Matcher result
+ */
+function toBePositioned( element ) {
+	const isInDocument =
+		element.ownerDocument === element.getRootNode( { composed: true } );
+	const isPositioned = isInDocument && isElementPositioned( element );
+	return {
+		pass: isPositioned,
+		message: () => {
+			const is = isPositioned ? 'is' : 'is not';
+			return [
+				this.utils.matcherHint(
+					`${ this.isNot ? '.not' : '' }.toBePositioned`,
+					'element',
+					''
+				),
+				'',
+				`Received element ${ is } positioned${
+					isInDocument ? '' : ' (element is not in the document)'
+				}:`,
+				`  ${ this.utils.printReceived( element.cloneNode( false ) ) }`,
+			].join( '\n' );
+		},
+	};
+}
+
+// Register the custom matcher
+expect.extend( {
+	toBePositioned,
+} );
+
 describe( 'NavigationToggle', () => {
 	describe( 'when in full screen mode', () => {
 		it( 'should display a user uploaded site icon if it exists', async () => {
@@ -61,10 +93,12 @@ describe( 'NavigationToggle', () => {
 			// The `NavigationToggle` component auto-focuses on mount, and that
 			// causes the button tooltip to appear and to be positioned relative
 			// to the button. It happens async and we need to wait for it.
-			await waitFor( () =>
-				expect(
-					isPopover( screen.getByText( 'Toggle navigation' ) )
-				).toBe( 'positioned' )
+			await waitFor(
+				() =>
+					expect(
+						screen.getByText( 'Toggle navigation' ).parentElement
+					).toBePositioned(),
+				{ timeout: 2000 } // It might take more than a second to position the popover.
 			);
 
 			const siteIcon = screen.getByAltText( 'Site Icon' );
@@ -87,10 +121,12 @@ describe( 'NavigationToggle', () => {
 			const { container } = render( <NavigationToggle /> );
 
 			// wait for the button tooltip to appear and to be positioned
-			await waitFor( () =>
-				expect(
-					isPopover( screen.getByText( 'Toggle navigation' ) )
-				).toBe( 'positioned' )
+			await waitFor(
+				() =>
+					expect(
+						screen.getByText( 'Toggle navigation' ).parentElement
+					).toBePositioned(),
+				{ timeout: 2000 } // It might take more than a second to position the popover.
 			);
 
 			expect(

From b81f2ff0df38d33d9086e6d610170096ad925855 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Wed, 9 Nov 2022 13:52:15 -0700
Subject: [PATCH 3/3] Update waitFor timeout option to interval

---
 .../navigation-sidebar/navigation-toggle/test/index.js        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
index 2deec0399a0ab0..5e832532911173 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
@@ -98,7 +98,7 @@ describe( 'NavigationToggle', () => {
 					expect(
 						screen.getByText( 'Toggle navigation' ).parentElement
 					).toBePositioned(),
-				{ timeout: 2000 } // It might take more than a second to position the popover.
+				{ interval: 10 } // It takes many microtask tick to position the popover.
 			);
 
 			const siteIcon = screen.getByAltText( 'Site Icon' );
@@ -126,7 +126,7 @@ describe( 'NavigationToggle', () => {
 					expect(
 						screen.getByText( 'Toggle navigation' ).parentElement
 					).toBePositioned(),
-				{ timeout: 2000 } // It might take more than a second to position the popover.
+				{ interval: 10 } // It takes many microtask tick to position the popover.
 			);
 
 			expect(