test: Rich text test helpers mimic user events (#49804)

* test: changeAndSelectTextOfRichText defaults cursor to end of new text This will mimic natural typing where the cursor is placed at the end of newly typed text by default. * test: Consolidate multiple Rich Text change text helpers The existing helpers contained substantial overlap and were coupled to implementation details of the `RichText` event handlers. This refactor creates a new, single helper to mimic typing into rich text fields as a user might. * test: Add selectTextInRichText helper Simply process for selecting rich text values to improve test comprehensibility. * test: Simplify tests with new helpers It is no longer necessary to pass the length of the test strings as the new helper automatically tracks the string length to place the cursor at the end of the new value, mimicking a user typing. * test: Refactor selectTextInRichText Rename helper and require range start position to improve clarity of the purpose and function of the now `selectRangeInRichText` helper. * test: Rename typeInRichText selection parameters Improve clarity by further differentiating the initial and final selection range.
WordPress · Apr 18, 2023 · 05b429c · 05b429c
1 parent 323094c
commit 05b429c
Show file tree

Hide file tree

Showing 16 changed files with 109 additions and 163 deletions.
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/test/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/test/block-actions-menu.native.js
@@ -8,7 +8,7 @@ import {
 	getBlock,
 	within,
 	getEditorHtml,
-	changeTextOfRichText,
+	typeInRichText,
 } from 'test/helpers';
 
 /**
@@ -71,7 +71,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -132,7 +132,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -179,7 +179,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -228,7 +228,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -275,7 +275,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -322,7 +322,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -368,7 +368,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -405,7 +405,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );

diff --git a/packages/block-editor/src/components/block-mover/test/index.native.js b/packages/block-editor/src/components/block-mover/test/index.native.js
@@ -9,7 +9,7 @@ import {
 	within,
 	getEditorHtml,
 	render,
-	changeTextOfRichText,
+	typeInRichText,
 } from 'test/helpers';
 
 /**
@@ -89,7 +89,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -138,7 +138,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -176,7 +176,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );

diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js
@@ -7,7 +7,7 @@ import {
 	within,
 	getBlock,
 	initializeEditor,
-	changeTextOfRichText,
+	typeInRichText,
 } from 'test/helpers';
 
 /**
@@ -196,7 +196,7 @@ describe( 'Buttons block', () => {
 				within( secondButtonBlock ).getByLabelText(
 					'Text input. Empty'
 				);
-			changeTextOfRichText( secondButtonInput, 'Hello!' );
+			typeInRichText( secondButtonInput, 'Hello!' );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );

diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
@@ -3,7 +3,7 @@
  */
 import {
 	act,
-	changeTextOfRichText,
+	typeInRichText,
 	fireEvent,
 	getBlock,
 	getEditorHtml,
@@ -173,7 +173,7 @@ describe( 'Gallery block', () => {
 		const captionField = within(
 			getByLabelText( /Gallery caption. Empty/ )
 		).getByPlaceholderText( 'Add caption' );
-		changeTextOfRichText(
+		typeInRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption'
 		);
@@ -197,7 +197,7 @@ describe( 'Gallery block', () => {
 		// Set gallery item caption
 		const captionField =
 			within( galleryItem ).getByPlaceholderText( 'Add caption' );
-		changeTextOfRichText(
+		typeInRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption'
 		);
@@ -537,7 +537,7 @@ describe( 'Gallery block', () => {
 		<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":${ media[ 0 ].localId }} -->
 		<figure class="wp-block-image"><img src="${ media[ 0 ].localUrl }" alt="" class="wp-image-${ media[ 0 ].localId }"/></figure>
 		<!-- /wp:image -->
-		
+
 		<!-- wp:image {"id":${ media[ 1 ].localId },"linkDestination":"attachment"} -->
 		<figure class="wp-block-image"><img src="${ media[ 1 ].localUrl }" alt="" class="wp-image-${ media[ 1 ].localId }"/></figure>
 		<!-- /wp:image --></figure>

diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js
@@ -2,8 +2,8 @@
  * External dependencies
  */
 import {
-	changeTextOfRichText,
-	changeAndSelectTextOfRichText,
+	selectRangeInRichText,
+	typeInRichText,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
@@ -79,7 +79,7 @@ describe( 'List block', () => {
 
 		const listItemField =
 			within( listBlock ).getByPlaceholderText( 'List' );
-		changeTextOfRichText( listItemField, 'First list item' );
+		typeInRichText( listItemField, 'First list item' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
@@ -347,10 +347,7 @@ describe( 'List block', () => {
 		// backward delete
 		const listItemField =
 			within( listItemBlock ).getByLabelText( /Text input. .*Two.*/ );
-		changeAndSelectTextOfRichText( listItemField, 'Two', {
-			initialSelectionStart: 0,
-			initialSelectionEnd: 3,
-		} );
+		selectRangeInRichText( listItemField, 0 );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
@@ -398,10 +395,7 @@ describe( 'List block', () => {
 		// backward delete
 		const listItemField =
 			within( listItemBlock ).getByLabelText( /Text input. .*One.*/ );
-		changeAndSelectTextOfRichText( listItemField, 'One', {
-			initialSelectionStart: 0,
-			initialSelectionEnd: 3,
-		} );
+		selectRangeInRichText( listItemField, 0 );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},

diff --git a/packages/block-library/src/paragraph/test/edit.native.js b/packages/block-library/src/paragraph/test/edit.native.js
@@ -5,8 +5,7 @@ import {
 	act,
 	addBlock,
 	getBlock,
-	changeTextOfRichText,
-	changeAndSelectTextOfRichText,
+	typeInRichText,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
@@ -55,10 +54,10 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.',
-			{ selectionStart: 2, selectionEnd: 7 }
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
 		);
 		fireEvent.press( screen.getByLabelText( 'Bold' ) );
 
@@ -80,10 +79,10 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.',
-			{ selectionStart: 2, selectionEnd: 7 }
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
 		);
 		fireEvent.press( screen.getByLabelText( 'Italic' ) );
 
@@ -105,10 +104,10 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.',
-			{ selectionStart: 2, selectionEnd: 7 }
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
 		);
 		fireEvent.press( screen.getByLabelText( 'Strikethrough' ) );
 
@@ -130,7 +129,7 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.'
 		);
@@ -155,7 +154,7 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.'
 		);
@@ -180,7 +179,7 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.'
 		);
@@ -208,9 +207,9 @@ describe( 'Paragraph block', () => {
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
 		const string = 'A quick brown fox jumps over the lazy dog.';
-		changeAndSelectTextOfRichText( paragraphTextInput, string, {
-			selectionStart: string.length / 2,
-			selectionEnd: string.length / 2,
+		typeInRichText( paragraphTextInput, string, {
+			finalSelectionStart: string.length / 2,
+			finalSelectionEnd: string.length / 2,
 		} );
 		fireEvent( paragraphTextInput, 'onKeyDown', {
 			nativeEvent: {},
@@ -279,12 +278,12 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.',
 			{
-				selectionStart: 2,
-				selectionEnd: 7,
+				finalSelectionStart: 2,
+				finalSelectionEnd: 7,
 			}
 		);
 		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
@@ -325,12 +324,12 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
+		typeInRichText(
 			paragraphTextInput,
 			'A quick brown fox jumps over the lazy dog.',
 			{
-				selectionStart: 2,
-				selectionEnd: 7,
+				finalSelectionStart: 2,
+				finalSelectionEnd: 7,
 			}
 		);
 		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
@@ -362,14 +361,10 @@ describe( 'Paragraph block', () => {
 		fireEvent.press( paragraphBlock );
 		const paragraphTextInput =
 			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
-		changeAndSelectTextOfRichText(
-			paragraphTextInput,
-			'     some text      ',
-			{
-				selectionStart: 5,
-				selectionEnd: 14,
-			}
-		);
+		typeInRichText( paragraphTextInput, '     some text      ', {
+			finalSelectionStart: 5,
+			finalSelectionEnd: 14,
+		} );
 		fireEvent.press( screen.getByLabelText( 'Italic' ) );
 
 		// Assert

diff --git a/packages/block-library/src/preformatted/test/edit.native.js b/packages/block-library/src/preformatted/test/edit.native.js
@@ -3,7 +3,7 @@
  */
 import {
 	addBlock,
-	changeAndSelectTextOfRichText,
+	typeInRichText,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
@@ -67,17 +67,13 @@ describe( 'Preformatted', () => {
 		const preformattedTextInput = await screen.findByPlaceholderText(
 			'Write preformatted text…'
 		);
-		const string = 'A great statement.';
-		changeAndSelectTextOfRichText( preformattedTextInput, string, {
-			selectionStart: string.length,
-			selectionEnd: string.length,
-		} );
+		typeInRichText( preformattedTextInput, 'A great statement.' );
 		fireEvent( preformattedTextInput, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
 			keyCode: ENTER,
 		} );
-		changeAndSelectTextOfRichText( preformattedTextInput, 'Again' );
+		typeInRichText( preformattedTextInput, 'Again' );
 
 		// Assert
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `