@wordpress/components 23.5.0 → 23.7.0

package/src/tooltip/index.js

@@ -1,5 +1,10 @@
 // @ts-nocheck
 
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -66,6 +71,8 @@ const addPopoverToGrandchildren = ( {
 	position,
 	shortcut,
 	text,
+	className,
+	...props
 } ) =>
 	concatChildren(
 		grandchildren,
@@ -73,12 +80,13 @@ const addPopoverToGrandchildren = ( {
 			<Popover
 				focusOnMount={ false }
 				position={ position }
-				className="components-tooltip"
+				className={ classNames( 'components-tooltip', className ) }
 				aria-hidden="true"
 				animate={ false }
 				offset={ offset }
 				anchor={ anchor }
 				shift
+				{ ...props }
 			>
 				{ text }
 				<Shortcut
@@ -113,6 +121,7 @@ function Tooltip( props ) {
 		text,
 		shortcut,
 		delay = TOOLTIP_DELAY,
+		...popoverProps
 	} = props;
 	/**
 	 * Whether a mouse is currently pressed, used in determining whether
@@ -270,6 +279,7 @@ function Tooltip( props ) {
 	const childrenWithPopover = addPopoverToGrandchildren( {
 		grandchildren,
 		...popoverData,
+		...popoverProps,
 	} );
 
 	return getElementWithPopover( {

package/src/tooltip/test/index.js

@@ -1,373 +1,323 @@
 /**
  * External dependencies
  */
-import { render, screen, act, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import Tooltip from '../';
+import Button from '../../button';
+import { TOOLTIP_DELAY } from '../index.js';
+
 /**
  * WordPress dependencies
  */
-import { TOOLTIP_DELAY } from '../index.js';
+import { shortcutAriaLabel } from '@wordpress/keycodes';
 
-jest.useFakeTimers();
+const props = {
+	text: 'tooltip text',
+	delay: TOOLTIP_DELAY,
+};
 
 function getWrappingPopoverElement( element ) {
 	return element.closest( '.components-popover' );
 }
 
 describe( 'Tooltip', () => {
-	describe( '#render()', () => {
-		it( 'should not render the tooltip if multiple children are passed', () => {
-			render(
-				<Tooltip text="Help text">
-					<button>Button 1</button>
-					<button>Button 2</button>
-				</Tooltip>
-			);
+	it( 'should not render the tooltip if multiple children are passed', async () => {
+		const user = userEvent.setup();
 
-			const button = screen.getByText( 'Button 1' );
-			act( () => button.focus() );
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-		} );
+		render(
+			<Tooltip { ...props }>
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+			</Tooltip>
+		);
 
-		it( 'should render children', () => {
-			render(
-				<Tooltip text="Help text">
-					<button>Hover Me!</button>
-				</Tooltip>
-			);
+		await user.tab();
 
-			expect(
-				screen.getByRole( 'button', { name: 'Hover Me!' } )
-			).toBeVisible();
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-		} );
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+	} );
 
-		it( 'should render children with additional tooltip when focused', async () => {
-			const mockOnFocus = jest.fn();
+	it( 'should not render the tooltip if there is no focus', () => {
+		render(
+			<Tooltip { ...props }>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Hover Me!' } )
+		).toBeVisible();
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+	} );
 
-			render(
-				<Tooltip text="Help text">
-					<button onFocus={ mockOnFocus }>Hover Me!</button>
-				</Tooltip>
-			);
-
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeVisible();
-
-			// Before focus, the tooltip is not shown.
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-
-			act( () => button.focus() );
-
-			// Tooltip is shown after focusing the anchor.
-			const tooltip = screen.getByText( 'Help text' );
-			expect( tooltip ).toBeVisible();
-			expect( mockOnFocus ).toHaveBeenCalledWith(
-				expect.objectContaining( {
-					type: 'focus',
-				} )
-			);
-
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
-
-		it( 'should render children with additional tooltip when hovered', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render(
-				<Tooltip text="Help text">
-					<button>Hover Me!</button>
-				</Tooltip>
-			);
+	it( 'should render the tooltip when focusing the tooltip anchor via tab', async () => {
+		const user = userEvent.setup();
 
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeVisible();
+		render(
+			<Tooltip { ...props }>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
 
-			await user.hover( button );
+		await user.tab();
 
-			// Tooltip hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+		expect(
+			screen.getByRole( 'button', { name: /Hover me!/i } )
+		).toHaveFocus();
 
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+		await waitFor( () =>
+			expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+		);
 
-			// Tooltip shows after the delay
-			const tooltip = screen.getByText( 'Help text' );
-			expect( tooltip ).toBeVisible();
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+			).toBePositionedPopover()
+		);
+	} );
 
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
+	it( 'should render the tooltip when the tooltip anchor is hovered', async () => {
+		const user = userEvent.setup();
 
-		it( 'should not show tooltip on focus as result of mouse click', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			const mockOnFocus = jest.fn();
+		render(
+			<Tooltip { ...props }>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
 
-			render(
-				<Tooltip text="Help text">
-					<button onFocus={ mockOnFocus }>Hover Me!</button>
-				</Tooltip>
-			);
+		const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
 
-			const button = screen.getByRole( 'button', { text: 'Hover Me!' } );
-			expect( button ).toBeVisible();
+		await user.hover( button );
 
-			await user.click( button );
+		await waitFor( () =>
+			expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+		);
 
-			// Tooltip hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+			).toBePositionedPopover()
+		);
 
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+		await user.unhover( button );
 
-			// Tooltip still hasn't appeared yet, even though the component was focused
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-			expect( mockOnFocus ).toHaveBeenCalledWith(
-				expect.objectContaining( {
-					type: 'focus',
-				} )
-			);
-		} );
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+	} );
 
-		it( 'should respect custom delay prop when showing tooltip', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+	it( 'should not show tooltip on focus as result of mouse click', async () => {
+		const user = userEvent.setup();
 
-			const TEST_DELAY = TOOLTIP_DELAY * 2;
-			const mockOnMouseEnter = jest.fn();
-			const mockOnFocus = jest.fn();
+		render(
+			<Tooltip { ...props }>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
 
-			render(
-				<Tooltip text="Help text" delay={ TEST_DELAY }>
-					<button
-						onMouseEnter={ mockOnMouseEnter }
-						onFocus={ mockOnFocus }
-					>
-						<span>Hover Me!</span>
-					</button>
-				</Tooltip>
-			);
+		await user.click( screen.getByRole( 'button', { text: 'Hover Me!' } ) );
 
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeVisible();
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+	} );
 
-			await user.hover( button );
+	it( 'should respect custom delay prop when showing tooltip', async () => {
+		const user = userEvent.setup( { delay: TOOLTIP_DELAY } );
+		const CUSTOM_DELAY = TOOLTIP_DELAY + 25;
 
-			// Tooltip hasn't appeared yet
-			expect( mockOnMouseEnter ).toHaveBeenCalledTimes( 1 );
+		render(
+			<Tooltip { ...props } delay={ CUSTOM_DELAY }>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
 
-			// Advance by the usual TOOLTIP_DELAY
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+		const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
 
-			// Tooltip hasn't appeared yet after the usual delay
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+		await user.hover( button );
 
-			// Advance time again, so that we reach the full TEST_DELAY time
-			act( () => jest.advanceTimersByTime( TEST_DELAY - TOOLTIP_DELAY ) );
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
 
-			// Tooltip shows after TEST_DELAY time
-			const tooltip = screen.getByText( 'Help text' );
-			expect( tooltip ).toBeVisible();
+		await waitFor( () =>
+			expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+		);
 
-			expect( mockOnFocus ).not.toHaveBeenCalled();
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+			).toBePositionedPopover()
+		);
+	} );
 
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
+	it( 'should show tooltip when an element is disabled', async () => {
+		const user = userEvent.setup();
 
-		it( 'should show tooltip when an element is disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+		render(
+			<Tooltip { ...props }>
+				<Button disabled>Click me</Button>
+			</Tooltip>
+		);
 
-			const { container } = render(
-				<Tooltip text="Show helpful text here">
-					<button disabled>Click me</button>
-				</Tooltip>
-			);
+		const button = screen.getByRole( 'button', { name: /Click me/i } );
 
-			const button = screen.getByRole( 'button', { name: 'Click me' } );
-			expect( button ).toBeVisible();
-			expect( button ).toBeDisabled();
+		expect( button ).toBeVisible();
+		expect( button ).toBeDisabled();
 
-			// Note: this is testing for implementation details,
-			// but couldn't find a better way.
-			const buttonRect = button.getBoundingClientRect();
-			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-			const eventCatcher = container.querySelector( '.event-catcher' );
-			const eventCatcherRect = eventCatcher.getBoundingClientRect();
-			expect( buttonRect ).toEqual( eventCatcherRect );
+		await user.hover( button );
 
-			await user.hover( eventCatcher );
+		await waitFor( () =>
+			expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+		);
 
-			// Tooltip hasn't appeared yet
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
 			expect(
-				screen.queryByText( 'Show helpful text here' )
-			).not.toBeInTheDocument();
-
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
-
-			// Tooltip shows after the delay
-			const tooltip = screen.getByText( 'Show helpful text here' );
-			expect( tooltip ).toBeVisible();
-
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
-
-		it( 'should not emit events back to children when they are disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const onClickMock = jest.fn();
-			const { container } = render(
-				<Tooltip text="Show helpful text here">
-					<button disabled onClick={ onClickMock }>
-						Click me
-					</button>
+				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+			).toBePositionedPopover()
+		);
+	} );
+
+	it( 'should not emit events back to children when they are disabled', async () => {
+		const user = userEvent.setup();
+		const onClickMock = jest.fn();
+
+		const { container } = render(
+			<Tooltip { ...props }>
+				<Button disabled onClick={ onClickMock }>
+					Click me
+				</Button>
+			</Tooltip>
+		);
+
+		// Note: this is testing for implementation details,
+		// but couldn't find a better way.
+		const buttonRect = screen
+			.getByRole( 'button', { name: 'Click me' } )
+			.getBoundingClientRect();
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const eventCatcher = container.querySelector( '.event-catcher' );
+		await user.click( eventCatcher );
+		expect( onClickMock ).not.toHaveBeenCalled();
+
+		const eventCatcherRect = eventCatcher.getBoundingClientRect();
+		expect( buttonRect ).toEqual( eventCatcherRect );
+	} );
+
+	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;
+
+		render(
+			<>
+				<Tooltip { ...props }>
+					<Button
+						onMouseEnter={ onMouseEnterMock }
+						onMouseLeave={ onMouseLeaveMock }
+					>
+						Hover Me!
+					</Button>
 				</Tooltip>
-			);
-
-			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-			const eventCatcher = container.querySelector( '.event-catcher' );
-			await user.click( eventCatcher );
-			expect( onClickMock ).not.toHaveBeenCalled();
-		} );
-
-		it( 'should not show tooltip if the mouse leaves the anchor before the tooltip has shown', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const MOUSE_LEAVE_DELAY = TOOLTIP_DELAY - 200;
-			const onMouseEnterMock = jest.fn();
-			const onMouseLeaveMock = jest.fn();
-
-			render(
-				<>
-					<Tooltip text="Help text">
-						<button
-							onMouseEnter={ onMouseEnterMock }
-							onMouseLeave={ onMouseLeaveMock }
-						>
-							Hover Me!
-						</button>
-					</Tooltip>
-					<button>Hover me instead!</button>
-				</>
-			);
-
-			const externalButton = screen.getByRole( 'button', {
-				name: 'Hover me instead!',
-			} );
-			const tooltipButton = screen.getByRole( 'button', {
+				<Button>Hover me instead!</Button>
+			</>
+		);
+
+		await user.hover(
+			screen.getByRole( 'button', {
 				name: 'Hover Me!',
-			} );
+			} )
+		);
 
-			await user.hover( tooltipButton );
+		// Tooltip hasn't appeared yet
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
 
-			// Tooltip hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+		// Advance time by MOUSE_LEAVE_DELAY time
+		await new Promise( ( resolve ) =>
+			setTimeout( resolve, MOUSE_LEAVE_DELAY )
+		);
 
-			// Advance time by MOUSE_LEAVE_DELAY time
-			act( () => jest.advanceTimersByTime( MOUSE_LEAVE_DELAY ) );
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
 
-			// Hover the other button, meaning that the mouse will leave the tooltip anchor
-			await user.hover( externalButton );
+		// Hover the other button, meaning that the mouse will leave the tooltip anchor
+		await user.hover(
+			screen.getByRole( 'button', {
+				name: 'Hover me instead!',
+			} )
+		);
 
-			// Tooltip still hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
-			expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
+		// Tooltip still hasn't appeared yet
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+		expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
 
-			// Advance time again, so that we reach the full TOOLTIP_DELAY time
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+		// Advance time again, so that we reach the full TOOLTIP_DELAY time
+		await new Promise( ( resolve ) =>
+			setTimeout( resolve, TOOLTIP_DELAY )
+		);
 
-			// Tooltip won't show, since the mouse has left the anchor
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-		} );
+		// Tooltip won't show, since the mouse has left the tooltip anchor
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+	} );
 
-		it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+	it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
+		const user = userEvent.setup();
 
-			render(
-				<Tooltip text="Help text" shortcut="shortcut text">
-					<button>Hover Me!</button>
-				</Tooltip>
-			);
-
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			await user.hover( button );
-
-			const tooltip = await screen.findByText( 'shortcut text' );
-			expect( tooltip ).toBeVisible();
-
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
-
-		it( 'should render the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render(
-				<Tooltip
-					text="Help text"
-					shortcut={ {
-						display: 'shortcut text',
-						ariaLabel: 'shortcut label',
-					} }
-				>
-					<button>Hover Me!</button>
-				</Tooltip>
-			);
+		render(
+			<Tooltip { ...props } shortcut="shortcut text">
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
 
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			await user.hover( button );
+		await user.hover( screen.getByRole( 'button', { name: 'Hover Me!' } ) );
 
-			const tooltip = await screen.findByLabelText( 'shortcut label' );
-			expect( tooltip ).toHaveTextContent( 'shortcut text' );
+		await waitFor( () =>
+			expect( screen.getByText( 'shortcut text' ) ).toBeVisible()
+		);
 
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'shortcut text' ) )
+			).toBePositionedPopover()
+		);
+	} );
+
+	it( 'should render the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<Tooltip
+				{ ...props }
+				shortcut={ {
+					display: '⇧⌘,',
+					ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
+				} }
+			>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
+
+		await user.hover( screen.getByRole( 'button', { name: 'Hover Me!' } ) );
+
+		await waitFor( () =>
+			expect( screen.getByText( '⇧⌘,' ) ).toBeVisible()
+		);
+
+		expect( screen.getByText( '⇧⌘,' ) ).toHaveAttribute(
+			'aria-label',
+			'Control + Shift + Comma'
+		);
+
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( '⇧⌘,' ) )
+			).toBePositionedPopover()
+		);
 	} );
 } );