From ac17761ffb20e4333badef7eca5684ab66ccfb7c Mon Sep 17 00:00:00 2001 From: Pooja Killekar <41000648+pooja-muchandikar@users.noreply.github.com> Date: Tue, 2 May 2023 07:56:18 +0530 Subject: [PATCH] Migrate Keep Transform Block Test Case to Playwright (#49719) * Migrate Keep Transform Block Test Case to Playwright * Update test case as CI was failing * Addressed Feedbacks * Fix stylelint issue * Update test case * Address feedbacks * Address feedbacks * Addressed feedbacks --- ...ep-styles-on-block-transforms.test.js.snap | 29 ------ .../keep-styles-on-block-transforms.test.js | 64 ------------ .../keep-styles-on-block-transforms.spec.js | 99 +++++++++++++++++++ 3 files changed, 99 insertions(+), 93 deletions(-) delete mode 100644 packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap delete mode 100644 packages/e2e-tests/specs/editor/various/keep-styles-on-block-transforms.test.js create mode 100644 test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap deleted file mode 100644 index 45aaa187a2206..0000000000000 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap +++ /dev/null @@ -1,29 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Keep styles on block transforms Should keep colors during a transform 1`] = ` -" -

Heading

-" -`; - -exports[`Keep styles on block transforms Should keep the font size during a transform from multiple blocks into multiple blocks 1`] = ` -" -

Line 1 to be made large

- - - -

Line 2 to be made large

- - - -

Line 3 to be made large

-" -`; - -exports[`Keep styles on block transforms Should not include styles in the group block when grouping a block 1`] = ` -" -
-

Line 1 to be made large

-
-" -`; diff --git a/packages/e2e-tests/specs/editor/various/keep-styles-on-block-transforms.test.js b/packages/e2e-tests/specs/editor/various/keep-styles-on-block-transforms.test.js deleted file mode 100644 index 56b2ea6263d92..0000000000000 --- a/packages/e2e-tests/specs/editor/various/keep-styles-on-block-transforms.test.js +++ /dev/null @@ -1,64 +0,0 @@ -/** - * WordPress dependencies - */ -import { - clickBlockAppender, - createNewPost, - getEditedPostContent, - pressKeyWithModifier, - transformBlockTo, -} from '@wordpress/e2e-test-utils'; - -describe( 'Keep styles on block transforms', () => { - beforeEach( async () => { - await createNewPost(); - } ); - - it( 'Should keep colors during a transform', async () => { - await clickBlockAppender(); - await page.keyboard.type( '## Heading' ); - - const textColorButton = await page.waitForSelector( - '.block-editor-panel-color-gradient-settings__dropdown' - ); - await textColorButton.click(); - - const colorButtonSelector = `//button[@aria-label='Color: Luminous vivid orange']`; - const [ colorButton ] = await page.$x( colorButtonSelector ); - await colorButton.click(); - await page.waitForXPath( - `${ colorButtonSelector }[@aria-pressed='true']` - ); - await page.click( 'h2[data-type="core/heading"]' ); - await transformBlockTo( 'Paragraph' ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'Should keep the font size during a transform from multiple blocks into multiple blocks', async () => { - // Create a paragraph block with some content. - await clickBlockAppender(); - await page.keyboard.type( 'Line 1 to be made large' ); - await page.keyboard.press( 'Enter' ); - await page.keyboard.type( 'Line 2 to be made large' ); - await page.keyboard.press( 'Enter' ); - await page.keyboard.type( 'Line 3 to be made large' ); - await pressKeyWithModifier( 'shift', 'ArrowUp' ); - await pressKeyWithModifier( 'shift', 'ArrowUp' ); - await page.click( - '[role="radiogroup"][aria-label="Font size"] [aria-label="Large"]' - ); - await transformBlockTo( 'Heading' ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); - - it( 'Should not include styles in the group block when grouping a block', async () => { - // Create a paragraph block with some content. - await clickBlockAppender(); - await page.keyboard.type( 'Line 1 to be made large' ); - await page.click( - '[role="radiogroup"][aria-label="Font size"] [aria-label="Large"]' - ); - await transformBlockTo( 'Group' ); - expect( await getEditedPostContent() ).toMatchSnapshot(); - } ); -} ); diff --git a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js new file mode 100644 index 0000000000000..2c07a15bcca90 --- /dev/null +++ b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js @@ -0,0 +1,99 @@ +/** + * WordPress dependencies + */ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Keep styles on block transforms', () => { + test.beforeEach( async ( { admin } ) => { + await admin.createNewPost(); + } ); + + test( 'Should keep colors during a transform', async ( { + page, + editor, + } ) => { + await page.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( '## Heading' ); + await editor.openDocumentSettingsSidebar(); + await page.click( 'role=button[name="Text"i]' ); + await page.click( 'role=button[name="Color: Luminous vivid orange"i]' ); + + await page.click( 'role=button[name="Heading"i]' ); + await page.click( 'role=menuitem[name="Paragraph"i]' ); + + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/paragraph', + attributes: { + content: 'Heading', + textColor: 'luminous-vivid-orange', + }, + }, + ] ); + } ); + + test( 'Should keep the font size during a transform from multiple blocks into multiple blocks', async ( { + page, + pageUtils, + editor, + } ) => { + // Create a paragraph block with some content. + await page.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( 'Line 1 to be made large' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( 'Line 2 to be made large' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( 'Line 3 to be made large' ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); + await pageUtils.pressKeys( 'shift+ArrowUp' ); + await page.click( 'role=radio[name="Large"i]' ); + await page.click( 'role=button[name="Paragraph"i]' ); + await page.click( 'role=menuitem[name="Heading"i]' ); + + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/heading', + attributes: { fontSize: 'large' }, + }, + { + name: 'core/heading', + attributes: { fontSize: 'large' }, + }, + { + name: 'core/heading', + attributes: { fontSize: 'large' }, + }, + ] ); + } ); + + test( 'Should not include styles in the group block when grouping a block', async ( { + page, + editor, + } ) => { + // Create a paragraph block with some content. + await page.click( 'role=button[name="Add default block"i]' ); + await page.keyboard.type( 'Line 1 to be made large' ); + await page.click( 'role=radio[name="Large"i]' ); + await editor.showBlockToolbar(); + await page.click( 'role=button[name="Paragraph"i]' ); + await page.click( 'role=menuitem[name="Group"i]' ); + + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/group', + attributes: expect.not.objectContaining( { + fontSize: 'large', + } ), + innerBlocks: [ + { + name: 'core/paragraph', + attributes: { + content: 'Line 1 to be made large', + fontSize: 'large', + }, + }, + ], + }, + ] ); + } ); +} );