From 05b429c465d03469abe274359061d23ac3a0d1e8 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Tue, 18 Apr 2023 10:02:44 -0400 Subject: [PATCH] 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. --- .../test/block-actions-menu.native.js | 18 +++---- .../block-mover/test/index.native.js | 8 +-- .../src/buttons/test/edit.native.js | 4 +- .../src/gallery/test/index.native.js | 8 +-- .../src/list/test/edit.native.js | 16 ++---- .../src/paragraph/test/edit.native.js | 51 +++++++++---------- .../src/preformatted/test/edit.native.js | 10 ++-- .../src/pullquote/test/edit.native.js | 16 +++--- .../src/quote/test/edit.native.js | 16 +++--- .../src/verse/test/edit.native.js | 10 ++-- .../src/test/performance/rich-text.native.js | 4 +- test/native/integration-test-helpers/index.js | 4 +- .../rich-text-change-text.js | 47 ----------------- .../rich-text-select-range.js | 23 +++++++++ ...e-and-select-text.js => rich-text-type.js} | 28 +++++----- .../integration/editor-history.native.js | 9 ++-- 16 files changed, 109 insertions(+), 163 deletions(-) delete mode 100644 test/native/integration-test-helpers/rich-text-change-text.js create mode 100644 test/native/integration-test-helpers/rich-text-select-range.js rename test/native/integration-test-helpers/{rich-text-change-and-select-text.js => rich-text-type.js} (66%) 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 index 4731470b7bf3f..675b286502a1f 100644 --- 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 index 903289c6d5a31..dc1a8f974c3c6 100644 --- 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 index 9d23413fd79be..788c1b1e40e4b 100644 --- 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 index 53bedb03190f4..fc0efcdbdcb6c 100644 --- 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, 'Bold italic strikethrough gallery caption' ); @@ -197,7 +197,7 @@ describe( 'Gallery block', () => { // Set gallery item caption const captionField = within( galleryItem ).getByPlaceholderText( 'Add caption' ); - changeTextOfRichText( + typeInRichText( captionField, 'Bold italic strikethrough image caption' ); @@ -537,7 +537,7 @@ describe( 'Gallery block', () => {
- +
diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js index 2c9cbcd43ec3e..67470228afc63 100644 --- 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 index 02501a3cd49eb..a4dcfdac92041 100644 --- 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 index 81a7caa29255f..21286a7cdd67d 100644 --- 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( ` diff --git a/packages/block-library/src/pullquote/test/edit.native.js b/packages/block-library/src/pullquote/test/edit.native.js index dd9508f2ec054..9346750627edb 100644 --- a/packages/block-library/src/pullquote/test/edit.native.js +++ b/packages/block-library/src/pullquote/test/edit.native.js @@ -10,7 +10,7 @@ import { fireEvent, within, waitFor, - changeAndSelectTextOfRichText, + typeInRichText, } from 'test/helpers'; /** @@ -35,23 +35,19 @@ describe( 'Pullquote', () => { fireEvent.press( pullquoteBlock ); const pullquoteTextInput = within( pullquoteBlock ).getByPlaceholderText( 'Add quote' ); - const string = 'A great statement.'; - changeAndSelectTextOfRichText( pullquoteTextInput, string, { - selectionStart: string.length, - selectionEnd: string.length, - } ); + typeInRichText( pullquoteTextInput, 'A great statement.' ); fireEvent( pullquoteTextInput, 'onKeyDown', { nativeEvent: {}, preventDefault() {}, keyCode: ENTER, } ); - changeAndSelectTextOfRichText( pullquoteTextInput, 'Again' ); + typeInRichText( pullquoteTextInput, 'Again' ); const citationTextInput = within( citationBlock ).getByPlaceholderText( 'Add citation' ); - changeAndSelectTextOfRichText( citationTextInput, 'A person', { - selectionStart: 2, - selectionEnd: 2, + typeInRichText( citationTextInput, 'A person', { + finalSelectionStart: 2, + finalSelectionEnd: 2, } ); fireEvent( citationTextInput, 'onKeyDown', { nativeEvent: {}, diff --git a/packages/block-library/src/quote/test/edit.native.js b/packages/block-library/src/quote/test/edit.native.js index f0279ee03334a..388ef1b8d15f7 100644 --- a/packages/block-library/src/quote/test/edit.native.js +++ b/packages/block-library/src/quote/test/edit.native.js @@ -10,7 +10,7 @@ import { fireEvent, within, waitFor, - changeAndSelectTextOfRichText, + typeInRichText, } from 'test/helpers'; /** @@ -49,11 +49,7 @@ describe( 'Quote', () => { // screen.debug(); let quoteTextInput = within( quoteBlock ).getByPlaceholderText( 'Start writing…' ); - const string = 'A great statement.'; - changeAndSelectTextOfRichText( quoteTextInput, string, { - selectionStart: string.length, - selectionEnd: string.length, - } ); + typeInRichText( quoteTextInput, 'A great statement.' ); fireEvent( quoteTextInput, 'onKeyDown', { nativeEvent: {}, preventDefault() {}, @@ -63,12 +59,12 @@ describe( 'Quote', () => { within( quoteBlock ).getAllByPlaceholderText( 'Start writing…' )[ 1 ]; - changeAndSelectTextOfRichText( quoteTextInput, 'Again.' ); + typeInRichText( quoteTextInput, 'Again.' ); const citationTextInput = within( citationBlock ).getByPlaceholderText( 'Add citation' ); - changeAndSelectTextOfRichText( citationTextInput, 'A person', { - selectionStart: 2, - selectionEnd: 2, + typeInRichText( citationTextInput, 'A person', { + finalSelectionStart: 2, + finalSelectionEnd: 2, } ); fireEvent( citationTextInput, 'onKeyDown', { nativeEvent: {}, diff --git a/packages/block-library/src/verse/test/edit.native.js b/packages/block-library/src/verse/test/edit.native.js index f2dec9d7c0874..bbdacbb90366a 100644 --- a/packages/block-library/src/verse/test/edit.native.js +++ b/packages/block-library/src/verse/test/edit.native.js @@ -6,7 +6,7 @@ import { getEditorHtml, initializeEditor, getBlock, - changeAndSelectTextOfRichText, + typeInRichText, fireEvent, } from 'test/helpers'; @@ -64,17 +64,13 @@ describe( 'Verse block', () => { const verseTextInput = await screen.findByPlaceholderText( 'Write verse…' ); - const string = 'A great statement.'; - changeAndSelectTextOfRichText( verseTextInput, string, { - selectionStart: string.length, - selectionEnd: string.length, - } ); + typeInRichText( verseTextInput, 'A great statement.' ); fireEvent( verseTextInput, 'onKeyDown', { nativeEvent: {}, preventDefault() {}, keyCode: ENTER, } ); - changeAndSelectTextOfRichText( verseTextInput, 'Again' ); + typeInRichText( verseTextInput, 'Again' ); // Assert expect( getEditorHtml() ).toMatchInlineSnapshot( ` diff --git a/packages/rich-text/src/test/performance/rich-text.native.js b/packages/rich-text/src/test/performance/rich-text.native.js index faa76e9d5bff9..aaaf42c90137f 100644 --- a/packages/rich-text/src/test/performance/rich-text.native.js +++ b/packages/rich-text/src/test/performance/rich-text.native.js @@ -2,7 +2,7 @@ * External dependencies */ import { - changeTextOfRichText, + typeInRichText, fireEvent, measurePerformance, screen, @@ -24,7 +24,7 @@ describe( 'RichText Performance', () => { fireEvent( richTextInput, 'focus' ); - changeTextOfRichText( + typeInRichText( richTextInput, 'Bold italic strikethrough text' ); diff --git a/test/native/integration-test-helpers/index.js b/test/native/integration-test-helpers/index.js index 1d1c2666f309b..39f441f4fae93 100644 --- a/test/native/integration-test-helpers/index.js +++ b/test/native/integration-test-helpers/index.js @@ -11,8 +11,8 @@ export { getInnerBlock } from './get-inner-block'; export { initializeEditor } from './initialize-editor'; export { openBlockActionsMenu } from './open-block-actions-menu'; export { openBlockSettings } from './open-block-settings'; -export { changeAndSelectTextOfRichText } from './rich-text-change-and-select-text'; -export { changeTextOfRichText } from './rich-text-change-text'; +export { selectRangeInRichText } from './rich-text-select-range'; +export { typeInRichText } from './rich-text-type'; export { pasteIntoRichText } from './rich-text-paste'; export { setupCoreBlocks } from './setup-core-blocks'; export { setupMediaPicker } from './setup-media-picker'; diff --git a/test/native/integration-test-helpers/rich-text-change-text.js b/test/native/integration-test-helpers/rich-text-change-text.js deleted file mode 100644 index 1eb758855f91c..0000000000000 --- a/test/native/integration-test-helpers/rich-text-change-text.js +++ /dev/null @@ -1,47 +0,0 @@ -/** - * External dependencies - */ -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 {Object} options - * @param {number} [options.initialSelectionStart] - * @param {number} [options.initialSelectionEnd] - */ -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: ( eventCount += 101 ), - target: undefined, - text: insertTextAtPosition( - currentValueSansOuterHtmlTags, - text, - initialSelectionStart, - initialSelectionEnd - ), - }, - } ); -}; diff --git a/test/native/integration-test-helpers/rich-text-select-range.js b/test/native/integration-test-helpers/rich-text-select-range.js new file mode 100644 index 0000000000000..1ff5025d3df14 --- /dev/null +++ b/test/native/integration-test-helpers/rich-text-select-range.js @@ -0,0 +1,23 @@ +/** + * Internal dependencies + */ +import { typeInRichText } from './rich-text-type'; + +/** + * Select a range within a RichText component. + * + * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance. + * @param {number} start Selection start position. + * @param {number} end Selection end position. + * + */ +export const selectRangeInRichText = ( richText, start, end = start ) => { + if ( typeof start !== 'number' ) { + throw new Error( 'A numerical range start value must be provided.' ); + } + + typeInRichText( richText, '', { + finalSelectionStart: start, + finalSelectionEnd: end, + } ); +}; diff --git a/test/native/integration-test-helpers/rich-text-change-and-select-text.js b/test/native/integration-test-helpers/rich-text-type.js similarity index 66% rename from test/native/integration-test-helpers/rich-text-change-and-select-text.js rename to test/native/integration-test-helpers/rich-text-type.js index 9decdd78c38d0..3be020325c2ed 100644 --- a/test/native/integration-test-helpers/rich-text-change-and-select-text.js +++ b/test/native/integration-test-helpers/rich-text-type.js @@ -17,38 +17,36 @@ function insertTextAtPosition( text, newText, start, 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 {string} text Text to 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. + * @param {number} [options.initialSelectionStart] Selection start position before the text is inserted. + * @param {number} [options.initialSelectionEnd] Selection end position before the text is inserted. + * @param {number} [options.finalSelectionStart] Selection start position after the text is inserted. + * @param {number} [options.finalSelectionEnd] Selection end position after the text is inserted. */ -export const changeAndSelectTextOfRichText = ( - richText, - text, - options = {} -) => { +export const typeInRichText = ( richText, text, options = {} ) => { const currentValueSansOuterHtmlTags = stripOuterHtmlTags( richText.props.value ); const { initialSelectionStart = currentValueSansOuterHtmlTags.length, initialSelectionEnd = initialSelectionStart, - selectionStart = 0, - selectionEnd = selectionStart, + finalSelectionStart = currentValueSansOuterHtmlTags.length + + text.length, + finalSelectionEnd = finalSelectionStart, } = options; fireEvent( richText, 'focus' ); + // `onSelectionChange` invokes `onChange`; we only need to trigger the former. fireEvent( richText, 'onSelectionChange', - selectionStart, - selectionEnd, + finalSelectionStart, + finalSelectionEnd, text, { nativeEvent: { - eventCount: ( eventCount += 101 ), + eventCount: ( eventCount += 101 ), // Avoid Aztec dropping the event. target: undefined, text: insertTextAtPosition( currentValueSansOuterHtmlTags, diff --git a/test/native/integration/editor-history.native.js b/test/native/integration/editor-history.native.js index 4afdcc5bbefe2..acb3eb23192af 100644 --- a/test/native/integration/editor-history.native.js +++ b/test/native/integration/editor-history.native.js @@ -4,8 +4,7 @@ import { addBlock, getBlock, - changeTextOfRichText, - changeAndSelectTextOfRichText, + typeInRichText, fireEvent, getEditorHtml, initializeEditor, @@ -79,7 +78,7 @@ describe( 'Editor History', () => { fireEvent.press( paragraphBlock ); const paragraphTextInput = within( paragraphBlock ).getByPlaceholderText( 'Start writing…' ); - changeTextOfRichText( + typeInRichText( paragraphTextInput, 'A quick brown fox jumps over the lazy dog.' ); @@ -124,10 +123,10 @@ describe( 'Editor History', () => { 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 } ); // Artifical delay to create two history entries for typing and bolding. await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );