@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.4.0

package/src/mobile/link-picker/link-picker-screen.native.js

@@ -1,7 +1,9 @@
 /**
  * External dependencies
  */
+import { Keyboard } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
+import { delay } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,14 +20,20 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 	const route = useRoute();
 
 	const onLinkPicked = ( { url, title } ) => {
-		navigation.navigate( returnScreenName, {
-			inputValue: url,
-			text: title,
-		} );
+		Keyboard.dismiss();
+		delay( () => {
+			navigation.navigate( returnScreenName, {
+				inputValue: url,
+				text: title,
+			} );
+		}, 100 );
 	};
 
 	const onCancel = () => {
-		navigation.goBack();
+		Keyboard.dismiss();
+		delay( () => {
+			navigation.goBack();
+		}, 100 );
 	};
 
 	const { inputValue } = route.params;

package/src/mobile/link-settings/index.native.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Platform, Clipboard } from 'react-native';
+import { Platform } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 /**
  * WordPress dependencies
  */

package/src/mobile/link-settings/test/edit.native.js

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import { Clipboard } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 import { fireEvent, initializeEditor, waitFor } from 'test/helpers';
 /**
  * WordPress dependencies
@@ -69,44 +69,33 @@ describe.each( [
 	 * GIVEN the CLIPBOARD has a URL copied;
 	 * WHEN the USER selects the SETTINGS BUTTON on the EDIT IMAGE BLOCK or EDIT BUTTON BLOCK;
 	 */
