Update LineHeightControl unit tests (#61337)

Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>

packages/block-editor/src/components/line-height-control/test/index.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { UP, DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -29,35 +29,37 @@ const ControlledLineHeightControl = () => {
 };
 
 describe( 'LineHeightControl', () => {
-	it( 'should immediately step up from the default value if up-arrowed from an unset state', () => {
+	it( 'should immediately step up from the default value if up-arrowed from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.keyDown( input, { keyCode: UP } );
+		await user.click( input );
+		await user.keyboard( '{ArrowUp}' );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
-	it( 'should immediately step down from the default value if down-arrowed from an unset state', () => {
+	it( 'should immediately step down from the default value if down-arrowed from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.keyDown( input, { keyCode: DOWN } );
+		await user.click( input );
+		await user.keyboard( '{ArrowDown}' );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 
-	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', () => {
+	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.change( input, { target: { value: 0.1 } } ); // simulates click on spin button up
+		await user.click( screen.getByRole( 'button', { name: 'Increment' } ) );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
-	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', () => {
+	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.change( input, { target: { value: 0 } } ); // simulates click on spin button down
+		await user.click( screen.getByRole( 'button', { name: 'Decrement' } ) );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 } );