[RNMobile] - E2E Simplify heading and lists blocks functions (#40670)

* update tests using paragraph, heading and list blocks * fix slash inserter tests to work in ci * lint fixes * wait for ordered list to appear * lint fixes * extra click only on local env * wait to get backspace click reflected * re-add extra click only for local env * add wait to wait for backspace key to be reflected * lint fixes * break function, set position to get list block * lint fixes * use correct params, update function name * lint fixes * make maxIteration a parameter for isElementVisible * update xpath for list block * utilize waitForVisible for isElementVisible * lint fixes * add wait to getNumberOfParagraphBlocks and update xpath for android list block * update edit text xpath to be read from any level Co-authored-by: jos <[email protected]>
WordPress · fluiddot · Jun 3, 2022 · May 11, 2022 · May 11, 2022 · May 11, 2022
commit a6dd4946db9283cdb2f4de2be2540cf4769ec32c
diff --git a/packages/react-native-editor/__device-tests__/[email protected] b/packages/react-native-editor/__device-tests__/[email protected]
@@ -2,34 +2,26 @@
  * Internal dependencies
  */
 import { blockNames } from './pages/editor-page';
-import { isAndroid } from './helpers/utils';
 import testData from './helpers/test-data';
 
 describe( 'Gutenberg Editor tests', () => {
 	it( 'should be able to create a post with heading and paragraph blocks', async () => {
 		await editorPage.addNewBlock( blockNames.heading );
-		let headingBlockElement = await editorPage.getBlockAtPosition(
-			blockNames.heading,
-			1,
-			{
-				useWaitForVisible: true,
-			}
+		let headingBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.heading
 		);
-		if ( isAndroid() ) {
-			await headingBlockElement.click();
-		}
-		await editorPage.sendTextToHeadingBlock(
+
+		await editorPage.typeTextToTextBlock(
 			headingBlockElement,
-			testData.heading,
-			false
+			testData.heading
 		);
 
 		await editorPage.addNewBlock( blockNames.paragraph );
 		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
 			blockNames.paragraph,
 			2
 		);
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			testData.mediumText
 		);
@@ -39,7 +31,7 @@ describe( 'Gutenberg Editor tests', () => {
 			blockNames.paragraph,
 			3
 		);
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			testData.mediumText
 		);
@@ -49,7 +41,7 @@ describe( 'Gutenberg Editor tests', () => {
 			blockNames.heading,
 			4
 		);
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			headingBlockElement,
 			testData.heading
 		);
@@ -59,9 +51,12 @@ describe( 'Gutenberg Editor tests', () => {
 			blockNames.paragraph,
 			5
 		);
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			testData.mediumText
 		);
+
+		// Assert that even though there are 5 blocks, there should only be 3 paragraph blocks
+		expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 3 );
 	} );
 } );
