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

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