Skip to content
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.

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

[Mobile] - E2E tests - Add new helpers #48358

Merged
merged 7 commits into from
Mar 8, 2023
2 changes: 1 addition & 1 deletion packages/block-library/src/buttons/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ export default function ButtonsEdit( {

const insertedBlock = createBlock( 'core/button' );

insertBlock( insertedBlock, index, clientId );
insertBlock( insertedBlock, index, clientId, false );
selectBlock( insertedBlock.clientId );
}, 200 ),
[]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,13 @@ function HeaderToolbar( {
? wasNoContentSelected.current
: noContentSelected;

/* translators: accessibility text for the editor toolbar */
const toolbarAriaLabel = __( 'Document tools' );

return (
<View
testID={ toolbarAriaLabel }
accessibilityLabel={ toolbarAriaLabel }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unlike the web, this element does not appear accessible to screen readers, i.e. accessible is not enabled. Was the intent to make this selectable or should we remove accessibilityLabel?

Enabling accessible would change the interaction with the child elements, e.g. insert block button, undo button. The web has keyboard commands to "step into" an element to select a child. I do not believe mobile devices have a similar mechanism, we would likely have to recreate an experience similar to how selecting a block disables accessible on the ancestor so that descendent UI is selectable.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added these to be able to find them for E2E tests, since testID is not supported on Android we also have to add accessibilityLabel so it'd be for internal usage only.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

testID is not supported on Android we also have to add accessibilityLabel

Aha. That is very helpful context. Thank you for explaining that. That is unfortunate. 😞 Is it worth leaving an inline comment stating it is currently only used for testing purposes?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it worth leaving an inline comment stating it is currently only used for testing purposes?

I know we have other cases like these around the codebase, so I'm not sure if having several comments explaining why would be the best approach. I feel like if it's next to a testID it could be self-explanatory once you know it is needed for E2E tests.

style={ [
getStylesFromColorScheme(
styles[ 'header-toolbar__container' ],
Expand Down
14 changes: 14 additions & 0 deletions packages/react-native-editor/__device-tests__/helpers/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -375,6 +375,19 @@ const tapPasteAboveElement = async ( driver, element ) => {
}
};

const selectTextFromTextInput = async ( driver, element ) => {
dcalhoun marked this conversation as resolved.
Show resolved Hide resolved
if ( isAndroid() ) {
await longPressMiddleOfElement( driver, element, 0 );
} else {
await doubleTap( driver, element );
await driver.waitForElementByXPath(
'//XCUIElementTypeMenuItem[@name="Copy"]',
wd.asserters.isDisplayed,
4000
);
}
};

// Starts from the middle of the screen or the element(if specified)
// and swipes upwards.
const swipeUp = async (
Expand Down Expand Up @@ -684,6 +697,7 @@ module.exports = {
longPressMiddleOfElement,
setClipboard,
setupDriver,
selectTextFromTextInput,
stopDriver,
swipeDown,
swipeFromTo,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -315,8 +315,20 @@ class EditorPage {
const { addButtonLocation } = this.initialValues;
const addButton = await this.getAddBlockButton();
const location = await addButton.getLocation();
let YLocation = addButtonLocation?.y;
const currentOrientation = await this.driver.getOrientation();
const isLandscape = currentOrientation === 'LANDSCAPE';

if ( isLandscape ) {
const windowSize = await this.driver.getWindowSize();
const safeAreaOffset = 32;
YLocation = Math.floor(
( windowSize.height * YLocation ) / windowSize.width -
safeAreaOffset
);
}

if ( location.y < addButtonLocation?.y ) {
if ( location.y < YLocation ) {
await this.waitForKeyboardToBeHidden();
}
}
Expand Down Expand Up @@ -369,6 +381,10 @@ class EditorPage {
// Block toolbar functions
// =========================

async getToolbar() {
return await this.driver.elementsByAccessibilityId( 'Document tools' );
}

async addNewBlock( blockName, relativePosition ) {
const addButton = await this.getAddBlockButton();

Expand Down Expand Up @@ -574,6 +590,28 @@ class EditorPage {
await removeActionButton.click();
}

// =========================
// Formatting toolbar functions
// =========================

async toggleFormatting( formatting ) {
const identifier = isAndroid()
? `//android.widget.Button[@content-desc="${ formatting }"]/android.view.ViewGroup`
: `//XCUIElementTypeButton[@name="${ formatting }"]`;
const toggleElement = await this.waitForElementToBeDisplayedByXPath(
identifier
);
return await toggleElement.click();
}

async openLinkToSettings() {
const element = await this.waitForElementToBeDisplayedById(
'Link to, Search or type URL'
);

await element.click();
}

// =========================
// Paragraph Block functions
// =========================
Expand Down Expand Up @@ -882,6 +920,27 @@ class EditorPage {
return await waitForVisible( this.driver, blockLocator );
}

// =========================
// Button Block functions
// =========================

async getButtonBlockTextInputAtPosition( position = 1 ) {
const blockLocator = isAndroid()
? `//android.view.ViewGroup[@content-desc="Button Block. Row ${ position }"]/android.view.ViewGroup[2]/android.view.ViewGroup/android.view.ViewGroup/android.widget.EditText`
: `//XCUIElementTypeButton[contains(@name, "Button Block. Row ${ position }")]//XCUIElementTypeTextView`;

return await this.waitForElementToBeDisplayedByXPath( blockLocator );
}

async addButtonWithInlineAppender( position = 1 ) {
const appenderButton = isAndroid()
? await this.waitForElementToBeDisplayedByXPath(
`//android.view.ViewGroup[@content-desc="block-list"]/android.view.ViewGroup[${ position }]/android.widget.Button`
)
: await this.waitForElementToBeDisplayedById( 'appender-button' );
await appenderButton.click();
}

async waitForElementToBeDisplayedById( id, timeout = 2000 ) {
return await this.driver.waitForElementByAccessibilityId(
id,
Expand Down Expand Up @@ -919,6 +978,8 @@ const blockNames = {
verse: 'Verse',
shortcode: 'Shortcode',
group: 'Group',
buttons: 'Buttons',
button: 'Button',
};

module.exports = { initializeEditorPage, blockNames };