From 54b29ec50ed40ced13aa3a4747550cd72e27ac05 Mon Sep 17 00:00:00 2001 From: Fernando Marichal Date: Mon, 5 Aug 2024 08:43:22 -0300 Subject: [PATCH] [E2E tests]: Add product description using the block editor (#50232) * Add product description * Add changelog * Add changelog * Always use same label for ToolbarItem --- ...d-50231_e2e_description_using_block_editor | 4 ++ .../header-toolbar/header-toolbar.tsx | 10 +-- ...d-50231_e2e_description_using_block_editor | 4 ++ ...create-simple-product-block-editor.spec.js | 70 +++++++++++++++++++ 4 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 packages/js/product-editor/changelog/add-50231_e2e_description_using_block_editor create mode 100644 plugins/woocommerce/changelog/add-50231_e2e_description_using_block_editor diff --git a/packages/js/product-editor/changelog/add-50231_e2e_description_using_block_editor b/packages/js/product-editor/changelog/add-50231_e2e_description_using_block_editor new file mode 100644 index 00000000000..cf675703ffd --- /dev/null +++ b/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 diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx index ca1d1c2fc3c..d183898e424 100644 --- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx +++ b/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={ - ! isInserterOpened - ? __( 'Add', 'woocommerce' ) - : __( 'Close', 'woocommerce' ) - } + label={ __( + 'Toggle block inserter', + 'woocommerce' + ) } + aria-expanded={ isInserterOpened } showTooltip /> { isLargeViewport && ( diff --git a/plugins/woocommerce/changelog/add-50231_e2e_description_using_block_editor b/plugins/woocommerce/changelog/add-50231_e2e_description_using_block_editor new file mode 100644 index 00000000000..b28bf5c3d64 --- /dev/null +++ b/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 diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-simple-product-block-editor.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-simple-product-block-editor.spec.js index d3c55875f79..2ccd8fb81f8 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-simple-product-block-editor.spec.js +++ b/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'