diff --git a/packages/e2e-tests/plugins/block-icons/index.js b/packages/e2e-tests/plugins/block-icons/index.js index feb54e794598b7..5525c15179ad37 100644 --- a/packages/e2e-tests/plugins/block-icons/index.js +++ b/packages/e2e-tests/plugins/block-icons/index.js @@ -55,7 +55,7 @@ } ); registerBlockType( 'test/test-dash-icon', { - title: 'TestDashIcon', + title: 'TestSimpleDashIcon', icon: 'cart', category: 'text', diff --git a/packages/e2e-tests/specs/editor/plugins/block-icons.test.js b/packages/e2e-tests/specs/editor/plugins/block-icons.test.js deleted file mode 100644 index d70cf0e615753f..00000000000000 --- a/packages/e2e-tests/specs/editor/plugins/block-icons.test.js +++ /dev/null @@ -1,170 +0,0 @@ -/** - * WordPress dependencies - */ -import { - activatePlugin, - createNewPost, - deactivatePlugin, - insertBlock, - pressKeyWithModifier, - searchForBlock, - openDocumentSettingsSidebar, -} from '@wordpress/e2e-test-utils'; - -const INSERTER_BUTTON_SELECTOR = - '.block-editor-inserter__main-area .block-editor-block-types-list__item'; -const INSERTER_ICON_WRAPPER_SELECTOR = `${ INSERTER_BUTTON_SELECTOR } .block-editor-block-types-list__item-icon`; -const INSERTER_ICON_SELECTOR = `${ INSERTER_BUTTON_SELECTOR } .block-editor-block-icon`; -const INSPECTOR_ICON_SELECTOR = '.edit-post-sidebar .block-editor-block-icon'; - -async function getInnerHTML( selector ) { - return await page.$eval( selector, ( element ) => element.innerHTML ); -} - -async function getBackgroundColor( selector ) { - return await page.$eval( selector, ( element ) => { - return window.getComputedStyle( element ).backgroundColor; - } ); -} - -async function getColor( selector ) { - return await page.$eval( selector, ( element ) => { - return window.getComputedStyle( element ).color; - } ); -} - -async function getFirstInserterIcon() { - return await getInnerHTML( INSERTER_ICON_SELECTOR ); -} - -async function selectFirstBlock() { - await pressKeyWithModifier( 'access', 'o' ); - const navButtons = await page.$$( - '.block-editor-list-view-block-select-button' - ); - await navButtons[ 0 ].click(); -} - -describe( 'Correctly Renders Block Icons on Inserter and Inspector', () => { - const dashIconRegex = /.*?<\/span>/; - const circleString = - ''; - const svgIcon = new RegExp( - `${ circleString }` - ); - - const validateSvgIcon = ( iconHtml ) => { - expect( iconHtml ).toMatch( svgIcon ); - }; - - const validateDashIcon = ( iconHtml ) => { - expect( iconHtml ).toMatch( dashIconRegex ); - }; - - beforeAll( async () => { - await activatePlugin( 'gutenberg-test-block-icons' ); - } ); - - beforeEach( async () => { - await createNewPost(); - } ); - - afterAll( async () => { - await deactivatePlugin( 'gutenberg-test-block-icons' ); - } ); - - function testIconsOfBlock( blockName, blockTitle, validateIcon ) { - it( 'Renders correctly the icon in the inserter', async () => { - await searchForBlock( blockTitle ); - validateIcon( await getFirstInserterIcon() ); - } ); - - it( 'Can insert the block', async () => { - await insertBlock( blockTitle ); - expect( - await getInnerHTML( - `[data-type="${ blockName }"] [data-type="core/paragraph"]` - ) - ).toEqual( blockTitle ); - } ); - - it( 'Renders correctly the icon on the inspector', async () => { - await insertBlock( blockTitle ); - await openDocumentSettingsSidebar(); - await selectFirstBlock(); - validateIcon( await getInnerHTML( INSPECTOR_ICON_SELECTOR ) ); - } ); - } - - describe( 'Block with svg icon', () => { - const blockName = 'test/test-single-svg-icon'; - const blockTitle = 'TestSimpleSvgIcon'; - testIconsOfBlock( blockName, blockTitle, validateSvgIcon ); - } ); - - describe( 'Block with dash icon', () => { - const blockName = 'test/test-dash-icon'; - const blockTitle = 'TestDashIcon'; - testIconsOfBlock( blockName, blockTitle, validateDashIcon ); - } ); - - describe( 'Block with function icon', () => { - const blockName = 'test/test-function-icon'; - const blockTitle = 'TestFunctionIcon'; - testIconsOfBlock( blockName, blockTitle, validateSvgIcon ); - } ); - - describe( 'Block with dash icon and background and foreground colors', () => { - const blockTitle = 'TestDashIconColors'; - it( 'Renders the icon in the inserter with the correct colors', async () => { - await searchForBlock( blockTitle ); - validateDashIcon( await getFirstInserterIcon() ); - expect( - await getBackgroundColor( INSERTER_ICON_WRAPPER_SELECTOR ) - ).toEqual( 'rgb(1, 0, 0)' ); - expect( await getColor( INSERTER_ICON_WRAPPER_SELECTOR ) ).toEqual( - 'rgb(254, 0, 0)' - ); - } ); - - it( 'Renders the icon in the inspector with the correct colors', async () => { - await insertBlock( blockTitle ); - await openDocumentSettingsSidebar(); - await selectFirstBlock(); - validateDashIcon( await getInnerHTML( INSPECTOR_ICON_SELECTOR ) ); - expect( - await getBackgroundColor( INSPECTOR_ICON_SELECTOR ) - ).toEqual( 'rgb(1, 0, 0)' ); - expect( await getColor( INSPECTOR_ICON_SELECTOR ) ).toEqual( - 'rgb(254, 0, 0)' - ); - } ); - } ); - - describe( 'Block with svg icon and background color', () => { - const blockTitle = 'TestSvgIconBackground'; - it( 'Renders the icon in the inserter with the correct background color and an automatically compute readable foreground color', async () => { - await searchForBlock( blockTitle ); - validateSvgIcon( await getFirstInserterIcon() ); - expect( - await getBackgroundColor( INSERTER_ICON_WRAPPER_SELECTOR ) - ).toEqual( 'rgb(1, 0, 0)' ); - expect( await getColor( INSERTER_ICON_WRAPPER_SELECTOR ) ).toEqual( - 'rgb(248, 249, 249)' - ); - } ); - - it( 'Renders correctly the icon on the inspector', async () => { - await insertBlock( blockTitle ); - await openDocumentSettingsSidebar(); - await selectFirstBlock(); - validateSvgIcon( await getInnerHTML( INSPECTOR_ICON_SELECTOR ) ); - expect( - await getBackgroundColor( INSPECTOR_ICON_SELECTOR ) - ).toEqual( 'rgb(1, 0, 0)' ); - expect( await getColor( INSPECTOR_ICON_SELECTOR ) ).toEqual( - 'rgb(248, 249, 249)' - ); - } ); - } ); -} ); diff --git a/test/e2e/specs/editor/plugins/block-icons.spec.js b/test/e2e/specs/editor/plugins/block-icons.spec.js new file mode 100644 index 00000000000000..0418f4200afc05 --- /dev/null +++ b/test/e2e/specs/editor/plugins/block-icons.spec.js @@ -0,0 +1,228 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +const dashIconRegex = /.*?<\/span>/; +const circleString = + ''; +const svgIcon = new RegExp( + `${ circleString }` +); + +test.describe( 'Block Icons', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( 'gutenberg-test-block-icons' ); + } ); + + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.deactivatePlugin( 'gutenberg-test-block-icons' ); + } ); + + test( 'Block with svg icon', async ( { editor, page } ) => { + await page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + await blockLibrary.getByRole( 'searchbox' ).fill( 'TestSimpleSvgIcon' ); + + const blockOption = blockLibrary.getByRole( 'option', { + name: 'TestSimpleSvgIcon', + } ); + const blockIcon = blockOption.locator( '.block-editor-block-icon' ); + + // Renders correctly the icon in the inserter. + await expect.poll( () => blockIcon.innerHTML() ).toMatch( svgIcon ); + + // Can insert the block. + await blockOption.click(); + await expect( + page.getByRole( 'document', { name: 'Block: TestSimpleSvgIcon' } ) + ).toBeVisible(); + + // Renders correctly the icon on the inspector. + await editor.openDocumentSettingsSidebar(); + const inspectorIcon = page + .getByRole( 'region', { name: 'Editor settings' } ) + .locator( '.block-editor-block-icon' ); + await expect.poll( () => inspectorIcon.innerHTML() ).toMatch( svgIcon ); + } ); + + test( 'Block with dash icon', async ( { editor, page } ) => { + await page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + await blockLibrary + .getByRole( 'searchbox' ) + .fill( 'TestSimpleDashIcon' ); + + const blockOption = blockLibrary.getByRole( 'option', { + name: 'TestSimpleDashIcon', + } ); + const blockIcon = blockOption.locator( '.block-editor-block-icon' ); + + // Renders correctly the icon in the inserter. + await expect + .poll( () => blockIcon.innerHTML() ) + .toMatch( dashIconRegex ); + + // Can insert the block + await blockOption.click(); + await expect( + page.getByRole( 'document', { name: 'Block: TestSimpleDashIcon' } ) + ).toBeVisible(); + + // Renders correctly the icon on the inspector. + await editor.openDocumentSettingsSidebar(); + const inspectorIcon = page + .getByRole( 'region', { name: 'Editor settings' } ) + .locator( '.block-editor-block-icon' ); + await expect + .poll( () => inspectorIcon.innerHTML() ) + .toMatch( dashIconRegex ); + } ); + + test( 'Block with function icon', async ( { editor, page } ) => { + await page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + await blockLibrary.getByRole( 'searchbox' ).fill( 'TestFunctionIcon' ); + + const blockOption = blockLibrary.getByRole( 'option', { + name: 'TestFunctionIcon', + } ); + const blockIcon = blockOption.locator( '.block-editor-block-icon' ); + + // Renders correctly the icon in the inserter. + await expect.poll( () => blockIcon.innerHTML() ).toMatch( svgIcon ); + + // Can insert the block. + await blockOption.click(); + await expect( + page.getByRole( 'document', { name: 'Block: TestFunctionIcon' } ) + ).toBeVisible(); + + // Renders correctly the icon on the inspector. + await editor.openDocumentSettingsSidebar(); + const inspectorIcon = page + .getByRole( 'region', { name: 'Editor settings' } ) + .locator( '.block-editor-block-icon' ); + await expect.poll( () => inspectorIcon.innerHTML() ).toMatch( svgIcon ); + } ); + + test( 'Block with dash icon and background/foreground colors', async ( { + editor, + page, + } ) => { + await page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + await blockLibrary + .getByRole( 'searchbox' ) + .fill( 'TestDashIconColors' ); + + const blockOption = blockLibrary.getByRole( 'option', { + name: 'TestDashIconColors', + } ); + const blockIcon = blockOption.locator( '.block-editor-block-icon' ); + + await expect( blockIcon ).toHaveCSS( + 'background-color', + 'rgb(1, 0, 0)' + ); + await expect( blockIcon ).toHaveCSS( 'color', 'rgb(254, 0, 0)' ); + await expect + .poll( () => blockIcon.innerHTML() ) + .toMatch( dashIconRegex ); + + await blockOption.click(); + await editor.openDocumentSettingsSidebar(); + + const inspectorIcon = page + .getByRole( 'region', { name: 'Editor settings' } ) + .locator( '.block-editor-block-icon' ); + + await expect( inspectorIcon ).toHaveCSS( + 'background-color', + 'rgb(1, 0, 0)' + ); + await expect( inspectorIcon ).toHaveCSS( 'color', 'rgb(254, 0, 0)' ); + await expect + .poll( () => inspectorIcon.innerHTML() ) + .toMatch( dashIconRegex ); + } ); + + test( 'Block with svg icon and background should compute a readable foreground color', async ( { + editor, + page, + } ) => { + await page + .getByRole( 'toolbar', { name: 'Document tools' } ) + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + + const blockLibrary = page.getByRole( 'region', { + name: 'Block Library', + } ); + + await blockLibrary + .getByRole( 'searchbox' ) + .fill( 'TestSvgIconBackground' ); + + const blockOption = blockLibrary.getByRole( 'option', { + name: 'TestSvgIconBackground', + } ); + const blockIcon = blockOption.locator( '.block-editor-block-icon' ); + + await expect( blockIcon ).toHaveCSS( + 'background-color', + 'rgb(1, 0, 0)' + ); + await expect( blockIcon ).toHaveCSS( 'color', 'rgb(248, 249, 249)' ); + await expect.poll( () => blockIcon.innerHTML() ).toMatch( svgIcon ); + + await blockOption.click(); + await editor.openDocumentSettingsSidebar(); + + const inspectorIcon = page + .getByRole( 'region', { name: 'Editor settings' } ) + .locator( '.block-editor-block-icon' ); + + await expect( inspectorIcon ).toHaveCSS( + 'background-color', + 'rgb(1, 0, 0)' + ); + await expect( inspectorIcon ).toHaveCSS( + 'color', + 'rgb(248, 249, 249)' + ); + await expect.poll( () => inspectorIcon.innerHTML() ).toMatch( svgIcon ); + } ); +} );