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(); } ); } );