Add paragraph block writing flow tests

__device-tests__/gutenberg-editor.test.js

@@ -6,10 +6,15 @@
  * Internal dependencies
  */
 import EditorPage from './pages/editor-page';
-import ParagraphBlockInteraction from './blocks/paragraph-block-interaction';
-import { setupDriver, isLocalEnvironment, timer, stopDriver } from './helpers/utils';
+import {
+	setupDriver,
+	isLocalEnvironment,
+	clickMiddleOfElement,
+	clickBeginningOfElement,
+	stopDriver } from './helpers/utils';
+import testData from './helpers/test-data';
 
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 120000;
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 240000;
 
 describe( 'Gutenberg Editor tests', () => {
 	let driver;
@@ -37,11 +42,63 @@ describe( 'Gutenberg Editor tests', () => {
 	} );
 
 	it( 'should be able to add a new Paragraph block', async () => {
-		const paragraphBlockInteraction = new ParagraphBlockInteraction( driver );
-		await editorPage.addNewBlock( paragraphBlockInteraction );
-		await paragraphBlockInteraction.sendText( 'Hello Gutenberg!' );
-		await timer( 3000 );
-		expect( await paragraphBlockInteraction.getText() ).toBe( 'Hello Gutenberg!' );
+		await editorPage.addNewParagraphBlock();
+		const paragraphBlockElement = await editorPage.getParagraphBlockAtPosition( 1 );
+		await editorPage.sendTextToParagraphBlock( paragraphBlockElement, testData.shortText );
+		await editorPage.removeParagraphBlockAtPosition( 1 );
+	} );
+
+	it( 'should be able to split one paragraph block into two', async () => {
+		await editorPage.addNewParagraphBlock();
+		const paragraphBlockElement = await editorPage.getParagraphBlockAtPosition( 1 );
+		await editorPage.sendTextToParagraphBlock( paragraphBlockElement, testData.shortText );
+		const textViewElement = await editorPage.getTextViewForParagraphBlock( paragraphBlockElement );
+		await clickMiddleOfElement( driver, textViewElement );
+		await editorPage.sendTextToParagraphBlock( paragraphBlockElement, '\n' );
+		expect( await editorPage.hasParagraphBlockAtPosition( 1 ) && await editorPage.hasParagraphBlockAtPosition( 2 ) )
+			.toBe( true );
+
+		const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 );
+		const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 );
+		expect( text0 ).not.toBe( '' );
+		expect( text1 ).not.toBe( '' );
+		expect( testData.shortText ).toMatch( new RegExp( `${ text0 + text1 }|${ text0 } ${ text1 }` ) );
+
+		await editorPage.removeParagraphBlockAtPosition( 2 );
+		await editorPage.removeParagraphBlockAtPosition( 1 );
+	} );
+
+	it( 'should be able to merge 2 paragraph blocks into 1', async () => {
+		await editorPage.addNewParagraphBlock();
+		let paragraphBlockElement = await editorPage.getParagraphBlockAtPosition( 1 );
+		await editorPage.sendTextToParagraphBlock( paragraphBlockElement, testData.shortText );
+		let textViewElement = await editorPage.getTextViewForParagraphBlock( paragraphBlockElement );
+		await clickMiddleOfElement( driver, textViewElement );
+		await editorPage.sendTextToParagraphBlock( paragraphBlockElement, '\n' );
+		expect( await editorPage.hasParagraphBlockAtPosition( 1 ) && await editorPage.hasParagraphBlockAtPosition( 2 ) )
+			.toBe( true );
+
+		const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 );
+		const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 );
+		paragraphBlockElement = await editorPage.getParagraphBlockAtPosition( 2 );
+		textViewElement = await editorPage.getTextViewForParagraphBlock( paragraphBlockElement );
+		await clickBeginningOfElement( driver, textViewElement );
+		await editorPage.sendTextToParagraphBlock( paragraphBlockElement, '\u0008' );
+
+		const text = await editorPage.getTextForParagraphBlockAtPosition( 1 );
+		expect( text0 + text1 ).toMatch( text );
+
+		expect( await editorPage.hasParagraphBlockAtPosition( 2 ) ).toBe( false );
+		await editorPage.removeParagraphBlockAtPosition( 1 );
+	} );
+
+	it( 'should be able to create a post with multiple paragraph blocks', async () => {
+		await editorPage.addNewParagraphBlock();
+		await editorPage.sendTextToParagraphBlockAtPosition( 1, testData.longText );
+
+		for ( let i = 4; i > 0; i-- ) {
+			await editorPage.removeParagraphBlockAtPosition( i );
+		}
 	} );
 
 	afterAll( async () => {

__device-tests__/helpers/appium-local.js

@@ -14,6 +14,7 @@ export const start = ( localAppiumPort: number ) => new Promise < childProcess.C
 		'--port', localAppiumPort.toString(),
 		'--log', './appium-out.log',
 		'--log-no-colors',
+		'--relaxed-security', // Needed for mobile:shell commend for text entry on Android
 	] );
 
 	let appiumOutputBuffer = '';

