Add UI tests to unsupported block editor

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

@@ -131,7 +131,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 	// Restricting these test to Android because I was not able to update the html on iOS
 	if ( isAndroid() ) {
 		it( 'should be able to merge blocks with unknown html elements', async () => {
-			await editorPage.setHtmlContentAndroid( `
+			await editorPage.setHtmlContent( `
 <!-- wp:paragraph -->
 <p><unknownhtmlelement>abc</unknownhtmlelement>D</p>
 <!-- /wp:paragraph -->
@@ -154,7 +154,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 
 		// Based on https://github.com/wordpress-mobile/gutenberg-mobile/pull/1507
 		it( 'should handle multiline paragraphs from web', async () => {
-			await editorPage.setHtmlContentAndroid( `
+			await editorPage.setHtmlContent( `
 	<!-- wp:paragraph -->
 	<p>multiple lines<br><br></p>
 	<!-- /wp:paragraph -->

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

@@ -84,7 +84,7 @@ describe( 'Gutenberg Editor paste tests', () => {
 
 	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 );
+		await editorPage.setHtmlContent( testData.pasteHtmlText );
 		const paragraphBlockElement = await editorPage.getBlockAtPosition( paragraphBlockName );
 		if ( isAndroid() ) {
 			await paragraphBlockElement.click();

__device-tests__/gutenberg-editor-unsupported-blocks.test.js

@@ -0,0 +1,64 @@
+/**
+ * @format
+ * */
+
+/**
+ * Internal dependencies
+ */
+import EditorPage from './pages/editor-page';
+import {
+	setupDriver,
+	isLocalEnvironment,
+	stopDriver,
+} from './helpers/utils';
+import testData from './helpers/test-data';
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000;
+
+describe( 'Gutenberg Editor Unsupported Block Editor Tests', () => {
+	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();
+		editorPage = new EditorPage( driver );
+	} );
+
+	it( 'should be able to see visual editor', async () => {
+		await expect( editorPage.getBlockList() ).resolves.toBe( true );
+	} );
+
+	it( 'should be able to open the unsupported block web view editor', async () => {
+		await editorPage.setHtmlContent( testData.unsupportedBlockHtml );
+
+		const firstVisibleBlock = await editorPage.getFirstBlockVisible();
+		await firstVisibleBlock.click();
+
+		const helpButton = await editorPage.getUnsupportedBlockHelpButton();
+		await helpButton.click();
+
+		const editButton = await editorPage.getUnsupportedBlockBottomSheetEditButton();
+		await editButton.click();
+
+		await expect( editorPage.getUnsupportedBlockWebView() ).resolves.toBeTruthy();
+	} );
+
+	afterAll( async () => {
+		if ( ! isLocalEnvironment() ) {
+			driver.sauceJobStatus( allPassed );
+		}
+		await stopDriver( driver );
+	} );
+} );

__device-tests__/helpers/caps.js

@@ -17,7 +17,7 @@ const ios = {
 
 exports.iosLocal = {
 	...ios,
-	platformVersion: '13.4',
+	platformVersion: '13.5',
 	deviceName: 'iPhone 11',
 };
 

__device-tests__/helpers/test-data.js

@@ -98,3 +98,8 @@ exports.imageShorteHtml = `<!-- wp:image {"id":1,"sizeslug":"large"} -->
 <!-- wp:paragraph -->
 <p>rock music approaches at high velocity.</p>
 <!-- /wp:paragraph -->`;
+
+exports.unsupportedBlockHtml = `<!-- wp:audio -->
+<figure class="wp-block-audio"><audio controls src="https://www2.cs.uic.edu/~i101/SoundFiles/StarWars60.wav"></audio></figure>
+<!-- /wp:audio -->
+`;

__device-tests__/pages/editor-page.js

@@ -114,7 +114,7 @@ export default class EditorPage {
 		let blockLocator = `//*[@${ this.accessibilityIdXPathAttrib }="${ accessibilityId }"]`;
 
 		if ( ! isAndroid() ) {
-			blockLocator += '//XCUIElementTypeTextView';
+			blockLocator = `//XCUIElementTypeTextView[starts-with(@${ this.accessibilityIdXPathAttrib }, "${ accessibilityId }")]`;
 		}
 		return await this.driver.elementByXPath( blockLocator );
 	}
@@ -132,11 +132,11 @@ export default class EditorPage {
 	}
 
 	// set html editor content explicitly
-	async setHtmlContentAndroid( html: string ) {
+	async setHtmlContent( html: string ) {
 		await toggleHtmlMode( this.driver, true );
 
 		const htmlContentView = await this.getTextViewForHtmlViewContent();
-		await htmlContentView.setText( html );
+		await htmlContentView.type( html );
 
 		await toggleHtmlMode( this.driver, false );
 	}
@@ -390,4 +390,41 @@ export default class EditorPage {
 		const textViewElement = await this.getTextViewForHeadingBlock( block, true );
 		return await typeString( this.driver, textViewElement, text, clear );
 	}
+
+	// =============================
+	// Unsupported Block functions
+	// =============================
+
+	async getUnsupportedBlockHelpButton() {
+		const accessibilityId = 'Help icon';
+		let blockLocator = '//android.widget.Button[@content-desc="Help icon, Tap here to show help"]';
+
+		if ( ! isAndroid() ) {
+			blockLocator = `//XCUIElementTypeButton[@name="${ accessibilityId }"]`;
+		}
+		return await this.driver.elementByXPath( blockLocator );
+	}
+
+	async getUnsupportedBlockBottomSheetEditButton() {
+		const accessibilityId = 'Edit block in web browser';
+		let blockLocator = '//android.widget.Button[@content-desc="Edit block in web browser"]';
+
+		if ( ! isAndroid() ) {
+			blockLocator = `//XCUIElementTypeButton[@name="${ accessibilityId }"]`;
+		}
+		return await this.driver.elementByXPath( blockLocator );
+	}
+
+	async getUnsupportedBlockWebView() {
+		let blockLocator = '//android.webkit.WebView';
+
+		if ( ! isAndroid() ) {
+			blockLocator = '//XCUIElementTypeWebView';
+		}
+
+		this.driver.setImplicitWaitTimeout( 20000 );
+		const element = await this.driver.elementByXPath( blockLocator );
+		this.driver.setImplicitWaitTimeout( 5000 );
+		return element;
+	}
 }