From d1a3caff5aa82ee7b0630c430484eb132ed49c2f Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Fri, 5 Feb 2021 13:10:41 -0600 Subject: [PATCH 1/3] Add e2e test for modifying Cover block media --- .../src/cover/controls.native.js | 1 + .../gutenberg-editor-cover.test.js | 48 +++++++++++++++++++ 2 files changed, 49 insertions(+) diff --git a/packages/block-library/src/cover/controls.native.js b/packages/block-library/src/cover/controls.native.js index 44a1ecd726df16..24b75fd16f80a1 100644 --- a/packages/block-library/src/cover/controls.native.js +++ b/packages/block-library/src/cover/controls.native.js @@ -240,6 +240,7 @@ function Controls( { ) : ( { expect( coverBlock ).toBeTruthy(); await editorPage.removeBlockAtPosition( blockNames.cover ); } ); + + // Testing this for iOS on a device is valuable to ensure that it properly + // handles opening multiple modals, as only one can be open at a time + it( 'allows modifying media from within block settings', async () => { + await editorPage.setHtmlContent( testData.coverHeightWithRemUnit ); + + const coverBlock = await editorPage.getBlockAtPosition( + blockNames.cover + ); + await coverBlock.click(); + + // Can only add image from media library on iOS + if ( ! isAndroid() ) { + // Open block settings + const settingsButton = await editorPage.driver.elementByAccessibilityId( + 'Open Settings' + ); + await settingsButton.click(); + + // Add initial media via button within bottom sheet + const mediaSection = await editorPage.driver.elementByAccessibilityId( + 'Media Add image or video' + ); + const addMediaButton = await mediaSection.elementByAccessibilityId( + 'Add image or video' + ); + await addMediaButton.click(); + await editorPage.chooseMediaLibrary(); + + // Edit media within block settings + await settingsButton.click(); + await editorPage.driver.sleep( 2000 ); // Await media load + const editImageButton = await editorPage.driver.elementsByAccessibilityId( + 'Edit image' + ); + await editImageButton[ editImageButton.length - 1 ].click(); + + // Replace image + const replaceButton = await editorPage.driver.elementByAccessibilityId( + 'Replace' + ); + await replaceButton.click(); + await editorPage.chooseMediaLibrary(); + } + + expect( coverBlock ).toBeTruthy(); + await editorPage.removeBlockAtPosition( blockNames.cover ); + } ); } ); From 6b420de24093d6b4ec18adef9179bf057039f232 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Tue, 16 Mar 2021 16:34:48 -0500 Subject: [PATCH 2/3] Fix lint warnings --- packages/block-library/src/cover/edit.native.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 7a7ef4b0c4117c..6b5afe66ff128e 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -50,6 +50,7 @@ import { withSelect, withDispatch } from '@wordpress/data'; import { useEffect, useState, useRef, useCallback } from '@wordpress/element'; import { cover as icon, replace, image, warning } from '@wordpress/icons'; import { getProtocol } from '@wordpress/url'; +import { store as editPostStore } from '@wordpress/edit-post'; /** * Internal dependencies @@ -575,13 +576,13 @@ export default compose( [ }; } ), withDispatch( ( dispatch, { clientId } ) => { - const { openGeneralSidebar } = dispatch( 'core/edit-post' ); + const { openGeneralSidebar } = dispatch( editPostStore ); const { selectBlock } = dispatch( blockEditorStore ); return { openGeneralSidebar: () => openGeneralSidebar( 'edit-post/block' ), closeSettingsBottomSheet() { - dispatch( 'core/edit-post' ).closeGeneralSidebar(); + dispatch( editPostStore ).closeGeneralSidebar(); }, selectBlock: () => selectBlock( clientId ), }; From 5ae030183d4477c8387148b57703d4ed74ce2a42 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Sat, 27 Mar 2021 16:59:03 -0500 Subject: [PATCH 3/3] Explicitly check that only one modal is open Ensure only one modal is presented at a time, as this is required by react-native-modal for iOS. --- .../__device-tests__/gutenberg-editor-cover.test.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-cover.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-cover.test.js index 241f68c7cb60d6..b468a5e3aac3fd 100644 --- a/packages/react-native-editor/__device-tests__/gutenberg-editor-cover.test.js +++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-cover.test.js @@ -71,6 +71,15 @@ describe( 'Gutenberg Editor Cover Block test', () => { 'Replace' ); await replaceButton.click(); + + // First modal should no longer be presented + const replaceButtons = await editorPage.driver.elementsByAccessibilityId( + 'Replace' + ); + // eslint-disable-next-line jest/no-conditional-expect + expect( replaceButtons.length ).toBe( 0 ); + + // Select different media await editorPage.chooseMediaLibrary(); }