diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/rtl.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/rtl.test.js.snap deleted file mode 100644 index 19b4e8c305acc..0000000000000 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/rtl.test.js.snap +++ /dev/null @@ -1,63 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`RTL should arrow navigate 1`] = ` -" -

٠١٢

-" -`; - -exports[`RTL should arrow navigate between blocks 1`] = ` -" -

٠
١

- - - -

٠
١
٢

-" -`; - -exports[`RTL should merge backward 1`] = ` -" -

٠١

-" -`; - -exports[`RTL should merge forward 1`] = ` -" -

٠١

-" -`; - -exports[`RTL should navigate inline boundaries 1`] = ` -" -

١٠٢

-" -`; - -exports[`RTL should navigate inline boundaries 2`] = ` -" -

١٠٢

-" -`; - -exports[`RTL should navigate inline boundaries 3`] = ` -" -

٠١٢

-" -`; - -exports[`RTL should navigate inline boundaries 4`] = ` -" -

٠١٢

-" -`; - -exports[`RTL should split 1`] = ` -" -

٠

- - - -

١

-" -`; diff --git a/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-1-chromium.txt new file mode 100644 index 0000000000000..fbbccf2420f29 --- /dev/null +++ b/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-1-chromium.txt @@ -0,0 +1,3 @@ + +

١٠٢

+ \ No newline at end of file diff --git a/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-2-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-2-chromium.txt new file mode 100644 index 0000000000000..9f1e70f261f83 --- /dev/null +++ b/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-2-chromium.txt @@ -0,0 +1,3 @@ + +

١٠٢

+ \ No newline at end of file diff --git a/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-3-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-3-chromium.txt new file mode 100644 index 0000000000000..f078b32682318 --- /dev/null +++ b/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-3-chromium.txt @@ -0,0 +1,3 @@ + +

٠١٢

+ \ No newline at end of file diff --git a/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-4-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-4-chromium.txt new file mode 100644 index 0000000000000..598ba367aaf53 --- /dev/null +++ b/test/e2e/specs/editor/various/__snapshots__/RTL-should-navigate-inline-boundaries-4-chromium.txt @@ -0,0 +1,3 @@ + +

٠١٢

+ \ No newline at end of file diff --git a/packages/e2e-tests/specs/editor/various/rtl.test.js b/test/e2e/specs/editor/various/rtl.spec.js similarity index 53% rename from packages/e2e-tests/specs/editor/various/rtl.test.js rename to test/e2e/specs/editor/various/rtl.spec.js index a18eb0573c815..d06c0ec8a4389 100644 --- a/packages/e2e-tests/specs/editor/various/rtl.test.js +++ b/test/e2e/specs/editor/various/rtl.spec.js @@ -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 @@ -41,10 +39,17 @@ describe( 'RTL', () => { // Expect: ARABIC_ZERO + ARABIC_ONE + ARABIC_TWO (

٠١٢

). // 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( + ` +

٠١٢

+` + ); } ); - it( 'should split', async () => { + test( 'should split', async ( { editor, page } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( ARABIC_ZERO ); @@ -52,10 +57,20 @@ describe( 'RTL', () => { 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( + ` +

٠

+ + + +

١

+` + ); } ); - it( 'should merge backward', async () => { + test( 'should merge backward', async ( { editor, page } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( ARABIC_ZERO ); @@ -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( + ` +

٠١

+` + ); } ); - it( 'should merge forward', async () => { + test( 'should merge forward', async ( { editor, page } ) => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( ARABIC_ZERO ); @@ -77,16 +98,25 @@ 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( + ` +

٠١

+` + ); } ); - 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' ); @@ -94,26 +124,36 @@ describe( 'RTL', () => { // 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( + ` +

٠
١

+ + + +

٠
١
٢

+` + ); } ); - it( 'should navigate inline boundaries', async () => { - await page.keyboard.press( 'Enter' ); - - // Wait for rich text editor to load. - await page.waitForSelector( '.block-editor-rich-text__editable' ); - - await pressKeyWithModifier( 'primary', 'b' ); + test( 'should navigate inline boundaries', async ( { + editor, + page, + pageUtils, + } ) => { + await page.click( 'role=button[name="Add default block"i]' ); + 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. @@ -121,7 +161,7 @@ describe( 'RTL', () => { 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' ); }