diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml index 2378cf9fea879..fc019dfa5d504 100644 --- a/.github/workflows/rnmobile-android-runner.yml +++ b/.github/workflows/rnmobile-android-runner.yml @@ -18,7 +18,7 @@ jobs: if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }} strategy: matrix: - native-test-name: [gutenberg-editor-initial-html] + native-test-name: [gutenberg-editor-rendering] api-level: [29] steps: diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml index 1fb2d5ddd3b0f..6d497491bdf9c 100644 --- a/.github/workflows/rnmobile-ios-runner.yml +++ b/.github/workflows/rnmobile-ios-runner.yml @@ -20,7 +20,7 @@ jobs: matrix: xcode: ['13.2.1'] device: ['iPhone 13'] - native-test-name: [gutenberg-editor-initial-html] + native-test-name: [gutenberg-editor-rendering] steps: - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0 diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html.test.js index 5ed3828682c0c..6569bf68bf62f 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html.test.js @@ -2,29 +2,17 @@ * Internal dependencies */ import initialHtml from '../src/initial-html'; -import { isAndroid } from './helpers/utils'; -import { blockNames } from './pages/editor-page'; describe( 'Gutenberg Editor Blocks test', () => { it( 'should be able to create a post with all blocks and scroll to the last one', async () => { await editorPage.setHtmlContent( initialHtml ); - const lastBlockName = blockNames.paragraph; - const lastBlockIndex = 30; - const lastBlockAccessibilityLabel = - 'This block is used in initial HTML e2e tests and should be kept as the last block.'; - let lastBlockElement; - if ( isAndroid() ) { - lastBlockElement = await editorPage.androidScrollAndReturnElement( - lastBlockAccessibilityLabel + // Scroll to the last element + const addBlockPlaceholder = + await editorPage.scrollAndReturnElementByAccessibilityId( + 'Add paragraph block' ); - } else { - lastBlockElement = await editorPage.getBlockAtPosition( - lastBlockName, - lastBlockIndex - ); - } - expect( lastBlockElement ).toBeTruthy(); + expect( addBlockPlaceholder ).toBeTruthy(); } ); } ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js new file mode 100644 index 0000000000000..947006332bb34 --- /dev/null +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js @@ -0,0 +1,21 @@ +/** + * Internal dependencies + */ +import { mediaBlocks } from '../src/initial-html'; + +describe( 'Gutenberg Editor Rendering Media Blocks test', () => { + it( 'should be able to render blocks correctly', async () => { + await editorPage.setHtmlContent( mediaBlocks ); + + // Give some time to media placeholders to render. + await editorPage.driver.sleep( 3000 ); + + // Scroll to the last element. + const addBlockPlaceholder = + await editorPage.scrollAndReturnElementByAccessibilityId( + 'Add paragraph block' + ); + + expect( addBlockPlaceholder ).toBeTruthy(); + } ); +} ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-other-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-other-blocks.test.js new file mode 100644 index 0000000000000..2354874caafcf --- /dev/null +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-other-blocks.test.js @@ -0,0 +1,18 @@ +/** + * Internal dependencies + */ +import { otherBlocks } from '../src/initial-html'; + +describe( 'Gutenberg Editor Rendering Other Blocks test', () => { + it( 'should be able to render blocks correctly', async () => { + await editorPage.setHtmlContent( otherBlocks ); + + // Scroll to the last element. + const addBlockPlaceholder = + await editorPage.scrollAndReturnElementByAccessibilityId( + 'Add paragraph block' + ); + + expect( addBlockPlaceholder ).toBeTruthy(); + } ); +} ); diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-text-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-text-blocks.test.js new file mode 100644 index 0000000000000..538638d2e8994 --- /dev/null +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-text-blocks.test.js @@ -0,0 +1,18 @@ +/** + * Internal dependencies + */ +import { textBlocks } from '../src/initial-html'; + +describe( 'Gutenberg Editor Rendering Text Blocks test', () => { + it( 'should be able to render blocks correctly', async () => { + await editorPage.setHtmlContent( textBlocks ); + + // Scroll to the last element + const addBlockPlaceholder = + await editorPage.scrollAndReturnElementByAccessibilityId( + 'Add paragraph block' + ); + + expect( addBlockPlaceholder ).toBeTruthy(); + } ); +} ); 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 e0d3aa3807c28..c78cc135c06ba 100644 --- a/packages/react-native-editor/__device-tests__/pages/editor-page.js +++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js @@ -193,6 +193,19 @@ class EditorPage { return elements[ elements.length - 1 ]; } + // For iOS, depending on the content and how fast the block list + // renders blocks, it won't need to scroll down as it would find + // the block right away. + async scrollAndReturnElementByAccessibilityId( id ) { + const elements = await this.driver.elementsByAccessibilityId( id ); + + if ( elements.length === 0 ) { + await swipeUp( this.driver, undefined, 100, 1 ); + return this.scrollAndReturnElementByAccessibilityId( id ); + } + return elements[ elements.length - 1 ]; + } + async getLastElementByXPath( accessibilityLabel ) { const elements = await this.driver.elementsByXPath( `//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ accessibilityLabel }")]` diff --git a/packages/react-native-editor/src/initial-html.js b/packages/react-native-editor/src/initial-html.js index 9ef66b83c49c0..9cf963fa7bee8 100644 --- a/packages/react-native-editor/src/initial-html.js +++ b/packages/react-native-editor/src/initial-html.js @@ -1,5 +1,4 @@ -export default ` - +export const textBlocks = `

What is Gutenberg?

@@ -53,9 +52,9 @@ else: 
Come
Home.
- +`; - +export const mediaBlocks = `
@@ -145,6 +144,20 @@ else: + +
+

+
+ + + +
+

Cool cover

+
+ +`; + +export const otherBlocks = ` @@ -201,18 +214,6 @@ else: - -
-

-
- - - -
-

Cool cover

-
- - @@ -230,8 +231,6 @@ else: - - -

This block is used in initial HTML e2e tests and should be kept as the last block.

- `; + +export default textBlocks + mediaBlocks + otherBlocks;