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, } ); } diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js index f116476989a133..f7d0b63cb895eb 100644 --- a/test/e2e/specs/editor/various/a11y.spec.js +++ b/test/e2e/specs/editor/various/a11y.spec.js @@ -38,13 +38,24 @@ 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. + // 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]'; + + 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..202ccb5afd7c78 100644 --- a/test/e2e/specs/editor/various/fullscreen-mode.spec.js +++ b/test/e2e/specs/editor/various/fullscreen-mode.spec.js @@ -4,15 +4,21 @@ 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 ( { + test( 'should open and close the fullscreen mode from the more menu', async ( { page, } ) => { // Open Options Menu @@ -20,20 +26,73 @@ 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(); + + 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' ); + + // 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(); await expect( - page.locator( - 'role=region[name="Editor top bar"i] >> role=link[name="View Posts"i]' - ) + page + .getByRole( 'button', { name: 'Dismiss this notice' } ) + .filter( { hasText: 'Fullscreen mode deactivated' } ) ).toBeVisible(); } ); } );