-	// eslint-disable-next-line jest/no-done-callback
-	it( 'should display the LINK SETTINGS with an EMPTY LINK TO field.', async ( done ) => {
+	it( 'should display the LINK SETTINGS with an EMPTY LINK TO field.', async () => {
 		// Arrange
-		const expectation =
-			'The LINK SETTINGS > LINK TO field SHOULD be displayed WITHOUT a URL from the CLIPBOARD.';
 		const url = 'https://tonytahmouchtest.files.wordpress.com';
 		const subject = await initializeEditor( { initialHtml } );
 		Clipboard.getString.mockReturnValue( url );
 
 		// Act
-		try {
-			const block = await waitFor( () =>
-				subject.getByA11yLabel(
-					type === 'core/image' ? /Image Block/ : /Button Block/
-				)
-			);
-			fireEvent.press( block );
-			fireEvent.press( block );
-			fireEvent.press(
-				await waitFor( () => subject.getByA11yLabel( 'Open Settings' ) )
-			);
-		} catch ( error ) {
-			done.fail( error );
-		}
+		const block = await waitFor( () =>
+			subject.getByA11yLabel(
+				type === 'core/image' ? /Image Block/ : /Button Block/
+			)
+		);
+		fireEvent.press( block );
+		fireEvent.press( block );
+		fireEvent.press(
+			await waitFor( () => subject.getByA11yLabel( 'Open Settings' ) )
+		);
 
 		// Assert
-		try {
-			await waitFor( () =>
-				subject.getByA11yLabel(
-					`Link to, ${
-						type === 'core/image' ? 'None' : 'Search or type URL'
-					}`
-				)
-			);
-			done();
-		} catch ( error ) {
-			done.fail( expectation );
-		}
+		const linkToField = await waitFor( () =>
+			subject.getByA11yLabel(
+				`Link to, ${
+					type === 'core/image' ? 'None' : 'Search or type URL'
+				}`
+			)
+		);
+		expect( linkToField ).toBeTruthy();
 	} );
 
 	describe( '<LinkPicker/>', () => {
@@ -117,64 +106,49 @@ describe.each( [
 			 * GIVEN the STATE has NO URL;
 			 * WHEN the USER selects the LINK TO cell;
 			 */
-			// eslint-disable-next-line jest/no-done-callback
-			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async ( done ) => {
+			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
 				// Arrange
-				const expectation =
-					'The LINK PICKER > LINK SUGGESTION SHOULD NOT suggest the URL from the CLIPBOARD.';
 				const url = 'tonytahmouchtest.files.wordpress.com';
 				const subject = await initializeEditor( { initialHtml } );
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act
-				try {
-					const block = await waitFor( () =>
+				const block = await waitFor( () =>
+					subject.getByA11yLabel(
+						type === 'core/image' ? /Image Block/ : /Button Block/
+					)
+				);
+				fireEvent.press( block );
+				fireEvent.press( block );
+				fireEvent.press(
+					await waitFor( () =>
+						subject.getByA11yLabel( 'Open Settings' )
+					)
+				);
+				fireEvent.press(
+					await waitFor( () =>
 						subject.getByA11yLabel(
-							type === 'core/image'
-								? /Image Block/
-								: /Button Block/
+							`Link to, ${
+								type === 'core/image'
+									? 'None'
+									: 'Search or type URL'
+							}`
 						)
-					);
-					fireEvent.press( block );
-					fireEvent.press( block );
+					)
+				);
+				if ( type === 'core/image' ) {
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( 'Open Settings' )
+							subject.getByA11yLabel( /Custom URL/ )
 						)
 					);
-					fireEvent.press(
-						await waitFor( () =>
-							subject.getByA11yLabel(
-								`Link to, ${
-									type === 'core/image'
-										? 'None'
-										: 'Search or type URL'
-								}`
-							)
-						)
-					);
-					if ( type === 'core/image' ) {
-						fireEvent.press(
-							await waitFor( () =>
-								subject.getByA11yLabel( /Custom URL/ )
-							)
-						);
-					}
-					await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
-				} catch ( error ) {
-					done.fail( error );
 				}
+				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
 
 				// Assert
-				waitFor(
-					() =>
-						subject.getByA11yLabel(
-							/Copy URL from the clipboard[,]/
-						),
-					{ timeout: 50, interval: 10 }
-				)
-					.then( () => done.fail( expectation ) )
-					.catch( () => done() );
+				expect(
+					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
+				).toBeNull();
 			} );
 		} );
 
@@ -185,87 +159,72 @@ describe.each( [
 			 * GIVEN the STATE has the SAME URL as the CLIPBOARD;
 			 * WHEN the USER selects the LINK TO cell;
 			 */
-			// eslint-disable-next-line jest/no-done-callback
-			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async ( done ) => {
+			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
 				// Arrange
-				const expectation =
-					'The LINK PICKER > LINK SUGGESTION SHOULD NOT suggest the URL from the CLIPBOARD.';
 				const url = 'https://tonytahmouchtest.files.wordpress.com';
 				const subject = await initializeEditor( { initialHtml } );
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act
-				try {
-					const block = await waitFor( () =>
+				const block = await waitFor( () =>
+					subject.getByA11yLabel(
+						type === 'core/image' ? /Image Block/ : /Button Block/
+					)
+				);
+				fireEvent.press( block );
+				fireEvent.press( block );
+				fireEvent.press(
+					await waitFor( () =>
+						subject.getByA11yLabel( 'Open Settings' )
+					)
+				);
+				fireEvent.press(
+					await waitFor( () =>
 						subject.getByA11yLabel(
-							type === 'core/image'
-								? /Image Block/
-								: /Button Block/
+							`Link to, ${
+								type === 'core/image'
+									? 'None'
+									: 'Search or type URL'
+							}`
 						)
-					);
-					fireEvent.press( block );
-					fireEvent.press( block );
+					)
+				);
+				if ( type === 'core/image' ) {
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel( 'Open Settings' )
+							subject.getByA11yLabel( 'Custom URL. Empty' )
 						)
 					);
-					fireEvent.press(
-						await waitFor( () =>
-							subject.getByA11yLabel(
-								`Link to, ${
-									type === 'core/image'
-										? 'None'
-										: 'Search or type URL'
-								}`
-							)
+				}
+				fireEvent.press(
+					await waitFor( () =>
+						subject.getByA11yLabel(
+							`Copy URL from the clipboard, ${ url }`
 						)
-					);
-					if ( type === 'core/image' ) {
-						fireEvent.press(
-							await waitFor( () =>
-								subject.getByA11yLabel( 'Custom URL. Empty' )
-							)
-						);
-					}
-					fireEvent.press(
-						await waitFor( () =>
-							subject.getByA11yLabel(
-								`Copy URL from the clipboard, ${ url }`
-							)
+					)
+				);
+				fireEvent.press(
+					await waitFor( () =>
+						subject.getByA11yLabel(
+							`Link to, ${
+								type === 'core/image' ? 'Custom URL' : url
+							}`
 						)
-					);
+					)
+				);
+				if ( type === 'core/image' ) {
 					fireEvent.press(
 						await waitFor( () =>
-							subject.getByA11yLabel(
-								`Link to, ${
-									type === 'core/image' ? 'Custom URL' : url
-								}`
-							)
+							subject.getByA11yLabel( `Custom URL, ${ url }` )
 						)
 					);
-					if ( type === 'core/image' ) {
-						fireEvent.press(
-							await waitFor( () =>
-								subject.getByA11yLabel( `Custom URL, ${ url }` )
-							)
-						);
-					}
-					await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
-				} catch ( error ) {
-					done.fail( error );
 				}
+				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
 
 				// Assert
-				waitFor(
-					() =>
-						subject.getByA11yLabel(
-							/Copy URL from the clipboard[,]/
-						),
-					{ timeout: 50, interval: 10 }
-				)
-					.then( () => done.fail( expectation ) )
-					.catch( () => done() );
+				expect(
+					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
+				).toBeNull();
 			} );
 		} );
 
@@ -279,72 +238,60 @@ describe.each( [
 			it(
 				'should display the LINK PICKER with the FROM CLIPBOARD CELL populated' +
 					' with the URL from the CLIPBOARD.',
-				// eslint-disable-next-line jest/no-done-callback
-				async ( done ) => {
+				async () => {
 					// Arrange
 					const url = 'https://tonytahmouchtest.files.wordpress.com';
-					const expectation =
-						'The LINK PICKER > LINK SUGGESTION SHOULD suggest the URL from the CLIPBOARD, e.g.,' +
-						`
-					${ url }
-					${ __( 'From clipboard' ) }
-				`;
 					const subject = await initializeEditor( { initialHtml } );
 					Clipboard.getString.mockReturnValue( url );
 
 					// Act
-					try {
-						const block = await waitFor( () =>
+					const block = await waitFor( () =>
+						subject.getByA11yLabel(
+							type === 'core/image'
+								? /Image Block/
+								: /Button Block/
+						)
+					);
+					fireEvent.press( block );
+					fireEvent.press( block );
+					fireEvent.press(
+						await waitFor( () =>
+							subject.getByA11yLabel( 'Open Settings' )
+						)
+					);
+					fireEvent.press(
+						await waitFor( () =>
 							subject.getByA11yLabel(
-								type === 'core/image'
-									? /Image Block/
-									: /Button Block/
-							)
-						);
-						fireEvent.press( block );
-						fireEvent.press( block );
-						fireEvent.press(
-							await waitFor( () =>
-								subject.getByA11yLabel( 'Open Settings' )
+								`Link to, ${
+									type === 'core/image'
+										? 'None'
+										: 'Search or type URL'
+								}`
 							)
-						);
+						)
+					);
+					if ( type === 'core/image' ) {
 						fireEvent.press(
 							await waitFor( () =>
-								subject.getByA11yLabel(
-									`Link to, ${
-										type === 'core/image'
-											? 'None'
-											: 'Search or type URL'
-									}`
-								)
-							)
-						);
-						if ( type === 'core/image' ) {
-							fireEvent.press(
-								await waitFor( () =>
-									subject.getByA11yLabel( /Custom URL/ )
-								)
-							);
-						}
-						await waitFor( () =>
-							subject.getByA11yLabel(
-								`Copy URL from the clipboard, ${ url }`
+								subject.getByA11yLabel( /Custom URL/ )
 							)
 						);
-					} catch ( error ) {
-						done.fail( error );
 					}
+					await waitFor( () =>
+						subject.getByA11yLabel(
+							`Copy URL from the clipboard, ${ url }`
+						)
+					);
 
 					// Assert
-					try {
-						await waitFor( () => subject.getByText( url ) );
-						await waitFor( () =>
-							subject.getByText( __( 'From clipboard' ) )
-						);
-						done();
-					} catch ( error ) {
-						done.fail( expectation );
-					}
+					const clipboardUrl = await waitFor( () =>
+						subject.getByText( url )
+					);
+					expect( clipboardUrl ).toBeTruthy();
+					const clipboardNote = await waitFor( () =>
+						subject.getByText( __( 'From clipboard' ) )
+					);
+					expect( clipboardNote ).toBeTruthy();
 				}
 			);
 		} );
@@ -358,73 +305,62 @@ describe.each( [
 			it(
 				'should display the LINK SETTINGS with the URL from the CLIPBOARD' +
 					' populated in the LINK TO field.',
-				// eslint-disable-next-line jest/no-done-callback
-				async ( done ) => {
+				async () => {
 					// Arrange
-					const expectation =
-						'The LINK SETTINGS > LINK TO field SHOULD be displayed WITH a URL from the CLIPBOARD.';
 					const url = 'https://tonytahmouchtest.files.wordpress.com';
 					const subject = await initializeEditor( { initialHtml } );
 					Clipboard.getString.mockReturnValue( url );
 
 					// Act
-					try {
-						const block = await waitFor( () =>
+					const block = await waitFor( () =>
+						subject.getByA11yLabel(
+							type === 'core/image'
+								? /Image Block/
+								: /Button Block/
+						)
+					);
+					fireEvent.press( block );
+					fireEvent.press( block );
+					fireEvent.press(
+						await waitFor( () =>
+							subject.getByA11yLabel( 'Open Settings' )
+						)
+					);
+					fireEvent.press(
+						await waitFor( () =>
 							subject.getByA11yLabel(
-								type === 'core/image'
-									? /Image Block/
-									: /Button Block/
-							)
-						);
-						fireEvent.press( block );
-						fireEvent.press( block );
-						fireEvent.press(
-							await waitFor( () =>
-								subject.getByA11yLabel( 'Open Settings' )
-							)
-						);
-						fireEvent.press(
-							await waitFor( () =>
-								subject.getByA11yLabel(
-									`Link to, ${
-										type === 'core/image'
-											? 'None'
-											: 'Search or type URL'
-									}`
-								)
+								`Link to, ${
+									type === 'core/image'
+										? 'None'
+										: 'Search or type URL'
+								}`
 							)
-						);
-						if ( type === 'core/image' ) {
-							fireEvent.press(
-								await waitFor( () =>
-									subject.getByA11yLabel( /Custom URL/ )
-								)
-							);
-						}
+						)
+					);
+					if ( type === 'core/image' ) {
 						fireEvent.press(
 							await waitFor( () =>
-								subject.getByA11yLabel(
-									`Copy URL from the clipboard, ${ url }`
-								)
+								subject.getByA11yLabel( /Custom URL/ )
 							)
 						);
-					} catch ( error ) {
-						done.fail( error );
 					}
-
-					// Assert
-					try {
+					fireEvent.press(
 						await waitFor( () =>
 							subject.getByA11yLabel(
-								`Link to, ${
-									type === 'core/image' ? 'Custom URL' : url
-								}`
+								`Copy URL from the clipboard, ${ url }`
 							)
-						);
-						done();
-					} catch ( error ) {
-						done.fail( expectation );
-					}
+						)
+					);
+
+					// Assert
+					const linkToField = await waitFor( () =>
+						subject.getByA11yLabel(
+							`Link to, ${
+								type === 'core/image' ? 'Custom URL' : url
+							}`
+						)
+					);
+					expect( linkToField ).toBeTruthy();
 				}
 			);
 		} );

package/src/mobile/link-settings/test/link-settings-navigation.native.js

@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import { Keyboard, Platform } from 'react-native';
+import { render, fireEvent, waitFor } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import LinkSettingsNavigation from '../link-settings-navigation';
+
+jest.useFakeTimers( 'legacy' );
+jest.spyOn( Keyboard, 'dismiss' );
+
+const subject = (
+	<LinkSettingsNavigation
+		setAttributes={ () => {} }
+		hasPicker
+		options={ {
+			url: {
+				label: 'Link URL',
+				placeholder: 'Add URL',
+				autoFocus: false,
+			},
+		} }
+		isVisible
+		withBottomSheet
+	/>
+);
+
+describe( 'Android', () => {
+	it( 'improves back animation performance by dismissing keyboard beforehand', async () => {
+		const screen = render( subject );
+		fireEvent.press( screen.getByText( 'Link to' ) );
+		fireEvent.press(
+			screen.getByA11yLabel( 'Link to, Search or type URL' )
+		);
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () =>
+			screen.getByA11yLabel( 'Go back' )
+		);
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'improves apply animation performance by dismissing keyboard beforehand', async () => {
+		const screen = render( subject );
+		fireEvent.press( screen.getByText( 'Link to' ) );
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () =>
+			screen.getByA11yLabel( 'Apply' )
+		);
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
+
+describe( 'iOS', () => {
+	const originalPlatform = Platform.OS;
+	beforeAll( () => {
+		Platform.OS = 'ios';
+	} );
+
+	afterAll( () => {
+		Platform.OS = originalPlatform;
+	} );
+
+	it( 'improves back animation performance by dismissing keyboard beforehand', async () => {
+		const screen = render( subject );
+		fireEvent.press( screen.getByText( 'Link to' ) );
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () =>
+			screen.getByA11yLabel( 'Go back' )
+		);
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'improves apply animation performance by dismissing keyboard beforehand', async () => {
+		const screen = render( subject );
+		fireEvent.press( screen.getByText( 'Link to' ) );
+		// Await back button to allow async state updates to complete
+		const backButton = await waitFor( () =>
+			screen.getByA11yLabel( 'Apply' )
+		);
+		Keyboard.dismiss.mockClear();
+		fireEvent.press( backButton );
+
+		expect( Keyboard.dismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+} );

package/src/mobile/readable-content-view/index.native.js

@@ -26,10 +26,13 @@ const ReadableContentView = ( { align, reversed, children, style } ) => {
 	}
 
 	useEffect( () => {
-		Dimensions.addEventListener( 'change', onDimensionsChange );
+		const dimensionsChangeSubscription = Dimensions.addEventListener(
+			'change',
+			onDimensionsChange
+		);
 
 		return () => {
-			Dimensions.removeEventListener( 'change', onDimensionsChange );
+			dimensionsChangeSubscription.remove();
 		};
 	}, [] );