diff --git a/packages/e2e-tests/specs/editor/various/sidebar.test.js b/packages/e2e-tests/specs/editor/various/sidebar.test.js deleted file mode 100644 index 1137019f239f7..0000000000000 --- a/packages/e2e-tests/specs/editor/various/sidebar.test.js +++ /dev/null @@ -1,171 +0,0 @@ -/** - * WordPress dependencies - */ -import { - clearLocalStorage, - createNewPost, - findSidebarPanelWithTitle, - enableFocusLossObservation, - disableFocusLossObservation, - openDocumentSettingsSidebar, - pressKeyWithModifier, - setBrowserViewport, -} from '@wordpress/e2e-test-utils'; - -const SIDEBAR_SELECTOR = '.edit-post-sidebar'; -const ACTIVE_SIDEBAR_TAB_SELECTOR = - 'div[aria-label="Editor settings"] [role="tab"][aria-selected="true"]'; -const ACTIVE_SIDEBAR_BUTTON_TEXT = 'Post'; - -describe( 'Sidebar', () => { - afterEach( () => { - disableFocusLossObservation(); - } ); - - it( 'should have sidebar visible at the start with document sidebar active on desktop', async () => { - await setBrowserViewport( 'large' ); - await clearLocalStorage(); - await createNewPost(); - await enableFocusLossObservation(); - const { nodesCount, content, height, width } = await page.$$eval( - ACTIVE_SIDEBAR_TAB_SELECTOR, - ( nodes ) => { - const firstNode = nodes[ 0 ]; - return { - nodesCount: nodes.length, - content: firstNode.innerText, - height: firstNode.offsetHeight, - width: firstNode.offsetWidth, - }; - } - ); - - // should have only one active sidebar tab. - expect( nodesCount ).toBe( 1 ); - - // the active sidebar tab should be document. - expect( content ).toBe( ACTIVE_SIDEBAR_BUTTON_TEXT ); - - // the active sidebar tab should be visible - expect( width ).toBeGreaterThan( 10 ); - expect( height ).toBeGreaterThan( 10 ); - } ); - - it( 'should have the sidebar closed by default on mobile', async () => { - await setBrowserViewport( 'small' ); - await clearLocalStorage(); - await createNewPost(); - await enableFocusLossObservation(); - const sidebar = await page.$( SIDEBAR_SELECTOR ); - expect( sidebar ).toBeNull(); - } ); - - it( 'should close the sidebar when resizing from desktop to mobile', async () => { - await setBrowserViewport( 'large' ); - await clearLocalStorage(); - await createNewPost(); - await enableFocusLossObservation(); - - const sidebars = await page.$$( SIDEBAR_SELECTOR ); - expect( sidebars ).toHaveLength( 1 ); - - await setBrowserViewport( 'small' ); - - const sidebarsMobile = await page.$$( SIDEBAR_SELECTOR ); - // sidebar should be closed when resizing to mobile. - expect( sidebarsMobile ).toHaveLength( 0 ); - } ); - - it( 'should reopen sidebar the sidebar when resizing from mobile to desktop if the sidebar was closed automatically', async () => { - await setBrowserViewport( 'large' ); - await clearLocalStorage(); - await createNewPost(); - await enableFocusLossObservation(); - await setBrowserViewport( 'small' ); - - const sidebarsMobile = await page.$$( SIDEBAR_SELECTOR ); - expect( sidebarsMobile ).toHaveLength( 0 ); - - await setBrowserViewport( 'large' ); - - await page.waitForSelector( SIDEBAR_SELECTOR ); - } ); - - it( 'should preserve tab order while changing active tab', async () => { - await createNewPost(); - await enableFocusLossObservation(); - - // Region navigate to Sidebar. - await pressKeyWithModifier( 'ctrl', '`' ); - - // Tab lands at first (presumed selected) option "Post". - await page.keyboard.press( 'Tab' ); - - // The Post tab should be focused and selected. - const [ documentInspectorTab ] = await page.$x( - '//button[@role="tab"][@aria-selected="true"][contains(text(), "Post")]' - ); - expect( documentInspectorTab ).toBeDefined(); - expect( documentInspectorTab ).toHaveFocus(); - - // Arrow key into and activate "Block". - await page.keyboard.press( 'ArrowRight' ); - await page.keyboard.press( 'Space' ); - - // The Block tab should be focused and selected. - const [ blockInspectorTab ] = await page.$x( - '//button[@role="tab"][@aria-selected="true"][contains(text(), "Block")]' - ); - expect( blockInspectorTab ).toBeDefined(); - expect( blockInspectorTab ).toHaveFocus(); - } ); - - it( 'should be possible to programmatically remove Document Settings panels', async () => { - await createNewPost(); - await enableFocusLossObservation(); - await openDocumentSettingsSidebar(); - - expect( await findSidebarPanelWithTitle( 'Categories' ) ).toBeDefined(); - expect( await findSidebarPanelWithTitle( 'Tags' ) ).toBeDefined(); - expect( - await findSidebarPanelWithTitle( 'Featured image' ) - ).toBeDefined(); - expect( await findSidebarPanelWithTitle( 'Excerpt' ) ).toBeDefined(); - expect( await findSidebarPanelWithTitle( 'Discussion' ) ).toBeDefined(); - expect( await findSidebarPanelWithTitle( 'Summary' ) ).toBeDefined(); - - await page.evaluate( () => { - const { removeEditorPanel } = wp.data.dispatch( 'core/editor' ); - - removeEditorPanel( 'taxonomy-panel-category' ); - removeEditorPanel( 'taxonomy-panel-post_tag' ); - removeEditorPanel( 'featured-image' ); - removeEditorPanel( 'post-excerpt' ); - removeEditorPanel( 'discussion-panel' ); - removeEditorPanel( 'post-status' ); - } ); - - const getPanelToggleSelector = ( panelTitle ) => { - return `//div[contains(@class, "edit-post-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`; - }; - - expect( - await page.$x( getPanelToggleSelector( 'Categories' ) ) - ).toEqual( [] ); - expect( await page.$x( getPanelToggleSelector( 'Tags' ) ) ).toEqual( - [] - ); - expect( - await page.$x( getPanelToggleSelector( 'Featured image' ) ) - ).toEqual( [] ); - expect( await page.$x( getPanelToggleSelector( 'Excerpt' ) ) ).toEqual( - [] - ); - expect( - await page.$x( getPanelToggleSelector( 'Discussion' ) ) - ).toEqual( [] ); - expect( await page.$x( getPanelToggleSelector( 'Summary' ) ) ).toEqual( - [] - ); - } ); -} ); diff --git a/test/e2e/specs/editor/various/sidebar.spec.js b/test/e2e/specs/editor/various/sidebar.spec.js new file mode 100644 index 0000000000000..c1c9136a9afda --- /dev/null +++ b/test/e2e/specs/editor/various/sidebar.spec.js @@ -0,0 +1,136 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Sidebar', () => { + test.beforeAll( async ( { requestUtils } ) => { + // The test expects clean user preferences. + await requestUtils.resetPreferences(); + } ); + + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test( 'should have sidebar visible at the start with document sidebar active on desktop', async ( { + page, + pageUtils, + } ) => { + await pageUtils.setBrowserViewport( 'large' ); + + const activeTab = page + .getByRole( 'region', { + name: 'Editor settings', + } ) + .getByRole( 'tab', { selected: true } ); + + await expect( activeTab ).toBeVisible(); + await expect( activeTab ).toHaveText( 'Post' ); + } ); + + test( 'should have the sidebar closed by default on mobile', async ( { + page, + pageUtils, + } ) => { + await pageUtils.setBrowserViewport( 'small' ); + + await expect( + page.getByRole( 'region', { + name: 'Editor settings', + } ) + ).toBeHidden(); + } ); + + test( 'should close the sidebar when resizing from desktop to mobile', async ( { + page, + pageUtils, + } ) => { + await pageUtils.setBrowserViewport( 'large' ); + const settingsSideber = page.getByRole( 'region', { + name: 'Editor settings', + } ); + + await expect( settingsSideber ).toBeVisible(); + + await pageUtils.setBrowserViewport( 'small' ); + + // Sidebar should be closed when resizing to mobile. + await expect( settingsSideber ).toBeHidden(); + } ); + + test( 'should reopen sidebar the sidebar when resizing from mobile to desktop if the sidebar was closed automatically', async ( { + page, + pageUtils, + } ) => { + await pageUtils.setBrowserViewport( 'large' ); + await pageUtils.setBrowserViewport( 'small' ); + const settingsSideber = page.getByRole( 'region', { + name: 'Editor settings', + } ); + + await expect( settingsSideber ).toBeHidden(); + await pageUtils.setBrowserViewport( 'large' ); + await expect( settingsSideber ).toBeVisible(); + } ); + + test( 'should preserve tab order while changing active tab', async ( { + page, + pageUtils, + } ) => { + // Region navigate to Sidebar. + await pageUtils.pressKeys( 'ctrl+`' ); + + // Tab lands at first (presumed selected) option "Post". + await page.keyboard.press( 'Tab' ); + + const activeTab = page + .getByRole( 'region', { + name: 'Editor settings', + } ) + .getByRole( 'tab', { selected: true } ); + + // The Post tab should be focused and selected. + await expect( activeTab ).toHaveText( 'Post' ); + await expect( activeTab ).toBeFocused(); + + // Arrow key into and activate "Block". + await page.keyboard.press( 'ArrowRight' ); + await page.keyboard.press( 'Space' ); + + // The Block tab should be focused and selected. + await expect( activeTab ).toHaveText( 'Block' ); + await expect( activeTab ).toBeFocused(); + } ); + + test( 'should be possible to programmatically remove Document Settings panels', async ( { + page, + } ) => { + const documentSettingsPanels = page + .getByRole( 'tabpanel', { name: 'Post' } ) + .getByRole( 'heading', { level: 2 } ); + + await expect( documentSettingsPanels ).toHaveText( [ + 'Summary', + 'Categories', + 'Tags', + 'Featured image', + 'Excerpt', + 'Discussion', + ] ); + + await page.evaluate( () => { + const { removeEditorPanel } = + window.wp.data.dispatch( 'core/editor' ); + + removeEditorPanel( 'taxonomy-panel-category' ); + removeEditorPanel( 'taxonomy-panel-post_tag' ); + removeEditorPanel( 'featured-image' ); + removeEditorPanel( 'post-excerpt' ); + removeEditorPanel( 'discussion-panel' ); + removeEditorPanel( 'post-status' ); + } ); + + await expect( documentSettingsPanels ).toHaveCount( 0 ); + } ); +} );