[E2E tests]: Add product description using the block editor (#50232)

* Add product description

* Add changelog

* Add changelog

* Always use same label for ToolbarItem

packages/js/product-editor/changelog/add-50231_e2e_description_using_block_editor

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+[E2E tests]: Add aria-expanded and rename ToolbarItem label #50232

packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx

@@ -142,11 +142,11 @@ export function HeaderToolbar( {
 							onClick={ toggleInserter }
 							disabled={ ! isInserterEnabled }
 							icon={ plus }
-							label={
+							label={ __(
-								! isInserterOpened
+								'Toggle block inserter',
-									? __( 'Add', 'woocommerce' )
+								'woocommerce'
-									: __( 'Close', 'woocommerce' )
+							) }
-							}
+							aria-expanded={ isInserterOpened }
 							showTooltip
 						/>
 						{ isLargeViewport && (

plugins/woocommerce/changelog/add-50231_e2e_description_using_block_editor

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+[E2E tests]: Add product description using the block editor #50232

plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-simple-product-block-editor.spec.js

@@ -2,6 +2,10 @@ const { test } = require( '../../../../fixtures/block-editor-fixtures' );
 const { expect } = require( '@playwright/test' );
 
 const { clickOnTab } = require( '../../../../utils/simple-products' );
+const {
+	getInstalledWordPressVersion,
+} = require( '../../../../utils/wordpress' );
+const { insertBlock } = require( '../../../../utils/editor' );
 
 const NEW_EDITOR_ADD_PRODUCT_URL =
 	'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product';
@@ -11,6 +15,9 @@ const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
 const productData = {
 	name: `Simple product Name ${ new Date().getTime().toString() }`,
 	summary: 'This is a product summary',
+	descriptionTitle: 'Product Description title',
+	descriptionParagraph: 'This is a product description',
+	descriptionSimple: 'This is a product simple description',
 	productPrice: '100',
 	salePrice: '90',
 };
@@ -44,6 +51,69 @@ test.describe( 'General tab', { tag: '@gutenberg' }, () => {
 			await page
 				.getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
 				.fill( productData.name );
+
+			await page
+				.locator(
+					'[data-template-block-id="product-description__content"] > p'
+				)
+				.fill( productData.descriptionSimple );
+
+			await page.getByText( 'Full editor' ).click();
+
+			const wordPressVersion = await getInstalledWordPressVersion();
+			await insertBlock( page, 'Heading', wordPressVersion );
+
+			const editorCanvasLocator = page.frameLocator(
+				'iframe[name="editor-canvas"]'
+			);
+
+			await editorCanvasLocator
+				.locator( '[data-title="Heading"]' )
+				.fill( productData.descriptionTitle );
+
+			await editorCanvasLocator
+				.locator( '[data-title="Heading"]' )
+				.blur();
+
+			await insertBlock( page, 'Paragraph', wordPressVersion );
+
+			await editorCanvasLocator
+				.locator( '[data-title="Paragraph"]' )
+				.last()
+				.fill( productData.descriptionParagraph );
+
+			await page.getByRole( 'button', { name: 'Done' } ).click();
+
+			const previewContainerIframe = page
+				.locator( '.block-editor-block-preview__container' )
+				.frameLocator( 'iframe[title="Editor canvas"]' );
+
+			const descriptionTitle = previewContainerIframe.locator(
+				'[data-title="Heading"]'
+			);
+			const descriptionInitialParagraph = previewContainerIframe
+				.locator( '[data-title="Paragraph"]' )
+				.first();
+			const descriptionSecondParagraph = previewContainerIframe
+				.locator( '[data-title="Paragraph"]' )
+				.last();
+
+			await expect( descriptionTitle ).toHaveText(
+				productData.descriptionTitle
+			);
+			await expect( descriptionInitialParagraph ).toHaveText(
+				productData.descriptionSimple
+			);
+			await expect( descriptionSecondParagraph ).toHaveText(
+				productData.descriptionParagraph
+			);
+
+			await descriptionTitle.click();
+
+			await expect(
+				page.getByText( 'Edit in full editor' )
+			).toBeVisible();
+
 			await page
 				.locator(
 					'[data-template-block-id="basic-details"] .components-summary-control'