Skip to content

Commit

Permalink
[RNMobile] - Add waits to fix editor test flakiness (#39668)
Browse files Browse the repository at this point in the history 
* add waits to fix editor test flakiness

* update separator block expected html to latest

* remove extra spaces

* rename test data, move check to different method

* lint fix

* missed one test data update

* lint fix

Co-authored-by: jos <17252150+jostnes@users.noreply.github.com>
  • Loading branch information
@jostnes
jostnes and jostnes authored Mar 29, 2022
1 parent 6de1698 commit c653bae
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 91 deletions.
116 changes: 37 additions & 79 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 @@ -2,21 +2,23 @@
* Internal dependencies
*/
import { blockNames } from './pages/editor-page';
import {
headerBlockEmpty,
imageBlockEmpty,
listBlockEmpty,
moreBlockEmpty,
paragraphBlockEmpty,
separatorBlockEmpty,
} from './helpers/test-data';

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

await editorPage.addNewBlock( blockNames.list );

const expectedHtml = `<!-- wp:heading -->
<h2></h2>
<!-- /wp:heading -->
<!-- wp:list -->
<ul><li></li></ul>
<!-- /wp:list -->`;

const expectedHtml = [ headerBlockEmpty, listBlockEmpty ].join(
'\n\n'
);
const html = await editorPage.getHtmlContent();
expect( html.toLowerCase() ).toBe( expectedHtml );
} );
Expand All @@ -27,20 +29,13 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
);

await headingBlockElement.click();

await editorPage.addNewBlock( blockNames.separator );

const expectedHtml = `<!-- wp:heading -->
<h2></h2>
<!-- /wp:heading -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:list -->
<ul><li></li></ul>
<!-- /wp:list -->`;
const expectedHtml = [
headerBlockEmpty,
separatorBlockEmpty,
listBlockEmpty,
].join( '\n\n' );

const html = await editorPage.getHtmlContent();
expect( html.toLowerCase() ).toBe( expectedHtml );
Expand All @@ -54,24 +49,14 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
await separatorBlockElement.click();

await editorPage.addNewBlock( blockNames.image, 'before' );
await editorPage.driver.sleep( 1000 );
await editorPage.closePicker();

const expectedHtml = `<!-- wp:heading -->
<h2></h2>
<!-- /wp:heading -->
<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:list -->
<ul><li></li></ul>
<!-- /wp:list -->`;
const expectedHtml = [
headerBlockEmpty,
imageBlockEmpty,
separatorBlockEmpty,
listBlockEmpty,
].join( '\n\n' );

const html = await editorPage.getHtmlContent();
expect( html.toLowerCase() ).toBe( expectedHtml );
Expand All @@ -80,25 +65,13 @@ 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 expectedHtml = `<!-- wp:heading -->
<h2></h2>
<!-- /wp:heading -->
<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:list -->
<ul><li></li></ul>
<!-- /wp:list -->
<!-- wp:more -->
<!--more-->
<!-- /wp:more -->`;
const expectedHtml = [
headerBlockEmpty,
imageBlockEmpty,
separatorBlockEmpty,
listBlockEmpty,
moreBlockEmpty,
].join( '\n\n' );

const html = await editorPage.getHtmlContent();
expect( html.toLowerCase() ).toBe( expectedHtml );
Expand All @@ -107,29 +80,14 @@ 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 expectedHtml = `<!-- wp:heading -->
<h2></h2>
<!-- /wp:heading -->
<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->
<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
<!-- wp:list -->
<ul><li></li></ul>
<!-- /wp:list -->
<!-- wp:more -->
<!--more-->
<!-- /wp:more -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->`;
const expectedHtml = [
headerBlockEmpty,
imageBlockEmpty,
separatorBlockEmpty,
listBlockEmpty,
moreBlockEmpty,
paragraphBlockEmpty,
].join( '\n\n' );

const html = await editorPage.getHtmlContent();
expect( html.toLowerCase() ).toBe( expectedHtml );
Expand Down
24 changes: 24 additions & 0 deletions packages/react-native-editor/__device-tests__/helpers/test-data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,3 +141,27 @@ exports.fileBlockPlaceholder = `<!-- wp:file {"id":3,"href":"https://wordpress.o
exports.audioBlockPlaceholder = `<!-- wp:audio {"id":5} -->
<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
<!-- /wp:audio -->`;

exports.headerBlockEmpty = `<!-- wp:heading -->
<h2></h2>
<!-- /wp:heading -->`;

exports.separatorBlockEmpty = `<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->`;

exports.listBlockEmpty = `<!-- wp:list -->
<ul><li></li></ul>
<!-- /wp:list -->`;

exports.imageBlockEmpty = `<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->`;

exports.moreBlockEmpty = `<!-- wp:more -->
<!--more-->
<!-- /wp:more -->`;

exports.paragraphBlockEmpty = `<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->`;
40 changes: 28 additions & 12 deletions packages/react-native-editor/__device-tests__/pages/editor-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,29 +258,33 @@ class EditorPage {
// =========================

async addNewBlock( blockName, relativePosition ) {
// Click add button.
let identifier = 'Add block';
if ( isAndroid() ) {
identifier = 'Add block, Double tap to add a block';
}
const addButton = await this.driver.elementByAccessibilityId(
identifier
const addBlockButtonLocator = isAndroid()
? '//android.widget.Button[@content-desc="Add block, Double tap to add a block"]'
: '//XCUIElementTypeButton[@name="add-block-button"]';

const addButton = await waitForVisible(
this.driver,
addBlockButtonLocator
);

if ( relativePosition === 'before' ) {
await longPressMiddleOfElement( this.driver, addButton );
const addBlockBeforeButtonLocator = isAndroid()
? '//android.widget.Button[@content-desc="Add Block Before"]'
: '//XCUIElementTypeButton[@name="Add Block Before"]';

const addBlockBeforeButton = await this.driver.elementByAccessibilityId(
'Add Block Before'
const addBlockBeforeButton = await waitForVisible(
this.driver,
addBlockBeforeButtonLocator
);

await addBlockBeforeButton.click();
} else {
await addButton.click();
}

// Click on block of choice.
const blockButton = await this.findBlockButton( blockName );

if ( isAndroid() ) {
await blockButton.click();
} else {
Expand All @@ -299,6 +303,12 @@ class EditorPage {

// Attempts to find the given block button in the block inserter control.
async findBlockButton( blockName ) {
// Wait for the first block, Paragraph block, to load before looking for other blocks
const paragraphBlockLocator = isAndroid()
? '//android.widget.Button[@content-desc="Paragraph block"]/android.widget.TextView'
: '//XCUIElementTypeButton[@name="Paragraph block"]';

await waitForVisible( this.driver, paragraphBlockLocator );
const blockAccessibilityLabel = `${ blockName } block`;
const blockAccessibilityLabelNewBlock = `${ blockAccessibilityLabel }, newly available`;

Expand Down Expand Up @@ -611,10 +621,16 @@ class EditorPage {

async closePicker() {
if ( isAndroid() ) {
// Wait for media block picker to load before closing
const locator =
'//android.view.ViewGroup[2]/android.view.ViewGroup/android.view.ViewGroup';
await waitForVisible( this.driver, locator );

await swipeDown( this.driver );
} else {
const cancelButton = await this.driver.elementByAccessibilityId(
'Cancel'
const cancelButton = await waitForVisible(
this.driver,
'//XCUIElementTypeButton[@name="Cancel"]'
);
await cancelButton.click();
}
Expand Down

0 comments on commit c653bae

Please sign in to comment.