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 6a4322ce460269..825e64ce0de5ae 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 00000000000000..48db9d1e704d71 --- /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 81e70fe4043350..997605a454d017 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 507ec388652945..64b4ab460e48c8 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 79b41a5a50b3f1..b400a1b7322414 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 89d04d0d2cb1cc..978e010976e44d 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 b298c390eb0f0d..50654b582ee434 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 f3cdbac9565cf4..18c40226283002 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 45e06f736ec59d..c0f23145e684da 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 c924adc8689e2a..9ba0952d699e87 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",