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',
+ },
+ },
+ ],
+ },
+ ] );
+ } );
+} );