diff --git a/packages/react-native-editor/__device-tests__/[email protected] b/packages/react-native-editor/__device-tests__/[email protected]
@@ -8,27 +8,26 @@ import testData from './helpers/test-data';
 describe( 'Gutenberg Editor tests for List block', () => {
 	it( 'should be able to add a new List block', async () => {
 		await editorPage.addNewBlock( blockNames.list );
-		const listBlockElement = await editorPage.getBlockAtPosition(
-			blockNames.list
-		);
-		// Click List block on Android to force EditText focus
-		if ( isAndroid() ) {
-			await listBlockElement.click();
-		}
+		let listBlockElement = await editorPage.getListBlockAtPosition( 1, {
+			isEmptyBlock: true,
+		} );
 
-		// Send the first list item text.
-		await editorPage.sendTextToListBlock(
+		await editorPage.typeTextToTextBlock(
 			listBlockElement,
-			testData.listItem1
+			testData.listItem1,
+			false
 		);
 
+		listBlockElement = await editorPage.getListBlockAtPosition();
+
 		// Send an Enter.
-		await editorPage.sendTextToListBlock( listBlockElement, '\n' );
+		await editorPage.typeTextToTextBlock( listBlockElement, '\n', false );
 
 		// Send the second list item text.
-		await editorPage.sendTextToListBlock(
+		await editorPage.typeTextToTextBlock(
 			listBlockElement,
-			testData.listItem2
+			testData.listItem2,
+			false
 		);
 
 		// Switch to html and verify html.
@@ -38,12 +37,11 @@ describe( 'Gutenberg Editor tests for List block', () => {
 
 	// This test depends on being run immediately after 'should be able to add a new List block'
 	it( 'should update format to ordered list, using toolbar button', async () => {
-		let listBlockElement = await editorPage.getBlockAtPosition(
-			blockNames.list
-		);
+		let listBlockElement = await editorPage.getListBlockAtPosition();
 
-		// Click List block to force EditText focus.
-		await listBlockElement.click();
+		if ( isAndroid() ) {
+			await listBlockElement.click();
+		}
 
 		// Send a click on the order list format button.
 		await editorPage.clickOrderedListToolBarButton();

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-end.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-end.test.js
@@ -2,32 +2,21 @@
  * Internal dependencies
  */
 import { blockNames } from './pages/editor-page';
-import { isAndroid } from './helpers/utils';
 import testData from './helpers/test-data';
 
 describe( 'Gutenberg Editor tests for List block (end)', () => {
 	it( 'should be able to end a List block', async () => {
 		await editorPage.addNewBlock( blockNames.list );
-		const listBlockElement = await editorPage.getBlockAtPosition(
-			blockNames.list
-		);
-
-		// Click List block on Android to force EditText focus
-		if ( isAndroid() ) {
-			await listBlockElement.click();
-		}
+		const listBlockElement = await editorPage.getListBlockAtPosition();
 
-		// Send the first list item text.
-		await editorPage.sendTextToListBlock(
+		await editorPage.typeTextToTextBlock(
 			listBlockElement,
-			testData.listItem1
+			testData.listItem1,
+			false
 		);
 
 		// Send an Enter.
-		await editorPage.sendTextToListBlock( listBlockElement, '\n' );
-
-		// Send an Enter.
-		await editorPage.sendTextToListBlock( listBlockElement, '\n' );
+		await editorPage.typeTextToTextBlock( listBlockElement, '\n\n', false );
 
 		const html = await editorPage.getHtmlContent();
 

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js
@@ -2,28 +2,33 @@
  * Internal dependencies
  */
 import { blockNames } from './pages/editor-page';
-import { backspace, isAndroid } from './helpers/utils';
+import { waitIfAndroid, backspace } from './helpers/utils';
 
 describe( 'Gutenberg Editor tests for List block', () => {
 	// Prevent regression of https://github.com/wordpress-mobile/gutenberg-mobile/issues/871
 	it( 'should handle spaces in a list', async () => {
 		await editorPage.addNewBlock( blockNames.list );
-		let listBlockElement = await editorPage.getBlockAtPosition(
-			blockNames.list
-		);
-		// Click List block on Android to force EditText focus
-		if ( isAndroid() ) {
-			await listBlockElement.click();
-		}
+		let listBlockElement = await editorPage.getListBlockAtPosition();
 
 		// Send the list item text.
-		await editorPage.sendTextToListBlock( listBlockElement, '  a' );
+		await editorPage.typeTextToTextBlock( listBlockElement, '  a', false );
 
 		// Send an Enter.
-		await editorPage.sendTextToListBlock( listBlockElement, '\n' );
+		await editorPage.typeTextToTextBlock( listBlockElement, '\n', false );
+
+		// Instead of introducing separate conditions for local and CI environment, add this wait for Android to accomodate both environments
+		await waitIfAndroid();
 
 		// Send a backspace.
-		await editorPage.sendTextToListBlock( listBlockElement, backspace );
+		await editorPage.typeTextToTextBlock(
+			listBlockElement,
+			backspace,
+			false
+		);
+
+		// There is a delay in Sauce Labs when a key is sent
+		// There isn't an element to check as it's being typed into an element that already exists, workaround is to add this wait until there's a better solution
+		await waitIfAndroid();
 
 		// Switch to html and verify html.
 		const html = await editorPage.getHtmlContent();
@@ -35,9 +40,7 @@ describe( 'Gutenberg Editor tests for List block', () => {
 		);
 
 		// Remove list block to reset editor to clean state.
-		listBlockElement = await editorPage.getBlockAtPosition(
-			blockNames.list
-		);
+		listBlockElement = await editorPage.getListBlockAtPosition();
 		await listBlockElement.click();
 		await editorPage.removeBlockAtPosition( blockNames.list );
 	} );

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js
@@ -16,12 +16,12 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
 			blockNames.paragraph
 		);
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			testData.shortText
 		);
 		await clickMiddleOfElement( editorPage.driver, paragraphBlockElement );
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			'\n',
 			false
@@ -44,19 +44,13 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
 			blockNames.paragraph
 		);
-		if ( isAndroid() ) {
-			await paragraphBlockElement.click();
-		}
 
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			testData.shortText
 		);
 		await clickMiddleOfElement( editorPage.driver, paragraphBlockElement );
-		await editorPage.typeTextToParagraphBlock(
-			paragraphBlockElement,
-			'\n'
-		);
+		await editorPage.typeTextToTextBlock( paragraphBlockElement, '\n' );
 
 		const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 );
 		const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 );
@@ -71,7 +65,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 			paragraphBlockElement
 		);
 
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			backspace
 		);
@@ -112,7 +106,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 			editorPage.driver,
 			paragraphBlockElement
 		);
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			backspace
 		);
@@ -140,7 +134,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 			blockNames.paragraph,
 			2
 		);
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			backspace
 		);

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js
@@ -29,11 +29,8 @@ describe( 'Gutenberg Editor paste tests', () => {
 		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
 			blockNames.paragraph
 		);
-		if ( isAndroid() ) {
-			await paragraphBlockElement.click();
-		}
 
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			testData.pastePlainText
 		);
@@ -59,9 +56,6 @@ describe( 'Gutenberg Editor paste tests', () => {
 			blockNames.paragraph,
 			2
 		);
-		if ( isAndroid() ) {
-			await paragraphBlockElement2.click();
-		}
 
 		// Paste into second paragraph block.
 		await longPressMiddleOfElement(
@@ -83,9 +77,6 @@ describe( 'Gutenberg Editor paste tests', () => {
 		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
 			blockNames.paragraph
 		);
-		if ( isAndroid() ) {
-			await paragraphBlockElement.click();
-		}
 
 		// Copy content to clipboard.
 		await longPressMiddleOfElement(
@@ -108,9 +99,6 @@ describe( 'Gutenberg Editor paste tests', () => {
 			blockNames.paragraph,
 			2
 		);
-		if ( isAndroid() ) {
-			await paragraphBlockElement2.click();
-		}
 
 		// Paste into second paragraph block.
 		await longPressMiddleOfElement(

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js
@@ -11,39 +11,30 @@ describe( 'Gutenberg Editor tests', () => {
 		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
 			blockNames.paragraph
 		);
-		if ( isAndroid() ) {
-			await paragraphBlockElement.click();
-		}
 
-		await editorPage.typeTextToParagraphBlock(
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			testData.mediumText
 		);
 
 		await toggleOrientation( editorPage.driver );
 		// On Android the keyboard hides the add block button, let's hide it after rotation
 		if ( isAndroid() ) {
-			await editorPage.driver.hideDeviceKeyboard();
+			await editorPage.dismissKeyboard();
 		}
 
 		await editorPage.addNewBlock( blockNames.paragraph );
 
 		if ( isAndroid() ) {
-			await editorPage.driver.hideDeviceKeyboard();
+			await editorPage.dismissKeyboard();
 		}
 
 		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
 			blockNames.paragraph,
 			2
 		);
-		while ( ! paragraphBlockElement ) {
-			await editorPage.driver.hideDeviceKeyboard();
-			paragraphBlockElement = await editorPage.getBlockAtPosition(
-				blockNames.paragraph,
-				2
-			);
-		}
-		await editorPage.typeTextToParagraphBlock(
+
+		await editorPage.typeTextToTextBlock(
 			paragraphBlockElement,
 			testData.mediumText
 		);