Block Editor: Refactor ColorPaletteControl tests to RTL (#44869)

WordPress · Oct 11, 2022 · 553a2c2 · 553a2c2
1 parent f3995af
commit 553a2c2
Showing 1 changed file with 49 additions and 77 deletions.
diff --git a/packages/block-editor/src/components/colors-gradients/test/control.js b/packages/block-editor/src/components/colors-gradients/test/control.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import { create, act } from 'react-test-renderer';
 
 /**
  * Internal dependencies
@@ -11,15 +10,6 @@ import ColorGradientControl from '../control';
 
 const noop = () => {};
 
-const getButtonWithAriaLabelStartPredicate =
-	( ariaLabelStart ) => ( element ) => {
-		return (
-			element.type === 'button' &&
-			element.props[ 'aria-label' ] &&
-			element.props[ 'aria-label' ].startsWith( ariaLabelStart )
-		);
-	};
-
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
 		render(
@@ -64,25 +54,21 @@ describe( 'ColorPaletteControl', () => {
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
-		let wrapper;
-
-		await act( async () => {
-			wrapper = create(
-				<ColorGradientControl
-					label="Test Color Gradient"
-					colorValue="#f00"
-					colors={ [
-						{ color: '#f00', name: 'red' },
-						{ color: '#0f0', name: 'green' },
-					] }
-					gradients={ [] }
-					disableCustomColors={ false }
-					disableCustomGradients={ true }
-					onColorChange={ noop }
-					onGradientChange={ noop }
-				/>
-			);
-		} );
+		render(
+			<ColorGradientControl
+				label="Test Color Gradient"
+				colorValue="#f00"
+				colors={ [
+					{ color: '#f00', name: 'red' },
+					{ color: '#0f0', name: 'green' },
+				] }
+				gradients={ [] }
+				disableCustomColors={ false }
+				disableCustomGradients={ true }
+				onColorChange={ noop }
+				onGradientChange={ noop }
+			/>
+		);
 
 		// Is not showing the two tab buttons.
 		expect(
@@ -93,43 +79,35 @@ describe( 'ColorPaletteControl', () => {
 		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect(
-			wrapper.root.findAll(
-				getButtonWithAriaLabelStartPredicate( 'Color:' )
-			)
-		).toHaveLength( 2 );
+		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
 	} );
 
 	it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {
-		let wrapper;
-
-		await act( async () => {
-			wrapper = create(
-				<ColorGradientControl
-					label="Test Color Gradient"
-					colorValue="#f00"
-					colors={ [] }
-					gradients={ [
-						{
-							gradient:
-								'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
-							name: 'Vivid cyan blue to vivid purple',
-							slug: 'vivid-cyan-blue-to-vivid-purple',
-						},
-						{
-							gradient:
-								'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-							name: 'Light green cyan to vivid green cyan',
-							slug: 'light-green-cyan-to-vivid-green-cyan',
-						},
-					] }
-					disableCustomColors={ true }
-					disableCustomGradients={ false }
-					onColorChange={ noop }
-					onGradientChange={ noop }
-				/>
-			);
-		} );
+		render(
+			<ColorGradientControl
+				label="Test Color Gradient"
+				colorValue="#f00"
+				colors={ [] }
+				gradients={ [
+					{
+						gradient:
+							'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
+						name: 'Vivid cyan blue to vivid purple',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					},
+					{
+						gradient:
+							'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+						name: 'Light green cyan to vivid green cyan',
+						slug: 'light-green-cyan-to-vivid-green-cyan',
+					},
+				] }
+				disableCustomColors={ true }
+				disableCustomGradients={ false }
+				onColorChange={ noop }
+				onGradientChange={ noop }
+			/>
+		);
 
 		// Is not showing the two tab buttons.
 		expect(
@@ -140,22 +118,16 @@ describe( 'ColorPaletteControl', () => {
 		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Gradients.
-		expect(
-			wrapper.root.findAll(
-				getButtonWithAriaLabelStartPredicate( 'Gradient:' )
-			)
-		).toHaveLength( 2 );
+		expect( screen.getAllByLabelText( /^Gradient:/ ) ).toHaveLength( 2 );
 
 		// Is showing the custom gradient picker.
 		expect(
-			wrapper.root.findAll(
-				( element ) =>
-					element.props &&
-					element.props.className &&
-					element.props.className.includes(
-						'components-custom-gradient-picker'
-					)
-			).length
-		).toBeGreaterThanOrEqual( 1 );
+			screen.getAllByRole( 'button', {
+				expanded: false,
+				name: /^Gradient control point at position/,
+			} )[ 0 ]
+		).toHaveClass(
+			'components-custom-gradient-picker__control-point-button'
+		);
 	} );
 } );