How to use @wordpress/e2e-test-utils - 10 common examples

it( 'should display non-template reusable blocks in the reusable blocks management screen', async () => {
				const titleSelector = '.page-title .row-title';

				await visitAdminPage( 'edit.php', 'post_type=wp_block' );
				await page.waitForSelector( titleSelector );

				// Check that it is untitled
				const title = await page.$eval(
					titleSelector,
					( element ) => element.innerText,
				);
				expect( title ).toBe( 'Untitled Reusable Block' );
			} );

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 set the featured image on uploading a big enough image as the Background Media', async () => {
			await createNewPost( { postType: 'amp_story' } );

			// Select the default page block.
			await selectBlockByClientId(
				( await getAllBlocks() )[ 0 ].clientId,
			);

			// Click the media selection button.
			await page.waitForSelector( '.editor-amp-story-page-background' );
			await page.click( '.editor-amp-story-page-background' );
			const uploadedImage = await uploadMedia( LARGE_IMAGE );

			// Select the image from the Media Library.
			await page.waitForSelector( SELECT_BUTTON );
			await page.click( SELECT_BUTTON );

			await clickButton( 'Document' );
			await clickButton( 'Featured Image' );

			// The featured image warning notice text should not appear.

it( 'Should be possible to select padding', async () => {
		expect( console ).toHaveWarned();

		await insertRowBlock();

		// Select first column block
		const columnBlocks = await getColumnBlocks();
		const firstColumnBlockClientId = columnBlocks[ 0 ].clientId;
		await selectBlockByClientId( firstColumnBlockClientId );

		// Select padding
		await openSidebarPanelWithTitle( 'Padding (inside column)' );
		await selectOption( 'Size', 'p-2' );
		const columnData = await getDataValuesOfElement( `#block-${ firstColumnBlockClientId }` );
		expect( columnData.padding ).toMatch( 'p-2' );

		expect( await getEditedPostContent() ).toMatchSnapshot();
	} );
} );

it( 'should allow move to next page', async () => {
			const firstPageClientId = ( await getAllBlocks() )[ 0 ].clientId;
			await insertBlock( 'Page' );
			await insertBlock( 'Page' );
			await goToPreviousPage();
			await goToPreviousPage();

			await selectBlockByClientId( firstPageClientId );
			await page.$( `#block-${ firstPageClientId }` );
			// Wait for transition time 300ms.
			await page.waitFor( 300 );

			await page.$( ACTIVE_PAGE_SELECTOR );
			let block = await page.$( BLOCK_SELECTOR );
			await makeRightClick( block );

			await page.waitForSelector( POPOVER_SELECTOR );

			expect( page ).not.toMatchElement( POPOVER_SELECTOR + ' .right-click-previous-page' );
			expect( page ).toMatchElement( POPOVER_SELECTOR + ' .right-click-next-page' );

			await clickButton( 'Send block to next page' );
			await page.waitForSelector( ACTIVE_PAGE_SELECTOR + ' ' + BLOCK_SELECTOR );
			expect( page ).toMatchElement( ACTIVE_PAGE_SELECTOR + ' ' + BLOCK_SELECTOR );

it( 'should extract the poster image from a newly uploaded background video', async () => {
			await createNewPost( { postType: 'amp_story' } );

			// Select the default page block.
			await selectBlockByClientId(
				( await getAllBlocks() )[ 0 ].clientId,
			);

			// Click the media selection button.
			await page.waitForSelector( '.editor-amp-story-page-background' );
			await page.click( '.editor-amp-story-page-background' );
			await uploadMedia( 'clothes-hanged-to-dry-1295231.mp4' );

			// Insert the uploaded video.
			await page.click( '.media-modal button.media-button-select' );

			// Wait for video to be inserted.
			await page.waitForSelector( '.editor-amp-story-page-video' );

			// Wait for poster to be extracted.
			await expect( page ).toMatchElement( '#editor-amp-story-page-poster' );

it( 'should not display a warning in the Media Library for an appropriate video file size', async () => {
			await createNewPost( { postType: 'amp_story' } );

			// Select the default page block.
			await selectBlockByClientId(
				( await getAllBlocks() )[ 0 ].clientId,
			);

			// Click the media selection button.
			await page.waitForSelector( '.editor-amp-story-page-background' );
			await page.click( '.editor-amp-story-page-background' );
			await uploadMedia( CORRECT_VIDEO );

			// The warning Notice component should not appear.
			await expect( page ).not.toMatchElement( NOTICE_SELECTOR );

			// The warning notice text should not appear.
			await expect( page ).not.toMatch( EXPECTED_NOTICE_TEXT );

			// It should be possible to insert the uploaded video.
			await expect( page ).toClick( SELECT_BUTTON );

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 );
		} );