test: Expand E2E test utilities (#59214)

* test: Add Gallery block with two images test fixture

Simplify rendering a smaller Gallery block.

* test: Add `selectBlockByType` utility

Simplify selecting a block via tapping it.

* test: `selectBlockByType` allows offsetting tap position

Some blocks contain nested pressables that need to be avoided for
certain test cases.

* test: Add Media & Text block name fixture

* test: Add Quote block name fixture

* test: `selectBlockByType` allows computed offset

Allowing composing offsets based upon the block dimensions, making it
easier to target, e.g., the top-left corner.

* test: Repurpose `selectBlockByType` to `selectBlock`

Restructure the utility to reuse the existing `getBlockAtPosition`
utility, encouraging composition of utilities rather than duplication.

Co-authored-by: dcalhoun <[email protected]>
Co-authored-by: geriux <[email protected]>

packages/react-native-editor/__device-tests__/helpers/test-data.js

@@ -203,6 +203,16 @@ exports.galleryBlock = `<!-- wp:gallery {"columns":8,"linkTo":"none","className"
 </figure>
 <!-- /wp:gallery -->`;
 
+exports.galleryBlockTwoImages = `<!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
+<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<!-- /wp:image -->
+</figure>
+<!-- /wp:gallery -->`;
+
 exports.groupNestedStructure = `<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#f9d0d0"}}} -->
 <p class="has-background" style="background-color:#f9d0d0">Level 1</p>

packages/react-native-editor/__device-tests__/pages/editor-page.js

@@ -205,6 +205,36 @@ class EditorPage {
 		return lastElementFound;
 	}
 
+	/**
+	 * Selects a block.
+	 *
+	 * @param {import('webdriverio').ChainablePromiseElement} block                           The block to select.
+	 * @param {Object}                                        options                         Configuration options.
+	 * @param {Object}                                        [options.offset={ x: 0, y: 0 }] The offset for the click position.
+	 * @param {number|Function}                               [options.offset.x=0]            The x-coordinate offset or a function that calculates the offset based on the block's width.
+	 * @param {number|Function}                               [options.offset.y=0]            The y-coordinate offset or a function that calculates the offset based on the block's height.
+	 *
+	 * @return {import('webdriverio').ChainablePromiseElement} The selected block.
+	 */
+	async selectBlock( block, options = {} ) {
+		const { offset = { x: 0, y: 0 } } = options;
+		const size = await block.getSize();
+
+		let offsetX = offset.x;
+		if ( typeof offset.x === 'function' ) {
+			offsetX = offset.x( size.width );
+		}
+
+		let offsetY = offset.y;
+		if ( typeof offset.y === 'function' ) {
+			offsetY = offset.y( size.height );
+		}
+
+		await block.click( { x: offsetX, y: offsetY } );
+
+		return block;
+	}
+
 	async getFirstBlockVisible() {
 		const firstBlockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, " Block. Row ")]`;
 		return await waitForVisible( this.driver, firstBlockLocator );
@@ -1076,6 +1106,8 @@ const blockNames = {
 	button: 'Button',
 	preformatted: 'Preformatted',
 	unsupported: 'Unsupported',
+	mediaText: 'Media & Text',
+	quote: 'Quote',
 };
 
 module.exports = { setupEditor, blockNames };