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.

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

[RNMobile] - E2E Simplify heading and lists blocks functions #40670

Merged
merged 21 commits into from
May 16, 2022
Merged

[RNMobile] - E2E Simplify heading and lists blocks functions #40670

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
8b70472
update tests using paragraph, heading and list blocks
jostnes Apr 28, 2022
c5bf57b
fix slash inserter tests to work in ci
jostnes Apr 28, 2022
43d780b
lint fixes
jostnes Apr 28, 2022
6d0a319
wait for ordered list to appear
jostnes Apr 28, 2022
39c8870
lint fixes
jostnes Apr 28, 2022
f38d259
extra click only on local env
jostnes Apr 28, 2022
bd2eea4
wait to get backspace click reflected
jostnes Apr 29, 2022
4cf9f9e
re-add extra click only for local env
jostnes Apr 29, 2022
077a69c
add wait to wait for backspace key to be reflected
jostnes Apr 29, 2022
a6bfbf7
lint fixes
jostnes Apr 29, 2022
46273a8
break function, set position to get list block
jostnes May 10, 2022
6a9dae2
lint fixes
jostnes May 10, 2022
e3bc393
use correct params, update function name
jostnes May 10, 2022
4f6917e
lint fixes
jostnes May 10, 2022
85c407c
make maxIteration a parameter for isElementVisible
jostnes May 10, 2022
d1af907
update xpath for list block
jostnes May 10, 2022
0077156
utilize waitForVisible for isElementVisible
jostnes May 11, 2022
4c7f918
lint fixes
jostnes May 11, 2022
0da6fc5
Merge branch 'trunk' into rnmobile/heading-list-blocks-test-update
jostnes May 12, 2022
58d9e90
add wait to getNumberOfParagraphBlocks and update xpath for android l…
jostnes May 12, 2022
92ffc5e
update edit text xpath to be read from any level
jostnes May 12, 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
29 changes: 12 additions & 17 deletions packages/react-native-editor/__device-tests__/[email protected]
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,26 @@
* Internal dependencies
*/
import { blockNames } from './pages/editor-page';
import { isAndroid } from './helpers/utils';
import testData from './helpers/test-data';

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(
blockNames.heading,
1,
{
useWaitForVisible: true,
}
let headingBlockElement = await editorPage.getTextBlockAtPosition(
blockNames.heading
);
if ( isAndroid() ) {
await headingBlockElement.click();
}
await editorPage.sendTextToHeadingBlock(

await editorPage.typeTextToTextBlock(
headingBlockElement,
testData.heading,
false
testData.heading
);

await editorPage.addNewBlock( blockNames.paragraph );
let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
blockNames.paragraph,
2
);
await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
testData.mediumText
);
Expand All @@ -39,7 +31,7 @@ describe( 'Gutenberg Editor tests', () => {
blockNames.paragraph,
3
);
await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
testData.mediumText
);
Expand All @@ -49,7 +41,7 @@ describe( 'Gutenberg Editor tests', () => {
blockNames.heading,
4
);
await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
headingBlockElement,
testData.heading
);
Expand All @@ -59,9 +51,12 @@ describe( 'Gutenberg Editor tests', () => {
blockNames.paragraph,
5
);
await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
testData.mediumText
);

// Assert that even though there are 5 blocks, there should only be 3 paragraph blocks
expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 3 );
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd like to suggest relying on Jest snapshots for the expectations of tests, this is something we could apply on every test actually. We could have something like this:

Suggested change
expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 3 );
expect( await editorPage.getHtmlContent() ).toMatchSnapshot();

This would ensure that we produced the right HTML output after the test. Here is an example of the snapshot file:

exports[`Gutenberg Editor tests should be able to create a post with heading and paragraph blocks 1`] = `
"<!-- wp:heading -->
<h2>Lorem Ipsum</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The finer continuum interprets the polynomial rabbit. When can the geology runs? An astronomer runs. Should a communist consent?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The finer continuum interprets the polynomial rabbit. When can the geology runs? An astronomer runs. Should a communist consent?</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Lorem Ipsum</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The finer continuum interprets the polynomial rabbit. When can the geology runs? An astronomer runs. Should a communist consent?</p>
<!-- /wp:paragraph -->"
`;

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm thinking that we might consider covering this in a future PR. It would also help with reducing considerably the test data fixture file.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm open to trying that and looks like it's used quite a bit already in the integration tests. But yeah I wouldn't want to cover it in this PR and better to be in a separate PR, I think this would also make the assertions more consistent (there are a few E2E tests that does not check the HTML output).

Though one thing I'm unsure of is if we can use Jest with Appium (not tested).

