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 ) );