From e826e66e7dba151eb3918201758aad5f65acf3ec Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:03:02 +0100
Subject: [PATCH 01/25] Remove unnecessary RegExp

---
 .../components/src/tooltip/test/index.tsx     | 70 +++++++++++--------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 4d58498e278d3..2b53216507cb9 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -18,7 +18,7 @@ import Tooltip, { TOOLTIP_DELAY } from '..';
 import cleanupTooltip from './utils/';
 
 const props = {
-	children: <Button>Button</Button>,
+	children: <Button>Tooltip anchor</Button>,
 	text: 'tooltip text',
 };
 
@@ -34,7 +34,7 @@ describe( 'Tooltip', () => {
 		);
 
 		expect(
-			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 		).not.toBeInTheDocument();
 	} );
 
@@ -42,11 +42,11 @@ describe( 'Tooltip', () => {
 		render( <Tooltip { ...props } /> );
 
 		expect(
-			screen.getByRole( 'button', { name: /Button/i } )
+			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
 		).toBeVisible();
 
 		expect(
-			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 		).not.toBeInTheDocument();
 	} );
 
@@ -58,11 +58,11 @@ describe( 'Tooltip', () => {
 		await user.tab();
 
 		expect(
-			screen.getByRole( 'button', { name: /Button/i } )
+			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
 		).toHaveFocus();
 
 		expect(
-			await screen.findByRole( 'tooltip', { name: /tooltip text/i } )
+			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
 
 		await cleanupTooltip( user );
@@ -73,10 +73,12 @@ describe( 'Tooltip', () => {
 
 		render( <Tooltip { ...props } /> );
 
-		await user.hover( screen.getByRole( 'button', { name: /Button/i } ) );
+		await user.hover(
+			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+		);
 
 		expect(
-			await screen.findByRole( 'tooltip', { name: /tooltip text/i } )
+			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
 
 		await cleanupTooltip( user );
@@ -87,10 +89,12 @@ describe( 'Tooltip', () => {
 
 		render( <Tooltip { ...props } /> );
 
-		await user.click( screen.getByRole( 'button', { name: /Button/i } ) );
+		await user.click(
+			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+		);
 
 		expect(
-			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 		).not.toBeInTheDocument();
 
 		await cleanupTooltip( user );
@@ -104,7 +108,9 @@ describe( 'Tooltip', () => {
 			<Tooltip { ...props } delay={ TOOLTIP_DELAY + ADDITIONAL_DELAY } />
 		);
 
-		await user.hover( screen.getByRole( 'button', { name: /Button/i } ) );
+		await user.hover(
+			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+		);
 
 		// Advance time by default delay
 		await new Promise( ( resolve ) =>
@@ -113,7 +119,7 @@ describe( 'Tooltip', () => {
 
 		// Tooltip hasn't appeared yet
 		expect(
-			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 		).not.toBeInTheDocument();
 
 		// wait for additional delay for tooltip to appear
@@ -125,7 +131,7 @@ describe( 'Tooltip', () => {
 		);
 
 		expect(
-			screen.getByRole( 'tooltip', { name: /tooltip text/i } )
+			screen.getByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
 
 		await cleanupTooltip( user );
@@ -140,7 +146,7 @@ describe( 'Tooltip', () => {
 			</Tooltip>
 		);
 
-		const button = screen.getByRole( 'button', { name: /Button/i } );
+		const button = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
 
 		expect( button ).toBeVisible();
 		expect( button ).toHaveAttribute( 'aria-disabled' );
@@ -148,7 +154,7 @@ describe( 'Tooltip', () => {
 		await user.hover( button );
 
 		expect(
-			await screen.findByRole( 'tooltip', { name: /tooltip text/i } )
+			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
 
 		await cleanupTooltip( user );
@@ -167,22 +173,22 @@ describe( 'Tooltip', () => {
 						onMouseEnter={ onMouseEnterMock }
 						onMouseLeave={ onMouseLeaveMock }
 					>
-						Button 1
+						Tooltip anchor
 					</Button>
 				</Tooltip>
-				<Button>Button 2</Button>
+				<Button>Other button</Button>
 			</>
 		);
 
 		await user.hover(
 			screen.getByRole( 'button', {
-				name: 'Button 1',
+				name: 'Tooltip anchor',
 			} )
 		);
 
 		// Tooltip hasn't appeared yet
 		expect(
-			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 		).not.toBeInTheDocument();
 		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
 
@@ -192,19 +198,19 @@ describe( 'Tooltip', () => {
 		);
 
 		expect(
-			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 		).not.toBeInTheDocument();
 
 		// Hover the other button, meaning that the mouse will leave the tooltip anchor
 		await user.hover(
 			screen.getByRole( 'button', {
-				name: 'Button 2',
+				name: 'Other button',
 			} )
 		);
 
 		// Tooltip still hasn't appeared yet
 		expect(
-			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 		).not.toBeInTheDocument();
 		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
 		expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
@@ -216,7 +222,7 @@ describe( 'Tooltip', () => {
 
 		// Tooltip won't show, since the mouse has left the tooltip anchor
 		expect(
-			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 		).not.toBeInTheDocument();
 
 		await cleanupTooltip( user );
@@ -227,7 +233,9 @@ describe( 'Tooltip', () => {
 
 		render( <Tooltip { ...props } shortcut="shortcut text" /> );
 
-		await user.hover( screen.getByRole( 'button', { name: /Button/i } ) );
+		await user.hover(
+			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+		);
 
 		await waitFor( () =>
 			expect( screen.getByText( 'shortcut text' ) ).toBeVisible()
@@ -249,7 +257,9 @@ describe( 'Tooltip', () => {
 			/>
 		);
 
-		await user.hover( screen.getByRole( 'button', { name: /Button/i } ) );
+		await user.hover(
+			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+		);
 
 		await waitFor( () =>
 			expect( screen.getByText( '⇧⌘,' ) ).toBeVisible()
@@ -278,7 +288,7 @@ describe( 'Tooltip', () => {
 
 		await user.hover(
 			screen.getByRole( 'button', {
-				name: /Close/i,
+				name: /close/i,
 			} )
 		);
 
@@ -302,7 +312,7 @@ describe( 'Tooltip', () => {
 
 		await user.hover(
 			screen.getByRole( 'button', {
-				name: /Button/i,
+				name: 'Tooltip anchor',
 			} )
 		);
 
@@ -316,18 +326,18 @@ describe( 'Tooltip', () => {
 
 		render( <Tooltip { ...props } hideOnClick={ false } /> );
 
-		const button = screen.getByRole( 'button', { name: /Button/i } );
+		const button = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
 
 		await user.hover( button );
 
 		expect(
-			await screen.findByRole( 'tooltip', { name: /tooltip text/i } )
+			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
 
 		await user.click( button );
 
 		expect(
-			screen.getByRole( 'tooltip', { name: /tooltip text/i } )
+			screen.getByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
 
 		await cleanupTooltip( user );

From 6ca3f5d1054d4dbd61152a8de5d10ff533b62c31 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:06:00 +0100
Subject: [PATCH 02/25] Use @ariakit/test instead of testing library

---
 packages/components/src/modal/index.tsx       |  2 +-
 .../components/src/tooltip/test/index.tsx     | 79 ++++---------------
 2 files changed, 16 insertions(+), 65 deletions(-)

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index b1bee51805f78..616539ed9b636 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -209,7 +209,7 @@ function UnforwardedModal(
 
 		if (
 			shouldCloseOnEsc &&
-			event.code === 'Escape' &&
+			( event.code === 'Escape' || event.key === 'Escape' ) &&
 			! event.defaultPrevented
 		) {
 			event.preventDefault();
diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 2b53216507cb9..c70c6bafc8497 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { press, hover, click } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -51,11 +51,9 @@ describe( 'Tooltip', () => {
 	} );
 
 	it( 'should render the tooltip when focusing on the tooltip anchor via tab', async () => {
-		const user = userEvent.setup();
-
 		render( <Tooltip { ...props } /> );
 
-		await user.tab();
+		await press.Tab();
 
 		expect(
 			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
@@ -64,53 +62,36 @@ describe( 'Tooltip', () => {
 		expect(
 			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
-
-		await cleanupTooltip( user );
 	} );
 
 	it( 'should render the tooltip when the tooltip anchor is hovered', async () => {
-		const user = userEvent.setup();
-
 		render( <Tooltip { ...props } /> );
 
-		await user.hover(
-			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
-		);
+		await hover( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
 
 		expect(
 			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
-
-		await cleanupTooltip( user );
 	} );
 
 	it( 'should not show tooltip on focus as result of mouse click', async () => {
-		const user = userEvent.setup();
-
 		render( <Tooltip { ...props } /> );
 
-		await user.click(
-			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
-		);
+		await click( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
 
 		expect(
 			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 		).not.toBeInTheDocument();
-
-		await cleanupTooltip( user );
 	} );
 
 	it( 'should respect custom delay prop when showing tooltip', async () => {
-		const user = userEvent.setup();
 		const ADDITIONAL_DELAY = 100;
 
 		render(
 			<Tooltip { ...props } delay={ TOOLTIP_DELAY + ADDITIONAL_DELAY } />
 		);
 
-		await user.hover(
-			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
-		);
+		await hover( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
 
 		// Advance time by default delay
 		await new Promise( ( resolve ) =>
@@ -133,13 +114,9 @@ describe( 'Tooltip', () => {
 		expect(
 			screen.getByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
-
-		await cleanupTooltip( user );
 	} );
 
 	it( 'should show tooltip when an element is disabled', async () => {
-		const user = userEvent.setup();
-
 		render(
 			<Tooltip { ...props }>
 				<Button aria-disabled>Button</Button>
@@ -151,17 +128,14 @@ describe( 'Tooltip', () => {
 		expect( button ).toBeVisible();
 		expect( button ).toHaveAttribute( 'aria-disabled' );
 
-		await user.hover( button );
+		await hover( button );
 
 		expect(
 			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
-
-		await cleanupTooltip( user );
 	} );
 
 	it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
-		const user = userEvent.setup();
 		const onMouseEnterMock = jest.fn();
 		const onMouseLeaveMock = jest.fn();
 		const MOUSE_LEAVE_DELAY = TOOLTIP_DELAY - 200;
@@ -180,7 +154,7 @@ describe( 'Tooltip', () => {
 			</>
 		);
 
-		await user.hover(
+		await hover(
 			screen.getByRole( 'button', {
 				name: 'Tooltip anchor',
 			} )
@@ -202,7 +176,7 @@ describe( 'Tooltip', () => {
 		).not.toBeInTheDocument();
 
 		// Hover the other button, meaning that the mouse will leave the tooltip anchor
-		await user.hover(
+		await hover(
 			screen.getByRole( 'button', {
 				name: 'Other button',
 			} )
@@ -224,29 +198,19 @@ describe( 'Tooltip', () => {
 		expect(
 			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 		).not.toBeInTheDocument();
-
-		await cleanupTooltip( user );
 	} );
 
 	it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
-		const user = userEvent.setup();
-
 		render( <Tooltip { ...props } shortcut="shortcut text" /> );
 
-		await user.hover(
-			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
-		);
+		await hover( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
 
 		await waitFor( () =>
 			expect( screen.getByText( 'shortcut text' ) ).toBeVisible()
 		);
-
-		await cleanupTooltip( user );
 	} );
 
 	it( 'should render the keyboard shortcut display text and aria-label when an object is passed as the shortcut', async () => {
-		const user = userEvent.setup();
-
 		render(
 			<Tooltip
 				{ ...props }
@@ -257,9 +221,7 @@ describe( 'Tooltip', () => {
 			/>
 		);
 
-		await user.hover(
-			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
-		);
+		await hover( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
 
 		await waitFor( () =>
 			expect( screen.getByText( '⇧⌘,' ) ).toBeVisible()
@@ -269,12 +231,9 @@ describe( 'Tooltip', () => {
 			'aria-label',
 			'Control + Shift + Comma'
 		);
-
-		await cleanupTooltip( user );
 	} );
 
 	it( 'esc should close modal even when tooltip is visible', async () => {
-		const user = userEvent.setup();
 		const onRequestClose = jest.fn();
 		render(
 			<Modal onRequestClose={ onRequestClose }>
@@ -286,7 +245,7 @@ describe( 'Tooltip', () => {
 			screen.queryByRole( 'tooltip', { name: /close/i } )
 		).not.toBeInTheDocument();
 
-		await user.hover(
+		await hover(
 			screen.getByRole( 'button', {
 				name: /close/i,
 			} )
@@ -298,19 +257,15 @@ describe( 'Tooltip', () => {
 			).toBeVisible()
 		);
 
-		await user.keyboard( '[Escape]' );
+		await press.Escape();
 
 		expect( onRequestClose ).toHaveBeenCalled();
-
-		await cleanupTooltip( user );
 	} );
 
 	it( 'should associate the tooltip text with its anchor via the accessible description when visible', async () => {
-		const user = userEvent.setup();
-
 		render( <Tooltip { ...props } /> );
 
-		await user.hover(
+		await hover(
 			screen.getByRole( 'button', {
 				name: 'Tooltip anchor',
 			} )
@@ -322,24 +277,20 @@ describe( 'Tooltip', () => {
 	} );
 
 	it( 'should not hide tooltip when the anchor is clicked if hideOnClick is false', async () => {
-		const user = userEvent.setup();
-
 		render( <Tooltip { ...props } hideOnClick={ false } /> );
 
 		const button = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
 
-		await user.hover( button );
+		await hover( button );
 
 		expect(
 			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
 
-		await user.click( button );
+		await click( button );
 
 		expect(
 			screen.getByRole( 'tooltip', { name: 'tooltip text' } )
 		).toBeVisible();
-
-		await cleanupTooltip( user );
 	} );
 } );

From 6b5334faeff1cf4340838345199bc246851af01b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:07:48 +0100
Subject: [PATCH 03/25] Use sleep utility instead of custom promise

---
 .../components/src/tooltip/test/index.tsx     | 21 +++++--------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index c70c6bafc8497..7dd28e4b146f1 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, hover, click } from '@ariakit/test';
+import { press, hover, click, sleep } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -94,9 +94,7 @@ describe( 'Tooltip', () => {
 		await hover( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
 
 		// Advance time by default delay
-		await new Promise( ( resolve ) =>
-			setTimeout( resolve, TOOLTIP_DELAY )
-		);
+		await sleep( TOOLTIP_DELAY );
 
 		// Tooltip hasn't appeared yet
 		expect(
@@ -104,12 +102,7 @@ describe( 'Tooltip', () => {
 		).not.toBeInTheDocument();
 
 		// wait for additional delay for tooltip to appear
-		await waitFor(
-			() =>
-				new Promise( ( resolve ) =>
-					setTimeout( resolve, ADDITIONAL_DELAY )
-				)
-		);
+		await sleep( ADDITIONAL_DELAY );
 
 		expect(
 			screen.getByRole( 'tooltip', { name: 'tooltip text' } )
@@ -167,9 +160,7 @@ describe( 'Tooltip', () => {
 		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
 
 		// Advance time by MOUSE_LEAVE_DELAY time
-		await new Promise( ( resolve ) =>
-			setTimeout( resolve, MOUSE_LEAVE_DELAY )
-		);
+		await sleep( MOUSE_LEAVE_DELAY );
 
 		expect(
 			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
@@ -190,9 +181,7 @@ describe( 'Tooltip', () => {
 		expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
 
 		// Advance time again, so that we reach the full TOOLTIP_DELAY time
-		await new Promise( ( resolve ) =>
-			setTimeout( resolve, TOOLTIP_DELAY )
-		);
+		await sleep( TOOLTIP_DELAY );
 
 		// Tooltip won't show, since the mouse has left the tooltip anchor
 		expect(

From c97a986733b5794d258e30f05b017cfea912216e Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:08:32 +0100
Subject: [PATCH 04/25] Remove unnecessary import

---
 packages/components/src/tooltip/test/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 7dd28e4b146f1..54e0faed49e1f 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -15,7 +15,6 @@ import { shortcutAriaLabel } from '@wordpress/keycodes';
 import Button from '../../button';
 import Modal from '../../modal';
 import Tooltip, { TOOLTIP_DELAY } from '..';
-import cleanupTooltip from './utils/';
 
 const props = {
 	children: <Button>Tooltip anchor</Button>,

From 82920912e7a00746252c4e92d247e3182a78ae03 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:15:13 +0100
Subject: [PATCH 05/25] Add utility functions

---
 .../components/src/tooltip/test/index.tsx     | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 54e0faed49e1f..06622201881f9 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -21,6 +21,27 @@ const props = {
 	text: 'tooltip text',
 };
 
+const waitForTooltipToShow = ( timeout = TOOLTIP_DELAY ) =>
+	waitFor(
+		() =>
+			expect(
+				screen.getByRole( 'tooltip', { name: 'tooltip text' } )
+			).toBeVisible(),
+		{ timeout }
+	);
+
+const waitForTooltipToHide = () =>
+	waitFor( () =>
+		expect(
+			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
+		).not.toBeInTheDocument()
+	);
+
+const hoverOutside = async () => {
+	await hover( document.body );
+	await hover( document.body, { clientX: 10, clientY: 10 } );
+};
+
 describe( 'Tooltip', () => {
 	it( 'should not render the tooltip if multiple children are passed', async () => {
 		render(

From 32b57036c01d7f8fb2384df9fb6e293e0af3f597 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:15:49 +0100
Subject: [PATCH 06/25] Make multiple children test actually test what it's
 supposed to test

---
 packages/components/src/tooltip/test/index.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 06622201881f9..babb849c849bc 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -48,11 +48,20 @@ describe( 'Tooltip', () => {
 			// expected TS error since Tooltip cannot have more than one child element
 			// @ts-expect-error
 			<Tooltip { ...props }>
-				<Button>This is a button</Button>
-				<Button>This is another button</Button>
+				<Button>First button</Button>
+				<Button>Second button</Button>
 			</Tooltip>
 		);
 
+		expect(
+			screen.getByRole( 'button', { name: 'First button' } )
+		).toBeVisible();
+		expect(
+			screen.getByRole( 'button', { name: 'Second button' } )
+		).toBeVisible();
+
+		await press.Tab();
+
 		expect(
 			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 		).not.toBeInTheDocument();

From 8cd40335854936673e7b0570edd7c2778fd1f4a8 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:18:59 +0100
Subject: [PATCH 07/25] Test for tooltip to hide when another element gets
 focus

---
 .../components/src/tooltip/test/index.tsx     | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index babb849c849bc..063054d4a83ef 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -79,18 +79,27 @@ describe( 'Tooltip', () => {
 		).not.toBeInTheDocument();
 	} );
 
-	it( 'should render the tooltip when focusing on the tooltip anchor via tab', async () => {
-		render( <Tooltip { ...props } /> );
+	it( 'should show the tooltip when focusing on the tooltip anchor and hide it the anchor loses focus', async () => {
+		render(
+			<>
+				<Tooltip { ...props } />
+				<button>Focus me</button>
+			</>
+		);
 
+		// Focus the anchor, tooltip should show
 		await press.Tab();
-
 		expect(
 			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
 		).toHaveFocus();
+		await waitForTooltipToShow();
 
+		// Focus the other button, tooltip should hide
+		await press.Tab();
 		expect(
-			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
-		).toBeVisible();
+			screen.getByRole( 'button', { name: 'Focus me' } )
+		).toHaveFocus();
+		await waitForTooltipToHide();
 	} );
 
 	it( 'should render the tooltip when the tooltip anchor is hovered', async () => {

From 3894dcaf7fde45910994926f29e10692001605b0 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:22:03 +0100
Subject: [PATCH 08/25] Test for tooltip to hide when hovering outside the
 anchor

---
 packages/components/src/tooltip/test/index.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 063054d4a83ef..9f45c6226dbf5 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -102,14 +102,20 @@ describe( 'Tooltip', () => {
 		await waitForTooltipToHide();
 	} );
 
-	it( 'should render the tooltip when the tooltip anchor is hovered', async () => {
+	it( 'should show the tooltip when the tooltip anchor is hovered and hide it when the cursor stops hovering the anchor', async () => {
 		render( <Tooltip { ...props } /> );
 
-		await hover( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
+		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
 
-		expect(
-			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
-		).toBeVisible();
+		expect( anchor ).toBeVisible();
+
+		// Hover over the anchor, tooltip should show
+		await hover( anchor );
+		await waitForTooltipToShow();
+
+		// Hover outside of the anchor, tooltip should hide
+		await hoverOutside();
+		await waitForTooltipToHide();
 	} );
 
 	it( 'should not show tooltip on focus as result of mouse click', async () => {

From a6ca61f532eed109b6d3c33bdbc73acc9310031c Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:25:59 +0100
Subject: [PATCH 09/25] Improve tooltip hiding on click test

---
 .../components/src/tooltip/test/index.tsx     | 50 ++++++++++---------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 9f45c6226dbf5..4fad38430f020 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -118,14 +118,36 @@ describe( 'Tooltip', () => {
 		await waitForTooltipToHide();
 	} );
 
-	it( 'should not show tooltip on focus as result of mouse click', async () => {
+	it( 'should hide tooltip when the tooltip anchor is clicked', async () => {
 		render( <Tooltip { ...props } /> );
 
-		await click( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
+		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
 
-		expect(
-			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
-		).not.toBeInTheDocument();
+		expect( anchor ).toBeVisible();
+
+		// Hover over the anchor, tooltip should show
+		await hover( anchor );
+		await waitForTooltipToShow();
+
+		// Click the anchor, tooltip should hide
+		await click( anchor );
+		await waitForTooltipToHide();
+	} );
+
+	it( 'should not hide tooltip when the tooltip anchor is clicked and the `hideOnClick` prop is `false', async () => {
+		render( <Tooltip { ...props } hideOnClick={ false } /> );
+
+		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
+
+		expect( anchor ).toBeVisible();
+
+		// Hover over the anchor, tooltip should show
+		await hover( anchor );
+		await waitForTooltipToShow();
+
+		// Click the anchor, tooltip should not hide
+		await click( anchor );
+		await waitForTooltipToShow();
 	} );
 
 	it( 'should respect custom delay prop when showing tooltip', async () => {
@@ -308,22 +330,4 @@ describe( 'Tooltip', () => {
 			await screen.findByRole( 'button', { description: 'tooltip text' } )
 		).toBeInTheDocument();
 	} );
-
-	it( 'should not hide tooltip when the anchor is clicked if hideOnClick is false', async () => {
-		render( <Tooltip { ...props } hideOnClick={ false } /> );
-
-		const button = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
-
-		await hover( button );
-
-		expect(
-			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
-		).toBeVisible();
-
-		await click( button );
-
-		expect(
-			screen.getByRole( 'tooltip', { name: 'tooltip text' } )
-		).toBeVisible();
-	} );
 } );

From 7674cb0a238966822346a2272a6befd9a433cf1b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:37:09 +0100
Subject: [PATCH 10/25] More utils refactor

---
 .../components/src/tooltip/test/index.tsx     | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 4fad38430f020..d17b1c08980ec 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -21,21 +21,20 @@ const props = {
 	text: 'tooltip text',
 };
 
+const expectTooltipToBeVisible = () =>
+	expect(
+		screen.getByRole( 'tooltip', { name: 'tooltip text' } )
+	).toBeVisible();
+
+const expectTooltipToBeHidden = () =>
+	expect(
+		screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
+	).not.toBeInTheDocument();
+
 const waitForTooltipToShow = ( timeout = TOOLTIP_DELAY ) =>
-	waitFor(
-		() =>
-			expect(
-				screen.getByRole( 'tooltip', { name: 'tooltip text' } )
-			).toBeVisible(),
-		{ timeout }
-	);
+	waitFor( () => expectTooltipToBeVisible(), { timeout } );
 
-const waitForTooltipToHide = () =>
-	waitFor( () =>
-		expect(
-			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
-		).not.toBeInTheDocument()
-	);
+const waitForTooltipToHide = () => waitFor( () => expectTooltipToBeHidden );
 
 const hoverOutside = async () => {
 	await hover( document.body );
@@ -62,9 +61,7 @@ describe( 'Tooltip', () => {
 
 		await press.Tab();
 
-		expect(
-			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
-		).not.toBeInTheDocument();
+		expectTooltipToBeHidden();
 	} );
 
 	it( 'should not render the tooltip if there is no focus', () => {
@@ -74,9 +71,7 @@ describe( 'Tooltip', () => {
 			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
 		).toBeVisible();
 
-		expect(
-			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
-		).not.toBeInTheDocument();
+		expectTooltipToBeHidden();
 	} );
 
 	it( 'should show the tooltip when focusing on the tooltip anchor and hide it the anchor loses focus', async () => {

From 0c47cab52a462c347b17bac277773897fa75fe26 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:38:54 +0100
Subject: [PATCH 11/25] Improve test with disabled anchor

---
 .../components/src/tooltip/test/index.tsx     | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index d17b1c08980ec..f94d1b69c416f 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -170,23 +170,27 @@ describe( 'Tooltip', () => {
 		).toBeVisible();
 	} );
 
-	it( 'should show tooltip when an element is disabled', async () => {
+	it( 'should show tooltip when the anchor button is disabled but focusable', async () => {
 		render(
 			<Tooltip { ...props }>
-				<Button aria-disabled>Button</Button>
+				<Button disabled __experimentalIsFocusable>
+					Tooltip anchor
+				</Button>
 			</Tooltip>
 		);
 
-		const button = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
+		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
 
-		expect( button ).toBeVisible();
-		expect( button ).toHaveAttribute( 'aria-disabled' );
+		expect( anchor ).toBeVisible();
+		expect( anchor ).toHaveAttribute( 'aria-disabled', 'true' );
 
-		await hover( button );
+		// Hover over the anchor, tooltip should show
+		await hover( anchor );
+		await waitForTooltipToShow();
 
-		expect(
-			await screen.findByRole( 'tooltip', { name: 'tooltip text' } )
-		).toBeVisible();
+		// Hover outside of the anchor, tooltip should hide
+		await hoverOutside();
+		await waitForTooltipToHide();
 	} );
 
 	it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {

From 18a228cb9d9d5929c6eed1d11a03238e2b3b465e Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:50:46 +0100
Subject: [PATCH 12/25] Wait for tooltip to be hidden in the
 hideOnClick={false} test

---
 packages/components/src/tooltip/test/index.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index f94d1b69c416f..39dd496a97b18 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -130,7 +130,12 @@ describe( 'Tooltip', () => {
 	} );
 
 	it( 'should not hide tooltip when the tooltip anchor is clicked and the `hideOnClick` prop is `false', async () => {
-		render( <Tooltip { ...props } hideOnClick={ false } /> );
+		render(
+			<>
+				<Tooltip { ...props } hideOnClick={ false } />
+				<button>Click me</button>
+			</>
+		);
 
 		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
 
@@ -143,6 +148,10 @@ describe( 'Tooltip', () => {
 		// Click the anchor, tooltip should not hide
 		await click( anchor );
 		await waitForTooltipToShow();
+
+		// Click another button, tooltip should hide
+		await click( screen.getByRole( 'button', { name: 'Click me' } ) );
+		await waitForTooltipToHide();
 	} );
 
 	it( 'should respect custom delay prop when showing tooltip', async () => {

From 5e590e3eec0c204892ebd601cbe5b64acf9db2c7 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:57:22 +0100
Subject: [PATCH 13/25] Refactor custom delay test

---
 .../components/src/tooltip/test/index.tsx     | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 39dd496a97b18..262a774671ba7 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -161,22 +161,26 @@ describe( 'Tooltip', () => {
 			<Tooltip { ...props } delay={ TOOLTIP_DELAY + ADDITIONAL_DELAY } />
 		);
 
-		await hover( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
+		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
+		expect( anchor ).toBeVisible();
+
+		// Hover over the anchor
+		await hover( anchor );
+		expectTooltipToBeHidden();
 
 		// Advance time by default delay
 		await sleep( TOOLTIP_DELAY );
 
 		// Tooltip hasn't appeared yet
-		expect(
-			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
-		).not.toBeInTheDocument();
+		expectTooltipToBeHidden();
 
-		// wait for additional delay for tooltip to appear
+		// Wait for additional delay for tooltip to appear
 		await sleep( ADDITIONAL_DELAY );
+		await waitForTooltipToShow();
 
-		expect(
-			screen.getByRole( 'tooltip', { name: 'tooltip text' } )
-		).toBeVisible();
+		// Hover outside of the anchor, tooltip should hide
+		await hoverOutside();
+		await waitForTooltipToHide();
 	} );
 
 	it( 'should show tooltip when the anchor button is disabled but focusable', async () => {

From 4fe91bc71526543dece8775f1531f16e4dccb54a Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 15:58:04 +0100
Subject: [PATCH 14/25] Refactor "mouse leave early" test (skip as it's still
 not passing)

---
 .../components/src/tooltip/test/index.tsx     | 64 +++++++------------
 1 file changed, 23 insertions(+), 41 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 262a774671ba7..9e7f53974cc5b 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -209,62 +209,44 @@ describe( 'Tooltip', () => {
 	it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
 		const onMouseEnterMock = jest.fn();
 		const onMouseLeaveMock = jest.fn();
-		const MOUSE_LEAVE_DELAY = TOOLTIP_DELAY - 200;
+		const HOVER_OUTSIDE_ANTICIPATION = 200;
 
 		render(
-			<>
-				<Tooltip { ...props }>
-					<Button
-						onMouseEnter={ onMouseEnterMock }
-						onMouseLeave={ onMouseLeaveMock }
-					>
-						Tooltip anchor
-					</Button>
-				</Tooltip>
-				<Button>Other button</Button>
-			</>
+			<Tooltip { ...props }>
+				<Button
+					onMouseEnter={ onMouseEnterMock }
+					onMouseLeave={ onMouseLeaveMock }
+				>
+					Tooltip anchor
+				</Button>
+			</Tooltip>
 		);
 
-		await hover(
-			screen.getByRole( 'button', {
-				name: 'Tooltip anchor',
-			} )
-		);
+		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
+		expect( anchor ).toBeVisible();
 
-		// Tooltip hasn't appeared yet
-		expect(
-			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
-		).not.toBeInTheDocument();
+		// Hover over the anchor, tooltip hasn't appeared yet
+		await hover( anchor );
 		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+		expectTooltipToBeHidden();
 
-		// Advance time by MOUSE_LEAVE_DELAY time
-		await sleep( MOUSE_LEAVE_DELAY );
-
-		expect(
-			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
-		).not.toBeInTheDocument();
+		// Advance time, tooltip hasn't appeared yet because TOOLTIP_DELAY time
+		// hasn't passed yet
+		await sleep( TOOLTIP_DELAY - HOVER_OUTSIDE_ANTICIPATION );
+		expectTooltipToBeHidden();
 
-		// Hover the other button, meaning that the mouse will leave the tooltip anchor
-		await hover(
-			screen.getByRole( 'button', {
-				name: 'Other button',
-			} )
-		);
+		// Hover outside of the anchor, tooltip still hasn't appeared yet
+		await hoverOutside();
+		expectTooltipToBeHidden();
 
-		// Tooltip still hasn't appeared yet
-		expect(
-			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
-		).not.toBeInTheDocument();
 		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
 		expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
 
 		// Advance time again, so that we reach the full TOOLTIP_DELAY time
-		await sleep( TOOLTIP_DELAY );
+		await sleep( HOVER_OUTSIDE_ANTICIPATION );
 
 		// Tooltip won't show, since the mouse has left the tooltip anchor
-		expect(
-			screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
-		).not.toBeInTheDocument();
+		expectTooltipToBeHidden();
 	} );
 
 	it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {

From be278f82bff8abcc186a9f44d0c71766cf2e16b4 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 16:05:08 +0100
Subject: [PATCH 15/25] Improve shortcut-related tests

---
 .../components/src/tooltip/test/index.tsx     | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 9e7f53974cc5b..3a6c2e86b257f 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -249,17 +249,23 @@ describe( 'Tooltip', () => {
 		expectTooltipToBeHidden();
 	} );
 
-	it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
+	it( 'should show the shortcut in the tooltip when a string is passed as the shortcut', async () => {
 		render( <Tooltip { ...props } shortcut="shortcut text" /> );
 
+		// Hover over the anchor, tooltip should show
 		await hover( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
+		expect(
+			screen.getByRole( 'tooltip', {
+				name: 'tooltip text shortcut text',
+			} )
+		).toBeVisible();
 
-		await waitFor( () =>
-			expect( screen.getByText( 'shortcut text' ) ).toBeVisible()
-		);
+		// Hover outside of the anchor, tooltip should hide
+		await hoverOutside();
+		await waitForTooltipToHide();
 	} );
 
-	it( 'should render the keyboard shortcut display text and aria-label when an object is passed as the shortcut', async () => {
+	it( 'should show the shortcut in the tooltip when an object is passed as the shortcut', async () => {
 		render(
 			<Tooltip
 				{ ...props }
@@ -270,16 +276,17 @@ describe( 'Tooltip', () => {
 			/>
 		);
 
+		// Hover over the anchor, tooltip should show
 		await hover( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
+		const tooltip = screen.getByRole( 'tooltip', {
+			name: 'tooltip text Control + Shift + Comma',
+		} );
+		expect( tooltip ).toBeVisible();
+		expect( tooltip ).toHaveTextContent( /⇧⌘,/i );
 
-		await waitFor( () =>
-			expect( screen.getByText( '⇧⌘,' ) ).toBeVisible()
-		);
-
-		expect( screen.getByText( '⇧⌘,' ) ).toHaveAttribute(
-			'aria-label',
-			'Control + Shift + Comma'
-		);
+		// Hover outside of the anchor, tooltip should hide
+		await hoverOutside();
+		await waitForTooltipToHide();
 	} );
 
 	it( 'esc should close modal even when tooltip is visible', async () => {

From 090e22bb78ab4a2529272bcb2f43d9f757e50f57 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 16:08:13 +0100
Subject: [PATCH 16/25] Improve the Modal Escape test

---
 .../components/src/tooltip/test/index.tsx     | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 3a6c2e86b257f..baece84db772e 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -289,7 +289,7 @@ describe( 'Tooltip', () => {
 		await waitForTooltipToHide();
 	} );
 
-	it( 'esc should close modal even when tooltip is visible', async () => {
+	it( 'should close the parent dialog component when pressing the Escape key while the tooltip is visible', async () => {
 		const onRequestClose = jest.fn();
 		render(
 			<Modal onRequestClose={ onRequestClose }>
@@ -297,25 +297,27 @@ describe( 'Tooltip', () => {
 			</Modal>
 		);
 
-		expect(
-			screen.queryByRole( 'tooltip', { name: /close/i } )
-		).not.toBeInTheDocument();
+		expectTooltipToBeHidden();
 
-		await hover(
-			screen.getByRole( 'button', {
-				name: /close/i,
-			} )
-		);
+		const closeButton = screen.getByRole( 'button', {
+			name: /close/i,
+		} );
 
+		// Hover over the anchor, tooltip should show
+		await hover( closeButton );
 		await waitFor( () =>
 			expect(
 				screen.getByRole( 'tooltip', { name: /close/i } )
 			).toBeVisible()
 		);
 
+		// Press the Escape key, Modal should request to be closed
 		await press.Escape();
-
 		expect( onRequestClose ).toHaveBeenCalled();
+
+		// Hover outside of the anchor, tooltip should hide
+		await hoverOutside();
+		await waitForTooltipToHide();
 	} );
 
 	it( 'should associate the tooltip text with its anchor via the accessible description when visible', async () => {

From b5aaf5a95e10e5ab80e123a2382ff9c5fe3b4b0b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 16:13:22 +0100
Subject: [PATCH 17/25] Refactor description text test

---
 .../components/src/tooltip/test/index.tsx     | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index baece84db772e..da4fb65f1740c 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -64,6 +64,34 @@ describe( 'Tooltip', () => {
 		expectTooltipToBeHidden();
 	} );
 
+	it( 'should associate the tooltip text with its anchor via the accessible description when visible', async () => {
+		render( <Tooltip { ...props } /> );
+
+		// The anchor can not be found by querying for its description,
+		// since that is present only when the tooltip is visible
+		expect(
+			screen.queryByRole( 'button', { description: 'tooltip text' } )
+		).not.toBeInTheDocument();
+
+		// Hover the anchor. The tooltip shows and its text is used to describe
+		// the tooltip anchor
+		await hover(
+			screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} )
+		);
+		expect(
+			await screen.findByRole( 'button', { description: 'tooltip text' } )
+		).toBeInTheDocument();
+
+		// Hover outside of the anchor, tooltip should hide
+		await hoverOutside();
+		await waitForTooltipToHide();
+		expect(
+			screen.queryByRole( 'button', { description: 'tooltip text' } )
+		).not.toBeInTheDocument();
+	} );
+
 	it( 'should not render the tooltip if there is no focus', () => {
 		render( <Tooltip { ...props } /> );
 
@@ -319,18 +347,4 @@ describe( 'Tooltip', () => {
 		await hoverOutside();
 		await waitForTooltipToHide();
 	} );
-
-	it( 'should associate the tooltip text with its anchor via the accessible description when visible', async () => {
-		render( <Tooltip { ...props } /> );
-
-		await hover(
-			screen.getByRole( 'button', {
-				name: 'Tooltip anchor',
-			} )
-		);
-
-		expect(
-			await screen.findByRole( 'button', { description: 'tooltip text' } )
-		).toBeInTheDocument();
-	} );
 } );

From cf1ea1af9aaf28a658131adc56b173fa2ddf3c0f Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 22 Dec 2023 16:21:39 +0100
Subject: [PATCH 18/25] Add second-level describes

---
 .../components/src/tooltip/test/index.tsx     | 574 ++++++++++--------
 1 file changed, 323 insertions(+), 251 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index da4fb65f1740c..a7011b479831f 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -42,309 +42,381 @@ const hoverOutside = async () => {
 };
 
 describe( 'Tooltip', () => {
-	it( 'should not render the tooltip if multiple children are passed', async () => {
-		render(
-			// expected TS error since Tooltip cannot have more than one child element
-			// @ts-expect-error
-			<Tooltip { ...props }>
-				<Button>First button</Button>
-				<Button>Second button</Button>
-			</Tooltip>
-		);
-
-		expect(
-			screen.getByRole( 'button', { name: 'First button' } )
-		).toBeVisible();
-		expect(
-			screen.getByRole( 'button', { name: 'Second button' } )
-		).toBeVisible();
-
-		await press.Tab();
-
-		expectTooltipToBeHidden();
-	} );
+	describe( 'basic behavior', () => {
+		it( 'should not render the tooltip if multiple children are passed', async () => {
+			render(
+				// expected TS error since Tooltip cannot have more than one child element
+				// @ts-expect-error
+				<Tooltip { ...props }>
+					<Button>First button</Button>
+					<Button>Second button</Button>
+				</Tooltip>
+			);
 
-	it( 'should associate the tooltip text with its anchor via the accessible description when visible', async () => {
-		render( <Tooltip { ...props } /> );
+			expect(
+				screen.getByRole( 'button', { name: 'First button' } )
+			).toBeVisible();
+			expect(
+				screen.getByRole( 'button', { name: 'Second button' } )
+			).toBeVisible();
 
-		// The anchor can not be found by querying for its description,
-		// since that is present only when the tooltip is visible
-		expect(
-			screen.queryByRole( 'button', { description: 'tooltip text' } )
-		).not.toBeInTheDocument();
+			await press.Tab();
 
-		// Hover the anchor. The tooltip shows and its text is used to describe
-		// the tooltip anchor
-		await hover(
-			screen.getByRole( 'button', {
-				name: 'Tooltip anchor',
-			} )
-		);
-		expect(
-			await screen.findByRole( 'button', { description: 'tooltip text' } )
-		).toBeInTheDocument();
-
-		// Hover outside of the anchor, tooltip should hide
-		await hoverOutside();
-		await waitForTooltipToHide();
-		expect(
-			screen.queryByRole( 'button', { description: 'tooltip text' } )
-		).not.toBeInTheDocument();
+			expectTooltipToBeHidden();
+		} );
+
+		it( 'should associate the tooltip text with its anchor via the accessible description when visible', async () => {
+			render( <Tooltip { ...props } /> );
+
+			// The anchor can not be found by querying for its description,
+			// since that is present only when the tooltip is visible
+			expect(
+				screen.queryByRole( 'button', { description: 'tooltip text' } )
+			).not.toBeInTheDocument();
+
+			// Hover the anchor. The tooltip shows and its text is used to describe
+			// the tooltip anchor
+			await hover(
+				screen.getByRole( 'button', {
+					name: 'Tooltip anchor',
+				} )
+			);
+			expect(
+				await screen.findByRole( 'button', {
+					description: 'tooltip text',
+				} )
+			).toBeInTheDocument();
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitForTooltipToHide();
+			expect(
+				screen.queryByRole( 'button', { description: 'tooltip text' } )
+			).not.toBeInTheDocument();
+		} );
 	} );
 
-	it( 'should not render the tooltip if there is no focus', () => {
-		render( <Tooltip { ...props } /> );
+	describe( 'keyboard focus', () => {
+		it( 'should not render the tooltip if there is no focus', () => {
+			render( <Tooltip { ...props } /> );
 
-		expect(
-			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
-		).toBeVisible();
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toBeVisible();
 
-		expectTooltipToBeHidden();
-	} );
+			expectTooltipToBeHidden();
+		} );
 
-	it( 'should show the tooltip when focusing on the tooltip anchor and hide it the anchor loses focus', async () => {
-		render(
-			<>
-				<Tooltip { ...props } />
-				<button>Focus me</button>
-			</>
-		);
-
-		// Focus the anchor, tooltip should show
-		await press.Tab();
-		expect(
-			screen.getByRole( 'button', { name: 'Tooltip anchor' } )
-		).toHaveFocus();
-		await waitForTooltipToShow();
-
-		// Focus the other button, tooltip should hide
-		await press.Tab();
-		expect(
-			screen.getByRole( 'button', { name: 'Focus me' } )
-		).toHaveFocus();
-		await waitForTooltipToHide();
-	} );
+		it( 'should show the tooltip when focusing on the tooltip anchor and hide it the anchor loses focus', async () => {
+			render(
+				<>
+					<Tooltip { ...props } />
+					<button>Focus me</button>
+				</>
+			);
+
+			// Focus the anchor, tooltip should show
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toHaveFocus();
+			await waitForTooltipToShow();
 
-	it( 'should show the tooltip when the tooltip anchor is hovered and hide it when the cursor stops hovering the anchor', async () => {
-		render( <Tooltip { ...props } /> );
+			// Focus the other button, tooltip should hide
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'Focus me' } )
+			).toHaveFocus();
+			await waitForTooltipToHide();
+		} );
 
-		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
+		it( 'should show tooltip when focussing a disabled (but focussable) anchor button', async () => {
+			render(
+				<>
+					<Tooltip { ...props }>
+						<Button disabled __experimentalIsFocusable>
+							Tooltip anchor
+						</Button>
+					</Tooltip>
+					<button>Focus me</button>
+				</>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
 
-		expect( anchor ).toBeVisible();
+			expect( anchor ).toBeVisible();
+			expect( anchor ).toHaveAttribute( 'aria-disabled', 'true' );
 
-		// Hover over the anchor, tooltip should show
-		await hover( anchor );
-		await waitForTooltipToShow();
+			// Focus anchor, tooltip should show
+			await press.Tab();
+			expect( anchor ).toHaveFocus();
+			await waitForTooltipToShow();
 
-		// Hover outside of the anchor, tooltip should hide
-		await hoverOutside();
-		await waitForTooltipToHide();
+			// Focus another button, tooltip should hide
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Focus me',
+				} )
+			).toHaveFocus();
+			await waitForTooltipToHide();
+		} );
 	} );
 
-	it( 'should hide tooltip when the tooltip anchor is clicked', async () => {
-		render( <Tooltip { ...props } /> );
+	describe( 'mouse hover', () => {
+		it( 'should show the tooltip when the tooltip anchor is hovered and hide it when the cursor stops hovering the anchor', async () => {
+			render( <Tooltip { ...props } /> );
 
-		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
 
-		expect( anchor ).toBeVisible();
+			expect( anchor ).toBeVisible();
 
-		// Hover over the anchor, tooltip should show
-		await hover( anchor );
-		await waitForTooltipToShow();
+			// Hover over the anchor, tooltip should show
+			await hover( anchor );
+			await waitForTooltipToShow();
 
-		// Click the anchor, tooltip should hide
-		await click( anchor );
-		await waitForTooltipToHide();
-	} );
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitForTooltipToHide();
+		} );
 
-	it( 'should not hide tooltip when the tooltip anchor is clicked and the `hideOnClick` prop is `false', async () => {
-		render(
-			<>
-				<Tooltip { ...props } hideOnClick={ false } />
-				<button>Click me</button>
-			</>
-		);
+		it( 'should show tooltip when hovering over a disabled (but focussable) anchor button', async () => {
+			render(
+				<>
+					<Tooltip { ...props }>
+						<Button disabled __experimentalIsFocusable>
+							Tooltip anchor
+						</Button>
+					</Tooltip>
+					<button>Focus me</button>
+				</>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+
+			expect( anchor ).toBeVisible();
+			expect( anchor ).toHaveAttribute( 'aria-disabled', 'true' );
 
-		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
+			// Hover over the anchor, tooltip should show
+			await hover( anchor );
+			await waitForTooltipToShow();
 
-		expect( anchor ).toBeVisible();
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitForTooltipToHide();
+		} );
+	} );
 
-		// Hover over the anchor, tooltip should show
-		await hover( anchor );
-		await waitForTooltipToShow();
+	describe( 'mouse click', () => {
+		it( 'should hide tooltip when the tooltip anchor is clicked', async () => {
+			render( <Tooltip { ...props } /> );
 
-		// Click the anchor, tooltip should not hide
-		await click( anchor );
-		await waitForTooltipToShow();
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
 
-		// Click another button, tooltip should hide
-		await click( screen.getByRole( 'button', { name: 'Click me' } ) );
-		await waitForTooltipToHide();
-	} );
+			expect( anchor ).toBeVisible();
 
-	it( 'should respect custom delay prop when showing tooltip', async () => {
-		const ADDITIONAL_DELAY = 100;
+			// Hover over the anchor, tooltip should show
+			await hover( anchor );
+			await waitForTooltipToShow();
 
-		render(
-			<Tooltip { ...props } delay={ TOOLTIP_DELAY + ADDITIONAL_DELAY } />
-		);
+			// Click the anchor, tooltip should hide
+			await click( anchor );
+			await waitForTooltipToHide();
+		} );
 
-		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
-		expect( anchor ).toBeVisible();
+		it( 'should not hide tooltip when the tooltip anchor is clicked and the `hideOnClick` prop is `false', async () => {
+			render(
+				<>
+					<Tooltip { ...props } hideOnClick={ false } />
+					<button>Click me</button>
+				</>
+			);
 
-		// Hover over the anchor
-		await hover( anchor );
-		expectTooltipToBeHidden();
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
 
-		// Advance time by default delay
-		await sleep( TOOLTIP_DELAY );
+			expect( anchor ).toBeVisible();
 
-		// Tooltip hasn't appeared yet
-		expectTooltipToBeHidden();
+			// Hover over the anchor, tooltip should show
+			await hover( anchor );
+			await waitForTooltipToShow();
 
-		// Wait for additional delay for tooltip to appear
-		await sleep( ADDITIONAL_DELAY );
-		await waitForTooltipToShow();
+			// Click the anchor, tooltip should not hide
+			await click( anchor );
+			await waitForTooltipToShow();
 
-		// Hover outside of the anchor, tooltip should hide
-		await hoverOutside();
-		await waitForTooltipToHide();
+			// Click another button, tooltip should hide
+			await click( screen.getByRole( 'button', { name: 'Click me' } ) );
+			await waitForTooltipToHide();
+		} );
 	} );
 
-	it( 'should show tooltip when the anchor button is disabled but focusable', async () => {
-		render(
-			<Tooltip { ...props }>
-				<Button disabled __experimentalIsFocusable>
-					Tooltip anchor
-				</Button>
-			</Tooltip>
-		);
+	describe( 'delay', () => {
+		it( 'should respect custom delay prop when showing tooltip', async () => {
+			const ADDITIONAL_DELAY = 100;
 
-		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
+			render(
+				<Tooltip
+					{ ...props }
+					delay={ TOOLTIP_DELAY + ADDITIONAL_DELAY }
+				/>
+			);
 
-		expect( anchor ).toBeVisible();
-		expect( anchor ).toHaveAttribute( 'aria-disabled', 'true' );
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+			expect( anchor ).toBeVisible();
 
-		// Hover over the anchor, tooltip should show
-		await hover( anchor );
-		await waitForTooltipToShow();
+			// Hover over the anchor
+			await hover( anchor );
+			expectTooltipToBeHidden();
 
-		// Hover outside of the anchor, tooltip should hide
-		await hoverOutside();
-		await waitForTooltipToHide();
-	} );
+			// Advance time by default delay
+			await sleep( TOOLTIP_DELAY );
 
-	it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
-		const onMouseEnterMock = jest.fn();
-		const onMouseLeaveMock = jest.fn();
-		const HOVER_OUTSIDE_ANTICIPATION = 200;
-
-		render(
-			<Tooltip { ...props }>
-				<Button
-					onMouseEnter={ onMouseEnterMock }
-					onMouseLeave={ onMouseLeaveMock }
-				>
-					Tooltip anchor
-				</Button>
-			</Tooltip>
-		);
-
-		const anchor = screen.getByRole( 'button', { name: 'Tooltip anchor' } );
-		expect( anchor ).toBeVisible();
-
-		// Hover over the anchor, tooltip hasn't appeared yet
-		await hover( anchor );
-		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
-		expectTooltipToBeHidden();
-
-		// Advance time, tooltip hasn't appeared yet because TOOLTIP_DELAY time
-		// hasn't passed yet
-		await sleep( TOOLTIP_DELAY - HOVER_OUTSIDE_ANTICIPATION );
-		expectTooltipToBeHidden();
-
-		// Hover outside of the anchor, tooltip still hasn't appeared yet
-		await hoverOutside();
-		expectTooltipToBeHidden();
-
-		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
-		expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
-
-		// Advance time again, so that we reach the full TOOLTIP_DELAY time
-		await sleep( HOVER_OUTSIDE_ANTICIPATION );
-
-		// Tooltip won't show, since the mouse has left the tooltip anchor
-		expectTooltipToBeHidden();
-	} );
+			// Tooltip hasn't appeared yet
+			expectTooltipToBeHidden();
 
-	it( 'should show the shortcut in the tooltip when a string is passed as the shortcut', async () => {
-		render( <Tooltip { ...props } shortcut="shortcut text" /> );
+			// Wait for additional delay for tooltip to appear
+			await sleep( ADDITIONAL_DELAY );
+			await waitForTooltipToShow();
 
-		// Hover over the anchor, tooltip should show
-		await hover( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
-		expect(
-			screen.getByRole( 'tooltip', {
-				name: 'tooltip text shortcut text',
-			} )
-		).toBeVisible();
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitForTooltipToHide();
+		} );
 
-		// Hover outside of the anchor, tooltip should hide
-		await hoverOutside();
-		await waitForTooltipToHide();
-	} );
+		it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
+			const onMouseEnterMock = jest.fn();
+			const onMouseLeaveMock = jest.fn();
+			const HOVER_OUTSIDE_ANTICIPATION = 200;
+
+			render(
+				<Tooltip { ...props }>
+					<Button
+						onMouseEnter={ onMouseEnterMock }
+						onMouseLeave={ onMouseLeaveMock }
+					>
+						Tooltip anchor
+					</Button>
+				</Tooltip>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+			expect( anchor ).toBeVisible();
 
-	it( 'should show the shortcut in the tooltip when an object is passed as the shortcut', async () => {
-		render(
-			<Tooltip
-				{ ...props }
-				shortcut={ {
-					display: '⇧⌘,',
-					ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
-				} }
-			/>
-		);
-
-		// Hover over the anchor, tooltip should show
-		await hover( screen.getByRole( 'button', { name: 'Tooltip anchor' } ) );
-		const tooltip = screen.getByRole( 'tooltip', {
-			name: 'tooltip text Control + Shift + Comma',
-		} );
-		expect( tooltip ).toBeVisible();
-		expect( tooltip ).toHaveTextContent( /⇧⌘,/i );
+			// Hover over the anchor, tooltip hasn't appeared yet
+			await hover( anchor );
+			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+			expectTooltipToBeHidden();
 
-		// Hover outside of the anchor, tooltip should hide
-		await hoverOutside();
-		await waitForTooltipToHide();
-	} );
+			// Advance time, tooltip hasn't appeared yet because TOOLTIP_DELAY time
+			// hasn't passed yet
+			await sleep( TOOLTIP_DELAY - HOVER_OUTSIDE_ANTICIPATION );
+			expectTooltipToBeHidden();
+
+			// Hover outside of the anchor, tooltip still hasn't appeared yet
+			await hoverOutside();
+			expectTooltipToBeHidden();
 
-	it( 'should close the parent dialog component when pressing the Escape key while the tooltip is visible', async () => {
-		const onRequestClose = jest.fn();
-		render(
-			<Modal onRequestClose={ onRequestClose }>
-				<p>Modal content</p>
-			</Modal>
-		);
+			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+			expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
 
-		expectTooltipToBeHidden();
+			// Advance time again, so that we reach the full TOOLTIP_DELAY time
+			await sleep( HOVER_OUTSIDE_ANTICIPATION );
 
-		const closeButton = screen.getByRole( 'button', {
-			name: /close/i,
+			// Tooltip won't show, since the mouse has left the tooltip anchor
+			expectTooltipToBeHidden();
 		} );
+	} );
+
+	describe( 'shortcut', () => {
+		it( 'should show the shortcut in the tooltip when a string is passed as the shortcut', async () => {
+			render( <Tooltip { ...props } shortcut="shortcut text" /> );
 
-		// Hover over the anchor, tooltip should show
-		await hover( closeButton );
-		await waitFor( () =>
+			// Hover over the anchor, tooltip should show
+			await hover(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			);
 			expect(
-				screen.getByRole( 'tooltip', { name: /close/i } )
-			).toBeVisible()
-		);
+				screen.getByRole( 'tooltip', {
+					name: 'tooltip text shortcut text',
+				} )
+			).toBeVisible();
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitForTooltipToHide();
+		} );
 
-		// Press the Escape key, Modal should request to be closed
-		await press.Escape();
-		expect( onRequestClose ).toHaveBeenCalled();
+		it( 'should show the shortcut in the tooltip when an object is passed as the shortcut', async () => {
+			render(
+				<Tooltip
+					{ ...props }
+					shortcut={ {
+						display: '⇧⌘,',
+						ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
+					} }
+				/>
+			);
+
+			// Hover over the anchor, tooltip should show
+			await hover(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			);
+			const tooltip = screen.getByRole( 'tooltip', {
+				name: 'tooltip text Control + Shift + Comma',
+			} );
+			expect( tooltip ).toBeVisible();
+			expect( tooltip ).toHaveTextContent( /⇧⌘,/i );
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitForTooltipToHide();
+		} );
+	} );
 
-		// Hover outside of the anchor, tooltip should hide
-		await hoverOutside();
-		await waitForTooltipToHide();
+	describe( 'event propagation', () => {
+		it( 'should close the parent dialog component when pressing the Escape key while the tooltip is visible', async () => {
+			const onRequestClose = jest.fn();
+			render(
+				<Modal onRequestClose={ onRequestClose }>
+					<p>Modal content</p>
+				</Modal>
+			);
+
+			expectTooltipToBeHidden();
+
+			const closeButton = screen.getByRole( 'button', {
+				name: /close/i,
+			} );
+
+			// Hover over the anchor, tooltip should show
+			await hover( closeButton );
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', { name: /close/i } )
+				).toBeVisible()
+			);
+
+			// Press the Escape key, Modal should request to be closed
+			await press.Escape();
+			expect( onRequestClose ).toHaveBeenCalled();
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitForTooltipToHide();
+		} );
 	} );
 } );

From 2d4692adc7f4148c1bd36de2126497776faa8b45 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 3 Jan 2024 16:25:52 +0100
Subject: [PATCH 19/25] Improve TS expecte error message

---
 packages/components/src/tooltip/test/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index a7011b479831f..63eabfc2cb28e 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -45,8 +45,7 @@ describe( 'Tooltip', () => {
 	describe( 'basic behavior', () => {
 		it( 'should not render the tooltip if multiple children are passed', async () => {
 			render(
-				// expected TS error since Tooltip cannot have more than one child element
-				// @ts-expect-error
+				// @ts-expect-error Tooltip cannot have more than one child element
 				<Tooltip { ...props }>
 					<Button>First button</Button>
 					<Button>Second button</Button>

From 536ddebbcf96501e22e53bd86c72fc88c91c7441 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 3 Jan 2024 17:09:36 +0100
Subject: [PATCH 20/25] Add missing async/await in test utils

---
 packages/components/src/tooltip/test/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 63eabfc2cb28e..9bd3c9cbf54d8 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -31,10 +31,11 @@ const expectTooltipToBeHidden = () =>
 		screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 	).not.toBeInTheDocument();
 
-const waitForTooltipToShow = ( timeout = TOOLTIP_DELAY ) =>
-	waitFor( () => expectTooltipToBeVisible(), { timeout } );
+const waitForTooltipToShow = async ( timeout = TOOLTIP_DELAY ) =>
+	await waitFor( () => expectTooltipToBeVisible(), { timeout } );
 
-const waitForTooltipToHide = () => waitFor( () => expectTooltipToBeHidden );
+const waitForTooltipToHide = async () =>
+	await waitFor( () => expectTooltipToBeHidden );
 
 const hoverOutside = async () => {
 	await hover( document.body );

From 636678fd2c4e91c864456a40c2b1fbead83758e3 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 3 Jan 2024 17:28:48 +0100
Subject: [PATCH 21/25] Await for tooltip to appear in shortcut tests

---
 .../components/src/tooltip/test/index.tsx     | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 9bd3c9cbf54d8..70b76adba1801 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -349,11 +349,13 @@ describe( 'Tooltip', () => {
 			await hover(
 				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
 			);
-			expect(
-				screen.getByRole( 'tooltip', {
-					name: 'tooltip text shortcut text',
-				} )
-			).toBeVisible();
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', {
+						name: 'tooltip text shortcut text',
+					} )
+				).toBeVisible()
+			);
 
 			// Hover outside of the anchor, tooltip should hide
 			await hoverOutside();
@@ -375,11 +377,18 @@ describe( 'Tooltip', () => {
 			await hover(
 				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
 			);
-			const tooltip = screen.getByRole( 'tooltip', {
-				name: 'tooltip text Control + Shift + Comma',
-			} );
-			expect( tooltip ).toBeVisible();
-			expect( tooltip ).toHaveTextContent( /⇧⌘,/i );
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', {
+						name: 'tooltip text Control + Shift + Comma',
+					} )
+				).toBeVisible()
+			);
+			expect(
+				screen.getByRole( 'tooltip', {
+					name: 'tooltip text Control + Shift + Comma',
+				} )
+			).toHaveTextContent( /⇧⌘,/i );
 
 			// Hover outside of the anchor, tooltip should hide
 			await hoverOutside();

From 0e8c5e601c84b301c0b84482d48fc7c8f76e3703 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 3 Jan 2024 17:29:28 +0100
Subject: [PATCH 22/25] Apply delay prop only when showing the tooltip

---
 packages/components/src/tooltip/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
index 80407def54cd4..817d6d18812ee 100644
--- a/packages/components/src/tooltip/index.tsx
+++ b/packages/components/src/tooltip/index.tsx
@@ -66,7 +66,7 @@ function Tooltip( props: TooltipProps ) {
 
 	const tooltipStore = Ariakit.useTooltipStore( {
 		placement: computedPlacement,
-		timeout: delay,
+		showTimeout: delay,
 	} );
 
 	return (

From 57b53358f3ea4905910b3ac24968c8865d2e9c78 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 3 Jan 2024 23:36:23 +0100
Subject: [PATCH 23/25] Add skip timeout waiting time after each test

---
 packages/components/src/tooltip/test/index.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index 70b76adba1801..b764d716be49e 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -43,6 +43,14 @@ const hoverOutside = async () => {
 };
 
 describe( 'Tooltip', () => {
+	// Wait enough time to make sure that tooltips don't show immediately, ignoring
+	// the showTimeout delay. For more context, see:
+	// - https://github.com/WordPress/gutenberg/pull/57345#discussion_r1435167187
+	// - https://ariakit.org/reference/tooltip-provider#skiptimeout
+	afterEach( async () => {
+		await sleep( 300 );
+	} );
+
 	describe( 'basic behavior', () => {
 		it( 'should not render the tooltip if multiple children are passed', async () => {
 			render(

From 21d2c0e82bb09316ec644924983a4b67797a3c8f Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 3 Jan 2024 23:40:17 +0100
Subject: [PATCH 24/25] CHANGELOG

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index e8beb4717d1e0..b058311e95e84 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -28,6 +28,7 @@
 -   `Modal`: Improve application of body class names ([#55430](https://github.com/WordPress/gutenberg/pull/55430)).
 -   `InputControl`, `NumberControl`, `UnitControl`, `SelectControl`, `TreeSelect`: Add `compact` size variant ([#57398](https://github.com/WordPress/gutenberg/pull/57398)).
 -   `ToggleGroupControl`: Update button size in large variant to be 32px ([#57338](https://github.com/WordPress/gutenberg/pull/57338)).
+-   `Tooltip`: improve unit tests ([#57345](https://github.com/WordPress/gutenberg/pull/57345)).
 
 ### Experimental
 

From 89372ed981e6e2cee97d0ac57318e03bfe2a7f8e Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 5 Jan 2024 00:28:19 +0100
Subject: [PATCH 25/25] Apply review feedback

---
 .../components/src/tooltip/test/index.tsx     | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
index b764d716be49e..cbe144cfa53d4 100644
--- a/packages/components/src/tooltip/test/index.tsx
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -31,11 +31,11 @@ const expectTooltipToBeHidden = () =>
 		screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
 	).not.toBeInTheDocument();
 
-const waitForTooltipToShow = async ( timeout = TOOLTIP_DELAY ) =>
-	await waitFor( () => expectTooltipToBeVisible(), { timeout } );
+const waitExpectTooltipToShow = async ( timeout = TOOLTIP_DELAY ) =>
+	await waitFor( expectTooltipToBeVisible, { timeout } );
 
-const waitForTooltipToHide = async () =>
-	await waitFor( () => expectTooltipToBeHidden );
+const waitExpectTooltipToHide = async () =>
+	await waitFor( expectTooltipToBeHidden );
 
 const hoverOutside = async () => {
 	await hover( document.body );
@@ -97,7 +97,7 @@ describe( 'Tooltip', () => {
 
 			// Hover outside of the anchor, tooltip should hide
 			await hoverOutside();
-			await waitForTooltipToHide();
+			await waitExpectTooltipToHide();
 			expect(
 				screen.queryByRole( 'button', { description: 'tooltip text' } )
 			).not.toBeInTheDocument();
@@ -128,14 +128,14 @@ describe( 'Tooltip', () => {
 			expect(
 				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
 			).toHaveFocus();
-			await waitForTooltipToShow();
+			await waitExpectTooltipToShow();
 
 			// Focus the other button, tooltip should hide
 			await press.Tab();
 			expect(
 				screen.getByRole( 'button', { name: 'Focus me' } )
 			).toHaveFocus();
-			await waitForTooltipToHide();
+			await waitExpectTooltipToHide();
 		} );
 
 		it( 'should show tooltip when focussing a disabled (but focussable) anchor button', async () => {
@@ -160,7 +160,7 @@ describe( 'Tooltip', () => {
 			// Focus anchor, tooltip should show
 			await press.Tab();
 			expect( anchor ).toHaveFocus();
-			await waitForTooltipToShow();
+			await waitExpectTooltipToShow();
 
 			// Focus another button, tooltip should hide
 			await press.Tab();
@@ -169,7 +169,7 @@ describe( 'Tooltip', () => {
 					name: 'Focus me',
 				} )
 			).toHaveFocus();
-			await waitForTooltipToHide();
+			await waitExpectTooltipToHide();
 		} );
 	} );
 
@@ -185,11 +185,11 @@ describe( 'Tooltip', () => {
 
 			// Hover over the anchor, tooltip should show
 			await hover( anchor );
-			await waitForTooltipToShow();
+			await waitExpectTooltipToShow();
 
 			// Hover outside of the anchor, tooltip should hide
 			await hoverOutside();
-			await waitForTooltipToHide();
+			await waitExpectTooltipToHide();
 		} );
 
 		it( 'should show tooltip when hovering over a disabled (but focussable) anchor button', async () => {
@@ -213,11 +213,11 @@ describe( 'Tooltip', () => {
 
 			// Hover over the anchor, tooltip should show
 			await hover( anchor );
-			await waitForTooltipToShow();
+			await waitExpectTooltipToShow();
 
 			// Hover outside of the anchor, tooltip should hide
 			await hoverOutside();
-			await waitForTooltipToHide();
+			await waitExpectTooltipToHide();
 		} );
 	} );
 
@@ -233,11 +233,11 @@ describe( 'Tooltip', () => {
 
 			// Hover over the anchor, tooltip should show
 			await hover( anchor );
-			await waitForTooltipToShow();
+			await waitExpectTooltipToShow();
 
 			// Click the anchor, tooltip should hide
 			await click( anchor );
-			await waitForTooltipToHide();
+			await waitExpectTooltipToHide();
 		} );
 
 		it( 'should not hide tooltip when the tooltip anchor is clicked and the `hideOnClick` prop is `false', async () => {
@@ -256,15 +256,15 @@ describe( 'Tooltip', () => {
 
 			// Hover over the anchor, tooltip should show
 			await hover( anchor );
-			await waitForTooltipToShow();
+			await waitExpectTooltipToShow();
 
 			// Click the anchor, tooltip should not hide
 			await click( anchor );
-			await waitForTooltipToShow();
+			await waitExpectTooltipToShow();
 
 			// Click another button, tooltip should hide
 			await click( screen.getByRole( 'button', { name: 'Click me' } ) );
-			await waitForTooltipToHide();
+			await waitExpectTooltipToHide();
 		} );
 	} );
 
@@ -296,11 +296,11 @@ describe( 'Tooltip', () => {
 
 			// Wait for additional delay for tooltip to appear
 			await sleep( ADDITIONAL_DELAY );
-			await waitForTooltipToShow();
+			await waitExpectTooltipToShow();
 
 			// Hover outside of the anchor, tooltip should hide
 			await hoverOutside();
-			await waitForTooltipToHide();
+			await waitExpectTooltipToHide();
 		} );
 
 		it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
@@ -367,7 +367,7 @@ describe( 'Tooltip', () => {
 
 			// Hover outside of the anchor, tooltip should hide
 			await hoverOutside();
-			await waitForTooltipToHide();
+			await waitExpectTooltipToHide();
 		} );
 
 		it( 'should show the shortcut in the tooltip when an object is passed as the shortcut', async () => {
@@ -400,7 +400,7 @@ describe( 'Tooltip', () => {
 
 			// Hover outside of the anchor, tooltip should hide
 			await hoverOutside();
-			await waitForTooltipToHide();
+			await waitExpectTooltipToHide();
 		} );
 	} );
 
@@ -433,7 +433,7 @@ describe( 'Tooltip', () => {
 
 			// Hover outside of the anchor, tooltip should hide
 			await hoverOutside();
-			await waitForTooltipToHide();
+			await waitExpectTooltipToHide();
 		} );
 	} );
 } );