Skip to content

[Mobile] - Add E2E tests for the Drag & Drop blocks feature #41368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
geriux merged 6 commits into from
May 31, 2022
Merged

[Mobile] - Add E2E tests for the Drag & Drop blocks feature #41368

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
55588c3
Mobile - Add E2E tests for the Drag & Drop blocks feature
May 26, 2022
3ecad42
Update longPress action
May 27, 2022
1edaae0
Use clickIfClickable
May 27, 2022
85bc0f5
Use longPress instead of press
May 30, 2022
387b288
Fix clipboard typo
May 31, 2022
a4bb605
Add setClipboard and clearClipboard helpers
May 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Add setClipboard and clearClipboard helpers
  • Loading branch information
Gerardo committed May 31, 2022
commit a4bb605950ee65c89a757a1af20f8e8cdfa6ccda
14 changes: 5 additions & 9 deletions packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@
*/
import { blockNames } from './pages/editor-page';
import {
clearClipboard,
clickElementOutsideOfTextInput,
dragAndDropAfterElement,
isAndroid,
setClipboard,
tapPasteAboveElement,
} from './helpers/utils';
import testData from './helpers/test-data';

describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
beforeEach( async () => {
await editorPage.driver.setClipboard( '', 'plaintext' );
await clearClipboard( editorPage.driver );
} );

it( 'should be able to drag & drop a block', async () => {
Expand Down Expand Up @@ -59,10 +61,7 @@ describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
);

// Set clipboard text
const base64String = Buffer.from( testData.shortText ).toString(
'base64'
);
await editorPage.driver.setClipboard( base64String, 'plaintext' );
await setClipboard( editorPage.driver, testData.shortText );

// Dismiss auto-suggestion popup
if ( isAndroid() ) {
Expand Down Expand Up @@ -91,10 +90,7 @@ describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
);

// Set clipboard text
const base64String = Buffer.from( testData.shortText ).toString(
'base64'
);
await editorPage.driver.setClipboard( base64String, 'plaintext' );
await setClipboard( editorPage.driver, testData.shortText );

// Dismiss auto-suggestion popup
if ( isAndroid() ) {
Expand Down
3 changes: 2 additions & 1 deletion packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import { blockNames } from './pages/editor-page';
import {
clearClipboard,
longPressMiddleOfElement,
tapSelectAllAboveElement,
tapCopyAboveElement,
Expand All @@ -21,7 +22,7 @@ describe( 'Gutenberg Editor paste tests', () => {
}

beforeAll( async () => {
await editorPage.driver.setClipboard( '', 'plaintext' );
await clearClipboard( editorPage.driver );
} );

it( 'copies plain text from one paragraph block and pastes in another', async () => {
Expand Down
31 changes: 31 additions & 0 deletions packages/react-native-editor/__device-tests__/helpers/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -618,8 +618,38 @@ const waitIfAndroid = async () => {
}
};

/**
* Content type definitions.
* Note: Android only supports plaintext.
*
* @typedef {"plaintext" | "image" | "url"} ClipboardContentType
*/

/**
* Helper to set content in the clipboard.
*
* @param {Object} driver Driver
* @param {string} content Content to set in the clipboard
* @param {ClipboardContentType} contentType Type of the content
*/
const setClipboard = async ( driver, content, contentType = 'plaintext' ) => {
const base64String = Buffer.from( content ).toString( 'base64' );
await driver.setClipboard( base64String, contentType );
};

/**
* Helper to clear the clipboard
*
* @param {Object} driver Driver
* @param {ClipboardContentType} contentType Type of the content
*/
const clearClipboard = async ( driver, contentType = 'plaintext' ) => {
await driver.setClipboard( '', contentType );
};

module.exports = {
backspace,
clearClipboard,
clickBeginningOfElement,
clickElementOutsideOfTextInput,
clickIfClickable,
Expand All @@ -631,6 +661,7 @@ module.exports = {
isElementVisible,
isLocalEnvironment,
longPressMiddleOfElement,
setClipboard,
setupDriver,
stopDriver,
swipeDown,
Expand Down
5 changes: 2 additions & 3 deletions packages/react-native-editor/__device-tests__/pages/editor-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const {
isEditorVisible,
isElementVisible,
longPressMiddleOfElement,
setClipboard,
setupDriver,
stopDriver,
swipeDown,
Expand Down Expand Up @@ -227,9 +228,7 @@ class EditorPage {
async setHtmlContent( html ) {
await toggleHtmlMode( this.driver, true );

const base64String = Buffer.from( html ).toString( 'base64' );

await this.driver.setClipboard( base64String, 'plaintext' );
await setClipboard( this.driver, html );

const htmlContentView = await this.getTextViewForHtmlViewContent();

Expand Down