How to use the @wordpress/e2e-test-utils.dragAndResize function in @wordpress/e2e-test-utils

it( 'should not move the position of the block when the height is not changing: top', async () => {
			// Ensure first that the block is already minimum height.
			const resizableHandleTop = await page.$( '.wp-block.is-selected .components-resizable-box__handle-top' );
			await dragAndResize( resizableHandleTop, { x: 0, y: 250 } );
			const dimensions = await getSelectedBlockDimensions();
			expect( dimensions.height ).toStrictEqual( textBlockMinHeight );

			// Get the initial position.
			const { positionTop: positionTopBefore } = await getSelectedBlockPosition();
			// Try resizing again.
			await dragAndResize( resizableHandleTop, { x: 0, y: 250 } );
			const { positionTop } = await getSelectedBlockPosition();
			expect( positionTop ).toStrictEqual( positionTopBefore );

			// Rotate the block and try again. This will rotate the block -75 degrees.
			await rotateSelectedBlock();
			await dragAndResize( resizableHandleTop, { x: 0, y: 250 } );
			const { positionTop: positionTopRotated } = await getSelectedBlockPosition();
			expect( positionTopRotated ).toStrictEqual( positionTopBefore );
		} );
	} );

it( 'should keep text content height when resizing when max font size', async () => {
			// click to enable edit and input text to have non-empty textbox
			await page.click( '.wp-block-amp-story-text' );
			await page.keyboard.type( 'Hello' );

			// deselect element again by clicking the background and then reselect element (but now not in editable mode)
			await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
			await selectBlockByClassName( 'wp-block-amp-story-text' );

			// resize to make sure font-size will be maximum
			const resizableHandleBottom = await page.$( '.wp-block.is-selected .components-resizable-box__handle-bottom' );
			await dragAndResize( resizableHandleBottom, { x: 0, y: 100 } );

			const initialDimensions = await getSelectedTextBoxDimensions();

			await dragAndResize( resizableHandleBottom, { x: 0, y: 150 } );
			await getSelectedBlockDimensions();

			const newDimensions = await getSelectedTextBoxDimensions();

			expect( newDimensions.height ).toStrictEqual( initialDimensions.height );
		} );

it( 'should not change the block position when resizing from left handle and minimum width has been reached', async () => {
			const resizableHandleLeft = await page.$( '.wp-block.is-selected .components-resizable-box__handle-left' );
			await dragAndResize( resizableHandleLeft, { x: defaultWidth - textBlockMinWidth, y: 0 } );
			const { width } = await getSelectedBlockDimensions();
			expect( width ).toStrictEqual( textBlockMinWidth );

			const positionLeft = await page.evaluate( () => document.querySelector( '.wp-block.is-selected' ).parentNode.style.left );
			expect( positionLeft ).toContain( '%' );

			// Drag the resizer more.
			await dragAndResize( resizableHandleLeft, { x: 300, y: 0 } );
			const positionLeftAfter = await page.evaluate( () => document.querySelector( '.wp-block.is-selected' ).parentNode.style.left );
			// Verify that that the positionLeft has not changed.
			expect( positionLeftAfter ).toStrictEqual( positionLeft );
		} );

it( 'should not resize smaller than the set minimum width: right', async () => {
			const resizableHandleRight = await page.$( '.wp-block.is-selected .components-resizable-box__handle-right' );
			await dragAndResize( resizableHandleRight, { x: -300, y: 0 } );
			const dimensions = await getSelectedBlockDimensions();
			expect( dimensions.width ).toStrictEqual( textBlockMinWidth );
		} );

it( 'should change the top and left position correctly when resizing a rotated block: topRight', async () => {
			const { positionLeft: positionLeftBefore, positionTop: positionTopBefore } = await getSelectedBlockPosition();
			expect( positionLeftBefore ).toStrictEqual( '5%' );
			expect( positionTopBefore ).toStrictEqual( '10%' );

			const handle = await page.$( '.wp-block.is-selected .components-resizable-box__handle-right.components-resizable-box__handle-top' );
			await dragAndResize( handle, { x: -100, y: 100 } );

			const { positionLeft, positionTop } = await getSelectedBlockPosition();
			expect( positionLeft ).toStrictEqual( '8.3%' );
			expect( positionTop ).toStrictEqual( '12.59%' );
		} );

it( 'should change the width and height correctly when resizing: topLeft', async () => {
			const resizableHandleTopLeft = await page.$( '.wp-block.is-selected .components-resizable-box__handle-left.components-resizable-box__handle-top' );
			await dragAndResize( resizableHandleTopLeft, { x: -100, y: -100 } );
			const { width, height } = await getSelectedBlockDimensions();
			expect( width ).toStrictEqual( 350 );
			expect( height ).toStrictEqual( 160 );
		} );

async function rotateSelectedBlock() {
	const rotationHandle = await page.$( '.wp-block.is-selected .rotatable-box-wrap__handle' );
	await dragAndResize( rotationHandle, { x: 250, y: 0 } );
}