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 4731470b7bf3f5..675b286502a1f0 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 903289c6d5a316..dc1a8f974c3c6e 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 9d23413fd79be5..788c1b1e40e4bb 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 53bedb03190f48..fc0efcdbdcb6c3 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 2c9cbcd43ec3ef..67470228afc63e 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 02501a3cd49eb1..a4dcfdac92041b 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 81a7caa29255f5..21286a7cdd67df 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 dd9508f2ec0546..9346750627edba 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 f0279ee03334a7..388ef1b8d15f77 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 f2dec9d7c0874a..bbdacbb90366aa 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 faa76e9d5bff98..aaaf42c90137f9 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 1d1c2666f309b7..39f441f4fae931 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 1eb758855f91cd..00000000000000 --- 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 00000000000000..1ff5025d3df14a --- /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 9decdd78c38d09..3be020325c2ed5 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 4afdcc5bbefe27..acb3eb23192afd 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 ) );