From 73a2affadc6826a96bda4b7dcf54d2d9d3b0f99f Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 3 May 2022 16:09:25 +0200
Subject: [PATCH] Click document.body to trigger blur event

---
 .../src/unit-control/test/index.tsx           | 57 ++++++++-----------
 1 file changed, 23 insertions(+), 34 deletions(-)

diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx
index 46f819d90ea61..77137a657a2e1 100644
--- a/packages/components/src/unit-control/test/index.tsx
+++ b/packages/components/src/unit-control/test/index.tsx
@@ -274,14 +274,11 @@ describe( 'UnitControl', () => {
 			};
 
 			const { user } = render(
-				<>
-					<button>Click me</button>
-					<UnitControl
-						value={ state }
-						onChange={ setState }
-						onBlur={ onBlurSpy }
-					/>
-				</>
+				<UnitControl
+					value={ state }
+					onChange={ setState }
+					onBlur={ onBlurSpy }
+				/>
 			);
 
 			const input = getInput();
@@ -291,9 +288,8 @@ describe( 'UnitControl', () => {
 			expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
 			expect( onChangeSpy ).toHaveBeenLastCalledWith( '41%' );
 
-			// Clicking on the button should cause the `onBlur` callback to fire.
-			const button = screen.getByRole( 'button' );
-			await user.click( button );
+			// Clicking document.body to trigget a blur event on the input.
+			await user.click( document.body );
 
 			expect( onBlurSpy ).toHaveBeenCalledTimes( 1 );
 		} );
@@ -309,15 +305,12 @@ describe( 'UnitControl', () => {
 			};
 
 			const { user } = render(
-				<>
-					<button>Click me</button>
-					<UnitControl
-						value={ state }
-						onChange={ setState }
-						onUnitChange={ onUnitChangeSpy }
-						isPressEnterToChange
-					/>
-				</>
+				<UnitControl
+					value={ state }
+					onChange={ setState }
+					onUnitChange={ onUnitChangeSpy }
+					isPressEnterToChange
+				/>
 			);
 
 			// Input type is `text` when the `isPressEnterToChange` prop is passed
@@ -327,10 +320,10 @@ describe( 'UnitControl', () => {
 
 			// This is because `isPressEnterToChange` is `true`
 			expect( onChangeSpy ).not.toHaveBeenCalled();
+			expect( onUnitChangeSpy ).not.toHaveBeenCalled();
 
-			// Clicking on the button should cause the `onBlur` callback to fire.
-			const button = screen.getByRole( 'button' );
-			await user.click( button );
+			// Clicking document.body to trigget a blur event on the input.
+			await user.click( document.body );
 
 			// TODO: investigate why `onChange` gets called twice instead of once
 			expect( onChangeSpy ).toHaveBeenCalledTimes( 2 );
@@ -515,14 +508,11 @@ describe( 'UnitControl', () => {
 			const onBlurSpy = jest.fn();
 
 			const { user } = render(
-				<>
-					<button>Click me</button>
-					<UnitControl
-						value="15px"
-						onUnitChange={ onUnitChangeSpy }
-						onBlur={ onBlurSpy }
-					/>
-				</>
+				<UnitControl
+					value="15px"
+					onUnitChange={ onUnitChangeSpy }
+					onBlur={ onBlurSpy }
+				/>
 			);
 
 			const select = getSelect();
@@ -534,9 +524,8 @@ describe( 'UnitControl', () => {
 				expect.anything()
 			);
 
-			// Clicking on the button should cause the `onBlur` callback to fire.
-			const button = screen.getByRole( 'button' );
-			await user.click( button );
+			// Clicking document.body to trigget a blur event on the input.
+			await user.click( document.body );
 
 			expect( onBlurSpy ).toHaveBeenCalledTimes( 1 );
 		} );