diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/align-hook.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/align-hook.test.js.snap deleted file mode 100644 index 6c04d30c41be9d..00000000000000 --- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/align-hook.test.js.snap +++ /dev/null @@ -1,43 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Align Hook Works As Expected Block with align array Correctly applies the selected alignment and correctly removes the alignment 1`] = ` -" -
Test Align Hook
-" -`; - -exports[`Align Hook Works As Expected Block with align array Correctly applies the selected alignment and correctly removes the alignment 2`] = ` -" -
Test Align Hook
-" -`; - -exports[`Align Hook Works As Expected Block with align true Correctly applies the selected alignment and correctly removes the alignment 1`] = ` -" -
Test Align Hook
-" -`; - -exports[`Align Hook Works As Expected Block with align true Correctly applies the selected alignment and correctly removes the alignment 2`] = ` -" -
Test Align Hook
-" -`; - -exports[`Align Hook Works As Expected Block with default align Correctly applies the selected alignment and correctly removes the alignment 1`] = ` -" -
Test Align Hook
-" -`; - -exports[`Align Hook Works As Expected Block with default align Correctly applies the selected alignment and correctly removes the alignment 2`] = ` -" -
Test Align Hook
-" -`; - -exports[`Align Hook Works As Expected Block with no alignment set Does not save any alignment related attribute or class 1`] = ` -" -
Test Align Hook
-" -`; diff --git a/packages/e2e-tests/specs/editor/plugins/align-hook.test.js b/packages/e2e-tests/specs/editor/plugins/align-hook.test.js deleted file mode 100644 index 9246144d810e08..00000000000000 --- a/packages/e2e-tests/specs/editor/plugins/align-hook.test.js +++ /dev/null @@ -1,234 +0,0 @@ -/** - * WordPress dependencies - */ -import { - activatePlugin, - createNewPost, - deactivatePlugin, - getAllBlocks, - getEditedPostContent, - insertBlock, - selectBlockByClientId, - setPostContent, - clickBlockToolbarButton, -} from '@wordpress/e2e-test-utils'; - -const alignLabels = { - none: 'None', - left: 'Align left', - center: 'Align center', - right: 'Align right', - wide: 'Wide width', - full: 'Full width', -}; - -/** - * Helper function to get the `labels` of align control. It actually evaluates the - * basic label of the button without the `info` text node if exists. - * - * @param {Object} options Options for the util function - * @param {boolean} [options.getActiveButtonLabels=false] Flag for returning the active buttons labels only. - * @return {string[]} The matched labels. - */ -const getAlignmentToolbarLabels = async ( { - getActiveButtonLabels = false, -} = {} ) => { - const selector = `.components-dropdown-menu__menu button${ - getActiveButtonLabels ? '.is-active' : '' - } .components-menu-item__item`; - return page.evaluate( ( _selector ) => { - return ( - Array.from( document.querySelectorAll( _selector ) ) - /** - * We neede this for now because conditionally there could be two nodes - * with the same class(). This should be removed when the following - * issue is resolved. - * - * @see https://github.com/WordPress/gutenberg/issues/34838 - */ - .filter( ( contentNode ) => ! contentNode.childElementCount ) - .map( ( contentNode ) => { - return contentNode.innerText; - } ) - ); - }, selector ); -}; - -const expectActiveButtonLabelToBe = async ( expected ) => { - await clickBlockToolbarButton( 'Align' ); - const activeButtonLabels = await getAlignmentToolbarLabels( { - getActiveButtonLabels: true, - } ); - expect( activeButtonLabels ).toHaveLength( 1 ); - expect( activeButtonLabels[ 0 ] ).toEqual( expected ); -}; - -const createShowsTheExpectedButtonsTest = ( blockName, buttonLabels ) => { - it( 'Shows the expected buttons on the alignment toolbar', async () => { - await insertBlock( blockName ); - await clickBlockToolbarButton( 'Align' ); - expect( await getAlignmentToolbarLabels() ).toEqual( - expect.arrayContaining( buttonLabels ) - ); - } ); -}; - -const createAppliesNoneAlignmentByDefaultTest = ( blockName ) => { - it( 'applies none alignment by default', async () => { - await insertBlock( blockName ); - await expectActiveButtonLabelToBe( alignLabels.none ); - } ); -}; - -const verifyMarkupIsValid = async ( htmlMarkup ) => { - await setPostContent( htmlMarkup ); - const blocks = await getAllBlocks(); - expect( blocks ).toHaveLength( 1 ); - expect( blocks[ 0 ].isValid ).toBeTruthy(); -}; - -const createCorrectlyAppliesAndRemovesAlignmentTest = ( - blockName, - alignment -) => { - it( 'Correctly applies the selected alignment and correctly removes the alignment', async () => { - const BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), '${ alignLabels[ alignment ] }')]`; - - // Set the specified alignment. - await insertBlock( blockName ); - await clickBlockToolbarButton( 'Align' ); - await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click(); - - // Verify the button of the specified alignment is pressed. - await expectActiveButtonLabelToBe( alignLabels[ alignment ] ); - - let htmlMarkup = await getEditedPostContent(); - - // Verify the markup of the selected alignment was generated. - expect( htmlMarkup ).toMatchSnapshot(); - - // Verify the markup can be correctly parsed. - await verifyMarkupIsValid( htmlMarkup ); - - await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId ); - - // Remove the alignment. - await clickBlockToolbarButton( 'Align' ); - await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click(); - - // Verify 'none' alignment button is in pressed state. - await expectActiveButtonLabelToBe( alignLabels.none ); - - // Verify alignment markup was removed from the block. - htmlMarkup = await getEditedPostContent(); - expect( htmlMarkup ).toMatchSnapshot(); - - // verify the markup when no alignment is set is valid - await verifyMarkupIsValid( htmlMarkup ); - - await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId ); - - // Verify alignment `none` button is in pressed state after parsing the block. - await expectActiveButtonLabelToBe( alignLabels.none ); - } ); -}; - -describe( 'Align Hook Works As Expected', () => { - beforeAll( async () => { - await activatePlugin( 'gutenberg-test-align-hook' ); - } ); - - beforeEach( async () => { - await createNewPost(); - } ); - - afterAll( async () => { - await deactivatePlugin( 'gutenberg-test-align-hook' ); - } ); - - describe( 'Block with no alignment set', () => { - const BLOCK_NAME = 'Test No Alignment Set'; - it( 'Shows no alignment buttons on the alignment toolbar', async () => { - await insertBlock( BLOCK_NAME ); - const CHANGE_ALIGNMENT_BUTTON_SELECTOR = - '.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Align"]'; - const changeAlignmentButton = await page.$( - CHANGE_ALIGNMENT_BUTTON_SELECTOR - ); - expect( changeAlignmentButton ).toBe( null ); - } ); - - it( 'Does not save any alignment related attribute or class', async () => { - await insertBlock( BLOCK_NAME ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - } ); - - describe( 'Block with align true', () => { - const BLOCK_NAME = 'Test Align True'; - - createShowsTheExpectedButtonsTest( - BLOCK_NAME, - Object.values( alignLabels ) - ); - - createAppliesNoneAlignmentByDefaultTest( BLOCK_NAME ); - - createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'right' ); - } ); - - describe( 'Block with align array', () => { - const BLOCK_NAME = 'Test Align Array'; - - createShowsTheExpectedButtonsTest( BLOCK_NAME, [ - alignLabels.none, - alignLabels.left, - alignLabels.center, - ] ); - - createAppliesNoneAlignmentByDefaultTest( BLOCK_NAME ); - - createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'center' ); - } ); - - describe( 'Block with default align', () => { - const BLOCK_NAME = 'Test Default Align'; - const SELECTED_ALIGNMENT_CONTROL_SELECTOR = - '//div[contains(@class, "components-dropdown-menu__menu")]//button[contains(@class, "is-active")]/span[text()="Align right"]'; - createShowsTheExpectedButtonsTest( - BLOCK_NAME, - Object.values( alignLabels ) - ); - - it( 'Applies the selected alignment by default', async () => { - await insertBlock( BLOCK_NAME ); - // Verify the correct alignment button is pressed. - await clickBlockToolbarButton( 'Align' ); - const selectedAlignmentControls = await page.$x( - SELECTED_ALIGNMENT_CONTROL_SELECTOR - ); - expect( selectedAlignmentControls ).toHaveLength( 1 ); - } ); - - it( 'The default markup does not contain the alignment attribute but contains the alignment class', async () => { - await insertBlock( BLOCK_NAME ); - const markup = await getEditedPostContent(); - expect( markup ).not.toContain( '"align":"right"' ); - expect( markup ).toContain( 'alignright' ); - } ); - - it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => { - await insertBlock( BLOCK_NAME ); - // Remove the alignment. - await clickBlockToolbarButton( 'Align' ); - const [ selectedAlignmentControl ] = await page.$x( - SELECTED_ALIGNMENT_CONTROL_SELECTOR - ); - await selectedAlignmentControl.click(); - const markup = await getEditedPostContent(); - expect( markup ).toContain( '"align":""' ); - } ); - - createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'center' ); - } ); -} );