From 4745eda23b647ffd66dc18843cc1a23ae84da1ec Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 24 Feb 2025 10:48:21 +0100 Subject: [PATCH 1/5] Try to run e2e tests with the post editor in full screen mode. --- packages/e2e-test-utils-playwright/src/admin/create-new-post.ts | 2 +- packages/e2e-test-utils-playwright/src/admin/edit-post.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-test-utils-playwright/src/admin/create-new-post.ts b/packages/e2e-test-utils-playwright/src/admin/create-new-post.ts index a5d6617946ae31..ccd1265ba64205 100644 --- a/packages/e2e-test-utils-playwright/src/admin/create-new-post.ts +++ b/packages/e2e-test-utils-playwright/src/admin/create-new-post.ts @@ -42,6 +42,6 @@ export async function createNewPost( await this.editor.setPreferences( 'core/edit-post', { welcomeGuide: options.showWelcomeGuide ?? false, - fullscreenMode: options.fullscreenMode ?? false, + fullscreenMode: options.fullscreenMode ?? true, } ); } diff --git a/packages/e2e-test-utils-playwright/src/admin/edit-post.ts b/packages/e2e-test-utils-playwright/src/admin/edit-post.ts index 77cf390d02aa01..3e34b0481ced22 100644 --- a/packages/e2e-test-utils-playwright/src/admin/edit-post.ts +++ b/packages/e2e-test-utils-playwright/src/admin/edit-post.ts @@ -19,6 +19,6 @@ export async function editPost( this: Admin, postId: string | number ) { await this.editor.setPreferences( 'core/edit-post', { welcomeGuide: false, - fullscreenMode: false, + fullscreenMode: true, } ); } From d206ec305031353727fbd10a26d9f7ffd8d5e82d Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 24 Feb 2025 14:15:59 +0100 Subject: [PATCH 2/5] Adjust tests. --- test/e2e/specs/editor/various/a11y.spec.js | 26 ++++++++++++++----- .../editor/various/fullscreen-mode.spec.js | 10 +++++-- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js index f116476989a133..1f5dec0b9882f5 100644 --- a/test/e2e/specs/editor/various/a11y.spec.js +++ b/test/e2e/specs/editor/various/a11y.spec.js @@ -21,6 +21,7 @@ test.describe( 'a11y (@firefox, @webkit)', () => { page, pageUtils, editor, + browserName, } ) => { // To do: run with iframe. await editor.switchToLegacyCanvas(); @@ -38,13 +39,26 @@ test.describe( 'a11y (@firefox, @webkit)', () => { // Navigate to the 'Editor top bar' region. await pageUtils.pressKeys( 'ctrl+`' ); - // This test assumes the Editor is not in Fullscreen mode. Check the - // first tabbable element within the 'Editor top bar' region is the - // 'Block Inserter' button. await pageUtils.pressKeys( 'Tab' ); - await expect( - page.locator( 'role=button[name=/Block Inserter/i]' ) - ).toBeFocused(); + + const isFullScreenMode = await page.evaluate( () => { + return window.wp.data + .select( 'core/edit-post' ) + .isFeatureActive( 'fullscreenMode' ); + } ); + // When full screen mode is enabled, check the first tabbable element + // within the 'Editor top bar' region is the 'View Posts' link otherwise + // check it's the 'Block Inserter' button. + // In webkit (Safari) links aren't tabbable by default so we always test + // for the 'Block Inserter' button. + let elementToTest = isFullScreenMode + ? 'role=link[name=/View Posts/i]' + : 'role=button[name=/Block Inserter/i]'; + if ( browserName === 'webkit' ) { + elementToTest = 'role=button[name=/Block Inserter/i]'; + } + + await expect( page.locator( elementToTest ) ).toBeFocused(); } ); test( 'should constrain tabbing within a modal', async ( { diff --git a/test/e2e/specs/editor/various/fullscreen-mode.spec.js b/test/e2e/specs/editor/various/fullscreen-mode.spec.js index 8b7a0785a7ed6d..d8bb1380593fd1 100644 --- a/test/e2e/specs/editor/various/fullscreen-mode.spec.js +++ b/test/e2e/specs/editor/various/fullscreen-mode.spec.js @@ -4,12 +4,18 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'Fullscreen Mode', () => { - test.beforeEach( async ( { admin } ) => { + test.beforeEach( async ( { admin, editor } ) => { await admin.createNewPost(); + await editor.setPreferences( 'core/edit-post', { + fullscreenMode: false, + } ); } ); - test.afterEach( async ( { requestUtils } ) => { + test.afterEach( async ( { requestUtils, editor } ) => { await requestUtils.deleteAllPosts(); + await editor.setPreferences( 'core/edit-post', { + fullscreenMode: true, + } ); } ); test( 'should open the fullscreen mode from the more menu', async ( { From 831168533799ab93ce2355d27c7ac115eb1b246c Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 24 Feb 2025 16:15:03 +0100 Subject: [PATCH 3/5] Adjust Safari test. --- test/e2e/specs/editor/various/a11y.spec.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js index 1f5dec0b9882f5..f7d0b63cb895eb 100644 --- a/test/e2e/specs/editor/various/a11y.spec.js +++ b/test/e2e/specs/editor/various/a11y.spec.js @@ -21,7 +21,6 @@ test.describe( 'a11y (@firefox, @webkit)', () => { page, pageUtils, editor, - browserName, } ) => { // To do: run with iframe. await editor.switchToLegacyCanvas(); @@ -49,14 +48,12 @@ test.describe( 'a11y (@firefox, @webkit)', () => { // When full screen mode is enabled, check the first tabbable element // within the 'Editor top bar' region is the 'View Posts' link otherwise // check it's the 'Block Inserter' button. - // In webkit (Safari) links aren't tabbable by default so we always test - // for the 'Block Inserter' button. - let elementToTest = isFullScreenMode + // When running this test locally, make sure that in macOS webkit (Safari) + // links are focusable and tabbable by setting the related preferences at + // system and browser level. + const elementToTest = isFullScreenMode ? 'role=link[name=/View Posts/i]' : 'role=button[name=/Block Inserter/i]'; - if ( browserName === 'webkit' ) { - elementToTest = 'role=button[name=/Block Inserter/i]'; - } await expect( page.locator( elementToTest ) ).toBeFocused(); } ); From 1f302dab0c6d7ff7cb0ec35cebd277636cd831c5 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 25 Feb 2025 09:16:04 +0100 Subject: [PATCH 4/5] Improve full screen mode e2e test. --- .../editor/various/fullscreen-mode.spec.js | 69 +++++++++++++++---- 1 file changed, 55 insertions(+), 14 deletions(-) diff --git a/test/e2e/specs/editor/various/fullscreen-mode.spec.js b/test/e2e/specs/editor/various/fullscreen-mode.spec.js index d8bb1380593fd1..a401cfbb736b78 100644 --- a/test/e2e/specs/editor/various/fullscreen-mode.spec.js +++ b/test/e2e/specs/editor/various/fullscreen-mode.spec.js @@ -18,7 +18,7 @@ test.describe( 'Fullscreen Mode', () => { } ); } ); - test( 'should open the fullscreen mode from the more menu', async ( { + test( 'should open and close the fullscreen mode from the more menu', async ( { page, } ) => { // Open Options Menu @@ -26,20 +26,61 @@ test.describe( 'Fullscreen Mode', () => { 'role=region[name="Editor top bar"i] >> role=button[name="Options"i]' ); - // Select Full Screen Mode - await page - .locator( 'role=menuitemcheckbox', { hasText: 'Fullscreen mode' } ) - .click(); + const body = page.locator( 'body' ); - // Check the body class. - await expect( page.locator( 'body' ) ).toHaveClass( - /is-fullscreen-mode/ - ); + const fullScreenCheckbox = page + .getByRole( 'menuitemcheckbox' ) + .filter( { hasText: 'Fullscreen mode' } ); + + const viewPostsLink = page.getByRole( 'link', { + name: 'View Posts', + } ); + + // Select Full Screen Mode. + await fullScreenCheckbox.click(); + + // Check the body does have the CSS class. + await expect( body ).toHaveClass( /is-fullscreen-mode/ ); + + // Check the View Posts link is visible. + await expect( viewPostsLink ).toBeVisible(); + + // Unselect Full Screen Mode. + await fullScreenCheckbox.click(); + + // Check the body does not have the CSS class. + await expect( body ).not.toHaveClass( /is-fullscreen-mode/ ); + + // Check the View Posts link is not visible. + await expect( viewPostsLink ).toBeHidden(); + } ); + + test( 'should open and close the fullscreen mode via the keyboard shortcut', async ( { + page, + pageUtils, + } ) => { + const body = page.locator( 'body' ); + + const viewPostsLink = page.getByRole( 'link', { + name: 'View Posts', + } ); + + // Emulates CTRL+Shift+Alt + F + await pageUtils.pressKeys( 'secondary+F' ); + + // Check the body does have the CSS class. + await expect( body ).toHaveClass( /is-fullscreen-mode/ ); + + // Check the View Posts link is visible. + await expect( viewPostsLink ).toBeVisible(); + + // Emulates CTRL+Shift+Alt + F + await pageUtils.pressKeys( 'secondary+F' ); + + // Check the body does not have the CSS class. + await expect( body ).not.toHaveClass( /is-fullscreen-mode/ ); - await expect( - page.locator( - 'role=region[name="Editor top bar"i] >> role=link[name="View Posts"i]' - ) - ).toBeVisible(); + // Check the View Posts link is not visible. + await expect( viewPostsLink ).toBeHidden(); } ); } ); From 0990af0440f92878fcabc123169030b419c5b11f Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 25 Feb 2025 17:14:23 +0100 Subject: [PATCH 5/5] Test the fullscreen mode snackbar notice. --- .../e2e/specs/editor/various/fullscreen-mode.spec.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/test/e2e/specs/editor/various/fullscreen-mode.spec.js b/test/e2e/specs/editor/various/fullscreen-mode.spec.js index a401cfbb736b78..202ccb5afd7c78 100644 --- a/test/e2e/specs/editor/various/fullscreen-mode.spec.js +++ b/test/e2e/specs/editor/various/fullscreen-mode.spec.js @@ -74,6 +74,12 @@ test.describe( 'Fullscreen Mode', () => { // Check the View Posts link is visible. await expect( viewPostsLink ).toBeVisible(); + await expect( + page + .getByRole( 'button', { name: 'Dismiss this notice' } ) + .filter( { hasText: 'Fullscreen mode activated' } ) + ).toBeVisible(); + // Emulates CTRL+Shift+Alt + F await pageUtils.pressKeys( 'secondary+F' ); @@ -82,5 +88,11 @@ test.describe( 'Fullscreen Mode', () => { // Check the View Posts link is not visible. await expect( viewPostsLink ).toBeHidden(); + + await expect( + page + .getByRole( 'button', { name: 'Dismiss this notice' } ) + .filter( { hasText: 'Fullscreen mode deactivated' } ) + ).toBeVisible(); } ); } );