Skip to content

[RNMobile] - Add optional wait in getBlockAtPosition #40078

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jostnes merged 3 commits into from
Apr 8, 2022
Merged

[RNMobile] - Add optional wait in getBlockAtPosition #40078

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
328e8ec
move test data and create optional wait for getBlockAtPosition
jostnes Apr 6, 2022
eda2d66
lint fix extra space
jostnes Apr 6, 2022
34c5c24
rename for clarity
jostnes Apr 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 12 additions & 18 deletions packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,15 +133,12 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
} );

it( 'should be able to merge blocks with unknown html elements', async () => {
await editorPage.setHtmlContent( `
<!-- wp:paragraph -->
<p><unknownhtmlelement>abc</unknownhtmlelement>D</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>E</p>
<!-- /wp:paragraph -->` );

await editorPage.setHtmlContent(
[
testData.unknownElementParagraphBlock,
testData.lettersInParagraphBlock,
].join( '\n\n' )
);
// // Merge paragraphs.
const secondParagraphBlockElement = await editorPage.getBlockAtPosition(
blockNames.paragraph,
Expand All @@ -165,15 +162,12 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {

// Based on https://github.com/wordpress-mobile/gutenberg-mobile/pull/1507
it( 'should handle multiline paragraphs from web', async () => {
await editorPage.setHtmlContent( `
<!-- wp:paragraph -->
<p>multiple lines<br><br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->` );

await editorPage.setHtmlContent(
[
testData.multiLinesParagraphBlock,
testData.paragraphBlockEmpty,
].join( '\n\n' )
);
// // Merge paragraphs.
const secondParagraphBlockElement = await editorPage.getBlockAtPosition(
blockNames.paragraph,
Expand Down
12 changes: 12 additions & 0 deletions packages/react-native-editor/__device-tests__/helpers/test-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,3 +165,15 @@ exports.moreBlockEmpty = `<!-- wp:more -->
exports.paragraphBlockEmpty = `<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->`;

exports.multiLinesParagraphBlock = `<!-- wp:paragraph -->
<p>multiple lines<br>multiple lines<br>multiple lines</p>
<!-- /wp:paragraph -->`;

exports.unknownElementParagraphBlock = `<!-- wp:paragraph -->
<p><unknownhtmlelement>abc</unknownhtmlelement>D</p>
<!-- /wp:paragraph -->`;

exports.lettersInParagraphBlock = `<!-- wp:paragraph -->
<p>ABCD</p>
<!-- /wp:paragraph -->`;
36 changes: 30 additions & 6 deletions packages/react-native-editor/__device-tests__/pages/editor-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,31 @@ class EditorPage {
async getBlockAtPosition(
blockName,
position = 1,
options = { autoscroll: false }
options = { autoscroll: false, useWaitForVisible: false }
) {
const blockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")]`;
let blockLocator;

// Make it optional to use waitForVisible() so we can handle this test by test.
// This condition can be removed once we have gone through all test cases.
if ( options.useWaitForVisible ) {
let elementType;
switch ( blockName ) {
case blockNames.cover:
elementType = 'XCUIElementTypeButton';
break;
default:
elementType = 'XCUIElementTypeOther';
break;
}

blockLocator = isAndroid()
? `//android.view.ViewGroup[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")]`
: `(//${ elementType }[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")])[1]`;

await waitForVisible( this.driver, blockLocator );
} else {
blockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")]`;
}
const elements = await this.driver.elementsByXPath( blockLocator );
const lastElementFound = elements[ elements.length - 1 ];
if ( elements.length === 0 && options.autoscroll ) {
Expand Down Expand Up @@ -429,6 +451,10 @@ class EditorPage {
: '//XCUIElementTypeButton';
const blockActionsMenuButtonIdentifier = `Open Block Actions Menu`;
const blockActionsMenuButtonLocator = `${ buttonElementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockActionsMenuButtonIdentifier }")]`;
const blockActionsMenuButton = await waitForVisible(
this.driver,
blockActionsMenuButtonLocator
);
Comment on lines +454 to +457
Copy link
Contributor

@fluiddot fluiddot Apr 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that the following code block handles the case where the Block Actions Menu button is not visible. The buttons is displayed at the bottom of the block, so it tries to scroll down the block list until it's visible. Not sure why this behavior is only applied on Android since it might also happen on iOS 🤔 . In any case, I'm wondering if we could use the waitForVisible helper there too, wdyt?

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

Lines 459 to 470 in eda2d66

if ( isAndroid() ) {
const block = await this.getBlockAtPosition( blockName, position );
let checkList = await this.driver.elementsByXPath(
blockActionsMenuButtonLocator
);
while ( checkList.length === 0 ) {
await swipeUp( this.driver, block ); // Swipe up to show remove icon at the bottom.
checkList = await this.driver.elementsByXPath(
blockActionsMenuButtonLocator
);
}
}

Copy link
Contributor Author

@jostnes jostnes Apr 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh right, I can try that, this one I will try in the next PR instead of here as this is something that the paragraph tests use a lot and testing could take a while. Good point about being Android only, not sure why but I'll try to remove it to see if it will work for both platforms in the next PR as well.


if ( isAndroid() ) {
const block = await this.getBlockAtPosition( blockName, position );
Expand All @@ -443,14 +469,12 @@ class EditorPage {
}
}

const blockActionsMenuButton = await this.driver.elementByXPath(
blockActionsMenuButtonLocator
);
await blockActionsMenuButton.click();

const removeActionButtonIdentifier = 'Remove block';
const removeActionButtonLocator = `${ buttonElementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ removeActionButtonIdentifier }")]`;
const removeActionButton = await this.driver.elementByXPath(
const removeActionButton = await waitForVisible(
this.driver,
removeActionButtonLocator
);

Expand Down