Skip to content

Commit

Permalink
[Mobile] - E2E Tests - Fix block insertion flakiness (#46619)
Browse files Browse the repository at this point in the history 
* Mobile - E2E Tests - Fix block insertion flakiness

* Mobile - Fix block insertion flakiness on Android

* Mobile - E2E - longPressMiddleOfElement: add custom waitTime for specfic cases like "Adding a block before" option
  • Loading branch information
Gerardo Pacheco authored Dec 20, 2022
1 parent 9ac117b commit ceef38a
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 8 deletions.
38 changes: 38 additions & 0 deletions packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,24 @@ import {
paragraphBlockEmpty,
separatorBlockEmpty,
} from './helpers/test-data';
import { waitForMediaLibrary } from './helpers/utils';

describe( 'Gutenberg Editor tests for Block insertion 2', () => {
it( 'adds new block at the end of post', async () => {
await editorPage.addNewBlock( blockNames.heading );

const headingBlock = await editorPage.getBlockAtPosition(
blockNames.heading
);
expect( headingBlock ).toBeTruthy();

await editorPage.addNewBlock( blockNames.list );

const listItemBlock = await editorPage.getBlockAtPosition(
blockNames.listItem
);
expect( listItemBlock ).toBeTruthy();

const expectedHtml = [ headerBlockEmpty, listBlockEmpty ].join(
'\n\n'
);
Expand All @@ -29,6 +41,12 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {

await editorPage.addNewBlock( blockNames.separator );

const separatorBlock = await editorPage.getBlockAtPosition(
blockNames.separator,
2
);
expect( separatorBlock ).toBeTruthy();

const expectedHtml = [
headerBlockEmpty,
separatorBlockEmpty,
Expand All @@ -47,8 +65,16 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
await separatorBlockElement.click();

await editorPage.addNewBlock( blockNames.image, 'before' );

await waitForMediaLibrary( editorPage.driver );
await editorPage.closePicker();

const imageBlock = await editorPage.getBlockAtPosition(
blockNames.image,
2
);
expect( imageBlock ).toBeTruthy();

const expectedHtml = [
headerBlockEmpty,
imageBlockEmpty,
Expand All @@ -63,6 +89,12 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
it( 'inserts block at the end of post when no block is selected', async () => {
await editorPage.addNewBlock( blockNames.more );

const moreBlock = await editorPage.getBlockAtPosition(
blockNames.more,
5
);
expect( moreBlock ).toBeTruthy();

const expectedHtml = [
headerBlockEmpty,
imageBlockEmpty,
Expand All @@ -78,6 +110,12 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
it( 'creates a new Paragraph block tapping on the empty area below the last block', async () => {
await editorPage.addParagraphBlockByTappingEmptyAreaBelowLastBlock();

const paragraphBlock = await editorPage.getBlockAtPosition(
blockNames.paragraph,
6
);
expect( paragraphBlock ).toBeTruthy();

const expectedHtml = [
headerBlockEmpty,
imageBlockEmpty,
Expand Down
12 changes: 8 additions & 4 deletions packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => {

it( 'should be able to insert block at the beginning of post from the title', async () => {
await editorPage.addNewBlock( blockNames.paragraph );
let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
blockNames.paragraph
);
if ( isAndroid() ) {
Expand All @@ -98,15 +98,19 @@ describe( 'Gutenberg Editor tests for Block insertion', () => {
const titleElement = await editorPage.getTitleElement( {
autoscroll: true,
} );
expect( titleElement ).toBeTruthy();
await titleElement.click();

await editorPage.addNewBlock( blockNames.paragraph );
paragraphBlockElement = await editorPage.getTextBlockAtPosition(
const emptyParagraphBlock = await editorPage.getBlockAtPosition(
blockNames.paragraph
);
await clickMiddleOfElement( editorPage.driver, paragraphBlockElement );
expect( emptyParagraphBlock ).toBeTruthy();
const emptyParagraphBlockElement =
await editorPage.getTextBlockAtPosition( blockNames.paragraph );
expect( emptyParagraphBlockElement ).toBeTruthy();

await editorPage.sendTextToParagraphBlock( 1, testData.mediumText );
await paragraphBlockElement.click();
const html = await editorPage.getHtmlContent();
expect( html.toLowerCase() ).toBe(
testData.blockInsertionHtmlFromTitle.toLowerCase()
Expand Down
12 changes: 9 additions & 3 deletions packages/react-native-editor/__device-tests__/helpers/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,15 +313,21 @@ const clickElementOutsideOfTextInput = async ( driver, element ) => {
};

// Long press to activate context menu.
const longPressMiddleOfElement = async ( driver, element ) => {
const longPressMiddleOfElement = async (
driver,
element,
waitTime = 5000, // Setting to wait a bit longer because this is failing more frequently on the CI
customElementSize
) => {
const location = await element.getLocation();
const size = await element.getSize();
const size = customElementSize || ( await element.getSize() );

const x = location.x + size.width / 2;
const y = location.y + size.height / 2;

const action = new wd.TouchAction( driver )
.longPress( { x, y } )
.wait( 5000 ) // Setting to wait a bit longer because this is failing more frequently on the CI
.wait( waitTime )
.release();
await action.perform();
};
Expand Down
14 changes: 13 additions & 1 deletion packages/react-native-editor/__device-tests__/pages/editor-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,18 @@ class EditorPage {
);

if ( relativePosition === 'before' ) {
await longPressMiddleOfElement( this.driver, addButton );
// On Android it doesn't get the right size of the button
const customElementSize = {
width: 43,
height: 43,
};

await longPressMiddleOfElement(
this.driver,
addButton,
8000,
customElementSize
);
const addBlockBeforeButtonLocator = isAndroid()
? '//android.widget.Button[@content-desc="Add Block Before"]'
: '//XCUIElementTypeButton[@name="Add Block Before"]';
Expand Down Expand Up @@ -801,6 +812,7 @@ const blockNames = {
image: 'Image',
latestPosts: 'Latest Posts',
list: 'List',
listItem: 'List item',
more: 'More',
paragraph: 'Paragraph',
search: 'Search',
Expand Down

1 comment on commit ceef38a

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3742391355
📝 Reported issues:

Please sign in to comment.