From 9182f1ef034fd03674238a72fe4bee75b32fba0a Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Wed, 26 Jul 2023 15:18:53 -0700
Subject: [PATCH] resolve test failures after package update

---
 .../src/ui/ariakit-tooltip/index.tsx          |   1 +
 .../src/ui/ariakit-tooltip/test/index.tsx     | 107 +++++++++---------
 2 files changed, 55 insertions(+), 53 deletions(-)

diff --git a/packages/components/src/ui/ariakit-tooltip/index.tsx b/packages/components/src/ui/ariakit-tooltip/index.tsx
index 384ca1142312d0..ee0a2380cd93a5 100644
--- a/packages/components/src/ui/ariakit-tooltip/index.tsx
+++ b/packages/components/src/ui/ariakit-tooltip/index.tsx
@@ -81,6 +81,7 @@ function AriaToolTip( props: ToolTipProps ) {
 							shortcut={ shortcut }
 						/>
 					) }
+					{ /* workaround needed until floating-ui/core is updated to ^1.0.2   */ }
 					<TooltipArrow size={ 0.0001 } />
 				</Tooltip>
 			) }
diff --git a/packages/components/src/ui/ariakit-tooltip/test/index.tsx b/packages/components/src/ui/ariakit-tooltip/test/index.tsx
index b1559b6d9b6cf9..c90999ef06c1ee 100644
--- a/packages/components/src/ui/ariakit-tooltip/test/index.tsx
+++ b/packages/components/src/ui/ariakit-tooltip/test/index.tsx
@@ -70,33 +70,11 @@ describe( 'ToolTip', () => {
 
 		render( <ToolTip { ...props } /> );
 
-		await user.tab();
-
-		expect(
-			screen.getByRole( 'button', { name: /Button/i } )
-		).toHaveFocus();
-
-		await waitFor( () =>
-			expect(
-				screen.getByRole( 'tooltip', { name: /tooltip text/i } )
-			).toBeVisible()
-		);
+		const button = screen.getByRole( 'button', { name: /Button/i } );
 
 		await user.tab();
 
-		expect(
-			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
-		).not.toBeInTheDocument();
-	} );
-
-	it( 'should render the tooltip when the tooltip anchor is hovered', async () => {
-		const user = userEvent.setup();
-
-		render( <ToolTip { ...props } /> );
-
-		const button = screen.getByRole( 'button', { name: /Button/i } );
-
-		await user.hover( button );
+		expect( button ).toHaveFocus();
 
 		await waitFor( () =>
 			expect(
@@ -104,6 +82,7 @@ describe( 'ToolTip', () => {
 			).toBeVisible()
 		);
 
+		await user.tab();
 		await user.unhover( button );
 
 		expect(
@@ -150,35 +129,6 @@ describe( 'ToolTip', () => {
 		).not.toBeInTheDocument();
 	} );
 
-	it( 'should show tooltip when an element is disabled', async () => {
-		const user = userEvent.setup();
-
-		render(
-			<ToolTip { ...props }>
-				<Button aria-disabled>Button</Button>
-			</ToolTip>
-		);
-
-		const button = screen.getByRole( 'button', { name: /Button/i } );
-
-		expect( button ).toBeVisible();
-		expect( button ).toHaveAttribute( 'aria-disabled' );
-
-		await user.hover( button );
-
-		await waitFor( () =>
-			expect(
-				screen.getByRole( 'tooltip', { name: /tooltip text/i } )
-			).toBeVisible()
-		);
-
-		await user.unhover( button );
-
-		expect(
-			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
-		).not.toBeInTheDocument();
-	} );
-
 	it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
 		const user = userEvent.setup();
 		const onMouseEnterMock = jest.fn();
@@ -245,6 +195,57 @@ describe( 'ToolTip', () => {
 		).not.toBeInTheDocument();
 	} );
 
+	it( 'should render the tooltip when the tooltip anchor is hovered', async () => {
+		const user = userEvent.setup();
+
+		render( <ToolTip { ...props } /> );
+
+		const button = screen.getByRole( 'button', { name: /Button/i } );
+
+		await user.hover( button );
+
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'tooltip', { name: /tooltip text/i } )
+			).toBeVisible()
+		);
+
+		await user.unhover( button );
+
+		expect(
+			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'should show tooltip when an element is disabled', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<ToolTip { ...props }>
+				<Button aria-disabled>Button</Button>
+			</ToolTip>
+		);
+
+		const button = screen.getByRole( 'button', { name: /Button/i } );
+
+		expect( button ).toBeVisible();
+		expect( button ).toHaveAttribute( 'aria-disabled' );
+
+		await user.hover( button );
+
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'tooltip', { name: /tooltip text/i } )
+			).toBeVisible()
+		);
+
+		await user.unhover( button );
+
+		expect(
+			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+		).not.toBeInTheDocument();
+	} );
+
 	it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
 		const user = userEvent.setup();