From 2aae07aefa769c0a7379eca8d11c682f62a18607 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Tue, 7 Feb 2023 16:10:43 +0100 Subject: [PATCH] [Mobile] - Try splitting E2E tests (#47814) * Mobile - Fix Experiments native variant breakage * Mobile - Split E2E tests into three to speed up rendering the blocks on CI. It also changes the approach on iOS to also scroll to get the last block if needed. After the React Native upgrade the block list doesn't render the whole thing at the same time so on iOS it was causing flakiness due to trying to get the last block without scrolling or waiting for all content to be there. * Mobile - E2E runners - Update native-test-name to gutenberg-editor-rendering * Mobile - Update E2E tests names * Mobile - Editor Page - Update comment for scrollAndReturnElementByAccessibilityId --- .github/workflows/rnmobile-android-runner.yml | 2 +- .github/workflows/rnmobile-ios-runner.yml | 2 +- .../gutenberg-editor-initial-html.test.js | 22 +++-------- ...berg-editor-rendering-media-blocks.test.js | 21 ++++++++++ ...berg-editor-rendering-other-blocks.test.js | 18 +++++++++ ...nberg-editor-rendering-text-blocks.test.js | 18 +++++++++ .../__device-tests__/pages/editor-page.js | 13 +++++++ .../react-native-editor/src/initial-html.js | 39 +++++++++---------- 8 files changed, 96 insertions(+), 39 deletions(-) create mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js create mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-other-blocks.test.js create mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-text-blocks.test.js diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml index 2378cf9fea879..fc019dfa5d504 100644 --- a/.github/workflows/rnmobile-android-runner.yml +++ b/.github/workflows/rnmobile-android-runner.yml @@ -18,7 +18,7 @@ jobs: if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }} strategy: matrix: - native-test-name: [gutenberg-editor-initial-html] + native-test-name: [gutenberg-editor-rendering] api-level: [29] steps: diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml index 1fb2d5ddd3b0f..6d497491bdf9c 100644 --- a/.github/workflows/rnmobile-ios-runner.yml +++ b/.github/workflows/rnmobile-ios-runner.yml @@ -20,7 +20,7 @@ jobs: matrix: xcode: ['13.2.1'] device: ['iPhone 13'] - native-test-name: [gutenberg-editor-initial-html] + native-test-name: [gutenberg-editor-rendering] steps: - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0 diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html.test.js index 5ed3828682c0c..6569bf68bf62f 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html.test.js @@ -2,29 +2,17 @@ * Internal dependencies */ import initialHtml from '../src/initial-html'; -import { isAndroid } from './helpers/utils'; -import { blockNames } from './pages/editor-page'; describe( 'Gutenberg Editor Blocks test', () => { it( 'should be able to create a post with all blocks and scroll to the last one', async () => { await editorPage.setHtmlContent( initialHtml ); - const lastBlockName = blockNames.paragraph; - const lastBlockIndex = 30; - const lastBlockAccessibilityLabel = - 'This block is used in initial HTML e2e tests and should be kept as the last block.'; - let lastBlockElement; - if ( isAndroid() ) { - lastBlockElement = await editorPage.androidScrollAndReturnElement( - lastBlockAccessibilityLabel + // Scroll to the last element + const addBlockPlaceholder = + await editorPage.scrollAndReturnElementByAccessibilityId( + 'Add paragraph block' ); - } else { - lastBlockElement = await editorPage.getBlockAtPosition( - lastBlockName, - lastBlockIndex - ); - } - expect( lastBlockElement ).toBeTruthy(); + expect( addBlockPlaceholder ).toBeTruthy(); } ); } ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js new file mode 100644 index 0000000000000..947006332bb34 --- /dev/null +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js @@ -0,0 +1,21 @@ +/** + * Internal dependencies + */ +import { mediaBlocks } from '../src/initial-html'; + +describe( 'Gutenberg Editor Rendering Media Blocks test', () => { + it( 'should be able to render blocks correctly', async () => { + await editorPage.setHtmlContent( mediaBlocks ); + + // Give some time to media placeholders to render. + await editorPage.driver.sleep( 3000 ); + + // Scroll to the last element. + const addBlockPlaceholder = + await editorPage.scrollAndReturnElementByAccessibilityId( + 'Add paragraph block' + ); + + expect( addBlockPlaceholder ).toBeTruthy(); + } ); +} ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-other-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-other-blocks.test.js new file mode 100644 index 0000000000000..2354874caafcf --- /dev/null +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-other-blocks.test.js @@ -0,0 +1,18 @@ +/** + * Internal dependencies + */ +import { otherBlocks } from '../src/initial-html'; + +describe( 'Gutenberg Editor Rendering Other Blocks test', () => { + it( 'should be able to render blocks correctly', async () => { + await editorPage.setHtmlContent( otherBlocks ); + + // Scroll to the last element. + const addBlockPlaceholder = + await editorPage.scrollAndReturnElementByAccessibilityId( + 'Add paragraph block' + ); + + expect( addBlockPlaceholder ).toBeTruthy(); + } ); +} ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-text-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-text-blocks.test.js new file mode 100644 index 0000000000000..538638d2e8994 --- /dev/null +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-text-blocks.test.js @@ -0,0 +1,18 @@ +/** + * Internal dependencies + */ +import { textBlocks } from '../src/initial-html'; + +describe( 'Gutenberg Editor Rendering Text Blocks test', () => { + it( 'should be able to render blocks correctly', async () => { + await editorPage.setHtmlContent( textBlocks ); + + // Scroll to the last element + const addBlockPlaceholder = + await editorPage.scrollAndReturnElementByAccessibilityId( + 'Add paragraph block' + ); + + expect( addBlockPlaceholder ).toBeTruthy(); + } ); +} ); diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js index e0d3aa3807c28..c78cc135c06ba 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -193,6 +193,19 @@ class EditorPage { return elements[ elements.length - 1 ]; } + // For iOS, depending on the content and how fast the block list + // renders blocks, it won't need to scroll down as it would find + // the block right away. + async scrollAndReturnElementByAccessibilityId( id ) { + const elements = await this.driver.elementsByAccessibilityId( id ); + + if ( elements.length === 0 ) { + await swipeUp( this.driver, undefined, 100, 1 ); + return this.scrollAndReturnElementByAccessibilityId( id ); + } + return elements[ elements.length - 1 ]; + } + async getLastElementByXPath( accessibilityLabel ) { const elements = await this.driver.elementsByXPath( `//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ accessibilityLabel }")]` diff --git a/packages/react-native-editor/src/initial-html.js b/packages/react-native-editor/src/initial-html.js index 9ef66b83c49c0..9cf963fa7bee8 100644 --- a/packages/react-native-editor/src/initial-html.js +++ b/packages/react-native-editor/src/initial-html.js @@ -1,5 +1,4 @@ -export default ` - +export const textBlocks = `

What is Gutenberg?

@@ -53,9 +52,9 @@ else: 
Come
Home.
- +`; - +export const mediaBlocks = `
@@ -145,6 +144,20 @@ else: + +
+

+
+ + + +
+

Cool cover

+
+ +`; + +export const otherBlocks = ` @@ -201,18 +214,6 @@ else: - -
-

-
- - - -
-

Cool cover

-
- - @@ -230,8 +231,6 @@ else: - - -

This block is used in initial HTML e2e tests and should be kept as the last block.

- `; + +export default textBlocks + mediaBlocks + otherBlocks;