[RNMobile] Audio block UI test (#28674)

* Added audio block test data to support UI tests.

* Added the audio block to the blockNames used to add blocks

* Added two UI tests for the Audio Block.

* bumped audio block id to see if the full test suite on iOS will pass.

* isAndroid is not a variable, it is a property so that was corrected.

* inverted the expected assertion content for the File and Audio block.

* Updated the id of the media item that is returned from the test WP Media

packages/react-native-editor/__device-tests__/gutenberg-editor-audio.test.js

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import { blockNames } from './pages/editor-page';
+import testData from './helpers/test-data';
+import { isAndroid } from './helpers/utils';
+
+describe( 'Gutenberg Editor Audio Block tests', () => {
+	it( 'should be able to add an audio block', async () => {
+		await editorPage.addNewBlock( blockNames.audio );
+		const block = await editorPage.getFirstBlockVisible();
+		await expect( block ).toBeTruthy();
+	} );
+
+	it( 'should add an audio file to the block', async () => {
+		const block = await editorPage.getFirstBlockVisible();
+
+		block.click();
+
+		if ( isAndroid() ) {
+			await editorPage.driver.sleep( 5000 );
+		} else {
+			await editorPage.driver.sleep( 1000 );
+		}
+
+		await editorPage.chooseMediaLibrary();
+
+		const html = await editorPage.getHtmlContent();
+
+		expect( html.toLowerCase() ).toBe(
+			testData.audioBlockPlaceholder.toLowerCase()
+		);
+	} );
+} );

packages/react-native-editor/__device-tests__/gutenberg-editor-file-@canary.test.js

@@ -17,7 +17,7 @@ describe( 'Gutenberg Editor File Block tests', () => {
 
 		block.click();
 
-		if ( isAndroid ) {
+		if ( isAndroid() ) {
 			await editorPage.driver.sleep( 5000 );
 		} else {
 			await editorPage.driver.sleep( 1000 );
@@ -26,8 +26,9 @@ describe( 'Gutenberg Editor File Block tests', () => {
 		await editorPage.chooseMediaLibrary();
 
 		const html = await editorPage.getHtmlContent();
-		expect( testData.fileBlockPlaceholder.toLowerCase() ).toBe(
-			html.toLowerCase()
+
+		expect( html.toLowerCase() ).toBe(
+			testData.fileBlockPlaceholder.toLowerCase()
 		);
 	} );
 } );

packages/react-native-editor/__device-tests__/helpers/test-data.js

@@ -133,3 +133,7 @@ exports.coverHeightWithRemUnit = `<!-- wp:cover {"customOverlayColor":"#ffffff",
 exports.fileBlockPlaceholder = `<!-- wp:file {"id":3,"href":"https://wordpress.org/latest.zip"} -->
 <div class="wp-block-file"><a href="https://wordpress.org/latest.zip">WordPress.zip</a><a href="https://wordpress.org/latest.zip" class="wp-block-file__button" download>Download</a></div>
 <!-- /wp:file -->`;
+
+exports.audioBlockPlaceholder = `<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
+<!-- /wp:audio -->`;

packages/react-native-editor/__device-tests__/pages/editor-page.js

@@ -588,6 +588,7 @@ const blockNames = {
 	spacer: 'Spacer',
 	verse: 'Verse',
 	file: 'File',
+	audio: 'Audio',
 };
 
 module.exports = { initializeEditorPage, blockNames };

packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java

@@ -85,7 +85,7 @@ public void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelected
                         rnMediaList.add(new Media(3, "https://wordpress.org/latest.zip", "zip", "WordPress latest version", "WordPress.zip"));
                         break;
                     case AUDIO:
-                        rnMediaList.add(new Media(4, "https://cldup.com/59IrU0WJtq.mp3", "audio", "Summer presto", ""));
+                        rnMediaList.add(new Media(5, "https://cldup.com/59IrU0WJtq.mp3", "audio", "Summer presto", ""));
                         break;
                 }
                 mediaSelectedCallback.onMediaFileSelected(rnMediaList);