From 9815406437e9a36bd26380f9fddc95bb5aab0c15 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <tyxla@abv.bg>
Date: Thu, 8 Sep 2022 13:17:46 +0300
Subject: [PATCH] Block Editor: Refactor withColors tests to
 @testing-library/react

---
 .../test/__snapshots__/with-colors.js.snap    | 23 ---------
 .../src/components/colors/test/with-colors.js | 49 ++++++++++++++-----
 2 files changed, 37 insertions(+), 35 deletions(-)
 delete mode 100644 packages/block-editor/src/components/colors/test/__snapshots__/with-colors.js.snap

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
deleted file mode 100644
index 9a99ff083e73b3..00000000000000
--- a/packages/block-editor/src/components/colors/test/__snapshots__/with-colors.js.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`createCustomColorsHOC provides the wrapped component with color values and setter functions as props 1`] = `
-<Component
-  attributes={
-    Object {
-      "backgroundColor": null,
-    }
-  }
-  backgroundColor={
-    Object {
-      "class": undefined,
-      "color": undefined,
-    }
-  }
-  colorUtils={
-    Object {
-      "getMostReadableColor": [Function],
-    }
-  }
-  setBackgroundColor={[Function]}
-/>
-`;
diff --git a/packages/block-editor/src/components/colors/test/with-colors.js b/packages/block-editor/src/components/colors/test/with-colors.js
index fefc3c68527d99..dc1efe7e386dad 100644
--- 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',