Updated CHANGELOG.md

Destructuring Tooltip props to hide them from the TS linter Updating tests to account for the Tooltip timers.
WordPress · Nov 25, 2021 · 0d716c4 · 0d716c4
1 parent 046b056
commit 0d716c4
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 22 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -7,19 +7,19 @@
 -   Replaced hardcoded blue in `ColorPicker` with UI theme color ([#36153](https://github.com/WordPress/gutenberg/pull/36153)).
 
 ### Enhancements
--   Added a `showTooltip` prop to `ToggleGroupControlOption` in order to display tooltip text (using `<Tooltip />`). ([36726](https://github.com/WordPress/gutenberg/pull/36726)).
+-   Added a `showTooltip` prop to `ToggleGroupControlOption` in order to display tooltip text (using `<Tooltip />`). ([#36726](https://github.com/WordPress/gutenberg/pull/36726)).
 
 ### Experimental
 
--   Reinstated the ability to pass additional props to the `ToolsPanel` ([36428](https://github.com/WordPress/gutenberg/pull/36428)).
+-   Reinstated the ability to pass additional props to the `ToolsPanel` ([#36428](https://github.com/WordPress/gutenberg/pull/36428)).
 -   Added an `__unstable-large` size variant to `InputControl`, `SelectControl`, and `UnitControl` for selective migration to the larger 40px heights. ([#35646](https://github.com/WordPress/gutenberg/pull/35646)).
 -   Fixed inconsistent padding in `UnitControl` ([#35646](https://github.com/WordPress/gutenberg/pull/35646)).
 -   Added support for RTL behavior for the `ZStack`'s `offset` prop ([#36769](https://github.com/WordPress/gutenberg/pull/36769))
--   Fixed race conditions causing conditionally displayed `ToolsPanelItem` components to be erroneously deregistered ([36588](https://github.com/WordPress/gutenberg/pull/36588)).
+-   Fixed race conditions causing conditionally displayed `ToolsPanelItem` components to be erroneously deregistered ([#36588](https://github.com/WordPress/gutenberg/pull/36588)).
 
 ### Bug Fix
 
--   Fixed spacing between `BaseControl` fields and help text within the `ToolsPanel` ([36334](https://github.com/WordPress/gutenberg/pull/36334))
+-   Fixed spacing between `BaseControl` fields and help text within the `ToolsPanel` ([#36334](https://github.com/WordPress/gutenberg/pull/36334))
 
 ## 19.0.2 (2021-11-15)
 

diff --git a/packages/components/src/toggle-group-control/test/index.js b/packages/components/src/toggle-group-control/test/index.js
@@ -1,14 +1,23 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import { ToggleGroupControl, ToggleGroupControlOption } from '../index';
+import { TOOLTIP_DELAY } from '../../tooltip';
 
 describe( 'ToggleGroupControl', () => {
+	beforeEach( () => {
+		jest.useFakeTimers();
+	} );
+
+	afterEach( () => {
+		jest.useRealTimers();
+	} );
+
 	const options = (
 		<>
 			<ToggleGroupControlOption value="rigas" label="R" />
@@ -30,16 +39,20 @@ describe( 'ToggleGroupControl', () => {
 			/>
 		</>
 	);
+
 	it( 'should render correctly', () => {
 		const { container } = render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ options }
 			</ToggleGroupControl>
 		);
+
 		expect( container.firstChild ).toMatchSnapshot();
 	} );
+
 	it( 'should call onChange with proper value', () => {
 		const mockOnChange = jest.fn();
+
 		render(
 			<ToggleGroupControl
 				value="jack"
@@ -49,40 +62,50 @@ describe( 'ToggleGroupControl', () => {
 				{ options }
 			</ToggleGroupControl>
 		);
+
 		const firstRadio = screen.getByRole( 'radio', { name: 'R' } );
+
 		fireEvent.click( firstRadio );
+
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
-	it( 'should render tooltip where `showTooltip` === `true`', async () => {
+	it( 'should render tooltip where `showTooltip` === `true`', () => {
 		render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ optionsWithTooltip }
 			</ToggleGroupControl>
 		);
+
 		const firstRadio = screen.getByLabelText(
 			'Click for Delicious Gnocchi'
 		);
-		fireEvent.mouseOver( firstRadio );
-		await waitFor( () =>
+
+		fireEvent.mouseEnter( firstRadio );
+
+		setTimeout( () => {
 			expect(
 				screen.getByText( 'Click for Delicious Gnocchi' )
-			).toBeInTheDocument()
-		);
+			).toBeInTheDocument();
+		}, TOOLTIP_DELAY );
 	} );
-	it( 'should not render tooltip', async () => {
+
+	it( 'should not render tooltip', () => {
 		render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ optionsWithTooltip }
 			</ToggleGroupControl>
 		);
+
 		const secondRadio = screen.getByLabelText(
 			'Click for Sumptuous Caponata'
 		);
-		fireEvent.mouseOver( secondRadio );
-		await waitFor( () =>
+
+		fireEvent.mouseEnter( secondRadio );
+
+		setTimeout( () => {
 			expect(
 				screen.queryByText( 'Click for Sumptuous Caponata' )
-			).not.toBeInTheDocument()
-		);
+			).not.toBeInTheDocument();
+		}, TOOLTIP_DELAY );
 	} );
 } );
diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
@@ -92,13 +92,8 @@ const emitToChild = ( children, eventName, event ) => {
 	}
 };
 
-function Tooltip( {
-	children,
-	position,
-	text,
-	shortcut = null,
-	delay = TOOLTIP_DELAY,
-} ) {
+function Tooltip( props ) {
+	const { children, position, text, shortcut, delay = TOOLTIP_DELAY } = props;
 	/**
 	 * Whether a mouse is currently pressed, used in determining whether
 	 * to handle a focus event as displaying the tooltip immediately.