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

Migrate rtl test case to it's playwright version #41495

Merged
merged 12 commits into from
Jun 27, 2022
Merged

Migrate rtl test case to it's playwright version #41495

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b5eae84
Migrate rtl test case
Jun 2, 2022
8db57d5
Fix conflicts
Jun 3, 2022
da10e65
Addressed review feedbacks
Jun 16, 2022
09e40c9
Addressed review feedback
Jun 16, 2022
9910cc8
Addressed remaining feedbacks
Jun 16, 2022
2c97c6a
Addressed review feedback
Jun 16, 2022
0515435
Solved styleint issue
Jun 16, 2022
8f516c5
Addressed review feedbacks
Jun 20, 2022
e80a137
Remove unused code
Jun 22, 2022
4ced09b
Fix styleint issue
Jun 22, 2022
efa6411
Merge branch 'WordPress:trunk' into add/playwright-rtl-test
pavanpatil1 Jun 22, 2022
6cd8b0d
Fixed CI issue
Jun 27, 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
63 changes: 0 additions & 63 deletions packages/e2e-tests/specs/editor/various/__snapshots__/rtl.test.js.snap
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions ...e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-1-chromium.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:paragraph -->
<p><strong>١</strong>٠٢</p>
<!-- /wp:paragraph -->
3 changes: 3 additions & 0 deletions ...e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-2-chromium.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:paragraph -->
<p><strong>١٠</strong>٢</p>
<!-- /wp:paragraph -->
3 changes: 3 additions & 0 deletions ...e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-3-chromium.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:paragraph -->
<p><strong>٠١</strong>٢</p>
<!-- /wp:paragraph -->
3 changes: 3 additions & 0 deletions ...e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-4-chromium.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:paragraph -->
<p>٠<strong>١</strong>٢</p>
<!-- /wp:paragraph -->
110 changes: 77 additions & 33 deletions ...2e-tests/specs/editor/various/rtl.test.js → test/e2e/specs/editor/various/rtl.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,31 @@
/**
* WordPress dependencies
*/
import {
createNewPost,
getEditedPostContent,
pressKeyWithModifier,
activatePlugin,
deactivatePlugin,
} from '@wordpress/e2e-test-utils';
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

// Avoid using three, as it looks too much like two with some fonts.
const ARABIC_ZERO = '٠';
const ARABIC_ONE = '١';
const ARABIC_TWO = '٢';

