From db1449e741312ad48d8c412767117cd00dafb834 Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Thu, 9 Feb 2023 22:30:14 -0800
Subject: [PATCH] Resolve test errors

---
 packages/components/src/panel/body.tsx      |  4 ++-
 packages/components/src/panel/test/body.tsx | 34 +++++++++------------
 packages/components/src/panel/types.ts      |  2 +-
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/panel/body.tsx b/packages/components/src/panel/body.tsx
index 2c01850c010641..7f97f80b0d834a 100644
--- 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
index 1f282256fb2616..226c6b2b502e1b 100644
--- 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,9 +90,7 @@ describe( 'PanelBody', () => {
 				</PanelBody>
 			);
 
-			let panelContent = screen.getByTestId( 'inner-content' );
-
-			expect( panelContent ).toBeVisible();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 
 			rerender(
 				<PanelBody opened={ false }>
@@ -99,9 +98,9 @@ describe( 'PanelBody', () => {
 				</PanelBody>
 			);
 
-			panelContent = screen.queryByTestId( 'inner-content' );
-
-			expect( panelContent ).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId( 'inner-content' )
+			).not.toBeInTheDocument();
 
 			rerender(
 				<PanelBody opened>
@@ -109,9 +108,7 @@ describe( 'PanelBody', () => {
 				</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
index 66da8e71106075..20337043664cfe 100644
--- 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;
 };