diff --git a/packages/block-editor/src/components/line-height-control/test/index.js b/packages/block-editor/src/components/line-height-control/test/index.js index 606ee5627fb3bd..7a101219f2f827 100644 --- a/packages/block-editor/src/components/line-height-control/test/index.js +++ b/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( ); 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( ); 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( ); 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( ); 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 ); } ); } );