diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js index 5b70952925cd9..2c9cbcd43ec3e 100644 --- a/packages/block-library/src/list/test/edit.native.js +++ b/packages/block-library/src/list/test/edit.native.js @@ -347,7 +347,10 @@ describe( 'List block', () => { // backward delete const listItemField = within( listItemBlock ).getByLabelText( /Text input. .*Two.*/ ); - changeAndSelectTextOfRichText( listItemField, 'Two' ); + changeAndSelectTextOfRichText( listItemField, 'Two', { + initialSelectionStart: 0, + initialSelectionEnd: 3, + } ); fireEvent( listItemField, 'onKeyDown', { nativeEvent: {}, preventDefault() {}, @@ -395,7 +398,10 @@ describe( 'List block', () => { // backward delete const listItemField = within( listItemBlock ).getByLabelText( /Text input. .*One.*/ ); - changeAndSelectTextOfRichText( listItemField, 'One' ); + changeAndSelectTextOfRichText( listItemField, 'One', { + initialSelectionStart: 0, + initialSelectionEnd: 3, + } ); fireEvent( listItemField, 'onKeyDown', { nativeEvent: {}, preventDefault() {}, @@ -406,11 +412,11 @@ describe( 'List block', () => { "
A quick brown fox.
- +One
- +A great statement.+
A great statement." ` ); } ); diff --git a/packages/block-library/src/pullquote/test/edit.native.js b/packages/block-library/src/pullquote/test/edit.native.js index a3c11d445ad76..dd9508f2ec054 100644 --- a/packages/block-library/src/pullquote/test/edit.native.js +++ b/packages/block-library/src/pullquote/test/edit.native.js @@ -45,8 +45,7 @@ describe( 'Pullquote', () => { preventDefault() {}, keyCode: ENTER, } ); - - // TODO: Determine a way to type after pressing ENTER within the block. + changeAndSelectTextOfRichText( pullquoteTextInput, 'Again' ); const citationTextInput = within( citationBlock ).getByPlaceholderText( 'Add citation' ); @@ -63,7 +62,7 @@ describe( 'Pullquote', () => { // Assert expect( getEditorHtml() ).toMatchInlineSnapshot( ` " - + " ` ); } ); diff --git a/packages/block-library/src/verse/test/edit.native.js b/packages/block-library/src/verse/test/edit.native.js index 6663926a7db64..f2dec9d7c0874 100644 --- a/packages/block-library/src/verse/test/edit.native.js +++ b/packages/block-library/src/verse/test/edit.native.js @@ -74,13 +74,12 @@ describe( 'Verse block', () => { preventDefault() {}, keyCode: ENTER, } ); - - // TODO: Determine a way to type after pressing ENTER within the block. + changeAndSelectTextOfRichText( verseTextInput, 'Again' ); // Assert expect( getEditorHtml() ).toMatchInlineSnapshot( ` " -
Again
A great statement.+
A great statement." ` ); } ); diff --git a/test/native/integration-test-helpers/rich-text-change-and-select-text.js b/test/native/integration-test-helpers/rich-text-change-and-select-text.js index ff01895e09d76..9decdd78c38d0 100644 --- a/test/native/integration-test-helpers/rich-text-change-and-select-text.js +++ b/test/native/integration-test-helpers/rich-text-change-and-select-text.js @@ -3,20 +3,42 @@ */ import { fireEvent } from '@testing-library/react-native'; +let eventCount = 0; + +function stripOuterHtmlTags( string ) { + return string.replace( /^<[^>]*>|<[^>]*>$/g, '' ); +} + +function insertTextAtPosition( text, newText, start, end ) { + return text.slice( 0, start ) + newText + text.slice( end ); +} + /** * Changes the text and selection of a RichText component. * - * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance. - * @param {string} text Text to be set. - * @param {Object} options Configuration options for selection. - * @param {number} [options.selectionStart] Selection start position. - * @param {number} [options.selectionEnd] Selection end position. + * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance. + * @param {string} text Text to be set. + * @param {Object} options Configuration options for selection. + * @param {number} [options.initialSelectionStart] + * @param {number} [options.initialSelectionEnd] + * @param {number} [options.selectionStart] Selection start position. + * @param {number} [options.selectionEnd] Selection end position. */ export const changeAndSelectTextOfRichText = ( richText, text, - { selectionStart = 0, selectionEnd = 0 } = {} + options = {} ) => { + const currentValueSansOuterHtmlTags = stripOuterHtmlTags( + richText.props.value + ); + const { + initialSelectionStart = currentValueSansOuterHtmlTags.length, + initialSelectionEnd = initialSelectionStart, + selectionStart = 0, + selectionEnd = selectionStart, + } = options; + fireEvent( richText, 'focus' ); fireEvent( richText, @@ -26,9 +48,14 @@ export const changeAndSelectTextOfRichText = ( text, { nativeEvent: { - eventCount: 1, + eventCount: ( eventCount += 101 ), target: undefined, - text, + text: insertTextAtPosition( + currentValueSansOuterHtmlTags, + text, + initialSelectionStart, + initialSelectionEnd + ), }, } ); diff --git a/test/native/integration-test-helpers/rich-text-change-text.js b/test/native/integration-test-helpers/rich-text-change-text.js index 495fe96dc5fb9..1eb758855f91c 100644 --- a/test/native/integration-test-helpers/rich-text-change-text.js +++ b/test/native/integration-test-helpers/rich-text-change-text.js @@ -3,19 +3,45 @@ */ import { fireEvent } from '@testing-library/react-native'; +let eventCount = 0; + +function stripOuterHtmlTags( string ) { + return string.replace( /^<[^>]*>|<[^>]*>$/g, '' ); +} + +function insertTextAtPosition( text, newText, start, end ) { + return text.slice( 0, start ) + newText + text.slice( end ); +} + /** * Changes the text of a RichText component. * - * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance. - * @param {string} text Text to be set. + * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance. + * @param {string} text Text to be set. + * @param {Object} options + * @param {number} [options.initialSelectionStart] + * @param {number} [options.initialSelectionEnd] */ -export const changeTextOfRichText = ( richText, text ) => { +export const changeTextOfRichText = ( richText, text, options = {} ) => { + const currentValueSansOuterHtmlTags = stripOuterHtmlTags( + richText.props.value + ); + const { + initialSelectionStart = currentValueSansOuterHtmlTags.length, + initialSelectionEnd = initialSelectionStart, + } = options; + fireEvent( richText, 'focus' ); fireEvent( richText, 'onChange', { nativeEvent: { - eventCount: 1, + eventCount: ( eventCount += 101 ), target: undefined, - text, + text: insertTextAtPosition( + currentValueSansOuterHtmlTags, + text, + initialSelectionStart, + initialSelectionEnd + ), }, } ); };
Again