Copy link
Contributor

@fluiddot fluiddot May 10, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Though one thing I'm unsure of is if we can use Jest with Appium (not tested).

We are using Jest for running the tests (reference) so there shouldn't be any problem. The snapshots are taken from the output HTML retrieved by the getHtmlContent helper which returns a string. Since the logic will be handled on the Jest side, I don't foresee any potential conflict due to using Appium.

} );
} );
36 changes: 18 additions & 18 deletions packages/react-native-editor/__device-tests__/[email protected]
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,28 @@ import testData from './helpers/test-data';
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(
blockNames.list
);
// Click List block on Android to force EditText focus
if ( isAndroid() ) {
await listBlockElement.click();
}
let listBlockElement = await editorPage.getListBlock( {
isEmptyBlock: true,
} );

// Send the first list item text.
await editorPage.sendTextToListBlock(
await editorPage.typeTextToTextBlock(
listBlockElement,
testData.listItem1
testData.listItem1,
false
);

listBlockElement = await editorPage.getListBlock();

// Send an Enter.
await editorPage.sendTextToListBlock( listBlockElement, '\n' );
await editorPage.typeTextToTextBlock( listBlockElement, '\n', false );

listBlockElement = await editorPage.getListBlock();
fluiddot marked this conversation as resolved.
Show resolved Hide resolved

// Send the second list item text.
await editorPage.sendTextToListBlock(
await editorPage.typeTextToTextBlock(
listBlockElement,
testData.listItem2
testData.listItem2,
false
);

// Switch to html and verify html.
Expand All @@ -38,12 +39,11 @@ describe( 'Gutenberg Editor tests for List block', () => {

// This test depends on being run immediately after 'should be able to add a new List block'
it( 'should update format to ordered list, using toolbar button', async () => {
let listBlockElement = await editorPage.getBlockAtPosition(
blockNames.list
);
let listBlockElement = await editorPage.getListBlock();

// Click List block to force EditText focus.
await listBlockElement.click();
if ( isAndroid() ) {
listBlockElement.click();
}

// Send a click on the order list format button.
await editorPage.clickOrderedListToolBarButton();
Expand Down
21 changes: 5 additions & 16 deletions packages/react-native-editor/__device-tests__/gutenberg-editor-lists-end.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,21 @@
* Internal dependencies
*/
import { blockNames } from './pages/editor-page';
import { isAndroid } from './helpers/utils';
import testData from './helpers/test-data';

describe( 'Gutenberg Editor tests for List block (end)', () => {
it( 'should be able to end a List block', async () => {
await editorPage.addNewBlock( blockNames.list );
const listBlockElement = await editorPage.getBlockAtPosition(
blockNames.list
);

// Click List block on Android to force EditText focus
if ( isAndroid() ) {
await listBlockElement.click();
}
const listBlockElement = await editorPage.getListBlock();

// Send the first list item text.
await editorPage.sendTextToListBlock(
await editorPage.typeTextToTextBlock(
listBlockElement,
testData.listItem1
testData.listItem1,
false
);

// Send an Enter.
await editorPage.sendTextToListBlock( listBlockElement, '\n' );

// Send an Enter.
await editorPage.sendTextToListBlock( listBlockElement, '\n' );
await editorPage.typeTextToTextBlock( listBlockElement, '\n\n', false );

const html = await editorPage.getHtmlContent();

Expand Down
36 changes: 22 additions & 14 deletions packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,38 @@
* Internal dependencies
*/
import { blockNames } from './pages/editor-page';
import { backspace, isAndroid } from './helpers/utils';
import { backspace, isAndroid, isLocalEnvironment } from './helpers/utils';

describe( 'Gutenberg Editor tests for List block', () => {
// Prevent regression of https://github.com/wordpress-mobile/gutenberg-mobile/issues/871
it( 'should handle spaces in a list', async () => {
await editorPage.addNewBlock( blockNames.list );
let listBlockElement = await editorPage.getBlockAtPosition(
blockNames.list
);
// Click List block on Android to force EditText focus
if ( isAndroid() ) {
await listBlockElement.click();
}
let listBlockElement = await editorPage.getListBlock();

// Send the list item text.
await editorPage.sendTextToListBlock( listBlockElement, ' a' );
await editorPage.typeTextToTextBlock( listBlockElement, ' a', false );

// Send an Enter.
await editorPage.sendTextToListBlock( listBlockElement, '\n' );
await editorPage.typeTextToTextBlock( listBlockElement, '\n', false );

// Click List block on Android.
// Only needed when testing in local environment
if ( isAndroid() && isLocalEnvironment() ) {
await listBlockElement.click();
}
fluiddot marked this conversation as resolved.
Show resolved Hide resolved

// Send a backspace.
await editorPage.sendTextToListBlock( listBlockElement, backspace );
await editorPage.typeTextToTextBlock(
listBlockElement,
backspace,
false
);

// There is a delay in Sauce Labs when a key is sent
// There isn't an element to check as it's being typed into an element that already exists, workaround is to add this wait until there's a better solution
if ( isAndroid() && ! isLocalEnvironment() ) {
await editorPage.driver.sleep( 1500 );
}
fluiddot marked this conversation as resolved.
Show resolved Hide resolved

// Switch to html and verify html.
const html = await editorPage.getHtmlContent();
Expand All @@ -35,9 +45,7 @@ describe( 'Gutenberg Editor tests for List block', () => {
);

// Remove list block to reset editor to clean state.
listBlockElement = await editorPage.getBlockAtPosition(
blockNames.list
);
listBlockElement = await editorPage.getListBlock();
await listBlockElement.click();
await editorPage.removeBlockAtPosition( blockNames.list );
} );
Expand Down
20 changes: 7 additions & 13 deletions packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
blockNames.paragraph
);
await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
testData.shortText
);
await clickMiddleOfElement( editorPage.driver, paragraphBlockElement );
await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
'\n',
false
Expand All @@ -44,19 +44,13 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
blockNames.paragraph
);
if ( isAndroid() ) {
await paragraphBlockElement.click();
}

await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
testData.shortText
);
await clickMiddleOfElement( editorPage.driver, paragraphBlockElement );
await editorPage.typeTextToParagraphBlock(
paragraphBlockElement,
'\n'
);
await editorPage.typeTextToTextBlock( paragraphBlockElement, '\n' );

const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 );
const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 );
Expand All @@ -71,7 +65,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
paragraphBlockElement
);

await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
backspace
);
Expand Down Expand Up @@ -112,7 +106,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
editorPage.driver,
paragraphBlockElement
);
await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
backspace
);
Expand Down Expand Up @@ -140,7 +134,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
blockNames.paragraph,
2
);
await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
backspace
);
Expand Down
14 changes: 1 addition & 13 deletions 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 @@ -29,11 +29,8 @@ describe( 'Gutenberg Editor paste tests', () => {
const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
blockNames.paragraph
);
if ( isAndroid() ) {
await paragraphBlockElement.click();
}

await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
testData.pastePlainText
);
Expand All @@ -59,9 +56,6 @@ describe( 'Gutenberg Editor paste tests', () => {
blockNames.paragraph,
2
);
if ( isAndroid() ) {
await paragraphBlockElement2.click();
}

// Paste into second paragraph block.
await longPressMiddleOfElement(
Expand All @@ -83,9 +77,6 @@ describe( 'Gutenberg Editor paste tests', () => {
const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
blockNames.paragraph
);
if ( isAndroid() ) {
await paragraphBlockElement.click();
}

// Copy content to clipboard.
await longPressMiddleOfElement(
Expand All @@ -108,9 +99,6 @@ describe( 'Gutenberg Editor paste tests', () => {
blockNames.paragraph,
2
);
if ( isAndroid() ) {
await paragraphBlockElement2.click();
}

// Paste into second paragraph block.
await longPressMiddleOfElement(
Expand Down
19 changes: 5 additions & 14 deletions packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,39 +11,30 @@ describe( 'Gutenberg Editor tests', () => {
let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
blockNames.paragraph
);
if ( isAndroid() ) {
await paragraphBlockElement.click();
}

await editorPage.typeTextToParagraphBlock(
await editorPage.typeTextToTextBlock(
paragraphBlockElement,
testData.mediumText
);

await toggleOrientation( editorPage.driver );
// On Android the keyboard hides the add block button, let's hide it after rotation
if ( isAndroid() ) {
await editorPage.driver.hideDeviceKeyboard();
await editorPage.dismissKeyboard();
}

await editorPage.addNewBlock( blockNames.paragraph );

if ( isAndroid() ) {
await editorPage.driver.hideDeviceKeyboard();
await editorPage.dismissKeyboard();
}

paragraphBlockElement = await editorPage.getTextBlockAtPosition(
blockNames.paragraph,
2
);
while ( ! paragraphBlockElement ) {
await editorPage.driver.hideDeviceKeyboard();
paragraphBlockElement = await editorPage.getBlockAtPosition(
blockNames.paragraph,
2
);
}
await editorPage.typeTextToParagraphBlock(

await editorPage.typeTextToTextBlock(
paragraphBlockElement,
testData.mediumText
);
Expand Down
Loading