Fix Button size violations in misc. unit tests (WordPress#68154)

Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: tyxla <[email protected]>
MaxMood96 · Dec 20, 2024 · a9f93d8 · a9f93d8
1 parent 0adbeba
commit a9f93d8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx
@@ -6,19 +6,26 @@ import { render, screen } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { createRef } from '@wordpress/element';
+import { createRef, forwardRef } from '@wordpress/element';
 import { plusCircle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import Button from '..';
+import _Button from '..';
 import Tooltip from '../../tooltip';
 import cleanupTooltip from '../../tooltip/test/utils';
 import { press } from '@ariakit/test';
 
 jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
 
+const Button = forwardRef(
+	(
+		props: React.ComponentProps< typeof _Button >,
+		ref: React.ForwardedRef< unknown >
+	) => <_Button __next40pxDefaultSize { ...props } ref={ ref } />
+);
+
 describe( 'Button', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render a button element with only one class', () => {

diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx
@@ -75,6 +75,7 @@ function CustomNavigatorButton( {
 } ) {
 	return (
 		<Navigator.Button
+			__next40pxDefaultSize
 			onClick={ () => {
 				// Used to spy on the values passed to `navigator.goTo`.
 				onClick?.( { type: 'goTo', path } );
@@ -95,6 +96,7 @@ function CustomNavigatorGoToBackButton( {
 	const { goTo } = useNavigator();
 	return (
 		<Button
+			__next40pxDefaultSize
 			onClick={ () => {
 				goTo( path, { isBack: true } );
 				// Used to spy on the values passed to `navigator.goTo`.
@@ -115,6 +117,7 @@ function CustomNavigatorGoToSkipFocusButton( {
 	const { goTo } = useNavigator();
 	return (
 		<Button
+			__next40pxDefaultSize
 			onClick={ () => {
 				goTo( path, { skipFocus: true } );
 				// Used to spy on the values passed to `navigator.goTo`.
@@ -136,6 +139,7 @@ function CustomNavigatorBackButton( {
 } ) {
 	return (
 		<Navigator.BackButton
+			__next40pxDefaultSize
 			onClick={ () => {
 				// Used to spy on the values passed to `navigator.goBack`.
 				onClick?.( { type: 'goBack' } );

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -357,7 +357,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
     </div>
   </div>
   <button
-    class="components-button"
+    class="components-button is-next-40px-default-size"
     type="button"
   >
     Reset
@@ -626,7 +626,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
     </div>
   </div>
   <button
-    class="components-button"
+    class="components-button is-next-40px-default-size"
     type="button"
   >
     Reset

diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx
@@ -57,9 +57,15 @@ const ControlledToggleGroupControl = ( {
 				} }
 				value={ value }
 			/>
-			<Button onClick={ () => setValue( undefined ) }>Reset</Button>
+			<Button
+				onClick={ () => setValue( undefined ) }
+				__next40pxDefaultSize
+			>
+				Reset
+			</Button>
 			{ extraButtonOptions?.map( ( obj ) => (
 				<Button
+					__next40pxDefaultSize
 					key={ obj.value }
 					onClick={ () => setValue( obj.value ) }
 				>