__device-tests__/helpers/test-data.js

@@ -0,0 +1,6 @@
+exports.shortText = `Hello Gutenberg! My name is Appium`;
+
+exports.longText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus velit et nunc tristique, ut tincidunt ipsum placerat. Maecenas placerat nec elit sit amet vulputate. 
+Nam suscipit dolor eu arcu efficitur, nec faucibus sapien ullamcorper. Etiam nibh risus, tincidunt quis purus a, dictum porta dui. Phasellus lacinia iaculis odio, et eleifend d
+Nullam suscipit volutpat velit eget varius. Etiam diam ex, finibus eu turpis a, semper tempus ante. Vestibulum quis elit et felis sagittis mollis.
+Nullam porta aliquam nisi, eu dapibus mauris dignissim at. Praesent ut congue sem. Nullam a rhoncus metus.`;

__device-tests__/helpers/utils.js

@@ -36,6 +36,13 @@ const localIOSAppPath = process.env.IOS_APP_PATH || defaultIOSAppPath;
 const localAppiumPort = serverConfigs.local.port; // Port to spawn appium process for local runs
 let appiumProcess: ?childProcess.ChildProcess;
 
+// Used to map unicode and special values to keycodes on Android
+// Docs for keycode values: https://developer.android.com/reference/android/view/KeyEvent.html
+const strToKeycode = {
+	'\n': 66,
+	'\u0008': 67,
+};
+
 const timer = ( ms: number ) => new Promise < {} > ( ( res ) => setTimeout( res, ms ) );
 
 const isAndroid = () => {
@@ -92,8 +99,9 @@ const setupDriver = async () => {
 	}
 
 	if ( ! isLocalEnvironment() ) {
-		desiredCaps.name = `Gutenberg Editor Tests[${ rnPlatform }]`;
-		desiredCaps.tags = [ 'Gutenberg' ];
+		const branch = process.env.CIRCLE_BRANCH || '';
+		desiredCaps.name = `Gutenberg Editor Tests[${ rnPlatform }]-${ branch }`;
+		desiredCaps.tags = [ 'Gutenberg', branch ];
 	}
 
 	await driver.init( desiredCaps );
@@ -129,10 +137,86 @@ const stopDriver = async ( driver: wd.PromiseChainWebdriver ) => {
 	}
 };
 
+// attempts to type a string to a given element, need for this stems from
+// https://github.com/appium/appium/issues/12285#issuecomment-471872239
+// https://github.com/facebook/WebDriverAgent/issues/1084
+const typeString = async ( driver: wd.PromiseChainWebdriver, element: wd.PromiseChainWebdriver.Element, str: string, clear: boolean = false ) => {
+	if ( clear ) {
+		await element.clear();
+	}
+
+	if ( isAndroid() ) {
+		const paragraphs = str.split( '\n' );
+
+		for ( let i = 0; i < paragraphs.length; i++ ) {
+			const paragraph = paragraphs[ i ].replace( /[ ]/g, '%s' );
+			if ( paragraph in strToKeycode ) {
+				await driver.pressKeycode( strToKeycode[ paragraph ] );
+			} else {
+				// Execute with adb shell input <text> since normal type auto clears field on Android
+				await driver.execute( 'mobile: shell', { command: 'input', args: [ 'text', paragraph ] } );
+			}
+			if ( i !== paragraphs.length - 1 ) {
+				await driver.pressKeycode( strToKeycode[ '\n' ] );
+			}
+		}
+	} else {
+		return await element.type( str );
+	}
+};
+
+// Calculates middle x,y and clicks that position
+const clickMiddleOfElement = async ( driver: wd.PromiseChainWebdriver, element: wd.PromiseChainWebdriver.Element ) => {
+	const location = await element.getLocation();
+	const size = await element.getSize();
+
+	const action = await new wd.TouchAction( driver );
+	action.press( { x: location.x + ( size.width / 2 ), y: location.y } );
+	action.release();
+	await action.perform();
+};
+
+// Clicks in the top left of an element
+const clickBeginningOfElement = async ( driver: wd.PromiseChainWebdriver, element: wd.PromiseChainWebdriver.Element ) => {
+	const location = await element.getLocation();
+	const action = await new wd.TouchAction( driver );
+	action.press( { x: location.x, y: location.y } );
+	action.release();
+	await action.perform();
+};
+
+// Starts from the middle of the screen or the element(if specified)
+// and swipes upwards
+const swipeUp = async ( driver: wd.PromiseChainWebdriver, element: wd.PromiseChainWebdriver.Element = undefined ) => {
+	let size = await driver.getWindowSize();
+	let y = 0;
+	if ( element !== undefined ) {
+		size = await element.getSize();
+		const location = await element.getLocation();
+		y = location.y;
+	}
+
+	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();
+};
+
 module.exports = {
 	timer,
 	setupDriver,
 	isLocalEnvironment,
 	isAndroid,
+	typeString,
+	clickMiddleOfElement,
+	clickBeginningOfElement,
+	swipeUp,
 	stopDriver,
 };