[RNMobile] Add reusable block insertion test case

packages/block-editor/src/components/block-mobile-toolbar/index.native.js

@@ -8,7 +8,7 @@ import { View } from 'react-native';
  */
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -53,6 +53,14 @@ const BlockMobileToolbar = ( {
 		blockWidth <= BREAKPOINTS.wrapMover ||
 		appenderWidth - spacingValue <= BREAKPOINTS.wrapMover;
 
+	const BlockSettingsButtonFill = ( fillProps ) => {
+		useEffect(
+			() => fillProps.onChangeFillsLength( fillProps.fillsLength ),
+			[ fillProps.fillsLength ]
+		);
+		return fillProps.children ?? null;
+	};
+
 	return (
 		<View
 			style={ [ styles.toolbar, isFullWidth && styles.toolbarFullWidth ] }
@@ -69,10 +77,16 @@ const BlockMobileToolbar = ( {
 
 			<BlockSettingsButton.Slot>
 				{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls */ }
-				{ ( fills = [ null ] ) => {
-					setFillsLength( fills.length );
-					return wrapBlockSettings ? null : fills[ 0 ];
-				} }
+				{ ( fills = [ null ] ) => (
+					// The purpose of BlockSettingsButtonFill component is only to provide a way
+					// to pass data upstream from the slot rendering
+					<BlockSettingsButtonFill
+						fillsLength={ fills.length }
+						onChangeFillsLength={ setFillsLength }
+					>
+						{ wrapBlockSettings ? null : fills[ 0 ] }
+					</BlockSettingsButtonFill>
+				) }
 			</BlockSettingsButton.Slot>
 
 			<BlockActionsMenu

packages/block-editor/src/components/block-types-list/index.native.js

@@ -77,6 +77,7 @@ export default function BlockTypesList( { name, items, onSelect, listProps } ) {
 		<FlatList
 			onLayout={ onLayout }
 			key={ `InserterUI-${ name }-${ numberOfColumns }` } //re-render when numberOfColumns changes
+			testID={ `InserterUI-${ name }` }
 			keyboardShouldPersistTaps="always"
 			numColumns={ numberOfColumns }
 			data={ items }

packages/block-library/src/block/test/edit.native.js

@@ -58,11 +58,74 @@ afterAll( () => {
 } );
 
 describe( 'Reusable block', () => {
+	it( 'inserts a reusable block', async () => {
+		// We have to use different ids because entities are cached in memory.
+		const reusableBlockMock1 = getMockedReusableBlock( 1 );
+		const reusableBlockMock2 = getMockedReusableBlock( 2 );
+
+		// Return mocked responses for the block endpoints.
+		fetchRequest.mockImplementation( ( { path } ) => {
+			let response = {};
+			if ( path.startsWith( '/wp/v2/blocks?' ) ) {
+				response = [ reusableBlockMock1, reusableBlockMock2 ];
+			} else if ( path.startsWith( '/wp/v2/blocks/1' ) ) {
+				response = reusableBlockMock1;
+			}
+			return Promise.resolve( response );
+		} );
+
+		const {
+			getByA11yLabel,
+			getByTestId,
+			getByText,
+		} = await initializeEditor( {
+			initialHtml: '',
+			capabilities: { reusableBlock: true },
+		} );
+
+		// Open the inserter menu
+		fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );
+
+		// Navigate to reusable tab
+		const reusableSegment = getByText( 'Reusable' );
+		// onLayout event is required by Segment component
+		fireEvent( reusableSegment, 'layout', {
+			nativeEvent: {
+				layout: {
+					width: 100,
+				},
+			},
+		} );
+		fireEvent.press( reusableSegment );
+
+		const reusableBlockList = getByTestId( 'InserterUI-ReusableBlocks' );
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( reusableBlockList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
+		} );
+
+		// Insert a reusable block
+		fireEvent.press(
+			await waitFor( () => getByText( `Reusable block - 1` ) )
+		);
+
+		// Get the reusable block
+		const reusableBlock = await waitFor( () =>
+			getByA11yLabel( /Reusable block Block\. Row 1/ )
+		);
+
+		expect( reusableBlock ).toBeDefined();
+		expect( getEditorHtml() ).toBe( '<!-- wp:block {"ref":1} /-->' );
+	} );
+
 	it( 'renders warning when the block does not exist', async () => {
 		// We have to use different ids because entities are cached in memory.
-		const id = 1;
+		const id = 3;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
-		const endpoint = `/wp/v2/blocks/${ id }`;
 
 		const { getByA11yLabel } = await initializeEditor( {
 			initialHtml,
@@ -72,33 +135,29 @@ describe( 'Reusable block', () => {
 			getByA11yLabel( /Reusable block Block\. Row 1/ )
 		);
 
-		const reusableBlockRequest = fetchRequest.mock.calls.find( ( call ) =>
-			call[ 0 ].path.startsWith( endpoint )
-		);
-
 		const blockDeleted = await waitFor( () =>
 			within( reusableBlock ).getByText(
 				'Block has been deleted or is unavailable.'
 			)
 		);
 
-		expect( reusableBlockRequest ).toBeDefined();
 		expect( reusableBlock ).toBeDefined();
 		expect( blockDeleted ).toBeDefined();
-		expect( getEditorHtml() ).toBe( initialHtml );
 	} );
 
 	it( 'renders block content', async () => {
 		// We have to use different ids because entities are cached in memory.
-		const id = 2;
+		const id = 4;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
 		const endpoint = `/wp/v2/blocks/${ id }`;
 
 		// Return mocked response for the block endpoint.
 		fetchRequest.mockImplementation( ( { path } ) => {
+			let response = {};
 			if ( path.startsWith( endpoint ) ) {
-				return Promise.resolve( getMockedReusableBlock( id ) );
+				response = getMockedReusableBlock( id );
 			}
+			return Promise.resolve( response );
 		} );
 
 		const { getByA11yLabel } = await initializeEditor( {
@@ -109,10 +168,6 @@ describe( 'Reusable block', () => {
 			getByA11yLabel( /Reusable block Block\. Row 1/ )
 		);
 
-		const reusableBlockRequest = fetchRequest.mock.calls.find( ( call ) =>
-			call[ 0 ].path.startsWith( endpoint )
-		);
-
 		const innerBlockListWrapper = await waitFor( () =>
 			within( reusableBlock ).getByTestId( 'block-list-wrapper' )
 		);
@@ -133,9 +188,7 @@ describe( 'Reusable block', () => {
 			)
 		);
 
-		expect( reusableBlockRequest ).toBeDefined();
 		expect( reusableBlock ).toBeDefined();
 		expect( headingInnerBlock ).toBeDefined();
-		expect( getEditorHtml() ).toBe( initialHtml );
 	} );
 } );

test/native/__mocks__/styleMock.js

@@ -107,9 +107,16 @@ module.exports = {
 		paddingRight: 10,
 	},
 	'block-types-list__column': {
-		padding: 10,
+		paddingLeft: 10,
+		paddingRight: 10,
 	},
 	floatingToolbar: {
 		height: 10,
 	},
+	searchFormPlaceholder: {
+		color: 'gray',
+	},
+	ripple: {
+		backgroundColor: 'white',
+	},
 };

test/native/helpers.js

@@ -33,14 +33,9 @@ provideToNativeHtml.mockImplementation( ( html ) => {
 	serializedHtml = html;
 } );
 
-export async function initializeEditor( { initialHtml } ) {
+export async function initializeEditor( props ) {
 	const renderResult = render(
-		<Editor
-			postId={ 0 }
-			postType="post"
-			initialTitle="test"
-			initialHtml={ initialHtml }
-		/>
+		<Editor postId={ 0 } postType="post" initialTitle="test" { ...props } />
 	);
 	const { getByTestId } = renderResult;