Merge pull request #1247 from wordpress-mobile/refactor/block-toolbar

Refactor BlockToolbar out of BlockList

__device-tests__/gutenberg-editor-block-insertion.test.js

@@ -61,18 +61,25 @@ describe( 'Gutenberg Editor tests for Block insertion', () => {
 
 		await editorPage.verifyHtmlContent( testData.blockInsertionHtml );
 
+		// wait for the block editor to load and for accessibility ids to update
+		await driver.sleep( 3000 );
+
 		// Workaround for now since deleting the first element causes a crash on CI for Android
 		if ( isAndroid() ) {
-			paragraphBlockElement = await editorPage.getParagraphBlockAtPosition( 3 );
+			paragraphBlockElement = await editorPage.getParagraphBlockAtPosition( 3, { autoscroll: true } );
 			await paragraphBlockElement.click();
 			await editorPage.removeParagraphBlockAtPosition( 3 );
 			for ( let i = 3; i > 0; i-- ) {
-				paragraphBlockElement = await editorPage.getParagraphBlockAtPosition( i );
+				// wait for accessibility ids to update
+				await driver.sleep( 1000 );
+				paragraphBlockElement = await editorPage.getParagraphBlockAtPosition( i, { autoscroll: true } );
 				await paragraphBlockElement.click();
 				await editorPage.removeParagraphBlockAtPosition( i );
 			}
 		} else {
 			for ( let i = 4; i > 0; i-- ) {
+				// wait for accessibility ids to update
+				await driver.sleep( 1000 );
 				paragraphBlockElement = await editorPage.getParagraphBlockAtPosition( 1 );
 				await clickMiddleOfElement( driver, paragraphBlockElement );
 				await editorPage.removeParagraphBlockAtPosition( 1 );
@@ -90,10 +97,10 @@ describe( 'Gutenberg Editor tests for Block insertion', () => {
 		// Should have 3 paragraph blocks at this point
 
 		if ( isAndroid() ) {
-			await driver.hideDeviceKeyboard();
+			await editorPage.dismissKeyboard();
 		}
 
-		const titleElement = await editorPage.getTitleElement();
+		const titleElement = await editorPage.getTitleElement( { autoscroll: true } );
 		await titleElement.click();
 		await titleElement.click();
 

__device-tests__/helpers/utils.js

@@ -277,6 +277,24 @@ const swipeUp = async ( driver: wd.PromiseChainWebdriver, element: wd.PromiseCha
 	await action.perform();
 };
 
+// Starts from the middle of the screen and swipes downwards
+const swipeDown = async ( driver: wd.PromiseChainWebdriver ) => {
+	const size = await driver.getWindowSize();
+	const y = 0;
+
+	const startX = size.width / 2;
+	const startY = y + ( size.height / 3 );
+	const endX = startX;
+	const endY = startY - ( startY * -1 * 0.5 );
+
+	const action = await new wd.TouchAction( driver );
+	action.press( { x: startX, y: startY } );
+	action.wait( 3000 );
+	action.moveTo( { x: endX, y: endY } );
+	action.release();
+	await action.perform();
+};
+
 const toggleHtmlMode = async ( driver: wd.PromiseChainWebdriver, toggleOn: boolean ) => {
 	if ( isAndroid() ) {
 		// Hit the "Menu" key
@@ -324,6 +342,7 @@ module.exports = {
 	tapSelectAllAboveElement,
 	tapCopyAboveElement,
 	tapPasteAboveElement,
+	swipeDown,
 	swipeUp,
 	stopDriver,
 	toggleHtmlMode,

__device-tests__/pages/editor-page.js

@@ -10,7 +10,7 @@ import wd from 'wd';
 /**
  * Internal dependencies
  */
-import { isAndroid, swipeUp, typeString, toggleHtmlMode } from '../helpers/utils';
+import { isAndroid, swipeUp, swipeDown, typeString, toggleHtmlMode } from '../helpers/utils';
 
 export default class EditorPage {
 	driver: wd.PromiseChainWebdriver;
@@ -46,19 +46,61 @@ export default class EditorPage {
 	// Finds the wd element for new block that was added and sets the element attribute
 	// and accessibilityId attributes on this object and selects the block
 	// position uses one based numbering
-	async getBlockAtPosition( position: number, blockName: string ) {
+	async getBlockAtPosition( position: number, blockName: string, options: { autoscroll: boolean } = { autoscroll: false } ) {
 		const blockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }.")]`;
 		const elements = await this.driver.elementsByXPath( blockLocator );
+		const lastElementFound = elements[ elements.length - 1 ];
+		if ( elements.length === 0 && options.autoscroll ) {
+			const firstBlockVisible = await this.getFirstBlockVisible();
+			const lastBlockVisible = await this.getLastBlockVisible();
+			// exit if no block is found
+			if ( ! firstBlockVisible || ! lastBlockVisible ) {
+				return lastElementFound;
+			}
+			const firstBlockAccessibilityId = await firstBlockVisible.getAttribute( this.accessibilityIdKey );
+			const firstBlockRowMatch = /Row (\d+)\./.exec( firstBlockAccessibilityId );
+			const firstBlockRow = firstBlockRowMatch && Number( firstBlockRowMatch[ 1 ] );
+			const lastBlockAccessibilityId = await lastBlockVisible.getAttribute( this.accessibilityIdKey );
+			const lastBlockRowMatch = /Row (\d+)\./.exec( lastBlockAccessibilityId );
+			const lastBlockRow = lastBlockRowMatch && Number( lastBlockRowMatch[ 1 ] );
+			if ( firstBlockRow && position < firstBlockRow ) {
+				if ( firstBlockRow === 1 ) { // we're at the top already stop recursing
+					return lastElementFound;
+				}
+				// scroll up
+				await swipeDown( this.driver );
+			} else if ( lastBlockRow && position > lastBlockRow ) {
+				// scroll down
+				await swipeUp( this.driver );
+			}
+			return this.getBlockAtPosition( position, blockName, options );
+		}
+		return lastElementFound;
+	}
+
+	async getFirstBlockVisible() {
+		const firstBlockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, " Block. Row ")]`;
+		const elements = await this.driver.elementsByXPath( firstBlockLocator );
+		return elements[ 0 ];
+	}
+
+	async getLastBlockVisible() {
+		const firstBlockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, " Block. Row ")]`;
+		const elements = await this.driver.elementsByXPath( firstBlockLocator );
 		return elements[ elements.length - 1 ];
 	}
 
 	async hasBlockAtPosition( position: number, blockName: string = '' ) {
 		return undefined !== await this.getBlockAtPosition( position, blockName );
 	}
 
-	async getTitleElement() {
+	async getTitleElement( options: { autoscroll: boolean } = { autoscroll: false } ) {
 		//TODO: Improve the identifier for this element
 		const elements = await this.driver.elementsByXPath( `//*[contains(@${ this.accessibilityIdXPathAttrib }, "Post title.")]` );
+		if ( elements.length === 0 && options.autoscroll ) {
+			await swipeDown( this.driver );
+			return this.getTitleElement( options );
+		}
 		return elements[ elements.length - 1 ];
 	}
 
@@ -198,8 +240,8 @@ export default class EditorPage {
 		await this.addNewBlock( this.paragraphBlockName );
 	}
 
-	async getParagraphBlockAtPosition( position: number ) {
-		return this.getBlockAtPosition( position, this.paragraphBlockName );
+	async getParagraphBlockAtPosition( position: number, options: { autoscroll: boolean } = { autoscroll: false } ) {
+		return this.getBlockAtPosition( position, this.paragraphBlockName, options );
 	}
 
 	async hasParagraphBlockAtPosition( position: number ) {