Skip to content

Commit

Permalink
test: Expand E2E test utilities (#59214)
Browse files Browse the repository at this point in the history
* 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 <dpcalhoun@git.wordpress.org>
Co-authored-by: geriux <geriux@git.wordpress.org>
  • Loading branch information
3 people authored Feb 26, 2024
1 parent a4fdeb2 commit a5721d9
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 0 deletions.
10 changes: 10 additions & 0 deletions packages/react-native-editor/__device-tests__/helpers/test-data.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
32 changes: 32 additions & 0 deletions packages/react-native-editor/__device-tests__/pages/editor-page.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -1076,6 +1106,8 @@ const blockNames = {
button: 'Button',
preformatted: 'Preformatted',
unsupported: 'Unsupported',
mediaText: 'Media & Text',
quote: 'Quote',
};

module.exports = { setupEditor, blockNames };

0 comments on commit a5721d9

Please sign in to comment.