RTL: Add basic e2e test

[ockham]

Gutenberg 10.0 and 10.1 have a regression for RTL languages that causes the editor to WSOD. We should add a basic e2e test to set the language to e.g. Hebrew and attempt to create a new post in order to cover against this kind of regression.

[youknowriad]

We do have RTL e2e tests but they actually "fake the language" to just test writing flow. Actually switching the language would be better but this would make most of our e2e test utils unusable (translations)

[ockham]

We do have RTL e2e tests

Ah right: https://github.com/WordPress/gutenberg/blob/d06379316e3541e8c24ae29cf6855644c6f3eab6/packages/e2e-tests/specs/editor/various/rtl.test.js Thanks!

but they actually "fake the language" to just test writing flow. Actually switching the language would be better but this would make most of our e2e test utils unusable (translations)

For a bug like #29248, a real language shouldn't even be required. Makes me wonder why our tests didn't flag the issue 🤔 Maybe it's really never been an issue on master, but only on release/10.0? So it might boil down to implementing #29251?

[ockham]

I had a look into the test's code and ran it locally, and I think I see why it didn't trigger the error:

We're only setting two RTL flags in a fairly editor-specific context:

gutenberg/packages/e2e-tests/specs/editor/various/rtl.test.js

Lines 19 to 20 in d063793

	document.querySelector( '.is-root-container' ).dir = 'rtl';
	wp.i18n.isRTL = () => true;

It's really just the editing canvas that seems affected by this, whereas the overall editor chrome is still LTR. The following is a screenshot from running the test locally (via npm run test-e2e -- packages/e2e-tests/specs/editor/various/rtl.test.js --puppeteer-interactive). Note the two Arabic numbers next to the cursor -- they're the only RTL thing in this screenshot:

Compare that to a GB instance with an RTL language set (via Settings > General (wp-admin/options-general.php), "Site Language" dropdown):

Note that e.g. the sidebar is on the left-hand side.

So I think we might get away without installing a new language, but we should at least make sure the editor reflects an RTL language more faithfully in our e2e test.

[ockham]

So I think we might get away without installing a new language, but we should at least make sure the editor reflects an RTL language more faithfully in our e2e test.

@akirk Maybe you have an idea what's the easiest way to do that? (See above for more context.)

[ockham]

Maybe it's as simple as

diff --git a/packages/e2e-tests/specs/editor/various/rtl.test.js b/packages/e2e-tests/specs/editor/various/rtl.test.js
index f14219d5b1..fae42b02cb 100644
--- a/packages/e2e-tests/specs/editor/various/rtl.test.js
+++ b/packages/e2e-tests/specs/editor/various/rtl.test.js
@@ -16,7 +16,7 @@ describe( 'RTL', () => {
        beforeEach( async () => {
                await createNewPost();
                await page.evaluate( () => {
-                       document.querySelector( '.is-root-container' ).dir = 'rtl';
+                       document.documentElement.dir = 'rtl';
                        wp.i18n.isRTL = () => true;
                } );
        } );

[ockham]

Maybe it's as simple as

diff --git a/packages/e2e-tests/specs/editor/various/rtl.test.js b/packages/e2e-tests/specs/editor/various/rtl.test.js
index f14219d5b1..fae42b02cb 100644
--- a/packages/e2e-tests/specs/editor/various/rtl.test.js
+++ b/packages/e2e-tests/specs/editor/various/rtl.test.js
@@ -16,7 +16,7 @@ describe( 'RTL', () => {
        beforeEach( async () => {
                await createNewPost();
                await page.evaluate( () => {
-                       document.querySelector( '.is-root-container' ).dir = 'rtl';
+                       document.documentElement.dir = 'rtl';
                        wp.i18n.isRTL = () => true;
                } );
        } );

No, that doesn't seem to do the trick 😕
Furthermore, it breaks snapshots. Turns out it was almost like this prior to #26508.

[ockham]

Closed by #29598.