Resolve test errors

WordPress · Feb 10, 2023 · db1449e · db1449e
1 parent 51659d7
commit db1449e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/packages/components/src/panel/body.tsx b/packages/components/src/panel/body.tsx
@@ -50,7 +50,7 @@ export function UnforwardedPanelBody(
 	// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 	const scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';
 
-	const handleOnToggle = ( event: MouseEvent ) => {
+	const handleOnToggle = ( event: React.MouseEvent ) => {
 		event.preventDefault();
 		const next = ! isOpened;
 		setIsOpened( next );
@@ -107,6 +107,7 @@ const PanelBodyTitle = forwardRef(
 			icon,
 			title,
 			buttonProps,
+			onClick,
 		}: WordPressComponentProps< PanelBodyTitleProps, 'button' >,
 		ref: ForwardedRef< any >
 	) => {
@@ -118,6 +119,7 @@ const PanelBodyTitle = forwardRef(
 					className="components-panel__body-toggle"
 					aria-expanded={ isOpened }
 					ref={ ref }
+					{ ...{ onClick } }
 					{ ...buttonProps }
 				>
 					{ /*

diff --git a/packages/components/src/panel/test/body.tsx b/packages/components/src/panel/test/body.tsx
@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
  * Internal dependencies
  */
 import { PanelBody } from '../body';
+import type { PanelBodyProps } from '../types';
 
 describe( 'PanelBody', () => {
 	describe( 'basic rendering', () => {
@@ -50,7 +51,7 @@ describe( 'PanelBody', () => {
 		it( 'should call the children function, if specified', () => {
 			const { rerender } = render(
 				<PanelBody opened>
-					{ ( { opened } ) => (
+					{ ( { opened }: PanelBodyProps ) => (
 						<div hidden={ opened } data-testid="inner-content">
 							Content
 						</div>
@@ -66,7 +67,7 @@ describe( 'PanelBody', () => {
 
 			rerender(
 				<PanelBody opened={ false }>
-					{ ( { opened } ) => (
+					{ ( { opened }: PanelBodyProps ) => (
 						<div hidden={ opened } data-testid="inner-content">
 							Content
 						</div>
@@ -89,29 +90,25 @@ describe( 'PanelBody', () => {
 				</PanelBody>
 			);
 
-			let panelContent = screen.getByTestId( 'inner-content' );
-
-			expect( panelContent ).toBeVisible();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 
 			rerender(
 				<PanelBody opened={ false }>
 					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			panelContent = screen.queryByTestId( 'inner-content' );
-
-			expect( panelContent ).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId( 'inner-content' )
+			).not.toBeInTheDocument();
 
 			rerender(
 				<PanelBody opened>
 					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			panelContent = screen.getByTestId( 'inner-content' );
-
-			expect( panelContent ).toBeVisible();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should toggle when clicking header', async () => {
@@ -123,22 +120,21 @@ describe( 'PanelBody', () => {
 				</PanelBody>
 			);
 
-			let panelContent = screen.queryByTestId( 'inner-content' );
 			const panelToggle = screen.getByRole( 'button', { name: 'Panel' } );
 
-			expect( panelContent ).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId( 'inner-content' )
+			).not.toBeInTheDocument();
 
 			await user.click( panelToggle );
 
-			panelContent = screen.getByTestId( 'inner-content' );
-
-			expect( panelContent ).toBeVisible();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 
 			await user.click( panelToggle );
 
-			panelContent = screen.queryByTestId( 'inner-content' );
-
-			expect( panelContent ).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId( 'inner-content' )
+			).not.toBeInTheDocument();
 		} );
 
 		it( 'should pass button props to panel title', async () => {

diff --git a/packages/components/src/panel/types.ts b/packages/components/src/panel/types.ts
@@ -109,5 +109,5 @@ export type PanelBodyTitleProps = {
 	 * A callback invoked when 'PanelBodyTitle' is clicked. It is used to
 	 * toggle the body opened or closed.
 	 */
-	onClick: ( event: MouseEvent ) => void;
+	onClick: ( event: React.MouseEvent ) => void;
 };