From debcc58519b5823feb00de49a0ef271b4030b806 Mon Sep 17 00:00:00 2001 From: jos <17252150+jostnes@users.noreply.github.com> Date: Mon, 18 Apr 2022 10:51:46 +0800 Subject: [PATCH 1/8] add fixes for tests with paragraph blocks --- .../gutenberg-editor-block-insertion.test.js | 18 +-- .../gutenberg-editor-heading-@canary.test.js | 16 ++- .../gutenberg-editor-image-@canary.test.js | 14 ++- .../gutenberg-editor-paragraph.test.js | 111 ++++++++---------- .../gutenberg-editor-paste.test.js | 57 ++++----- .../gutenberg-editor-rotation.test.js | 6 +- .../__device-tests__/helpers/utils.js | 12 +- .../__device-tests__/pages/editor-page.js | 87 ++++++++------ 8 files changed, 171 insertions(+), 150 deletions(-) diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js index 0ee6a985c4f921..ca91aa05c66126 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js @@ -8,7 +8,7 @@ import testData from './helpers/test-data'; describe( 'Gutenberg Editor tests for Block insertion', () => { it( 'should be able to insert multi-paragraph text, and text to another paragraph block in between', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - let paragraphBlockElement = await editorPage.getBlockAtPosition( + let paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph ); if ( isAndroid() ) { @@ -18,7 +18,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { await editorPage.sendTextToParagraphBlock( 1, testData.longText ); // Should have 3 paragraph blocks at this point. - paragraphBlockElement = await editorPage.getBlockAtPosition( + paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 2 ); @@ -26,7 +26,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { await editorPage.addNewBlock( blockNames.paragraph ); - paragraphBlockElement = await editorPage.getBlockAtPosition( + paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 3 ); @@ -44,7 +44,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { // Workaround for now since deleting the first element causes a crash on CI for Android if ( isAndroid() ) { - paragraphBlockElement = await editorPage.getBlockAtPosition( + paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 3, { @@ -57,7 +57,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { for ( let i = 3; i > 0; i-- ) { // wait for accessibility ids to update await editorPage.driver.sleep( 1000 ); - paragraphBlockElement = await editorPage.getBlockAtPosition( + paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, i, { @@ -74,7 +74,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { for ( let i = 4; i > 0; i-- ) { // wait for accessibility ids to update await editorPage.driver.sleep( 1000 ); - paragraphBlockElement = await editorPage.getBlockAtPosition( + paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph ); await clickMiddleOfElement( @@ -88,7 +88,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { it( 'should be able to insert block at the beginning of post from the title', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - let paragraphBlockElement = await editorPage.getBlockAtPosition( + let paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph ); if ( isAndroid() ) { @@ -110,7 +110,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { await titleElement.click(); await editorPage.addNewBlock( blockNames.paragraph ); - paragraphBlockElement = await editorPage.getBlockAtPosition( + paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph ); await clickMiddleOfElement( editorPage.driver, paragraphBlockElement ); @@ -121,4 +121,4 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { testData.blockInsertionHtmlFromTitle.toLowerCase() ); } ); -} ); +} ); \ No newline at end of file diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js index 64b4ab460e48c8..4c02eeaf37885c 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js @@ -9,7 +9,11 @@ describe( 'Gutenberg Editor tests', () => { it( 'should be able to create a post with heading and paragraph blocks', async () => { await editorPage.addNewBlock( blockNames.heading ); let headingBlockElement = await editorPage.getBlockAtPosition( - blockNames.heading + blockNames.heading, + 1, + { + useWaitForVisible: true, + } ); if ( isAndroid() ) { await headingBlockElement.click(); @@ -21,7 +25,7 @@ describe( 'Gutenberg Editor tests', () => { ); await editorPage.addNewBlock( blockNames.paragraph ); - let paragraphBlockElement = await editorPage.getBlockAtPosition( + let paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 2 ); @@ -31,7 +35,7 @@ describe( 'Gutenberg Editor tests', () => { ); await editorPage.addNewBlock( blockNames.paragraph ); - paragraphBlockElement = await editorPage.getBlockAtPosition( + paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 3 ); @@ -41,7 +45,7 @@ describe( 'Gutenberg Editor tests', () => { ); await editorPage.addNewBlock( blockNames.heading ); - headingBlockElement = await editorPage.getBlockAtPosition( + headingBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.heading, 4 ); @@ -51,7 +55,7 @@ describe( 'Gutenberg Editor tests', () => { ); await editorPage.addNewBlock( blockNames.paragraph ); - paragraphBlockElement = await editorPage.getBlockAtPosition( + paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 5 ); @@ -60,4 +64,4 @@ describe( 'Gutenberg Editor tests', () => { testData.mediumText ); } ); -} ); +} ); \ No newline at end of file diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js index d5b9f0ba6eed85..b1d44b8699e5e5 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js @@ -8,11 +8,14 @@ import testData from './helpers/test-data'; describe( 'Gutenberg Editor Image Block tests', () => { it( 'should be able to add an image block', async () => { await editorPage.addNewBlock( blockNames.image ); - await editorPage.driver.sleep( 1000 ); await editorPage.closePicker(); - let imageBlock = await editorPage.getBlockAtPosition( - blockNames.image + const imageBlock = await editorPage.getBlockAtPosition( + blockNames.image, + 1, + { + useWaitForVisible: true, + } ); // Can only add image from media library on iOS @@ -26,7 +29,6 @@ describe( 'Gutenberg Editor Image Block tests', () => { await editorPage.dismissKeyboard(); // End workaround. - imageBlock = await editorPage.getBlockAtPosition( imageBlock ); await swipeUp( editorPage.driver, imageBlock ); await editorPage.enterCaptionToSelectedImageBlock( testData.imageCaption, @@ -35,7 +37,7 @@ describe( 'Gutenberg Editor Image Block tests', () => { await editorPage.dismissKeyboard(); } await editorPage.addNewBlock( blockNames.paragraph ); - const paragraphBlockElement = await editorPage.getBlockAtPosition( + const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 2 ); @@ -56,4 +58,4 @@ describe( 'Gutenberg Editor Image Block tests', () => { } /* eslint-enable jest/no-conditional-expect */ } ); -} ); +} ); \ No newline at end of file diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js index ff648eeeda3cbc..13226b115f3791 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js @@ -13,39 +13,26 @@ import testData from './helpers/test-data'; describe( 'Gutenberg Editor tests for Paragraph Block', () => { it( 'should be able to split one paragraph block into two', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - const paragraphBlockElement = await editorPage.getBlockAtPosition( + const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph ); - if ( isAndroid() ) { - await paragraphBlockElement.click(); - } - await editorPage.typeTextToParagraphBlock( paragraphBlockElement, testData.shortText ); - const textViewElement = await editorPage.getTextViewForParagraphBlock( - paragraphBlockElement + await clickMiddleOfElement( + editorPage.driver, + paragraphBlockElement, + true ); - await clickMiddleOfElement( editorPage.driver, textViewElement ); await editorPage.typeTextToParagraphBlock( paragraphBlockElement, '\n', false ); - expect( - ( await editorPage.hasBlockAtPosition( - 1, - blockNames.paragraph - ) ) && - ( await editorPage.hasBlockAtPosition( - 2, - blockNames.paragraph - ) ) - ).toBe( true ); - const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 ); const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 ); + expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 2 ); expect( text0 ).not.toBe( '' ); expect( text1 ).not.toBe( '' ); expect( testData.shortText ).toMatch( @@ -58,7 +45,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { it( 'should be able to merge 2 paragraph blocks into 1', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - let paragraphBlockElement = await editorPage.getBlockAtPosition( + let paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph ); if ( isAndroid() ) { @@ -69,62 +56,51 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { paragraphBlockElement, testData.shortText ); - let textViewElement = await editorPage.getTextViewForParagraphBlock( - paragraphBlockElement + await clickMiddleOfElement( + editorPage.driver, + paragraphBlockElement, + true ); - await clickMiddleOfElement( editorPage.driver, textViewElement ); await editorPage.typeTextToParagraphBlock( paragraphBlockElement, '\n' ); - expect( - ( await editorPage.hasBlockAtPosition( - 1, - blockNames.paragraph - ) ) && - ( await editorPage.hasBlockAtPosition( - 2, - blockNames.paragraph - ) ) - ).toBe( true ); const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 ); const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 ); + expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 2 ); paragraphBlockElement = await editorPage.getBlockAtPosition( blockNames.paragraph, - 2 + 2, + { + useWaitForVisible: true, + } ); if ( isAndroid() ) { await paragraphBlockElement.click(); } - textViewElement = await editorPage.getTextViewForParagraphBlock( + const textViewElement = await editorPage.getTextViewForParagraphBlock( paragraphBlockElement ); await clickBeginningOfElement( editorPage.driver, textViewElement ); + + const backspaceKey = isAndroid() ? backspace : '\b\b'; await editorPage.typeTextToParagraphBlock( paragraphBlockElement, - backspace + backspaceKey ); const text = await editorPage.getTextForParagraphBlockAtPosition( 1 ); - expect( text0 + text1 ).toMatch( text ); - expect( - await editorPage.hasBlockAtPosition( 2, blockNames.paragraph ) - ).toBe( false ); + text0.replace( /\s/g, '' ) + text1.replace( /\s/g, '' ) + ).toMatch( text.replace( /\s/g, '' ) ); + expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 1 ); await editorPage.removeBlockAtPosition( blockNames.paragraph ); } ); it( 'should be able to create a post with multiple paragraph blocks', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - const paragraphBlockElement = await editorPage.getBlockAtPosition( - blockNames.paragraph - ); - if ( isAndroid() ) { - await paragraphBlockElement.click(); - } - await editorPage.sendTextToParagraphBlock( 1, testData.longText ); for ( let i = 3; i > 0; i-- ) { @@ -139,18 +115,27 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { testData.lettersInParagraphBlock, ].join( '\n\n' ) ); - // // Merge paragraphs. - const secondParagraphBlockElement = await editorPage.getBlockAtPosition( + + // Merge paragraphs. + await editorPage.getTextForParagraphBlockAtPosition( 2 ); + const paragraphBlockElement = await editorPage.getBlockAtPosition( blockNames.paragraph, - 2 + 2, + { + useWaitForVisible: true, + } ); - await clickBeginningOfElement( - editorPage.driver, - secondParagraphBlockElement + + const textViewElement = await editorPage.getTextViewForParagraphBlock( + paragraphBlockElement ); + + await clickBeginningOfElement( editorPage.driver, textViewElement ); + + const backspaceKey = isAndroid() ? backspace : '\b\b'; await editorPage.typeTextToParagraphBlock( - secondParagraphBlockElement, - backspace + paragraphBlockElement, + backspaceKey ); // Verify the editor has not crashed. @@ -168,21 +153,25 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { testData.paragraphBlockEmpty, ].join( '\n\n' ) ); - // // Merge paragraphs. - const secondParagraphBlockElement = await editorPage.getBlockAtPosition( + + // Merge paragraphs. + const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 2 ); - await secondParagraphBlockElement.click(); + const backspaceKey = isAndroid() ? backspace : '\b\b'; await editorPage.typeTextToParagraphBlock( - secondParagraphBlockElement, - backspace + paragraphBlockElement, + backspaceKey ); // Verify the editor has not crashed. const text = await editorPage.getTextForParagraphBlockAtPosition( 1 ); expect( text.length ).not.toEqual( 0 ); + if ( isAndroid() ) { + await paragraphBlockElement.click(); + } await editorPage.removeBlockAtPosition( blockNames.paragraph ); } ); -} ); +} ); \ No newline at end of file diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js index 5e4084fc531edb..58ea2f71f829f1 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js @@ -26,7 +26,7 @@ describe( 'Gutenberg Editor paste tests', () => { it( 'copies plain text from one paragraph block and pastes in another', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - const paragraphBlockElement = await editorPage.getBlockAtPosition( + const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph ); if ( isAndroid() ) { @@ -37,14 +37,17 @@ describe( 'Gutenberg Editor paste tests', () => { paragraphBlockElement, testData.pastePlainText ); - const textViewElement = await editorPage.getTextViewForParagraphBlock( - paragraphBlockElement - ); // Copy content to clipboard. - await longPressMiddleOfElement( editorPage.driver, textViewElement ); - await tapSelectAllAboveElement( editorPage.driver, textViewElement ); - await tapCopyAboveElement( editorPage.driver, textViewElement ); + await longPressMiddleOfElement( + editorPage.driver, + paragraphBlockElement + ); + await tapSelectAllAboveElement( + editorPage.driver, + paragraphBlockElement + ); + await tapCopyAboveElement( editorPage.driver, paragraphBlockElement ); // Create another paragraph block. await editorPage.addNewBlock( blockNames.paragraph ); @@ -52,7 +55,7 @@ describe( 'Gutenberg Editor paste tests', () => { // On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it. await editorPage.dismissAndroidClipboardSmartSuggestion(); } - const paragraphBlockElement2 = await editorPage.getBlockAtPosition( + const paragraphBlockElement2 = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 2 ); @@ -60,13 +63,12 @@ describe( 'Gutenberg Editor paste tests', () => { await paragraphBlockElement2.click(); } - const textViewElement2 = await editorPage.getTextViewForParagraphBlock( + // Paste into second paragraph block. + await longPressMiddleOfElement( + editorPage.driver, paragraphBlockElement2 ); - - // Paste into second paragraph block. - await longPressMiddleOfElement( editorPage.driver, textViewElement2 ); - await tapPasteAboveElement( editorPage.driver, textViewElement2 ); + await tapPasteAboveElement( editorPage.driver, paragraphBlockElement2 ); const text = await editorPage.getTextForParagraphBlockAtPosition( 2 ); expect( text ).toBe( testData.pastePlainText ); @@ -78,21 +80,23 @@ describe( 'Gutenberg Editor paste tests', () => { it( 'copies styled text from one paragraph block and pastes in another', async () => { // Create paragraph block with styled text by editing html. await editorPage.setHtmlContent( testData.pasteHtmlText ); - const paragraphBlockElement = await editorPage.getBlockAtPosition( + const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph ); if ( isAndroid() ) { await paragraphBlockElement.click(); } - const textViewElement = await editorPage.getTextViewForParagraphBlock( + // Copy content to clipboard. + await longPressMiddleOfElement( + editorPage.driver, paragraphBlockElement ); - - // Copy content to clipboard. - await longPressMiddleOfElement( editorPage.driver, textViewElement ); - await tapSelectAllAboveElement( editorPage.driver, textViewElement ); - await tapCopyAboveElement( editorPage.driver, textViewElement ); + await tapSelectAllAboveElement( + editorPage.driver, + paragraphBlockElement + ); + await tapCopyAboveElement( editorPage.driver, paragraphBlockElement ); // Create another paragraph block. await editorPage.addNewBlock( blockNames.paragraph ); @@ -100,7 +104,7 @@ describe( 'Gutenberg Editor paste tests', () => { // On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it. await editorPage.dismissAndroidClipboardSmartSuggestion(); } - const paragraphBlockElement2 = await editorPage.getBlockAtPosition( + const paragraphBlockElement2 = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 2 ); @@ -108,13 +112,12 @@ describe( 'Gutenberg Editor paste tests', () => { await paragraphBlockElement2.click(); } - const textViewElement2 = await editorPage.getTextViewForParagraphBlock( + // Paste into second paragraph block. + await longPressMiddleOfElement( + editorPage.driver, paragraphBlockElement2 ); - - // Paste into second paragraph block. - await longPressMiddleOfElement( editorPage.driver, textViewElement2 ); - await tapPasteAboveElement( editorPage.driver, textViewElement2 ); + await tapPasteAboveElement( editorPage.driver, paragraphBlockElement2 ); // Check styled text by verifying html contents. const html = await editorPage.getHtmlContent(); @@ -123,4 +126,4 @@ describe( 'Gutenberg Editor paste tests', () => { testData.pasteHtmlTextResult.toLowerCase() ); } ); -} ); +} ); \ No newline at end of file diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js index cbaebfd3c57f85..47bf257e5daead 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js @@ -8,7 +8,7 @@ import testData from './helpers/test-data'; describe( 'Gutenberg Editor tests', () => { it( 'should be able to add blocks , rotate device and continue adding blocks', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - let paragraphBlockElement = await editorPage.getBlockAtPosition( + let paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph ); if ( isAndroid() ) { @@ -32,7 +32,7 @@ describe( 'Gutenberg Editor tests', () => { await editorPage.driver.hideDeviceKeyboard(); } - paragraphBlockElement = await editorPage.getBlockAtPosition( + paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 2 ); @@ -55,4 +55,4 @@ describe( 'Gutenberg Editor tests', () => { testData.deviceRotationHtml.toLowerCase() ); } ); -} ); +} ); \ No newline at end of file diff --git a/packages/react-native-editor/__device-tests__/helpers/utils.js b/packages/react-native-editor/__device-tests__/helpers/utils.js index 03f3002c59b142..a8dc1c415ebcb4 100644 --- a/packages/react-native-editor/__device-tests__/helpers/utils.js +++ b/packages/react-native-editor/__device-tests__/helpers/utils.js @@ -282,12 +282,16 @@ const typeStringAndroid = async ( }; // Calculates middle x,y and clicks that position -const clickMiddleOfElement = async ( driver, element ) => { +const clickMiddleOfElement = async ( driver, element, isParagraph = false ) => { const location = await element.getLocation(); const size = await element.getSize(); - const action = await new wd.TouchAction( driver ); - action.press( { x: location.x + size.width / 2, y: location.y } ); + // Condition to make it work on iOS Paragraph blocks on both environments, the default calculation somehow doesn't work for this combination but works for others. + if ( isParagraph === true && ! isAndroid() ) { + action.press( { x: size.width / 2, y: location.y } ); + } else { + action.press( { x: location.x + size.width / 2, y: location.y } ); + } action.release(); await action.perform(); }; @@ -508,4 +512,4 @@ module.exports = { isEditorVisible, waitForMediaLibrary, waitForVisible, -}; +}; \ No newline at end of file diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js index 0a89deba8d5027..a3235eee4cc630 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -45,6 +45,25 @@ class EditorPage { return await this.driver.hasElementByAccessibilityId( 'block-list' ); } + // For text blocks, e.g Paragraph, Heading + async getTextBlockLocatorAtPosition( blockName, position = 1 ) { + // iOS needs a click before + if ( ! isAndroid() ) { + const textBlockLocator = `(//XCUIElementTypeButton[contains(@name, "${ blockName } Block. Row ${ position }")])`; + const textBlock = await waitForVisible( + this.driver, + textBlockLocator + ); + await textBlock.click(); + } + + const blockLocator = isAndroid() + ? `//android.view.ViewGroup[contains(@content-desc, "${ blockName } Block. Row ${ position }.")]/android.widget.EditText` + : `//XCUIElementTypeButton[contains(@name, "${ blockName } Block. Row ${ position }.")]//XCUIElementTypeTextView`; + + return await waitForVisible( this.driver, blockLocator ); + } + // Finds the wd element for new block that was added and sets the element attribute // and accessibilityId attributes on this object and selects the block // position uses one based numbering. @@ -136,7 +155,9 @@ class EditorPage { async hasBlockAtPosition( position = 1, blockName = '' ) { return ( undefined !== - ( await this.getBlockAtPosition( blockName, position ) ) + ( await this.getBlockAtPosition( blockName, position, { + useWaitForVisible: true, + } ) ) ); } @@ -455,9 +476,10 @@ class EditorPage { this.driver, blockActionsMenuButtonLocator ); - if ( isAndroid() ) { - const block = await this.getBlockAtPosition( blockName, position ); + const block = await this.getBlockAtPosition( blockName, position, { + useWaitForVisible: true, + } ); let checkList = await this.driver.elementsByXPath( blockActionsMenuButtonLocator ); @@ -470,7 +492,6 @@ class EditorPage { } await blockActionsMenuButton.click(); - const removeActionButtonIdentifier = 'Remove block'; const removeActionButtonLocator = `${ buttonElementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ removeActionButtonIdentifier }")]`; const removeActionButton = await waitForVisible( @@ -501,22 +522,20 @@ class EditorPage { } async typeTextToParagraphBlock( block, text, clear ) { - const textViewElement = await this.getTextViewForParagraphBlock( - block - ); - await typeString( this.driver, textViewElement, text, clear ); - await this.driver.sleep( 1000 ); // Give time for the block to rerender (such as for accessibility) + await typeString( this.driver, block, text, clear ); } async sendTextToParagraphBlock( position, text, clear ) { const paragraphs = text.split( '\n' ); for ( let i = 0; i < paragraphs.length; i++ ) { - // Select block first. - const block = await this.getBlockAtPosition( - this.paragraphBlockName, + const block = await this.getTextBlockLocatorAtPosition( + blockNames.paragraph, position + i ); - await block.click(); + + if ( isAndroid() ) { + await block.click(); + } await this.typeTextToParagraphBlock( block, @@ -529,28 +548,13 @@ class EditorPage { } } - async getTextForParagraphBlock( block ) { - const textViewElement = await this.getTextViewForParagraphBlock( - block - ); - const text = await textViewElement.text(); - return text.toString(); - } - async getTextForParagraphBlockAtPosition( position ) { - // Select block first. - let block = await this.getBlockAtPosition( - this.paragraphBlockName, + const blockLocator = await this.getTextBlockLocatorAtPosition( + blockNames.paragraph, position ); - await block.click(); - block = await this.getBlockAtPosition( - this.paragraphBlockName, - position - ); - const text = await this.getTextForParagraphBlock( block ); - return text.toString(); + return await blockLocator.text(); } // ========================= @@ -601,8 +605,13 @@ class EditorPage { } async chooseMediaLibrary() { - const mediaLibraryButton = await this.driver.elementByAccessibilityId( - 'WordPress Media Library' + const mediaLibraryLocator = isAndroid() + ? `//android.widget.Button[@content-desc="WordPress Media Library"]` + : `//XCUIElementTypeButton[@name="WordPress Media Library"]`; + + const mediaLibraryButton = await waitForVisible( + this.driver, + mediaLibraryLocator ); await mediaLibraryButton.click(); } @@ -766,6 +775,16 @@ class EditorPage { async sauceJobStatus( allPassed ) { await this.driver.sauceJobStatus( allPassed ); } + + async getNumberOfParagraphBlocks() { + const paragraphBlockLocator = isAndroid() + ? `//android.view.ViewGroup[contains(@content-desc, "Paragraph Block. Row")]/android.widget.EditText` + : `(//XCUIElementTypeButton[contains(@name, "Paragraph Block. Row")])`; + const locator = await this.driver.elementsByXPath( + paragraphBlockLocator + ); + return locator.length; + } } const blockNames = { @@ -786,4 +805,4 @@ const blockNames = { search: 'Search', }; -module.exports = { initializeEditorPage, blockNames }; +module.exports = { initializeEditorPage, blockNames }; \ No newline at end of file From ccd1d0c112b6e414bec4a9f196918bc01df003b2 Mon Sep 17 00:00:00 2001 From: jos <17252150+jostnes@users.noreply.github.com> Date: Mon, 18 Apr 2022 10:53:35 +0800 Subject: [PATCH 2/8] lint fixes --- .../__device-tests__/gutenberg-editor-block-insertion.test.js | 2 +- .../__device-tests__/gutenberg-editor-heading-@canary.test.js | 2 +- .../__device-tests__/gutenberg-editor-image-@canary.test.js | 2 +- .../__device-tests__/gutenberg-editor-paragraph.test.js | 2 +- .../__device-tests__/gutenberg-editor-paste.test.js | 2 +- .../__device-tests__/gutenberg-editor-rotation.test.js | 2 +- packages/react-native-editor/__device-tests__/helpers/utils.js | 2 +- .../react-native-editor/__device-tests__/pages/editor-page.js | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js index ca91aa05c66126..3c9a8b233ea1a0 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js @@ -121,4 +121,4 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { testData.blockInsertionHtmlFromTitle.toLowerCase() ); } ); -} ); \ No newline at end of file +} ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js index 4c02eeaf37885c..fc88db8e55246e 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js @@ -64,4 +64,4 @@ describe( 'Gutenberg Editor tests', () => { testData.mediumText ); } ); -} ); \ No newline at end of file +} ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js index b1d44b8699e5e5..e475cc69afa7a4 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js @@ -58,4 +58,4 @@ describe( 'Gutenberg Editor Image Block tests', () => { } /* eslint-enable jest/no-conditional-expect */ } ); -} ); \ No newline at end of file +} ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js index 13226b115f3791..d4b71d7fc660b7 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js @@ -174,4 +174,4 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { } await editorPage.removeBlockAtPosition( blockNames.paragraph ); } ); -} ); \ No newline at end of file +} ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js index 58ea2f71f829f1..53746b0324772c 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js @@ -126,4 +126,4 @@ describe( 'Gutenberg Editor paste tests', () => { testData.pasteHtmlTextResult.toLowerCase() ); } ); -} ); \ No newline at end of file +} ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js index 47bf257e5daead..97c9bcd78f0cc7 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js @@ -55,4 +55,4 @@ describe( 'Gutenberg Editor tests', () => { testData.deviceRotationHtml.toLowerCase() ); } ); -} ); \ No newline at end of file +} ); diff --git a/packages/react-native-editor/__device-tests__/helpers/utils.js b/packages/react-native-editor/__device-tests__/helpers/utils.js index a8dc1c415ebcb4..414701701bd480 100644 --- a/packages/react-native-editor/__device-tests__/helpers/utils.js +++ b/packages/react-native-editor/__device-tests__/helpers/utils.js @@ -512,4 +512,4 @@ module.exports = { isEditorVisible, waitForMediaLibrary, waitForVisible, -}; \ No newline at end of file +}; diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js index a3235eee4cc630..1503e43808944f 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -805,4 +805,4 @@ const blockNames = { search: 'Search', }; -module.exports = { initializeEditorPage, blockNames }; \ No newline at end of file +module.exports = { initializeEditorPage, blockNames }; From d117eb74becd8e657a30f66c77d48d36b8201085 Mon Sep 17 00:00:00 2001 From: jos <17252150+jostnes@users.noreply.github.com> Date: Mon, 18 Apr 2022 17:28:09 +0800 Subject: [PATCH 3/8] update missed paragraph blocks to use getTextBlockLocatorAtPosition --- .../gutenberg-editor-paragraph.test.js | 37 +++++-------------- 1 file changed, 10 insertions(+), 27 deletions(-) diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js index d4b71d7fc660b7..b5c394917efadb 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js @@ -69,21 +69,12 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 ); const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 ); expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 2 ); - paragraphBlockElement = await editorPage.getBlockAtPosition( + paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, - 2, - { - useWaitForVisible: true, - } + 2 ); - if ( isAndroid() ) { - await paragraphBlockElement.click(); - } - const textViewElement = await editorPage.getTextViewForParagraphBlock( - paragraphBlockElement - ); - await clickBeginningOfElement( editorPage.driver, textViewElement ); + await clickBeginningOfElement( editorPage.driver, paragraphBlockElement ); const backspaceKey = isAndroid() ? backspace : '\b\b'; await editorPage.typeTextToParagraphBlock( @@ -117,21 +108,13 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { ); // Merge paragraphs. - await editorPage.getTextForParagraphBlockAtPosition( 2 ); - const paragraphBlockElement = await editorPage.getBlockAtPosition( + const blockText = await editorPage.getTextForParagraphBlockAtPosition( 2 ); + const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, - 2, - { - useWaitForVisible: true, - } - ); - - const textViewElement = await editorPage.getTextViewForParagraphBlock( - paragraphBlockElement + 2 ); - await clickBeginningOfElement( editorPage.driver, textViewElement ); - + await clickBeginningOfElement( editorPage.driver, paragraphBlockElement ); const backspaceKey = isAndroid() ? backspace : '\b\b'; await editorPage.typeTextToParagraphBlock( paragraphBlockElement, @@ -139,8 +122,8 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { ); // Verify the editor has not crashed. - const text = await editorPage.getTextForParagraphBlockAtPosition( 1 ); - expect( text.length ).not.toEqual( 0 ); + const mergedBlockText = await editorPage.getTextForParagraphBlockAtPosition( 1 ); + expect( mergedBlockText.length ).not.toEqual( blockText.length ); await editorPage.removeBlockAtPosition( blockNames.paragraph ); } ); @@ -174,4 +157,4 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { } await editorPage.removeBlockAtPosition( blockNames.paragraph ); } ); -} ); +} ); \ No newline at end of file From 1ef8d3dfc1e133bde4b5022ed75197734f370c9a Mon Sep 17 00:00:00 2001 From: jos <17252150+jostnes@users.noreply.github.com> Date: Mon, 18 Apr 2022 17:29:07 +0800 Subject: [PATCH 4/8] lint fixes --- .../gutenberg-editor-paragraph.test.js | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js index b5c394917efadb..67276e97558e25 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js @@ -74,7 +74,10 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { 2 ); - await clickBeginningOfElement( editorPage.driver, paragraphBlockElement ); + await clickBeginningOfElement( + editorPage.driver, + paragraphBlockElement + ); const backspaceKey = isAndroid() ? backspace : '\b\b'; await editorPage.typeTextToParagraphBlock( @@ -108,13 +111,18 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { ); // Merge paragraphs. - const blockText = await editorPage.getTextForParagraphBlockAtPosition( 2 ); + const blockText = await editorPage.getTextForParagraphBlockAtPosition( + 2 + ); const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( blockNames.paragraph, 2 ); - await clickBeginningOfElement( editorPage.driver, paragraphBlockElement ); + await clickBeginningOfElement( + editorPage.driver, + paragraphBlockElement + ); const backspaceKey = isAndroid() ? backspace : '\b\b'; await editorPage.typeTextToParagraphBlock( paragraphBlockElement, @@ -122,7 +130,9 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { ); // Verify the editor has not crashed. - const mergedBlockText = await editorPage.getTextForParagraphBlockAtPosition( 1 ); + const mergedBlockText = await editorPage.getTextForParagraphBlockAtPosition( + 1 + ); expect( mergedBlockText.length ).not.toEqual( blockText.length ); await editorPage.removeBlockAtPosition( blockNames.paragraph ); @@ -157,4 +167,4 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { } await editorPage.removeBlockAtPosition( blockNames.paragraph ); } ); -} ); \ No newline at end of file +} ); From eaa7e2d9acc7b25141a7ec8dcf56da2791912e60 Mon Sep 17 00:00:00 2001 From: jos <17252150+jostnes@users.noreply.github.com> Date: Mon, 25 Apr 2022 11:26:44 +0800 Subject: [PATCH 5/8] remove unused code and revert ios coordinate condition --- .../gutenberg-editor-paragraph.test.js | 10 +++------- .../__device-tests__/helpers/utils.js | 10 +++------- .../__device-tests__/pages/editor-page.js | 15 --------------- 3 files changed, 6 insertions(+), 29 deletions(-) diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js index 67276e97558e25..8f937c4ab734eb 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js @@ -22,8 +22,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { ); await clickMiddleOfElement( editorPage.driver, - paragraphBlockElement, - true + paragraphBlockElement ); await editorPage.typeTextToParagraphBlock( paragraphBlockElement, @@ -58,8 +57,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { ); await clickMiddleOfElement( editorPage.driver, - paragraphBlockElement, - true + paragraphBlockElement ); await editorPage.typeTextToParagraphBlock( paragraphBlockElement, @@ -86,9 +84,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { ); const text = await editorPage.getTextForParagraphBlockAtPosition( 1 ); - expect( - text0.replace( /\s/g, '' ) + text1.replace( /\s/g, '' ) - ).toMatch( text.replace( /\s/g, '' ) ); + expect( text0 + text1 ).toMatch( text ); expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 1 ); await editorPage.removeBlockAtPosition( blockNames.paragraph ); } ); diff --git a/packages/react-native-editor/__device-tests__/helpers/utils.js b/packages/react-native-editor/__device-tests__/helpers/utils.js index 414701701bd480..03f3002c59b142 100644 --- a/packages/react-native-editor/__device-tests__/helpers/utils.js +++ b/packages/react-native-editor/__device-tests__/helpers/utils.js @@ -282,16 +282,12 @@ const typeStringAndroid = async ( }; // Calculates middle x,y and clicks that position -const clickMiddleOfElement = async ( driver, element, isParagraph = false ) => { +const clickMiddleOfElement = async ( driver, element ) => { const location = await element.getLocation(); const size = await element.getSize(); + const action = await new wd.TouchAction( driver ); - // Condition to make it work on iOS Paragraph blocks on both environments, the default calculation somehow doesn't work for this combination but works for others. - if ( isParagraph === true && ! isAndroid() ) { - action.press( { x: size.width / 2, y: location.y } ); - } else { - action.press( { x: location.x + size.width / 2, y: location.y } ); - } + action.press( { x: location.x + size.width / 2, y: location.y } ); action.release(); await action.perform(); }; diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js index 1503e43808944f..efe44aed1781ca 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -506,21 +506,6 @@ class EditorPage { // Paragraph Block functions // ========================= - async getTextViewForParagraphBlock( block ) { - let textViewElementName = 'XCUIElementTypeTextView'; - if ( isAndroid() ) { - textViewElementName = 'android.widget.EditText'; - } - - const accessibilityId = await block.getAttribute( - this.accessibilityIdKey - ); - const blockLocator = `//*[@${ - this.accessibilityIdXPathAttrib - }=${ JSON.stringify( accessibilityId ) }]//${ textViewElementName }`; - return await this.driver.elementByXPath( blockLocator ); - } - async typeTextToParagraphBlock( block, text, clear ) { await typeString( this.driver, block, text, clear ); } From fb5279a2abbbbe073710207e9ed73c436856ccfd Mon Sep 17 00:00:00 2001 From: jos <17252150+jostnes@users.noreply.github.com> Date: Mon, 25 Apr 2022 11:27:21 +0800 Subject: [PATCH 6/8] lint fix --- .../gutenberg-editor-paragraph.test.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js index 8f937c4ab734eb..110ce13b45c578 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js @@ -20,10 +20,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { paragraphBlockElement, testData.shortText ); - await clickMiddleOfElement( - editorPage.driver, - paragraphBlockElement - ); + await clickMiddleOfElement( editorPage.driver, paragraphBlockElement ); await editorPage.typeTextToParagraphBlock( paragraphBlockElement, '\n', @@ -55,10 +52,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { paragraphBlockElement, testData.shortText ); - await clickMiddleOfElement( - editorPage.driver, - paragraphBlockElement - ); + await clickMiddleOfElement( editorPage.driver, paragraphBlockElement ); await editorPage.typeTextToParagraphBlock( paragraphBlockElement, '\n' From 0df9cae4db0d20718dbeed9da94d95b67a10f9a2 Mon Sep 17 00:00:00 2001 From: jos <17252150+jostnes@users.noreply.github.com> Date: Mon, 25 Apr 2022 12:18:31 +0800 Subject: [PATCH 7/8] remove extra backspace press --- .../__device-tests__/gutenberg-editor-paragraph.test.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js index 110ce13b45c578..8b2c2318717177 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js @@ -71,10 +71,9 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { paragraphBlockElement ); - const backspaceKey = isAndroid() ? backspace : '\b\b'; await editorPage.typeTextToParagraphBlock( paragraphBlockElement, - backspaceKey + backspace ); const text = await editorPage.getTextForParagraphBlockAtPosition( 1 ); @@ -113,10 +112,9 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { editorPage.driver, paragraphBlockElement ); - const backspaceKey = isAndroid() ? backspace : '\b\b'; await editorPage.typeTextToParagraphBlock( paragraphBlockElement, - backspaceKey + backspace ); // Verify the editor has not crashed. @@ -142,10 +140,9 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { blockNames.paragraph, 2 ); - const backspaceKey = isAndroid() ? backspace : '\b\b'; await editorPage.typeTextToParagraphBlock( paragraphBlockElement, - backspaceKey + backspace ); // Verify the editor has not crashed. From 7432c210f1ba1de4f807c950f151ba58632f68c9 Mon Sep 17 00:00:00 2001 From: jos <17252150+jostnes@users.noreply.github.com> Date: Wed, 27 Apr 2022 10:38:01 +0800 Subject: [PATCH 8/8] rename for clarity --- .../gutenberg-editor-block-insertion.test.js | 16 ++++++++-------- .../gutenberg-editor-heading-@canary.test.js | 8 ++++---- .../gutenberg-editor-image-@canary.test.js | 2 +- .../gutenberg-editor-paragraph.test.js | 18 +++++++++--------- .../gutenberg-editor-paste.test.js | 8 ++++---- .../gutenberg-editor-rotation.test.js | 4 ++-- .../__device-tests__/pages/editor-page.js | 8 ++++---- 7 files changed, 32 insertions(+), 32 deletions(-) diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js index 3c9a8b233ea1a0..ead25e7bee9a2e 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js @@ -8,7 +8,7 @@ import testData from './helpers/test-data'; describe( 'Gutenberg Editor tests for Block insertion', () => { it( 'should be able to insert multi-paragraph text, and text to another paragraph block in between', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - let paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + let paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph ); if ( isAndroid() ) { @@ -18,7 +18,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { await editorPage.sendTextToParagraphBlock( 1, testData.longText ); // Should have 3 paragraph blocks at this point. - paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 2 ); @@ -26,7 +26,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { await editorPage.addNewBlock( blockNames.paragraph ); - paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 3 ); @@ -44,7 +44,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { // Workaround for now since deleting the first element causes a crash on CI for Android if ( isAndroid() ) { - paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 3, { @@ -57,7 +57,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { for ( let i = 3; i > 0; i-- ) { // wait for accessibility ids to update await editorPage.driver.sleep( 1000 ); - paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, i, { @@ -74,7 +74,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { for ( let i = 4; i > 0; i-- ) { // wait for accessibility ids to update await editorPage.driver.sleep( 1000 ); - paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph ); await clickMiddleOfElement( @@ -88,7 +88,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { it( 'should be able to insert block at the beginning of post from the title', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - let paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + let paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph ); if ( isAndroid() ) { @@ -110,7 +110,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => { await titleElement.click(); await editorPage.addNewBlock( blockNames.paragraph ); - paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph ); await clickMiddleOfElement( editorPage.driver, paragraphBlockElement ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js index fc88db8e55246e..17f58bfec5f71e 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js @@ -25,7 +25,7 @@ describe( 'Gutenberg Editor tests', () => { ); await editorPage.addNewBlock( blockNames.paragraph ); - let paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + let paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 2 ); @@ -35,7 +35,7 @@ describe( 'Gutenberg Editor tests', () => { ); await editorPage.addNewBlock( blockNames.paragraph ); - paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 3 ); @@ -45,7 +45,7 @@ describe( 'Gutenberg Editor tests', () => { ); await editorPage.addNewBlock( blockNames.heading ); - headingBlockElement = await editorPage.getTextBlockLocatorAtPosition( + headingBlockElement = await editorPage.getTextBlockAtPosition( blockNames.heading, 4 ); @@ -55,7 +55,7 @@ describe( 'Gutenberg Editor tests', () => { ); await editorPage.addNewBlock( blockNames.paragraph ); - paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 5 ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js index e475cc69afa7a4..03a929d5c12094 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js @@ -37,7 +37,7 @@ describe( 'Gutenberg Editor Image Block tests', () => { await editorPage.dismissKeyboard(); } await editorPage.addNewBlock( blockNames.paragraph ); - const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + const paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 2 ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js index 8b2c2318717177..0ac9bae0743ef3 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js @@ -13,7 +13,7 @@ import testData from './helpers/test-data'; describe( 'Gutenberg Editor tests for Paragraph Block', () => { it( 'should be able to split one paragraph block into two', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + const paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph ); await editorPage.typeTextToParagraphBlock( @@ -41,7 +41,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { it( 'should be able to merge 2 paragraph blocks into 1', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - let paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + let paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph ); if ( isAndroid() ) { @@ -61,7 +61,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 ); const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 ); expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 2 ); - paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 2 ); @@ -100,14 +100,14 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { ); // Merge paragraphs. - const blockText = await editorPage.getTextForParagraphBlockAtPosition( - 2 - ); - const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + const paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 2 ); + const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 ); + const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 ); + await clickBeginningOfElement( editorPage.driver, paragraphBlockElement @@ -121,7 +121,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { const mergedBlockText = await editorPage.getTextForParagraphBlockAtPosition( 1 ); - expect( mergedBlockText.length ).not.toEqual( blockText.length ); + expect( text0 + text1 ).toMatch( mergedBlockText ); await editorPage.removeBlockAtPosition( blockNames.paragraph ); } ); @@ -136,7 +136,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => { ); // Merge paragraphs. - const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + const paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 2 ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js index 53746b0324772c..16c291584b8ed7 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js @@ -26,7 +26,7 @@ describe( 'Gutenberg Editor paste tests', () => { it( 'copies plain text from one paragraph block and pastes in another', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + const paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph ); if ( isAndroid() ) { @@ -55,7 +55,7 @@ describe( 'Gutenberg Editor paste tests', () => { // On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it. await editorPage.dismissAndroidClipboardSmartSuggestion(); } - const paragraphBlockElement2 = await editorPage.getTextBlockLocatorAtPosition( + const paragraphBlockElement2 = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 2 ); @@ -80,7 +80,7 @@ describe( 'Gutenberg Editor paste tests', () => { it( 'copies styled text from one paragraph block and pastes in another', async () => { // Create paragraph block with styled text by editing html. await editorPage.setHtmlContent( testData.pasteHtmlText ); - const paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + const paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph ); if ( isAndroid() ) { @@ -104,7 +104,7 @@ describe( 'Gutenberg Editor paste tests', () => { // On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it. await editorPage.dismissAndroidClipboardSmartSuggestion(); } - const paragraphBlockElement2 = await editorPage.getTextBlockLocatorAtPosition( + const paragraphBlockElement2 = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 2 ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js index 97c9bcd78f0cc7..9056854fa42c7f 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js @@ -8,7 +8,7 @@ import testData from './helpers/test-data'; describe( 'Gutenberg Editor tests', () => { it( 'should be able to add blocks , rotate device and continue adding blocks', async () => { await editorPage.addNewBlock( blockNames.paragraph ); - let paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + let paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph ); if ( isAndroid() ) { @@ -32,7 +32,7 @@ describe( 'Gutenberg Editor tests', () => { await editorPage.driver.hideDeviceKeyboard(); } - paragraphBlockElement = await editorPage.getTextBlockLocatorAtPosition( + paragraphBlockElement = await editorPage.getTextBlockAtPosition( blockNames.paragraph, 2 ); diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js index efe44aed1781ca..34cd18f05243bb 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -45,8 +45,8 @@ class EditorPage { return await this.driver.hasElementByAccessibilityId( 'block-list' ); } - // For text blocks, e.g Paragraph, Heading - async getTextBlockLocatorAtPosition( blockName, position = 1 ) { + // For text blocks, e.g. Paragraph, Heading + async getTextBlockAtPosition( blockName, position = 1 ) { // iOS needs a click before if ( ! isAndroid() ) { const textBlockLocator = `(//XCUIElementTypeButton[contains(@name, "${ blockName } Block. Row ${ position }")])`; @@ -513,7 +513,7 @@ class EditorPage { async sendTextToParagraphBlock( position, text, clear ) { const paragraphs = text.split( '\n' ); for ( let i = 0; i < paragraphs.length; i++ ) { - const block = await this.getTextBlockLocatorAtPosition( + const block = await this.getTextBlockAtPosition( blockNames.paragraph, position + i ); @@ -534,7 +534,7 @@ class EditorPage { } async getTextForParagraphBlockAtPosition( position ) { - const blockLocator = await this.getTextBlockLocatorAtPosition( + const blockLocator = await this.getTextBlockAtPosition( blockNames.paragraph, position );