From efbee9f6b86930c3e2ebb6f94f1c297fd898709f Mon Sep 17 00:00:00 2001 From: Ceyhun Ozugur Date: Fri, 8 Jan 2021 11:40:42 +0100 Subject: [PATCH] [RNMobile] Add block insertion flow e2e test (#27381) Co-authored-by: Cameron Voell --- .../src/components/block-list/index.native.js | 1 + ...gutenberg-editor-block-insertion-2.test.js | 135 ++++++++++++++++++ ... => gutenberg-editor-file-@canary.test.js} | 2 +- ... gutenberg-editor-heading-@canary.test.js} | 2 +- ...=> gutenberg-editor-image-@canary.test.js} | 2 +- ...=> gutenberg-editor-lists-@canary.test.js} | 2 +- .../__device-tests__/helpers/utils.js | 14 +- .../__device-tests__/pages/editor-page.js | 23 ++- .../jest_ui_setup_after_env.js | 5 - packages/react-native-editor/package.json | 2 +- 10 files changed, 168 insertions(+), 20 deletions(-) create mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js rename packages/react-native-editor/__device-tests__/{gutenberg-editor-file.test.js => gutenberg-editor-file-@canary.test.js} (91%) rename packages/react-native-editor/__device-tests__/{gutenberg-editor-heading.test.js => gutenberg-editor-heading-@canary.test.js} (96%) rename packages/react-native-editor/__device-tests__/{gutenberg-editor-image.test.js => gutenberg-editor-image-@canary.test.js} (96%) rename packages/react-native-editor/__device-tests__/{gutenberg-editor-lists-canary.test.js => gutenberg-editor-lists-@canary.test.js} (96%) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 6a4322ce46026..825e64ce0de5a 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -313,6 +313,7 @@ export class BlockList extends Component { <> { this.addBlockToEndOfPost( paragraphBlock ); } } diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js new file mode 100644 index 0000000000000..48db9d1e704d7 --- /dev/null +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js @@ -0,0 +1,135 @@ +/** + * Internal dependencies + */ +import { blockNames } from './pages/editor-page'; + +describe( 'Gutenberg Editor tests for Block insertion 2', () => { + it( 'adds new block at the end of post', async () => { + await editorPage.addNewBlock( blockNames.heading ); + + await editorPage.addNewBlock( blockNames.list ); + + const expectedHtml = ` +

+ + + +
+`; + + const html = await editorPage.getHtmlContent(); + expect( html.toLowerCase() ).toBe( expectedHtml ); + } ); + + it( 'inserts between 2 existing blocks', async () => { + const headingBlockElement = await editorPage.getBlockAtPosition( + blockNames.heading + ); + + await headingBlockElement.click(); + + await editorPage.addNewBlock( blockNames.separator ); + + const expectedHtml = ` +

+ + + +
+ + + +
+`; + + const html = await editorPage.getHtmlContent(); + expect( html.toLowerCase() ).toBe( expectedHtml ); + } ); + + it( 'inserts block before selected block', async () => { + const separatorBlockElement = await editorPage.getBlockAtPosition( + blockNames.separator, + 2 + ); + await separatorBlockElement.click(); + + await editorPage.addNewBlock( blockNames.image, 'before' ); + + const expectedHtml = ` +

+ + + +
+ + + +
+ + + +
+`; + + const html = await editorPage.getHtmlContent(); + expect( html.toLowerCase() ).toBe( expectedHtml ); + } ); + + it( 'inserts block at the end of post when no block is selected', async () => { + await editorPage.addNewBlock( blockNames.more ); + + const expectedHtml = ` +

+ + + +
+ + + +
+ + + +
+ + + + +`; + + const html = await editorPage.getHtmlContent(); + expect( html.toLowerCase() ).toBe( expectedHtml ); + } ); + + it( 'creates a new Paragraph block tapping on the empty area below the last block', async () => { + await editorPage.addParagraphBlockByTappingEmptyAreaBelowLastBlock(); + + const expectedHtml = ` +

+ + + +
+ + + +
+ + + +
+ + + + + + + +

+`; + + const html = await editorPage.getHtmlContent(); + expect( html.toLowerCase() ).toBe( expectedHtml ); + } ); +} ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-file.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-file-@canary.test.js similarity index 91% rename from packages/react-native-editor/__device-tests__/gutenberg-editor-file.test.js rename to packages/react-native-editor/__device-tests__/gutenberg-editor-file-@canary.test.js index 81e70fe404335..997605a454d01 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-file.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-file-@canary.test.js @@ -4,7 +4,7 @@ import { blockNames } from './pages/editor-page'; import testData from './helpers/test-data'; -describe( 'Gutenberg Editor File Block tests @canary', () => { +describe( 'Gutenberg Editor File Block tests', () => { it( 'should be able to add a file block', async () => { await editorPage.addNewBlock( blockNames.file ); const block = await editorPage.getFirstBlockVisible(); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-heading.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js similarity index 96% rename from packages/react-native-editor/__device-tests__/gutenberg-editor-heading.test.js rename to packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js index 507ec38865294..64b4ab460e48c 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-heading.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js @@ -5,7 +5,7 @@ import { blockNames } from './pages/editor-page'; import { isAndroid } from './helpers/utils'; import testData from './helpers/test-data'; -describe( 'Gutenberg Editor tests @canary', () => { +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( diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-image.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js similarity index 96% rename from packages/react-native-editor/__device-tests__/gutenberg-editor-image.test.js rename to packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js index 79b41a5a50b3f..b400a1b732241 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-image.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js @@ -5,7 +5,7 @@ import { blockNames } from './pages/editor-page'; import { isAndroid, clickMiddleOfElement, swipeUp } from './helpers/utils'; import testData from './helpers/test-data'; -describe( 'Gutenberg Editor Image Block tests @canary', () => { +describe( 'Gutenberg Editor Image Block tests', () => { it( 'should be able to add an image block', async () => { await editorPage.addNewBlock( blockNames.image ); let imageBlock = await editorPage.getBlockAtPosition( diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-@canary.test.js similarity index 96% rename from packages/react-native-editor/__device-tests__/gutenberg-editor-lists-canary.test.js rename to packages/react-native-editor/__device-tests__/gutenberg-editor-lists-@canary.test.js index 89d04d0d2cb1c..978e010976e44 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-canary.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-@canary.test.js @@ -5,7 +5,7 @@ import { blockNames } from './pages/editor-page'; import { isAndroid } from './helpers/utils'; import testData from './helpers/test-data'; -describe( 'Gutenberg Editor tests for List block @canary', () => { +describe( 'Gutenberg Editor tests for List block', () => { it( 'should be able to add a new List block', async () => { await editorPage.addNewBlock( blockNames.list ); const listBlockElement = await editorPage.getBlockAtPosition( diff --git a/packages/react-native-editor/__device-tests__/helpers/utils.js b/packages/react-native-editor/__device-tests__/helpers/utils.js index b298c390eb0f0..50654b582ee43 100644 --- a/packages/react-native-editor/__device-tests__/helpers/utils.js +++ b/packages/react-native-editor/__device-tests__/helpers/utils.js @@ -364,14 +364,12 @@ const toggleHtmlMode = async ( driver, toggleOn ) => { // Hit the "Menu" key await driver.pressKeycode( 82 ); - // Go at the end of the popup to hit the "Show html" - // TODO: c'mon, find a more robust way to hit that item! :( - for ( let i = 0; i < 10; i++ ) { - await driver.pressKeycode( 20 ); - } - - // hit Enter - await driver.pressKeycode( 66 ); + const showHtmlButtonXpath = + '/hierarchy/android.widget.FrameLayout/android.widget.FrameLayout/android.widget.FrameLayout/android.widget.LinearLayout/android.widget.FrameLayout/android.widget.ListView/android.widget.TextView[9]'; + const showHtmlButton = await driver.elementByXPath( + showHtmlButtonXpath + ); + await showHtmlButton.click(); } else { const menuButton = await driver.elementByAccessibilityId( '...' ); await menuButton.click(); 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 f3cdbac9565cf..18c4022628300 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -10,6 +10,7 @@ const { typeString, toggleHtmlMode, swipeFromTo, + longPressMiddleOfElement, } = require( '../helpers/utils' ); const initializeEditorPage = async () => { @@ -115,6 +116,13 @@ class EditorPage { ); } + async addParagraphBlockByTappingEmptyAreaBelowLastBlock() { + const emptyAreaBelowLastBlock = await this.driver.elementByAccessibilityId( + 'Add paragraph block' + ); + await emptyAreaBelowLastBlock.click(); + } + async getTitleElement( options = { autoscroll: false } ) { //TODO: Improve the identifier for this element const elements = await this.driver.elementsByXPath( @@ -192,7 +200,7 @@ class EditorPage { // Block toolbar functions // ========================= - async addNewBlock( blockName ) { + async addNewBlock( blockName, relativePosition ) { // Click add button let identifier = 'Add block'; if ( isAndroid() ) { @@ -201,7 +209,18 @@ class EditorPage { const addButton = await this.driver.elementByAccessibilityId( identifier ); - await addButton.click(); + + if ( relativePosition === 'before' ) { + await longPressMiddleOfElement( this.driver, addButton ); + + const addBlockBeforeButton = await this.driver.elementByAccessibilityId( + 'Add Block Before' + ); + + await addBlockBeforeButton.click(); + } else { + await addButton.click(); + } // Click on block of choice const blockButton = await this.findBlockButton( blockName ); diff --git a/packages/react-native-editor/jest_ui_setup_after_env.js b/packages/react-native-editor/jest_ui_setup_after_env.js index 45e06f736ec59..c0f23145e684d 100644 --- a/packages/react-native-editor/jest_ui_setup_after_env.js +++ b/packages/react-native-editor/jest_ui_setup_after_env.js @@ -140,8 +140,3 @@ jasmine.getEnv().addReporter( { } }, } ); - -it( 'should be able to see visual editor', async () => { - // wait for the block editor to load - await expect( global.editorPage.getBlockList() ).resolves.toBe( true ); -} ); diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index c924adc8689e2..9ba0952d699e8 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -103,7 +103,7 @@ "test": "cross-env NODE_ENV=test jest --verbose --config ../../test/native/jest.config.js", "test:debug": "cross-env NODE_ENV=test node --inspect-brk jest --runInBand --verbose --config ../../test/native/jest.config.js", "device-tests": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=3 --verbose --config ./jest_ui.config.js", - "device-tests-canary": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=2 --testNamePattern=@canary --verbose --config ./jest_ui.config.js", + "device-tests-canary": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=2 --testPathPattern=@canary --verbose --config ./jest_ui.config.js", "device-tests:local": "cross-env NODE_ENV=test jest --runInBand --detectOpenHandles --verbose --forceExit --config ./jest_ui.config.js", "device-tests:debug": "cross-env NODE_ENV=test node $NODE_DEBUG_OPTION --inspect-brk node_modules/jest/bin/jest --runInBand --detectOpenHandles --verbose --config ./jest_ui.config.js", "test:e2e:bundle:android": "mkdir -p android/app/src/main/assets && npm run rn-bundle -- --reset-cache --platform android --dev false --minify false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",