[Mobile] - Update E2E tests organization and helpers (#48026)

* Mobile - Update E2E tests * Mobile - Merge media tests into one * Mobile - E2E - Remove block return await * Mobile - Package remove extra space * Mobile - Combine more E2E tests into one file * Mobile - E2E helpers - Update helpers to use waitForElementToBeDisplayedById * Mobile - Media Blocks E2E - Update comments * Mobile - Set accessibility label prop for BlockTypesList instances
WordPress · Feb 15, 2023 · 9d37dbc · 9d37dbc · github-actions · Feb 15, 2023
1 parent 3bcfbfe
commit 9d37dbc
Show file tree

Hide file tree

Showing 22 changed files with 421 additions and 413 deletions.
diff --git a/packages/block-editor/src/components/block-types-list/index.native.js b/packages/block-editor/src/components/block-types-list/index.native.js
@@ -32,6 +32,7 @@ export default function BlockTypesList( {
 	name,
 	sections,
 	onSelect,
+	label,
 	listProps,
 	initialNumToRender = 3,
 } ) {
@@ -154,6 +155,7 @@ export default function BlockTypesList( {
 		<SectionList
 			onLayout={ onLayout }
 			testID={ `InserterUI-${ name }` }
+			accessibilityLabel={ label }
 			keyboardShouldPersistTaps="always"
 			sections={ sections }
 			initialNumToRender={ initialNumToRender }

diff --git a/packages/block-editor/src/components/inserter/block-types-tab.native.js b/packages/block-editor/src/components/inserter/block-types-tab.native.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -66,6 +67,7 @@ function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 			sections={ sections }
 			onSelect={ handleSelect }
 			listProps={ listProps }
+			label={ __( 'Blocks menu' ) }
 		/>
 	);
 }

diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -31,6 +32,7 @@ function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 			sections={ sections }
 			onSelect={ onSelect }
 			listProps={ listProps }
+			label={ __( 'Reusable blocks' ) }
 		/>
 	);
 }

diff --git a/packages/block-editor/src/components/inserter/search-results.native.js b/packages/block-editor/src/components/inserter/search-results.native.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -54,6 +55,7 @@ function InserterSearchResults( {
 			sections={ [ createInserterSection( { key: 'search', items } ) ] }
 			onSelect={ handleSelect }
 			listProps={ listProps }
+			label={ __( 'Blocks' ) }
 		/>
 	);
 }

diff --git a/packages/components/src/autocomplete/autocompleter-ui.native.js b/packages/components/src/autocomplete/autocompleter-ui.native.js
@@ -144,6 +144,7 @@ export function getAutoCompleterUI( autocompleter ) {
 					<Animated.View style={ contentStyles }>
 						<BackgroundView>
 							<ScrollView
+								testID="autocompleter"
 								ref={ scrollViewRef }
 								horizontal
 								contentContainerStyle={

diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
@@ -125,6 +125,7 @@ class PostTitle extends Component {
 
 		return (
 			<View
+				testID="post-title"
 				style={ [
 					styles.titleContainer,
 					borderStyle,

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-audio.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-audio.test.js
diff --git a/...erg-editor-slash-inserter-@canary.test.js → ...rg-editor-block-insertion-@canary.test.js b/...erg-editor-slash-inserter-@canary.test.js → ...rg-editor-block-insertion-@canary.test.js
@@ -3,7 +3,97 @@
  */
 import { blockNames } from './pages/editor-page';
 import { isAndroid } from './helpers/utils';
-import { slashInserter, shortText } from './helpers/test-data';
+import testData, { slashInserter, shortText } from './helpers/test-data';
+
+describe( 'Gutenberg Editor tests for Block insertion', () => {
+	it( 'should be able to insert multi-paragraph text, and text to another paragraph block in between', async () => {
+		await editorPage.addNewBlock( blockNames.paragraph );
+		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+		if ( isAndroid() ) {
+			await paragraphBlockElement.click();
+		}
+
+		await editorPage.sendTextToParagraphBlock( 1, testData.longText );
+		// Should have 3 paragraph blocks at this point.
+
+		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph,
+			2
+		);
+		await paragraphBlockElement.click();
+
+		await editorPage.addNewBlock( blockNames.paragraph );
+
+		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph,
+			3
+		);
+		await paragraphBlockElement.click();
+		await editorPage.sendTextToParagraphBlock( 3, testData.mediumText );
+
+		const html = await editorPage.getHtmlContent();
+
+		expect( html.toLowerCase() ).toBe(
+			testData.blockInsertionHtml.toLowerCase()
+		);
+
+		for ( let i = 4; i > 0; i-- ) {
+			paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+				blockNames.paragraph
+			);
+			await paragraphBlockElement.click();
+			await editorPage.removeBlock();
+		}
+	} );
+
+	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(
+			blockNames.paragraph
+		);
+		if ( isAndroid() ) {
+			await paragraphBlockElement.click();
+		}
+
+		await editorPage.sendTextToParagraphBlock( 1, testData.longText );
+		// Should have 3 paragraph blocks at this point.
+
+		if ( isAndroid() ) {
+			await editorPage.dismissKeyboard();
+		}
+
+		const titleElement = await editorPage.getTitleElement( {
+			autoscroll: true,
+		} );
+		await titleElement.click();
+
+		await editorPage.addNewBlock( blockNames.paragraph );
+		const emptyParagraphBlock = await editorPage.getBlockAtPosition(
+			blockNames.paragraph
+		);
+		expect( emptyParagraphBlock ).toBeTruthy();
+		const emptyParagraphBlockElement =
+			await editorPage.getTextBlockAtPosition( blockNames.paragraph );
+		expect( emptyParagraphBlockElement ).toBeTruthy();
+
+		await editorPage.sendTextToParagraphBlock( 1, testData.mediumText );
+		const html = await editorPage.getHtmlContent();
+		expect( html.toLowerCase() ).toBe(
+			testData.blockInsertionHtmlFromTitle.toLowerCase()
+		);
+
+		// Remove blocks
+		for ( let i = 4; i > 0; i-- ) {
+			paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+				blockNames.paragraph
+			);
+			await paragraphBlockElement.click();
+			await editorPage.removeBlock();
+		}
+	} );
+} );
 
 describe( 'Gutenberg Editor Slash Inserter tests', () => {
 	it( 'should show the menu after typing /', async () => {
@@ -42,9 +132,10 @@ describe( 'Gutenberg Editor Slash Inserter tests', () => {
 				true
 			);
 		} else {
+			await paragraphBlockElement.type( '\b' );
 			await editorPage.typeTextToTextBlock(
 				paragraphBlockElement,
-				`\b ${ shortText }`,
+				`${ shortText }`,
 				false
 			);
 		}

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js