From 2ee09de65f23d0de7cec088fdfe8b0ab9d933da0 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 4 Aug 2023 09:37:43 +0400 Subject: [PATCH] Migrate 'Block variations' e2e tests to Playwright (#53266) * Migrate 'Block variations' e2e tests to Playwright * Delete old test file * Ensure document settings is open --- .../editor/plugins/block-variations.test.js | 191 --------------- .../editor/plugins/block-variations.spec.js | 220 ++++++++++++++++++ 2 files changed, 220 insertions(+), 191 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/plugins/block-variations.test.js create mode 100644 test/e2e/specs/editor/plugins/block-variations.spec.js diff --git a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js b/packages/e2e-tests/specs/editor/plugins/block-variations.test.js deleted file mode 100644 index 4a24cd3f478d2..0000000000000 --- a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js +++ /dev/null @@ -1,191 +0,0 @@ -/** - * WordPress dependencies - */ -import { - activatePlugin, - createNewPost, - deactivatePlugin, - insertBlock, - searchForBlock, - pressKeyWithModifier, - openDocumentSettingsSidebar, - togglePreferencesOption, - toggleMoreMenu, - canvas, -} from '@wordpress/e2e-test-utils'; - -describe( 'Block variations', () => { - beforeAll( async () => { - await activatePlugin( 'gutenberg-test-block-variations' ); - } ); - - beforeEach( async () => { - await createNewPost(); - } ); - - afterAll( async () => { - await deactivatePlugin( 'gutenberg-test-block-variations' ); - } ); - - const expectInserterItem = async ( blockTitle ) => { - const inserterItem = await page.$x( - `//button[contains(@class, 'block-editor-block-types-list__item')]//span[text()="${ blockTitle }"]` - ); - expect( inserterItem ).toBeDefined(); - expect( inserterItem ).toHaveLength( 1 ); - }; - - test( 'Search for the overridden default Quote block', async () => { - await searchForBlock( 'Quote' ); - - expect( await page.$( '.editor-block-list-item-quote' ) ).toBeNull(); - expectInserterItem( 'Large Quote' ); - } ); - - test( 'Insert the overridden default Quote block variation', async () => { - await insertBlock( 'Large Quote' ); - - expect( - await canvas().$( - '.wp-block[data-type="core/quote"] blockquote.is-style-large' - ) - ).toBeDefined(); - } ); - - test( 'Insert the Large Quote block variation with slash command', async () => { - await insertBlock( 'Paragraph' ); - - await page.keyboard.type( '/large' ); - await page.keyboard.press( 'Enter' ); - - expect( - await canvas().$( - '.wp-block[data-type="core/quote"] blockquote.is-style-large' - ) - ).toBeDefined(); - } ); - - test( 'Search for the Paragraph block with 2 additional variations', async () => { - await searchForBlock( 'Paragraph' ); - - expectInserterItem( 'Paragraph' ); - expectInserterItem( 'Success Message' ); - expectInserterItem( 'Warning Message' ); - } ); - - test( 'Insert the Success Message block variation', async () => { - await insertBlock( 'Success Message' ); - - const successMessageBlock = await canvas().$( - '.wp-block[data-type="core/paragraph"]' - ); - expect( successMessageBlock ).toBeDefined(); - expect( - await successMessageBlock.evaluate( ( node ) => node.innerText ) - ).toBe( 'This is a success message!' ); - } ); - test( 'Pick the additional variation in the inserted Columns block', async () => { - await insertBlock( 'Columns' ); - - const fourColumnsVariation = await canvas().waitForSelector( - '.wp-block[data-type="core/columns"] .block-editor-block-variation-picker__variation[aria-label="Four columns"]' - ); - await fourColumnsVariation.click(); - expect( - await canvas().$$( - '.wp-block[data-type="core/columns"] .wp-block[data-type="core/column"]' - ) - ).toHaveLength( 4 ); - } ); - // @see @wordpres/block-editor/src/components/use-block-display-information (`useBlockDisplayInformation` hook). - describe( 'testing block display information with matching variations', () => { - beforeEach( async () => { - await togglePreferencesOption( - 'General', - 'Display block breadcrumbs', - true - ); - await toggleMoreMenu( 'close' ); - } ); - - afterEach( async () => { - await togglePreferencesOption( - 'General', - 'Display block breadcrumbs', - false - ); - await toggleMoreMenu( 'close' ); - } ); - - const getActiveBreadcrumb = async () => - page.evaluate( - () => - document.querySelector( - '.block-editor-block-breadcrumb__current' - ).textContent - ); - const getFirstNavigationItem = async () => { - await pressKeyWithModifier( 'access', 'o' ); - // This also returns the visually hidden text `(selected block)`. - // For example `Paragraph(selected block)`. In order to hide this - // implementation detail and search for childNodes, we choose to - // test with `String.prototype.startsWith()`. - return page.evaluate( - () => - document.querySelector( - '.block-editor-list-view-block-select-button' - ).textContent - ); - }; - const getBlockCardDescription = async () => { - await openDocumentSettingsSidebar(); - return page.evaluate( - () => - document.querySelector( - '.block-editor-block-card__description' - ).textContent - ); - }; - - it( 'should show block information when no matching variation is found', async () => { - await insertBlock( 'Large Quote' ); - // Select the quote block. - await page.keyboard.press( 'ArrowDown' ); - const breadcrumb = await getActiveBreadcrumb(); - expect( breadcrumb ).toEqual( 'Quote' ); - const navigationItem = await getFirstNavigationItem(); - expect( navigationItem.startsWith( 'Quote' ) ).toBeTruthy(); - const description = await getBlockCardDescription(); - expect( description ).toEqual( - 'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar' - ); - } ); - it( 'should display variations info if all declared', async () => { - await insertBlock( 'Success Message' ); - const breadcrumb = await getActiveBreadcrumb(); - expect( breadcrumb ).toEqual( 'Success Message' ); - const navigationItem = await getFirstNavigationItem(); - expect( - navigationItem.startsWith( 'Success Message' ) - ).toBeTruthy(); - const description = await getBlockCardDescription(); - expect( description ).toEqual( - 'This block displays a success message. This description overrides the default one provided for the Paragraph block.' - ); - } ); - it( 'should display mixed block and variation match information', async () => { - // Warning Message variation is missing the `description`. - await insertBlock( 'Warning Message' ); - const breadcrumb = await getActiveBreadcrumb(); - expect( breadcrumb ).toEqual( 'Warning Message' ); - const navigationItem = await getFirstNavigationItem(); - expect( - navigationItem.startsWith( 'Warning Message' ) - ).toBeTruthy(); - const description = await getBlockCardDescription(); - expect( description ).toEqual( - 'Start with the basic building block of all narrative.' - ); - } ); - } ); -} ); diff --git a/test/e2e/specs/editor/plugins/block-variations.spec.js b/test/e2e/specs/editor/plugins/block-variations.spec.js new file mode 100644 index 0000000000000..302bac732023c --- /dev/null +++ b/test/e2e/specs/editor/plugins/block-variations.spec.js @@ -0,0 +1,220 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Block variations', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( 'gutenberg-test-block-variations' ); + } ); + + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.deactivatePlugin( + 'gutenberg-test-block-variations' + ); + } ); + + test( 'Search for the overridden default Quote block', async ( { + page, + } ) => { + await page + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + + await page + .getByRole( 'region', { name: 'Block Library' } ) + .getByRole( 'searchbox', { + name: 'Search for blocks and patterns', + } ) + .fill( 'Quote' ); + + await expect( + page + .getByRole( 'listbox', { name: 'Blocks' } ) + .getByRole( 'option', { name: 'Quote', exact: true } ) + ).toBeHidden(); + await expect( + page + .getByRole( 'listbox', { name: 'Blocks' } ) + .getByRole( 'option', { name: 'Large Quote' } ) + ).toBeVisible(); + } ); + + test( 'Insert the overridden default Quote block variation', async ( { + editor, + page, + } ) => { + await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '/Large Quote' ); + await page.keyboard.press( 'Enter' ); + + await expect( + editor.canvas.getByRole( 'document', { name: 'Block: Quote' } ) + ).toHaveClass( /is-style-large/ ); + } ); + + test( 'Search for the Paragraph block with 2 additional variations', async ( { + page, + } ) => { + await page + .getByRole( 'button', { name: 'Toggle block inserter' } ) + .click(); + + await page + .getByRole( 'region', { name: 'Block Library' } ) + .getByRole( 'searchbox', { + name: 'Search for blocks and patterns', + } ) + .fill( 'Paragraph' ); + + await expect( + page + .getByRole( 'listbox', { name: 'Blocks' } ) + .getByRole( 'option' ) + ).toHaveText( [ 'Paragraph', 'Success Message', 'Warning Message' ] ); + } ); + + test( 'Insert the Success Message block variation', async ( { + editor, + page, + } ) => { + await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '/Heading' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '/Success Message' ); + await page.keyboard.press( 'Enter' ); + + await expect( + editor.canvas.getByRole( 'document', { name: 'Paragraph block' } ) + ).toHaveText( 'This is a success message!' ); + } ); + + test( 'Pick the additional variation in the inserted Columns block', async ( { + editor, + page, + } ) => { + await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '/Columns' ); + await page.keyboard.press( 'Enter' ); + + await editor.canvas + .getByRole( 'list', { name: 'Block variations' } ) + .getByRole( 'button', { name: 'Four columns' } ) + .click(); + + await expect( + editor.canvas + .getByRole( 'document', { name: 'Block: Columns' } ) + .getByRole( 'document' ) + ).toHaveCount( 4 ); + } ); + + // Tests the `useBlockDisplayInformation` hook. + test( 'should show block information when no matching variation is found', async ( { + editor, + page, + pageUtils, + } ) => { + await editor.openDocumentSettingsSidebar(); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '/Large Quote' ); + await page.keyboard.press( 'Enter' ); + + // Select the quote block. + await page.keyboard.press( 'ArrowDown' ); + + await expect( + page + .getByRole( 'list', { name: 'Block breadcrumb' } ) + .getByRole( 'listitem' ) + .filter( { hasText: 'Quote' } ) + ).toHaveAttribute( 'aria-current', 'true' ); + + await pageUtils.pressKeys( 'access+o' ); + + await expect( + page + .getByRole( 'treegrid', { name: 'Block navigation structure' } ) + .getByRole( 'link' ) + ).toHaveText( 'Quote' ); + + await expect( + page.locator( '.block-editor-block-card__description' ) + ).toHaveText( + 'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar' + ); + } ); + + test( 'should display variations info if all declared', async ( { + editor, + page, + pageUtils, + } ) => { + await editor.openDocumentSettingsSidebar(); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '/Heading' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '/Success Message' ); + await page.keyboard.press( 'Enter' ); + + await expect( + page + .getByRole( 'list', { name: 'Block breadcrumb' } ) + .getByRole( 'listitem' ) + .filter( { hasText: 'Success Message' } ) + ).toHaveAttribute( 'aria-current', 'true' ); + + await pageUtils.pressKeys( 'access+o' ); + + await expect( + page + .getByRole( 'treegrid', { name: 'Block navigation structure' } ) + .getByRole( 'link' ) + ).toHaveText( 'Success Message' ); + + await expect( + page.locator( '.block-editor-block-card__description' ) + ).toHaveText( + 'This block displays a success message. This description overrides the default one provided for the Paragraph block.' + ); + } ); + + test( 'should display mixed block and variation match information', async ( { + editor, + page, + pageUtils, + } ) => { + await editor.openDocumentSettingsSidebar(); + await editor.canvas.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '/Heading' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( '/Warning Message' ); + await page.keyboard.press( 'Enter' ); + + await expect( + page + .getByRole( 'list', { name: 'Block breadcrumb' } ) + .getByRole( 'listitem' ) + .filter( { hasText: 'Warning Message' } ) + ).toHaveAttribute( 'aria-current', 'true' ); + + await pageUtils.pressKeys( 'access+o' ); + + await expect( + page + .getByRole( 'treegrid', { + name: 'Block navigation structure', + } ) + .getByRole( 'link' ) + ).toHaveText( 'Warning Message' ); + + // Warning Message variation is missing the `description`. + await expect( + page.locator( '.block-editor-block-card__description' ) + ).toHaveText( 'Start with the basic building block of all narrative.' ); + } ); +} );