Merge pull request #1100 from wordpress-mobile/try/add-paste-ui-test

Add Paste UI Tests for Android

__device-tests__/gutenberg-editor-paste.test.js

@@ -0,0 +1,126 @@
+/**
+ * @format
+ * */
+
+/**
+ * Internal dependencies
+ */
+import EditorPage from './pages/editor-page';
+import {
+	setupDriver,
+	isLocalEnvironment,
+	longPressMiddleOfElement,
+	tapSelectAllAboveElement,
+	tapCopyAboveElement,
+	tapPasteAboveElement,
+	stopDriver,
+	isAndroid,
+} from './helpers/utils';
+import testData from './helpers/test-data';
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 240000;
+
+describe( 'Gutenberg Editor paste tests', () => {
+	// skip iOS for now
+	if ( ! isAndroid() ) {
+		it( 'skips the tests on any platform other than Android', async () => {
+		} );
+		return;
+	}
+
+	let driver;
+	let editorPage;
+	let allPassed = true;
+
+	// Use reporter for setting status for saucelabs Job
+	if ( ! isLocalEnvironment() ) {
+		const reporter = {
+			specDone: async ( result ) => {
+				allPassed = allPassed && result.status !== 'failed';
+			},
+		};
+
+		jasmine.getEnv().addReporter( reporter );
+	}
+
+	beforeAll( async () => {
+		driver = await setupDriver();
+		await driver.setClipboard( '', 'plaintext' );
+		editorPage = new EditorPage( driver );
+	} );
+
+	it( 'copies plain text from one paragraph block and pastes in another', async () => {
+		await editorPage.addNewParagraphBlock();
+		const paragraphBlockElement = await editorPage.getParagraphBlockAtPosition( 1 );
+
+		if ( isAndroid() ) {
+			await paragraphBlockElement.click();
+		}
+
+		await editorPage.sendTextToParagraphBlock( paragraphBlockElement, testData.pastePlainText );
+		const textViewElement = await editorPage.getTextViewForParagraphBlock( paragraphBlockElement );
+
+		// copy content to clipboard
+		await longPressMiddleOfElement( driver, textViewElement );
+		await tapSelectAllAboveElement( driver, textViewElement );
+		await tapCopyAboveElement( driver, textViewElement );
+
+		// create another paragraph block
+		await editorPage.addNewParagraphBlock();
+		const paragraphBlockElement2 = await editorPage.getParagraphBlockAtPosition( 2 );
+
+		if ( isAndroid() ) {
+			await paragraphBlockElement2.click();
+		}
+
+		const textViewElement2 = await editorPage.getTextViewForParagraphBlock( paragraphBlockElement2 );
+
+		// paste into second paragraph block
+		await longPressMiddleOfElement( driver, textViewElement2 );
+		await tapPasteAboveElement( driver, textViewElement2 );
+
+		const text = await editorPage.getTextForParagraphBlockAtPosition( 2 );
+		expect( text ).toBe( testData.pastePlainText );
+	} );
+
+	it( 'copies styled text from one paragraph block and pastes in another', async () => {
+		// create paragraph block with styled text by editing html
+		await editorPage.setHtmlContentAndroid( testData.pasteHtmlText );
+		const paragraphBlockElement = await editorPage.getParagraphBlockAtPosition( 1 );
+
+		if ( isAndroid() ) {
+			await paragraphBlockElement.click();
+		}
+
+		const textViewElement = await editorPage.getTextViewForParagraphBlock( paragraphBlockElement );
+
+		// copy content to clipboard
+		await longPressMiddleOfElement( driver, textViewElement );
+		await tapSelectAllAboveElement( driver, textViewElement );
+		await tapCopyAboveElement( driver, textViewElement );
+
+		// create another paragraph block
+		await editorPage.addNewParagraphBlock();
+		const paragraphBlockElement2 = await editorPage.getParagraphBlockAtPosition( 2 );
+
+		if ( isAndroid() ) {
+			await paragraphBlockElement2.click();
+		}
+
+		const textViewElement2 = await editorPage.getTextViewForParagraphBlock( paragraphBlockElement2 );
+
+		// paste into second paragraph block
+		await longPressMiddleOfElement( driver, textViewElement2 );
+		await tapPasteAboveElement( driver, textViewElement2 );
+
+		// check styled text by verifying html contents
+		await editorPage.verifyHtmlContent( testData.pasteHtmlTextResult );
+	} );
+
+	afterAll( async () => {
+		if ( ! isLocalEnvironment() ) {
+			driver.sauceJobStatus( allPassed );
+		}
+		await stopDriver( driver );
+	} );
+} );