describe( 'RTL', () => {
beforeAll( async () => {
await activatePlugin( 'gutenberg-test-plugin-activate-rtl' );
test.describe( 'RTL', () => {
test.beforeAll( async ( { requestUtils } ) => {
await requestUtils.activatePlugin(
'gutenberg-test-plugin-activate-rtl'
);
} );

beforeEach( async () => {
await createNewPost();
test.beforeEach( async ( { admin } ) => {
await admin.createNewPost();
} );

afterAll( async () => {
await deactivatePlugin( 'gutenberg-test-plugin-activate-rtl' );
test.afterAll( async ( { requestUtils } ) => {
await requestUtils.deactivatePlugin(
'gutenberg-test-plugin-activate-rtl'
);
} );

it( 'should arrow navigate', async () => {
test( 'should arrow navigate', async ( { editor, page } ) => {
await page.keyboard.press( 'Enter' );

// We need at least three characters as arrow navigation *from* the
Expand All @@ -41,21 +39,38 @@ describe( 'RTL', () => {

// Expect: ARABIC_ZERO + ARABIC_ONE + ARABIC_TWO (<p>٠١٢</p>).
// N.b.: HTML is LTR, so direction will be reversed!
expect( await getEditedPostContent() ).toMatchSnapshot();

// Check the content.
const content = await editor.getEditedPostContent();
expect( content ).toBe(
`<!-- wp:paragraph -->
<p>٠١٢</p>
<!-- /wp:paragraph -->`
);
} );

it( 'should split', async () => {
test( 'should split', async ( { editor, page } ) => {
await page.keyboard.press( 'Enter' );

await page.keyboard.type( ARABIC_ZERO );
await page.keyboard.type( ARABIC_ONE );
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.press( 'Enter' );

expect( await getEditedPostContent() ).toMatchSnapshot();
// Check the content.
const content = await editor.getEditedPostContent();
expect( content ).toBe(
`<!-- wp:paragraph -->
<p>٠</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>١</p>
<!-- /wp:paragraph -->`
);
} );

it( 'should merge backward', async () => {
test( 'should merge backward', async ( { editor, page } ) => {
await page.keyboard.press( 'Enter' );

await page.keyboard.type( ARABIC_ZERO );
Expand All @@ -64,10 +79,16 @@ describe( 'RTL', () => {
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.press( 'Backspace' );

expect( await getEditedPostContent() ).toMatchSnapshot();
// Check the content.
const content = await editor.getEditedPostContent();
expect( content ).toBe(
`<!-- wp:paragraph -->
<p>٠١</p>
<!-- /wp:paragraph -->`
);
} );

it( 'should merge forward', async () => {
test( 'should merge forward', async ( { editor, page } ) => {
await page.keyboard.press( 'Enter' );

await page.keyboard.type( ARABIC_ZERO );
Expand All @@ -77,51 +98,74 @@ describe( 'RTL', () => {
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.press( 'Delete' );

expect( await getEditedPostContent() ).toMatchSnapshot();
// Check the content.
const content = await editor.getEditedPostContent();
expect( content ).toBe(
`<!-- wp:paragraph -->
<p>٠١</p>
<!-- /wp:paragraph -->`
);
} );

it( 'should arrow navigate between blocks', async () => {
test( 'should arrow navigate between blocks', async ( {
editor,
page,
} ) => {
await page.keyboard.press( 'Enter' );

await page.keyboard.type( ARABIC_ZERO );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( ARABIC_ONE );
await pressKeyWithModifier( 'shift', 'Enter' );
await page.keyboard.press( 'Shift+Enter' );
await page.keyboard.type( ARABIC_TWO );
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.press( 'ArrowRight' );

// Move to the previous block with two lines in the current block.
await page.keyboard.press( 'ArrowRight' );
await pressKeyWithModifier( 'shift', 'Enter' );
await page.keyboard.press( 'Shift+Enter' );
await page.keyboard.type( ARABIC_ONE );

// Move to the next block with two lines in the current block.
await page.keyboard.press( 'ArrowLeft' );
await page.keyboard.type( ARABIC_ZERO );
await pressKeyWithModifier( 'shift', 'Enter' );

expect( await getEditedPostContent() ).toMatchSnapshot();
await page.keyboard.press( 'Shift+Enter' );

// Check the content.
const content = await editor.getEditedPostContent();
expect( content ).toBe(
`<!-- wp:paragraph -->
<p>٠<br>١</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>٠<br>١<br>٢</p>
<!-- /wp:paragraph -->`
);
} );

it( 'should navigate inline boundaries', async () => {
await page.keyboard.press( 'Enter' );
test( 'should navigate inline boundaries', async ( {
editor,
page,
pageUtils,
} ) => {
page.click( 'role=button[name="Add default block"i]' );
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
page.click( 'role=button[name="Add default block"i]' );
await page.click( 'role=button[name="Add default block"i]' );


// Wait for rich text editor to load.
await page.waitForSelector( '.block-editor-rich-text__editable' );
Copy link
Member

Choose a reason for hiding this comment

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

Could we change this selector to something accessible? For instance, selecting it using a role selector, or replacing it along with the press( 'Enter' ) above with page.click( 'role=button[name="Add default block"i]' ).

Copy link
Member

Choose a reason for hiding this comment

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

We still need to refactor this line to use role selectors instead though. Or maybe just remove this line if it's not doing anything meaningful now?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hi @kevin940726, We have refactored that line and Added the role selector

gutenberg/test/e2e/specs/editor/various/rtl.spec.js

Line 154 in 09e40c9

page.click( 'role=button[name="Add default block"i]' );
. We can't remove that line I guess.

Copy link
Member

Choose a reason for hiding this comment

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

I mean to remove this line.

await page.waitForSelector( '.block-editor-rich-text__editable' );

I don't think we need it anymore?


await pressKeyWithModifier( 'primary', 'b' );
await pageUtils.pressKeyWithModifier( 'primary', 'b' );
await page.keyboard.type( ARABIC_ONE );
await pressKeyWithModifier( 'primary', 'b' );
await pageUtils.pressKeyWithModifier( 'primary', 'b' );
await page.keyboard.type( ARABIC_TWO );

// Insert a character at each boundary position.
for ( let i = 4; i > 0; i-- ) {
await page.keyboard.press( 'ArrowRight' );
await page.keyboard.type( ARABIC_ZERO );

expect( await getEditedPostContent() ).toMatchSnapshot();
expect( await editor.getEditedPostContent() ).toMatchSnapshot();

await page.keyboard.press( 'Backspace' );
}
Expand Down