test: Expand multi-line block tests (#49732)

* test: Fix typo in Preformatted test

* test: Rich Text helpers can append text

The addition of `initialSelectionStart` and `initialSelectEnd` enable
placing the caret prior to "typing" additional text. This API was
inspired by the `testing-library/user-event` APIs.

https://testing-library.com/docs/user-event/utility#type

* test: Expand multi-line components typing tests

Tests continue typing after inserting a line break now that test helpers
support that ability.

* test: Fix List block split and merge tests

Changes to the `onChangeAndSelectText` helper means text is appended by
default. To recreate merely placing the cursor in the beginning of the
text, we must re-type the text as the `onChangeAndSelectText` changes
the text in addition to selecting due to the selection logic invoking
change logic within `RichText`.

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

@@ -347,7 +347,10 @@ describe( 'List block', () => {
 		// backward delete
 		const listItemField =
 			within( listItemBlock ).getByLabelText( /Text input. .*Two.*/ );
-		changeAndSelectTextOfRichText( listItemField, 'Two' );
+		changeAndSelectTextOfRichText( listItemField, 'Two', {
+			initialSelectionStart: 0,
+			initialSelectionEnd: 3,
+		} );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
@@ -395,7 +398,10 @@ describe( 'List block', () => {
 		// backward delete
 		const listItemField =
 			within( listItemBlock ).getByLabelText( /Text input. .*One.*/ );
-		changeAndSelectTextOfRichText( listItemField, 'One' );
+		changeAndSelectTextOfRichText( listItemField, 'One', {
+			initialSelectionStart: 0,
+			initialSelectionEnd: 3,
+		} );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
@@ -406,11 +412,11 @@ describe( 'List block', () => {
 		"<!-- wp:paragraph -->
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
-		
+
 		<!-- wp:paragraph -->
 		<p>One</p>
 		<!-- /wp:paragraph -->
-		
+
 		<!-- wp:list -->
 		<ul><!-- wp:list-item -->
 		<li>Two</li>

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

@@ -64,24 +64,25 @@ describe( 'Preformatted', () => {
 
 		// Act
 		await addBlock( screen, 'Preformatted' );
-		const verseTextInput = await screen.findByPlaceholderText(
+		const preformattedTextInput = await screen.findByPlaceholderText(
 			'Write preformatted text…'
 		);
 		const string = 'A great statement.';
-		changeAndSelectTextOfRichText( verseTextInput, string, {
+		changeAndSelectTextOfRichText( preformattedTextInput, string, {
 			selectionStart: string.length,
 			selectionEnd: string.length,
 		} );
-		fireEvent( verseTextInput, 'onKeyDown', {
+		fireEvent( preformattedTextInput, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
 			keyCode: ENTER,
 		} );
+		changeAndSelectTextOfRichText( preformattedTextInput, 'Again' );
 
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:preformatted -->
-		<pre class="wp-block-preformatted">A great statement.<br></pre>
+		<pre class="wp-block-preformatted">A great statement.<br>Again</pre>
 		<!-- /wp:preformatted -->"
 	` );
 	} );

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

@@ -45,8 +45,7 @@ describe( 'Pullquote', () => {
 			preventDefault() {},
 			keyCode: ENTER,
 		} );
-
-		// TODO: Determine a way to type after pressing ENTER within the block.
+		changeAndSelectTextOfRichText( pullquoteTextInput, 'Again' );
 
 		const citationTextInput =
 			within( citationBlock ).getByPlaceholderText( 'Add citation' );
@@ -63,7 +62,7 @@ describe( 'Pullquote', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:pullquote -->
-		<figure class="wp-block-pullquote"><blockquote><p>A great statement.<br></p><cite>A <br>person</cite></blockquote></figure>
+		<figure class="wp-block-pullquote"><blockquote><p>A great statement.<br>Again</p><cite>A <br>person</cite></blockquote></figure>
 		<!-- /wp:pullquote -->"
 	` );
 	} );

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

@@ -74,13 +74,12 @@ describe( 'Verse block', () => {
 			preventDefault() {},
 			keyCode: ENTER,
 		} );
-
-		// TODO: Determine a way to type after pressing ENTER within the block.
+		changeAndSelectTextOfRichText( verseTextInput, 'Again' );
 
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:verse -->
-		<pre class="wp-block-verse">A great statement.<br></pre>
+		<pre class="wp-block-verse">A great statement.<br>Again</pre>
 		<!-- /wp:verse -->"
 	` );
 	} );

test/native/integration-test-helpers/rich-text-change-and-select-text.js

@@ -3,20 +3,42 @@
  */
 import { fireEvent } from '@testing-library/react-native';
 
+let eventCount = 0;
+
+function stripOuterHtmlTags( string ) {
+	return string.replace( /^<[^>]*>|<[^>]*>$/g, '' );
+}
+
+function insertTextAtPosition( text, newText, start, end ) {
+	return text.slice( 0, start ) + newText + text.slice( end );
+}
+
 /**
  * Changes the text and selection of a RichText component.
  *
- * @param {import('react-test-renderer').ReactTestInstance} richText                 RichText test instance.
- * @param {string}                                          text                     Text to be set.
- * @param {Object}                                          options                  Configuration options for selection.
- * @param {number}                                          [options.selectionStart] Selection start position.
- * @param {number}                                          [options.selectionEnd]   Selection end position.
+ * @param {import('react-test-renderer').ReactTestInstance} richText                        RichText test instance.
+ * @param {string}                                          text                            Text to be set.
+ * @param {Object}                                          options                         Configuration options for selection.
+ * @param {number}                                          [options.initialSelectionStart]
+ * @param {number}                                          [options.initialSelectionEnd]
+ * @param {number}                                          [options.selectionStart]        Selection start position.
+ * @param {number}                                          [options.selectionEnd]          Selection end position.
  */
 export const changeAndSelectTextOfRichText = (
 	richText,
 	text,
-	{ selectionStart = 0, selectionEnd = 0 } = {}
+	options = {}
 ) => {
+	const currentValueSansOuterHtmlTags = stripOuterHtmlTags(
+		richText.props.value
+	);
+	const {
+		initialSelectionStart = currentValueSansOuterHtmlTags.length,
+		initialSelectionEnd = initialSelectionStart,
+		selectionStart = 0,
+		selectionEnd = selectionStart,
+	} = options;
+
 	fireEvent( richText, 'focus' );
 	fireEvent(
 		richText,
@@ -26,9 +48,14 @@ export const changeAndSelectTextOfRichText = (
 		text,
 		{
 			nativeEvent: {
-				eventCount: 1,
+				eventCount: ( eventCount += 101 ),
 				target: undefined,
-				text,
+				text: insertTextAtPosition(
+					currentValueSansOuterHtmlTags,
+					text,
+					initialSelectionStart,
+					initialSelectionEnd
+				),
 			},
 		}
 	);

test/native/integration-test-helpers/rich-text-change-text.js

@@ -3,19 +3,45 @@
  */
 import { fireEvent } from '@testing-library/react-native';
 
+let eventCount = 0;
+
+function stripOuterHtmlTags( string ) {
+	return string.replace( /^<[^>]*>|<[^>]*>$/g, '' );
+}
+
+function insertTextAtPosition( text, newText, start, end ) {
+	return text.slice( 0, start ) + newText + text.slice( end );
+}
+
 /**
  * Changes the text of a RichText component.
  *
- * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance.
- * @param {string}                                          text     Text to be set.
+ * @param {import('react-test-renderer').ReactTestInstance} richText                        RichText test instance.
+ * @param {string}                                          text                            Text to be set.
+ * @param {Object}                                          options
+ * @param {number}                                          [options.initialSelectionStart]
+ * @param {number}                                          [options.initialSelectionEnd]
  */
-export const changeTextOfRichText = ( richText, text ) => {
+export const changeTextOfRichText = ( richText, text, options = {} ) => {
+	const currentValueSansOuterHtmlTags = stripOuterHtmlTags(
+		richText.props.value
+	);
+	const {
+		initialSelectionStart = currentValueSansOuterHtmlTags.length,
+		initialSelectionEnd = initialSelectionStart,
+	} = options;
+
 	fireEvent( richText, 'focus' );
 	fireEvent( richText, 'onChange', {
 		nativeEvent: {
-			eventCount: 1,
+			eventCount: ( eventCount += 101 ),
 			target: undefined,
-			text,
+			text: insertTextAtPosition(
+				currentValueSansOuterHtmlTags,
+				text,
+				initialSelectionStart,
+				initialSelectionEnd
+			),
 		},
 	} );
 };