[RNMobile] Audio block URL Parser unit tests (#31920)

* Basics of Audio block working

* Add audio support to MediaUpload

* Add handling of file uploads and replace

* WPMediaLibrary support for Audio block

* Avoid removing media info on error state

* Linting

* Added an AUDIO file to the test requestMediaPickFromMediaLibrary func

* Fixed typo in ToolbarButton of Audio Block.

* Removed auto help behavior present on web that's not used on mobile.

* [Android] Wired the click of the Audio Media Library button.

* Added Audio media options for choosing audio file locally.

* [RNMobile] Audio Block: Proper caption field (#27689)

* Add alert prompt to insert from URL

* Set entered URL in audio block attributes

* initial integration with react native prompt.

* updated prompt lib.

* updated commit hash of prompt lib.

* Updated package-lock.json.

* Added RNPromptPackage to Glue Code.

* fixed merge conflicts between the edit.native.js files of the branches

* added onSelectURL to the media-upload component

* added onSelectURL to the media-placeholder

* updated onSelectURL support with notice and URL validation

* sync package-lock.json

* updated package-lock.json

* updated package-lock.json

* updated react-native-prompt-android setup due to binary dep changes.

* sync package-lock.json

* Integrated RNPromptPackage with the glue code.

* sync package-lock.json

* package-lock.json fix

* sync package-lock.json

* Added the globe icon to the Insert from URL source.Only shown on Android

* Extract filename from all URL types and optimized extension logic.

* Extracted the url parsing logic to a file so it can be tested.

* integrated parseAudioUrl function with the Audio block.

* Created tests for the audio url parsing.

* Made the component and its respective tests native.

* Reduced onPress -> onSelectURL logic since the parameters match.

* Added entry to CHANGELOG.md

* Utilized getPath from the `wordpress/url` package to simplify logic.

* Added URL with folder to the tests for audio urls with an extension.

* Enhanced tests to verify the title and extension values.

* Trimmed the extension since a space exists in the string for the UI.

* Removed trim and put the space in the string.

* Removed duplicate entry.

Co-authored-by: eToledo <[email protected]>
Co-authored-by: Ceyhun Ozugur <[email protected]>

packages/components/src/mobile/audio-player/audio-url-parser.native.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { safeDecodeURI, getPath } from '@wordpress/url';
+
+export const parseAudioUrl = ( src ) => {
+	const fileName = getPath( safeDecodeURI( src ) ).split( '/' ).pop();
+	const parts = fileName.split( '.' );
+	const extension = parts.length === 2 ? parts.pop().toUpperCase() + ' ' : '';
+	const title = parts.join( '.' );
+	return { title, extension };
+};

packages/components/src/mobile/audio-player/index.native.js

@@ -22,13 +22,14 @@ import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
 } from '@wordpress/react-native-bridge';
-import { getProtocol, safeDecodeURI } from '@wordpress/url';
+import { getProtocol } from '@wordpress/url';
 import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
+import { parseAudioUrl } from './audio-url-parser.native';
 
 const isIOS = Platform.OS === 'ios';
 
@@ -127,17 +128,9 @@ function Player( {
 	let extension = '';
 
 	if ( src ) {
-		const decodedURI = safeDecodeURI( src );
-		const fileName = decodedURI
-			.split( '#' )
-			.shift()
-			.split( '?' )
-			.shift()
-			.split( '/' )
-			.pop();
-		const parts = fileName.split( '.' );
-		extension = parts.length === 2 ? parts.pop().toUpperCase() + ' ' : '';
-		title = parts.join( '.' );
+		const result = parseAudioUrl( src );
+		extension = result.extension;
+		title = result.title;
 	}
 
 	const getSubtitleValue = () => {

packages/components/src/mobile/audio-player/test/audio-url-parser.native.js

@@ -0,0 +1,38 @@
+/**
+ * Internal dependencies
+ */
+import { parseAudioUrl } from '../audio-url-parser.native';
+
+const supportedAudioUrlsWithExtensions = [
+	'https://www.mp3.com/file.mp3?key1=value1&key2=value2#anchorforsomereason',
+	'https://www.mp3.com/file.mp3?key1=value1&key2=value2',
+	'https://www.mp3.com/file.mp3',
+	`https://www.mp3.com/folder/file.mp3`,
+];
+
+const supportedAudioUrlsWithoutExtensions = [
+	'https://www.mp3.com/file?key1=value1&key2=value2#anchorforsomereason',
+	'https://www.mp3.com/file?key1=value1&key2=value2',
+	'https://www.mp3.com/file',
+	'https://www.mp3.com/folder/file',
+];
+
+describe( 'supportedAudioUrlsWithExtensions', () => {
+	supportedAudioUrlsWithExtensions.forEach( ( url ) => {
+		it( `supports ${ url }`, () => {
+			const { title, extension } = parseAudioUrl( url );
+			expect( title ).toBe( 'file' );
+			expect( extension ).toBe( 'MP3 ' );
+		} );
+	} );
+} );
+
+describe( 'supportedAudioUrlsWithoutExtensions', () => {
+	supportedAudioUrlsWithoutExtensions.forEach( ( url ) => {
+		it( `supports ${ url }`, () => {
+			const { title, extension } = parseAudioUrl( url );
+			expect( title ).toBe( 'file' );
+			expect( extension ).toBe( '' );
+		} );
+	} );
+} );