[Mobile] - Try splitting E2E tests (WordPress#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

@@ -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:

.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

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();
 	} );
 } );

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();
+	} );
+} );

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();
+	} );
+} );

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();
+	} );
+} );

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 }")]`

packages/react-native-editor/src/initial-html.js

@@ -1,5 +1,4 @@
-export default `
-<!-- wp:heading -->
+export const textBlocks = `<!-- wp:heading -->
 <h2 class="wp-block-heading" id="this-is-an-anchor">What is Gutenberg?</h2>
 <!-- /wp:heading -->
 
@@ -53,9 +52,9 @@ else:
 
 <!-- wp:verse {"textAlign":"center"} -->
 <pre class="wp-block-verse has-text-align-center">Come<br>Home.</pre>
-<!-- /wp:verse -->
+<!-- /wp:verse -->`;
 
-<!-- wp:image -->
+export const mediaBlocks = `<!-- wp:image -->
 <figure class="wp-block-image"><img alt=""/></figure>
 <!-- /wp:image -->
 
@@ -145,6 +144,20 @@ else:
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->
 
+<!-- wp:media-text {"isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->
+
+<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
+`;
+
+export const otherBlocks = `
 <!-- wp:nextpage -->
 <!--nextpage-->
 <!-- /wp:nextpage -->
@@ -201,18 +214,6 @@ else:
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
 
-<!-- wp:media-text {"isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
-<p class="has-large-font-size"></p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:media-text -->
-
-<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
-<div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
-<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:cover -->
-
 <!-- wp:latest-posts {"displayPostContent":true,"displayPostDate":true} /-->
 
 <!-- wp:buttons -->
@@ -230,8 +231,6 @@ else:
 <!-- /wp:shortcode -->
 
 <!-- wp:rss /-->
-
-<!-- wp:paragraph -->
-<p>This block is used in initial HTML e2e tests and should be kept as the last block.</p>
-<!-- /wp:paragraph -->
 `;
+
+export default textBlocks + mediaBlocks + otherBlocks;