__device-tests__/helpers/test-data.js

@@ -19,6 +19,16 @@ exports.listEndedHtml = `<!-- wp:list -->
 <p></p>
 <!-- /wp:paragraph -->`;
 
+exports.pastePlainText = `Hello paste`;
+
+const pastedHtmlText = `<!-- wp:paragraph -->
+<p><strong>Hello</strong> paste</p>
+<!-- /wp:paragraph -->`;
+
+exports.pasteHtmlText = pastedHtmlText;
+
+exports.pasteHtmlTextResult = `${ pastedHtmlText }\n\n${ pastedHtmlText }`;
+
 exports.deviceRotationHtml = `<!-- wp:paragraph -->
 <p>The finer continuum interprets the polynomial rabbit. When can the geology cheat? An astronomer runs. Should a communist consent?</p>
 <!-- /wp:paragraph -->

__device-tests__/helpers/utils.js

@@ -185,6 +185,51 @@ const clickBeginningOfElement = async ( driver: wd.PromiseChainWebdriver, elemen
 	await action.perform();
 };
 
+// long press to activate context menu
+const longPressMiddleOfElement = 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 );
+	const x = location.x + ( size.width / 2 );
+	const y = location.y + ( size.height / 2 );
+	action.press( { x, y } );
+	action.wait( 2000 );
+	action.release();
+	await action.perform();
+};
+
+// press "Select All" in floating context menu
+const tapSelectAllAboveElement = async ( driver: wd.PromiseChainWebdriver, element: wd.PromiseChainWebdriver.Element ) => {
+	const location = await element.getLocation();
+	const action = await new wd.TouchAction( driver );
+	const x = location.x + 300;
+	const y = location.y - 50;
+	action.press( { x, y } );
+	action.release();
+	await action.perform();
+};
+
+// press "Copy" in floating context menu
+const tapCopyAboveElement = async ( driver: wd.PromiseChainWebdriver, element: wd.PromiseChainWebdriver.Element ) => {
+	const location = await element.getLocation();
+	const action = await new wd.TouchAction( driver );
+	const x = location.x + 220;
+	const y = location.y - 50;
+	action.press( { x, y } );
+	action.release();
+	await action.perform();
+};
+
+// press "Paste" in floating context menu
+const tapPasteAboveElement = 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 + 100, y: location.y - 50 } );
+	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 ) => {
@@ -252,6 +297,10 @@ module.exports = {
 	typeString,
 	clickMiddleOfElement,
 	clickBeginningOfElement,
+	longPressMiddleOfElement,
+	tapSelectAllAboveElement,
+	tapCopyAboveElement,
+	tapPasteAboveElement,
 	swipeUp,
 	stopDriver,
 	toggleHtmlMode,

__device-tests__/pages/editor-page.js

@@ -69,6 +69,16 @@ export default class EditorPage {
 		await toggleHtmlMode( this.driver, false );
 	}
 
+	// set html editor content explicitly
+	async setHtmlContentAndroid( html: string ) {
+		await toggleHtmlMode( this.driver, true );
+
+		const htmlContentView = await this.getTextViewForHtmlViewContent();
+		await htmlContentView.setText( html );
+
+		await toggleHtmlMode( this.driver, false );
+	}
+
 	// =========================
 	// Block toolbar functions
 	// =========================