Fix unit tests considering the fact that tooltip is not in the DOM un…

…til open

packages/components/src/button/test/index.tsx

@@ -194,7 +194,7 @@ describe( 'Button', () => {
 
 			render( <Button icon={ plusCircle } label="WordPress" /> );
 
-			expect( screen.queryByText( 'WordPress' ) ).not.toBeVisible();
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
 			await user.tab();
@@ -231,7 +231,7 @@ describe( 'Button', () => {
 				/>
 			);
 
-			expect( screen.queryByText( 'Label' ) ).not.toBeVisible();
+			expect( screen.queryByText( 'Label' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
 			await user.tab();
@@ -290,7 +290,7 @@ describe( 'Button', () => {
 				<Button icon={ plusCircle } label="WordPress" children={ [] } />
 			);
 
-			expect( screen.queryByText( 'WordPress' ) ).not.toBeVisible();
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
 			await user.tab();
@@ -326,7 +326,7 @@ describe( 'Button', () => {
 				</Button>
 			);
 
-			expect( screen.queryByText( 'WordPress' ) ).not.toBeVisible();
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
 			await user.tab();

packages/components/src/tab-panel/test/index.tsx

@@ -117,7 +117,7 @@ describe.each( [
 			for ( let i = 0; i < allTabs.length; i++ ) {
 				expect(
 					screen.queryByText( TABS_WITH_ICON[ i ].title )
-				).not.toBeVisible();
+				).not.toBeInTheDocument();
 
 				await user.hover( allTabs[ i ] );
 
@@ -160,37 +160,37 @@ describe.each( [
 
 			// Tab to focus the tablist. Make sure alpha is focused, and that the
 			// corresponding tooltip is shown.
-			expect( screen.queryByText( 'Alpha' ) ).not.toBeVisible();
+			expect( screen.queryByText( 'Alpha' ) ).not.toBeInTheDocument();
 			await user.keyboard( '[Tab]' );
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
-			expect( screen.getByText( 'Alpha' ) ).toBeVisible();
+			expect( screen.getByText( 'Alpha' ) ).toBeInTheDocument();
 			expect( await getSelectedTab() ).toHaveFocus();
 
 			// Move selection with arrow keys. Make sure beta is focused, and that
 			// the corresponding tooltip is shown.
-			expect( screen.queryByText( 'Beta' ) ).not.toBeVisible();
+			expect( screen.queryByText( 'Beta' ) ).not.toBeInTheDocument();
 			await user.keyboard( '[ArrowRight]' );
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
-			expect( screen.getByText( 'Beta' ) ).toBeVisible();
+			expect( screen.getByText( 'Beta' ) ).toBeInTheDocument();
 			expect( await getSelectedTab() ).toHaveFocus();
 
 			// Move selection with arrow keys. Make sure gamma is focused, and that
 			// the corresponding tooltip is shown.
-			expect( screen.queryByText( 'Gamma' ) ).not.toBeVisible();
+			expect( screen.queryByText( 'Gamma' ) ).not.toBeInTheDocument();
 			await user.keyboard( '[ArrowRight]' );
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
-			expect( screen.getByText( 'Gamma' ) ).toBeVisible();
+			expect( screen.getByText( 'Gamma' ) ).toBeInTheDocument();
 			expect( await getSelectedTab() ).toHaveFocus();
 
 			// Move selection with arrow keys. Make sure beta is focused, and that
 			// the corresponding tooltip is shown.
-			expect( screen.queryByText( 'Beta' ) ).not.toBeVisible();
+			expect( screen.queryByText( 'Beta' ) ).not.toBeInTheDocument();
 			await user.keyboard( '[ArrowLeft]' );
 			expect( mockOnSelect ).toHaveBeenCalledTimes( 4 );
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
-			expect( screen.getByText( 'Beta' ) ).toBeVisible();
+			expect( screen.getByText( 'Beta' ) ).toBeInTheDocument();
 			expect( await getSelectedTab() ).toHaveFocus();
 
 			await cleanupTooltip( user );

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

@@ -246,7 +246,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
         >
           <button
             aria-checked="true"
-            aria-describedby="tooltip-4"
             aria-label="Uppercase"
             class="emotion-12 components-toggle-group-control-option-base"
             data-active-item=""
@@ -285,7 +284,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
         >
           <button
             aria-checked="false"
-            aria-describedby="tooltip-5"
             aria-label="Lowercase"
             class="emotion-18 components-toggle-group-control-option-base"
             data-command=""
@@ -789,7 +787,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
         >
           <button
             aria-checked="true"
-            aria-describedby="tooltip-0"
             aria-label="Uppercase"
             class="emotion-12 components-toggle-group-control-option-base"
             data-active-item=""
@@ -828,7 +825,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
         >
           <button
             aria-checked="false"
-            aria-describedby="tooltip-1"
             aria-label="Lowercase"
             class="emotion-18 components-toggle-group-control-option-base"
             data-command=""

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

@@ -272,17 +272,21 @@ describe( 'Tooltip', () => {
 			</Modal>
 		);
 
-		const tooltip = await screen.findByRole( 'tooltip', { hidden: true } );
-
-		expect( tooltip ).toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'tooltip', { name: /close/i } )
+		).not.toBeInTheDocument();
 
 		await user.hover(
 			screen.getByRole( 'button', {
 				name: /Close/i,
 			} )
 		);
 
-		await waitFor( () => expect( tooltip ).toBeVisible() );
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'tooltip', { name: /close/i } )
+			).toBeVisible()
+		);
 
 		await user.keyboard( '[Escape]' );
 
@@ -291,11 +295,19 @@ describe( 'Tooltip', () => {
 		await cleanupTooltip( user );
 	} );
 
-	it( 'should associate the tooltip text with its anchor via the accessible description', async () => {
+	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(
+			screen.getByRole( 'button', {
+				name: /Button/i,
+			} )
+		);
+
 		expect(
-			screen.getByRole( 'button', { description: 'tooltip text' } )
+			await screen.findByRole( 'button', { description: 'tooltip text' } )
 		).toBeInTheDocument();
 	} );
 } );