test: Add BlockList coverage (#50252)

* refactor: Add missing Group block type to core blocks list This exclusion appears to be erroneous and prevents the `setupCoreBlock` test helper from succeeding when attempting to register the Group block type. * test: Add BlockList tests In order to assert the insertion point is in the correct index location, the index must be passed to the test ID for each insertion point. * test: Restructure BlockList test descriptions Increase explicitness of test descriptions and repurpose tests for non-compact lists. * refactor: Increase uniqueness of virtualized list keys A `listKey` was required to address the following error when running tests against the `BlockList`: ``` VirtualizedList trace: Child (vertical): listKey: 8d343539-3801-4ff1-ac5b-858db2cdf662 cellKey: 8d343539-3801-4ff1-ac5b-858db2cdf662 Parent (vertical): listKey: rootList cellKey: rootList ``` * test: Expand BlockList tests Test additional block appender locations. * test: Fix typo
WordPress · May 3, 2023 · 9310e2a · 9310e2a
1 parent 2ec090b
commit 9310e2a
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.js b/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>

diff --git a/packages/block-editor/src/components/block-list/index.native.js b/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,

diff --git a/packages/block-editor/src/components/block-list/insertion-point.native.js b/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>

diff --git a/packages/block-editor/src/components/block-list/test/index.native.js b/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();
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js
@@ -88,6 +88,7 @@ export const coreBlocks = [
 	column,
 	cover,
 	embed,
+	group,
 	file,
 	html,
 	mediaText,

diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
@@ -178,4 +178,7 @@ module.exports = {
 	mediaAreaPadding: {
 		width: 12,
 	},
+	defaultAppender: {
+		marginLeft: 16,
+	},
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,6 +88,7 @@ export const coreBlocks = [ @@
     	column,
     	cover,
     	embed,
+    	group,
     	file,
     	html,
     	mediaText,
@@ Expand Down @@