Block Editor: Refactor withColors tests to @testing-library/react (#4…

…3976)
WordPress · Sep 12, 2022 · 74cd9f9 · 74cd9f9
1 parent 7a6d952
commit 74cd9f9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 35 deletions.
diff --git a/packages/block-editor/src/components/colors/test/__snapshots__/with-colors.js.snap b/packages/block-editor/src/components/colors/test/__snapshots__/with-colors.js.snap
diff --git a/packages/block-editor/src/components/colors/test/with-colors.js b/packages/block-editor/src/components/colors/test/with-colors.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -13,18 +14,37 @@ describe( 'createCustomColorsHOC', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
-		const EnhancedComponent = withCustomColors( 'backgroundColor' )( () => (
-			<div />
-		) );
+		const BaseComponent = jest.fn( () => <div /> );
+		const EnhancedComponent =
+			withCustomColors( 'backgroundColor' )( BaseComponent );
 
-		const wrapper = shallow(
+		render(
 			<EnhancedComponent attributes={ { backgroundColor: null } } />
 		);
 
-		expect( wrapper.dive() ).toMatchSnapshot();
+		expect( BaseComponent ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				attributes: {
+					backgroundColor: null,
+				},
+				backgroundColor: {
+					class: undefined,
+					color: undefined,
+				},
+				colorUtils: {
+					getMostReadableColor: expect.any( Function ),
+				},
+				colors: undefined,
+				setBackgroundColor: expect.any( Function ),
+			} ),
+			expect.anything()
+		);
 	} );
 
-	it( 'setting the color to a value in the provided custom color array updated the backgroundColor attribute', () => {
+	it( 'setting the color to a value in the provided custom color array updated the backgroundColor attribute', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
@@ -38,21 +58,25 @@ describe( 'createCustomColorsHOC', () => {
 
 		const setAttributes = jest.fn();
 
-		const wrapper = mount(
+		render(
 			<EnhancedComponent
 				attributes={ { backgroundColor: null } }
 				setAttributes={ setAttributes }
 			/>
 		);
 
-		wrapper.find( 'button' ).simulate( 'click' );
+		await user.click( screen.getByRole( 'button' ) );
+
 		expect( setAttributes ).toHaveBeenCalledWith( {
 			backgroundColor: 'red',
 			customBackgroundColor: undefined,
 		} );
 	} );
 
-	it( 'setting the color to a value not in the provided custom color array updates customBackgroundColor attribute', () => {
+	it( 'setting the color to a value not in the provided custom color array updates customBackgroundColor attribute', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
@@ -66,14 +90,15 @@ describe( 'createCustomColorsHOC', () => {
 
 		const setAttributes = jest.fn();
 
-		const wrapper = mount(
+		render(
 			<EnhancedComponent
 				attributes={ { backgroundColor: null } }
 				setAttributes={ setAttributes }
 			/>
 		);
 
-		wrapper.find( 'button' ).simulate( 'click' );
+		await user.click( screen.getByRole( 'button' ) );
+
 		expect( setAttributes ).toHaveBeenCalledWith( {
 			backgroundColor: undefined,
 			customBackgroundColor: '000000',