[RNMobile] Add block insertion flow e2e test (#27381)

Co-authored-by: Cameron Voell <[email protected]>
WordPress · Jan 8, 2021 · efbee9f · efbee9f
1 parent b3620b5
commit efbee9f
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 20 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -313,6 +313,7 @@ export class BlockList extends Component {
 				<>
 					<TouchableWithoutFeedback
 						accessibilityLabel={ __( 'Add paragraph block' ) }
+						testID={ __( 'Add paragraph block' ) }
 						onPress={ () => {
 							this.addBlockToEndOfPost( paragraphBlock );
 						} }

diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
@@ -0,0 +1,135 @@
+/**
+ * Internal dependencies
+ */
+import { blockNames } from './pages/editor-page';
+
+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 html = await editorPage.getHtmlContent();
+		expect( html.toLowerCase() ).toBe( expectedHtml );
+	} );
+
+	it( 'inserts between 2 existing blocks', async () => {
+		const headingBlockElement = await editorPage.getBlockAtPosition(
+			blockNames.heading
+		);
+
+		await headingBlockElement.click();
+
+		await editorPage.addNewBlock( blockNames.separator );
+
+		const expectedHtml = `<!-- wp:heading -->
+<h2></h2>
+<!-- /wp:heading -->
+
+<!-- wp:separator -->
+<hr class="wp-block-separator"/>
+<!-- /wp:separator -->
+
+<!-- wp:list -->
+<ul><li></li></ul>
+<!-- /wp:list -->`;
+
+		const html = await editorPage.getHtmlContent();
+		expect( html.toLowerCase() ).toBe( expectedHtml );
+	} );
+
+	it( 'inserts block before selected block', async () => {
+		const separatorBlockElement = await editorPage.getBlockAtPosition(
+			blockNames.separator,
+			2
+		);
+		await separatorBlockElement.click();
+
+		await editorPage.addNewBlock( blockNames.image, 'before' );
+
+		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"/>
+<!-- /wp:separator -->
+
+<!-- wp:list -->
+<ul><li></li></ul>
+<!-- /wp:list -->`;
+
+		const html = await editorPage.getHtmlContent();
+		expect( html.toLowerCase() ).toBe( expectedHtml );
+	} );
+
+	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"/>
+<!-- /wp:separator -->
+
+<!-- wp:list -->
+<ul><li></li></ul>
+<!-- /wp:list -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->`;
+
+		const html = await editorPage.getHtmlContent();
+		expect( html.toLowerCase() ).toBe( expectedHtml );
+	} );
+
+	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"/>
+<!-- /wp:separator -->
+
+<!-- wp:list -->
+<ul><li></li></ul>
+<!-- /wp:list -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->`;
+
+		const html = await editorPage.getHtmlContent();
+		expect( html.toLowerCase() ).toBe( expectedHtml );
+	} );
+} );
diff --git a/...ice-tests__/gutenberg-editor-file.test.js → ...s__/[email protected] b/...ice-tests__/gutenberg-editor-file.test.js → ...s__/[email protected]
@@ -4,7 +4,7 @@
 import { blockNames } from './pages/editor-page';
 import testData from './helpers/test-data';
 
-describe( 'Gutenberg Editor File Block tests @canary', () => {
+describe( 'Gutenberg Editor File Block tests', () => {
 	it( 'should be able to add a file block', async () => {
 		await editorPage.addNewBlock( blockNames.file );
 		const block = await editorPage.getFirstBlockVisible();

diff --git a/...-tests__/gutenberg-editor-heading.test.js → .../[email protected] b/...-tests__/gutenberg-editor-heading.test.js → .../[email protected]
@@ -5,7 +5,7 @@ import { blockNames } from './pages/editor-page';
 import { isAndroid } from './helpers/utils';
 import testData from './helpers/test-data';
 
-describe( 'Gutenberg Editor tests @canary', () => {
+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(

diff --git a/...ce-tests__/gutenberg-editor-image.test.js → ...__/[email protected] b/...ce-tests__/gutenberg-editor-image.test.js → ...__/[email protected]
@@ -5,7 +5,7 @@ import { blockNames } from './pages/editor-page';
 import { isAndroid, clickMiddleOfElement, swipeUp } from './helpers/utils';
 import testData from './helpers/test-data';
 
-describe( 'Gutenberg Editor Image Block tests @canary', () => {
+describe( 'Gutenberg Editor Image Block tests', () => {
 	it( 'should be able to add an image block', async () => {
 		await editorPage.addNewBlock( blockNames.image );
 		let imageBlock = await editorPage.getBlockAtPosition(

diff --git a/...s__/gutenberg-editor-lists-canary.test.js → ...__/[email protected] b/...s__/gutenberg-editor-lists-canary.test.js → ...__/[email protected]
@@ -5,7 +5,7 @@ import { blockNames } from './pages/editor-page';
 import { isAndroid } from './helpers/utils';
 import testData from './helpers/test-data';
 
-describe( 'Gutenberg Editor tests for List block @canary', () => {
+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(

diff --git a/packages/react-native-editor/__device-tests__/helpers/utils.js b/packages/react-native-editor/__device-tests__/helpers/utils.js
@@ -364,14 +364,12 @@ const toggleHtmlMode = async ( driver, toggleOn ) => {
 		// Hit the "Menu" key
 		await driver.pressKeycode( 82 );
 
-		// Go at the end of the popup to hit the "Show html"
-		// TODO: c'mon, find a more robust way to hit that item! :(
-		for ( let i = 0; i < 10; i++ ) {
-			await driver.pressKeycode( 20 );
-		}
-
-		// hit Enter
-		await driver.pressKeycode( 66 );
+		const showHtmlButtonXpath =
+			'/hierarchy/android.widget.FrameLayout/android.widget.FrameLayout/android.widget.FrameLayout/android.widget.LinearLayout/android.widget.FrameLayout/android.widget.ListView/android.widget.TextView[9]';
+		const showHtmlButton = await driver.elementByXPath(
+			showHtmlButtonXpath
+		);
+		await showHtmlButton.click();
 	} else {
 		const menuButton = await driver.elementByAccessibilityId( '...' );
 		await menuButton.click();

diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -10,6 +10,7 @@ const {
 	typeString,
 	toggleHtmlMode,
 	swipeFromTo,
+	longPressMiddleOfElement,
 } = require( '../helpers/utils' );
 
 const initializeEditorPage = async () => {
@@ -115,6 +116,13 @@ class EditorPage {
 		);
 	}
 
+	async addParagraphBlockByTappingEmptyAreaBelowLastBlock() {
+		const emptyAreaBelowLastBlock = await this.driver.elementByAccessibilityId(
+			'Add paragraph block'
+		);
+		await emptyAreaBelowLastBlock.click();
+	}
+
 	async getTitleElement( options = { autoscroll: false } ) {
 		//TODO: Improve the identifier for this element
 		const elements = await this.driver.elementsByXPath(
@@ -192,7 +200,7 @@ class EditorPage {
 	// Block toolbar functions
 	// =========================
 
-	async addNewBlock( blockName ) {
+	async addNewBlock( blockName, relativePosition ) {
 		// Click add button
 		let identifier = 'Add block';
 		if ( isAndroid() ) {
@@ -201,7 +209,18 @@ class EditorPage {
 		const addButton = await this.driver.elementByAccessibilityId(
 			identifier
 		);
-		await addButton.click();
+
+		if ( relativePosition === 'before' ) {
+			await longPressMiddleOfElement( this.driver, addButton );
+
+			const addBlockBeforeButton = await this.driver.elementByAccessibilityId(
+				'Add Block Before'
+			);
+
+			await addBlockBeforeButton.click();
+		} else {
+			await addButton.click();
+		}
 
 		// Click on block of choice
 		const blockButton = await this.findBlockButton( blockName );

diff --git a/packages/react-native-editor/jest_ui_setup_after_env.js b/packages/react-native-editor/jest_ui_setup_after_env.js
@@ -140,8 +140,3 @@ jasmine.getEnv().addReporter( {
 		}
 	},
 } );
-
-it( 'should be able to see visual editor', async () => {
-	// wait for the block editor to load
-	await expect( global.editorPage.getBlockList() ).resolves.toBe( true );
-} );
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
@@ -103,7 +103,7 @@
 		"test": "cross-env NODE_ENV=test jest --verbose --config ../../test/native/jest.config.js",
 		"test:debug": "cross-env NODE_ENV=test node --inspect-brk jest --runInBand --verbose --config ../../test/native/jest.config.js",
 		"device-tests": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=3 --verbose --config ./jest_ui.config.js",
-		"device-tests-canary": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=2 --testNamePattern=@canary --verbose --config ./jest_ui.config.js",
+		"device-tests-canary": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=2 --testPathPattern=@canary --verbose --config ./jest_ui.config.js",
 		"device-tests:local": "cross-env NODE_ENV=test jest --runInBand --detectOpenHandles --verbose --forceExit --config ./jest_ui.config.js",
 		"device-tests:debug": "cross-env NODE_ENV=test node $NODE_DEBUG_OPTION --inspect-brk node_modules/jest/bin/jest --runInBand --detectOpenHandles --verbose --config ./jest_ui.config.js",
 		"test:e2e:bundle:android": "mkdir -p android/app/src/main/assets && npm run rn-bundle -- --reset-cache --platform android --dev false --minify false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",