test: Add BlockList coverage

packages/block-editor/src/components/block-list/block-list-item.native.js

@@ -102,6 +102,7 @@ export class BlockListItem extends Component {
 		const {
 			blockAlignment,
 			clientId,
+			index,
 			isReadOnly,
 			shouldShowInsertionPointBefore,
 			shouldShowInsertionPointAfter,
@@ -134,7 +135,11 @@ export class BlockListItem extends Component {
 					pointerEvents={ isReadOnly ? 'box-only' : 'auto' }
 				>
 					{ shouldShowInsertionPointBefore && (
-						<BlockInsertionPoint />
+						<BlockInsertionPoint
+							testID={ `block-insertion-point-before-row-${
+								index + 1
+							}` }
+						/>
 					) }
 					<BlockListBlock
 						key={ clientId }
@@ -147,7 +152,11 @@ export class BlockListItem extends Component {
 					/>
 					{ ! shouldShowInnerBlockAppender() &&
 						shouldShowInsertionPointAfter && (
-							<BlockInsertionPoint />
+							<BlockInsertionPoint
+								testID={ `block-insertion-point-after-row-${
+									index + 1
+								}` }
+							/>
 						) }
 				</View>
 			</ReadableContentView>

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

@@ -204,6 +204,7 @@ export class BlockList extends Component {
 		const {
 			clearSelectedBlock,
 			blockClientIds,
+			rootClientId,
 			title,
 			header,
 			isReadOnly,
@@ -275,6 +276,9 @@ export class BlockList extends Component {
 					) }
 					data={ blockClientIds }
 					keyExtractor={ identity }
+					listKey={
+						rootClientId ? `list-${ rootClientId }` : 'list-root'
+					}
 					renderItem={ this.renderItem }
 					CellRendererComponent={ this.getCellRendererComponent }
 					shouldPreventAutomaticScroll={
@@ -305,7 +309,7 @@ export class BlockList extends Component {
 		);
 	}
 
-	renderItem( { item: clientId } ) {
+	renderItem( { item: clientId, index } ) {
 		const {
 			contentResizeMode,
 			contentStyle,
@@ -331,6 +335,7 @@ export class BlockList extends Component {
 		};
 		return (
 			<BlockListItem
+				index={ index }
 				isStackedHorizontally={ isStackedHorizontally }
 				rootClientId={ rootClientId }
 				clientId={ clientId }
@@ -421,6 +426,7 @@ export default compose( [
 					Platform.OS === 'ios' && isBlockInsertionPointVisible(),
 				isReadOnly,
 				isRootList: rootClientId === undefined,
+				rootClientId,
 				isFloatingToolbarVisible,
 				isStackedHorizontally,
 				maxWidth,

packages/block-editor/src/components/block-list/insertion-point.native.js

@@ -14,7 +14,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  */
 import styles from './style.scss';
 
-const BlockInsertionPoint = ( { getStylesFromColorScheme } ) => {
+const BlockInsertionPoint = ( { getStylesFromColorScheme, testID } ) => {
 	const lineStyle = getStylesFromColorScheme(
 		styles.lineStyleAddHere,
 		styles.lineStyleAddHereDark
@@ -25,7 +25,7 @@ const BlockInsertionPoint = ( { getStylesFromColorScheme } ) => {
 	);
 
 	return (
-		<View style={ styles.containerStyleAddHere }>
+		<View style={ styles.containerStyleAddHere } testID={ testID }>
 			<View style={ lineStyle }></View>
 			<Text style={ labelStyle }>{ __( 'ADD BLOCK HERE' ) }</Text>
 			<View style={ lineStyle }></View>

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

@@ -0,0 +1,169 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getBlock,
+	fireEvent,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+	triggerBlockListLayout,
+	within,
+} from 'test/helpers';
+
+setupCoreBlocks( [ 'core/paragraph', 'core/group' ] );
+
+describe( 'BlockList', () => {
+	describe( 'when empty', () => {
+		beforeEach( async () => {
+			// Arrange
+			await initializeEditor();
+		} );
+
+		it( 'renders a post title', async () => {
+			// Assert
+			expect( screen.getByPlaceholderText( 'Add title' ) ).toBeTruthy();
+		} );
+
+		it( 'renders a block appender as a content placeholder', async () => {
+			// Assert
+			expect(
+				screen.getByPlaceholderText( /Start writing/ )
+			).toBeTruthy();
+		} );
+
+		it( 'renders an end-of-list paragraph appender', async () => {
+			// Assert
+			expect(
+				screen.getByLabelText( 'Add paragraph block' )
+			).toBeTruthy();
+		} );
+	} );
+
+	describe( 'for inner blocks', () => {
+		it( 'renders an inner block appender', async () => {
+			await initializeEditor();
+			await addBlock( screen, 'Group' );
+			const groupBlock = await getBlock( screen, 'Group' );
+			triggerBlockListLayout( groupBlock );
+
+			// Assert
+			expect(
+				within( groupBlock ).getByTestId( 'appender-button' )
+			).toBeTruthy();
+		} );
+
+		describe( 'when a non-last block is selected', () => {
+			beforeEach( async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+			} );
+
+			it( 'renders an insertion point before the block', async () => {
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 1,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block Before ' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-1' )
+				).toBeTruthy();
+			} );
+
+			it( 'renders an insertion point after the block', async () => {
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 1,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block After ' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-2' )
+				).toBeTruthy();
+			} );
+		} );
+
+		describe( 'when the last block is selected', () => {
+			it( 'renders an insertion point before the block', async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 2,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block Before ' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-2' )
+				).toBeTruthy();
+			} );
+
+			it( 'renders an insertion point after the block', async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 2,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block After ' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-after-row-2' )
+				).toBeTruthy();
+			} );
+		} );
+	} );
+} );

packages/block-library/src/index.native.js

@@ -88,6 +88,7 @@ export const coreBlocks = [
 	column,
 	cover,
 	embed,
+	group,
 	file,
 	html,
 	mediaText,

test/native/__mocks__/styleMock.js

@@ -178,4 +178,7 @@ module.exports = {
 	mediaAreaPadding: {
 		width: 12,
 	},
+	defaultAppender: {
+		marginLeft: 16,
+	},
 };