From acc313a9b26d0874f2f6437c071a51eeb05e645b Mon Sep 17 00:00:00 2001 From: Ivan Stojadinov Date: Tue, 17 Sep 2024 10:43:43 +0200 Subject: [PATCH] [e2e] External - Expand WPCOM suite, part 2 (#51414) * Add /merchant tests to the WPCOM suite * Skip "can manually add a variation" on WPCOM * Skip "Coupon management" - API returns 500 on delete * Resolve `wp-block-woocommerce-checkout-order-summary-block` on the first element * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: github-actions --- ...1414-e2e-external-expand-wpcom-suite-part2 | 4 + .../envs/default-wpcom/playwright.config.js | 8 + .../merchant/create-checkout-block.spec.js | 8 +- .../tests/merchant/create-coupon.spec.js | 182 +++++++++-------- .../create-variations.spec.js | 186 ++++++++++-------- 5 files changed, 211 insertions(+), 177 deletions(-) create mode 100644 plugins/woocommerce/changelog/51414-e2e-external-expand-wpcom-suite-part2 diff --git a/plugins/woocommerce/changelog/51414-e2e-external-expand-wpcom-suite-part2 b/plugins/woocommerce/changelog/51414-e2e-external-expand-wpcom-suite-part2 new file mode 100644 index 0000000000000..806a0b916796e --- /dev/null +++ b/plugins/woocommerce/changelog/51414-e2e-external-expand-wpcom-suite-part2 @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Expand the e2e suite we're running on WPCOM part #2. \ No newline at end of file diff --git a/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js b/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js index 276458fa57060..27ec548c34a96 100644 --- a/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js +++ b/plugins/woocommerce/tests/e2e-pw/envs/default-wpcom/playwright.config.js @@ -15,6 +15,14 @@ config = { '**/admin-tasks/**/*.spec.js', '**/shopper/**/*.spec.js', '**/api-tests/**/*.test.js', + '**/merchant/products/add-variable-product/**/*.spec.js', + '**/merchant/command-palette.spec.js', + '**/merchant/create-cart-block.spec.js', + '**/merchant/create-checkout-block.spec.js', + '**/merchant/create-coupon.spec.js', + '**/merchant/create-order.spec.js', + '**/merchant/create-page.spec.js', + '**/merchant/create-post.spec.js', ], grepInvert: /@skip-on-default-wpcom/, }, diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-checkout-block.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-checkout-block.spec.js index c5f0d7ec448de..7279c31fbea20 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-checkout-block.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-checkout-block.spec.js @@ -149,9 +149,11 @@ test.describe( .locator( 'legend' ) ).toBeVisible(); await expect( - page.locator( - '.wp-block-woocommerce-checkout-order-summary-block' - ) + page + .locator( + '.wp-block-woocommerce-checkout-order-summary-block' + ) + .first() ).toBeVisible(); await expect( page.locator( '.wc-block-components-address-form' ).first() diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-coupon.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-coupon.spec.js index 2630674a42b1e..1d38fd68d5cf6 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-coupon.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/create-coupon.spec.js @@ -39,102 +39,110 @@ const test = baseTest.extend( { }, } ); -test.describe( 'Coupon management', { tag: '@services' }, () => { - for ( const couponType of Object.keys( couponData ) ) { - test( `can create new ${ couponType } coupon`, async ( { - page, - coupon, - } ) => { - await test.step( 'add new coupon', async () => { - await page.goto( - 'wp-admin/post-new.php?post_type=shop_coupon' - ); - await page - .getByLabel( 'Coupon code' ) - .fill( couponData[ couponType ].code ); - await page - .getByPlaceholder( 'Description (optional)' ) - .fill( couponData[ couponType ].description ); - await page - .getByPlaceholder( '0' ) - .fill( couponData[ couponType ].amount ); - - // set expiry date if it was provided - if ( couponData[ couponType ].expiryDate ) { +test.describe( + 'Coupon management', + { tag: [ '@services', '@skip-on-default-wpcom' ] }, + () => { + for ( const couponType of Object.keys( couponData ) ) { + test( `can create new ${ couponType } coupon`, async ( { + page, + coupon, + } ) => { + await test.step( 'add new coupon', async () => { + await page.goto( + 'wp-admin/post-new.php?post_type=shop_coupon' + ); await page - .getByPlaceholder( 'yyyy-mm-dd' ) - .fill( couponData[ couponType ].expiryDate ); - } - - // be explicit about whether free shipping is allowed - if ( couponData[ couponType ].freeShipping ) { - await page.getByLabel( 'Allow free shipping' ).check(); - } else { - await page.getByLabel( 'Allow free shipping' ).uncheck(); - } - } ); + .getByLabel( 'Coupon code' ) + .fill( couponData[ couponType ].code ); + await page + .getByPlaceholder( 'Description (optional)' ) + .fill( couponData[ couponType ].description ); + await page + .getByPlaceholder( '0' ) + .fill( couponData[ couponType ].amount ); - // publish the coupon and retrieve the id - await test.step( 'publish the coupon', async () => { - await expect( - page.getByRole( 'link', { name: 'Move to Trash' } ) - ).toBeVisible(); - await page - .getByRole( 'button', { name: 'Publish', exact: true } ) - .click(); - await expect( - page.getByText( 'Coupon updated.' ) - ).toBeVisible(); - coupon.id = page.url().match( /(?<=post=)\d+/ )[ 0 ]; - expect( coupon.id ).toBeDefined(); - } ); + // set expiry date if it was provided + if ( couponData[ couponType ].expiryDate ) { + await page + .getByPlaceholder( 'yyyy-mm-dd' ) + .fill( couponData[ couponType ].expiryDate ); + } - // verify the creation of the coupon and details - await test.step( 'verify coupon creation', async () => { - await page.goto( 'wp-admin/edit.php?post_type=shop_coupon' ); - await expect( - page.getByRole( 'cell', { - name: couponData[ couponType ].code, - } ) - ).toBeVisible(); - await expect( - page.getByRole( 'cell', { - name: couponData[ couponType ].description, - } ) - ).toBeVisible(); - await expect( - page.getByRole( 'cell', { - name: couponData[ couponType ].amount, - exact: true, - } ) - ).toBeVisible(); - } ); + // be explicit about whether free shipping is allowed + if ( couponData[ couponType ].freeShipping ) { + await page.getByLabel( 'Allow free shipping' ).check(); + } else { + await page + .getByLabel( 'Allow free shipping' ) + .uncheck(); + } + } ); - // check expiry date if it was set - if ( couponData[ couponType ].expiryDate ) { - await test.step( 'verify coupon expiry date', async () => { + // publish the coupon and retrieve the id + await test.step( 'publish the coupon', async () => { + await expect( + page.getByRole( 'link', { name: 'Move to Trash' } ) + ).toBeVisible(); await page - .getByText( couponData[ couponType ].code ) - .last() + .getByRole( 'button', { name: 'Publish', exact: true } ) .click(); await expect( - page.getByPlaceholder( 'yyyy-mm-dd' ) - ).toHaveValue( couponData[ couponType ].expiryDate ); + page.getByText( 'Coupon updated.' ) + ).toBeVisible(); + coupon.id = page.url().match( /(?<=post=)\d+/ )[ 0 ]; + expect( coupon.id ).toBeDefined(); } ); - } - // if it was a free shipping coupon check that - if ( couponData[ couponType ].freeShipping ) { - await test.step( 'verify free shipping', async () => { - await page - .getByText( couponData[ couponType ].code ) - .last() - .click(); + // verify the creation of the coupon and details + await test.step( 'verify coupon creation', async () => { + await page.goto( + 'wp-admin/edit.php?post_type=shop_coupon' + ); + await expect( + page.getByRole( 'cell', { + name: couponData[ couponType ].code, + } ) + ).toBeVisible(); await expect( - page.getByLabel( 'Allow free shipping' ) - ).toBeChecked(); + page.getByRole( 'cell', { + name: couponData[ couponType ].description, + } ) + ).toBeVisible(); + await expect( + page.getByRole( 'cell', { + name: couponData[ couponType ].amount, + exact: true, + } ) + ).toBeVisible(); } ); - } - } ); + + // check expiry date if it was set + if ( couponData[ couponType ].expiryDate ) { + await test.step( 'verify coupon expiry date', async () => { + await page + .getByText( couponData[ couponType ].code ) + .last() + .click(); + await expect( + page.getByPlaceholder( 'yyyy-mm-dd' ) + ).toHaveValue( couponData[ couponType ].expiryDate ); + } ); + } + + // if it was a free shipping coupon check that + if ( couponData[ couponType ].freeShipping ) { + await test.step( 'verify free shipping', async () => { + await page + .getByText( couponData[ couponType ].code ) + .last() + .click(); + await expect( + page.getByLabel( 'Allow free shipping' ) + ).toBeChecked(); + } ); + } + } ); + } } -} ); +); diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/add-variable-product/create-variations.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/add-variable-product/create-variations.spec.js index b1271496bf61d..16f2965b3b41b 100644 --- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/add-variable-product/create-variations.spec.js +++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/add-variable-product/create-variations.spec.js @@ -84,105 +84,117 @@ test.describe( 'Add variations', { tag: '@gutenberg' }, () => { } } ); - test( 'can manually add a variation', async ( { page } ) => { - await test.step( `Open "Edit product" page of product id ${ productId_addManually }`, async () => { - await page.goto( - `/wp-admin/post.php?post=${ productId_addManually }&action=edit` - ); - } ); - - // hook up the woocommerce_variations_added jQuery trigger so we can check if it's fired - await test.step( 'Hook up the woocommerce_variations_added jQuery trigger', async () => { - await page.evaluate( () => { - window.woocommerceVariationsAddedFunctionCalls = []; - - window - .jQuery( '#variable_product_options' ) - .on( 'woocommerce_variations_added', ( event, data ) => { - window.woocommerceVariationsAddedFunctionCalls.push( [ - event, - data, - ] ); - } ); + test( + 'can manually add a variation', + { tag: '@skip-on-default-wpcom' }, + async ( { page } ) => { + await test.step( `Open "Edit product" page of product id ${ productId_addManually }`, async () => { + await page.goto( + `/wp-admin/post.php?post=${ productId_addManually }&action=edit` + ); } ); - } ); - await test.step( 'Click on the "Variations" tab.', async () => { - await page.locator( '.variations_tab' ).click(); - } ); - - await test.step( `Manually add ${ variationsToManuallyCreate.length } variations`, async () => { - const variationRows = page.locator( '.woocommerce_variation h3' ); - let variationRowsCount = await variationRows.count(); - const originalVariationRowsCount = variationRowsCount; - - for ( const variationToCreate of variationsToManuallyCreate ) { - await test.step( 'Click "Add manually"', async () => { - const addManuallyButton = page.getByRole( 'button', { - name: 'Add manually', - } ); - - await addManuallyButton.click(); - - await expect( variationRows ).toHaveCount( - ++variationRowsCount - ); - - // verify that the woocommerce_variations_added jQuery trigger was fired - const woocommerceVariationsAddedFunctionCalls = - await page.evaluate( - () => window.woocommerceVariationsAddedFunctionCalls + // hook up the woocommerce_variations_added jQuery trigger so we can check if it's fired + await test.step( 'Hook up the woocommerce_variations_added jQuery trigger', async () => { + await page.evaluate( () => { + window.woocommerceVariationsAddedFunctionCalls = []; + + window + .jQuery( '#variable_product_options' ) + .on( + 'woocommerce_variations_added', + ( event, data ) => { + window.woocommerceVariationsAddedFunctionCalls.push( + [ event, data ] + ); + } ); - expect( - woocommerceVariationsAddedFunctionCalls.length - ).toEqual( - variationRowsCount - originalVariationRowsCount - ); } ); + } ); - for ( const attributeValue of variationToCreate ) { - const attributeName = productAttributes.find( - ( { options } ) => options.includes( attributeValue ) - ).name; - const addAttributeMenu = variationRows - .nth( 0 ) - .locator( 'select', { - has: page.locator( 'option', { - hasText: attributeValue, - } ), + await test.step( 'Click on the "Variations" tab.', async () => { + await page.locator( '.variations_tab' ).click(); + } ); + + await test.step( `Manually add ${ variationsToManuallyCreate.length } variations`, async () => { + const variationRows = page.locator( + '.woocommerce_variation h3' + ); + let variationRowsCount = await variationRows.count(); + const originalVariationRowsCount = variationRowsCount; + + for ( const variationToCreate of variationsToManuallyCreate ) { + await test.step( 'Click "Add manually"', async () => { + const addManuallyButton = page.getByRole( 'button', { + name: 'Add manually', } ); - await test.step( `Select "${ attributeValue }" from the "${ attributeName }" attribute menu`, async () => { - await addAttributeMenu.selectOption( attributeValue ); - } ); - } + await addManuallyButton.click(); - await test.step( 'Click "Save changes"', async () => { - await page - .getByRole( 'button', { - name: 'Save changes', - } ) - .click(); - } ); + await expect( variationRows ).toHaveCount( + ++variationRowsCount + ); - await test.step( `Expect the variation ${ variationToCreate.join( - ', ' - ) } to be successfully saved.`, async () => { - let newlyAddedVariationRow; + // verify that the woocommerce_variations_added jQuery trigger was fired + const woocommerceVariationsAddedFunctionCalls = + await page.evaluate( + () => + window.woocommerceVariationsAddedFunctionCalls + ); + expect( + woocommerceVariationsAddedFunctionCalls.length + ).toEqual( + variationRowsCount - originalVariationRowsCount + ); + } ); for ( const attributeValue of variationToCreate ) { - newlyAddedVariationRow = ( - newlyAddedVariationRow || variationRows - ).filter( { - has: page.locator( 'option[selected]', { - hasText: attributeValue, - } ), + const attributeName = productAttributes.find( + ( { options } ) => + options.includes( attributeValue ) + ).name; + const addAttributeMenu = variationRows + .nth( 0 ) + .locator( 'select', { + has: page.locator( 'option', { + hasText: attributeValue, + } ), + } ); + + await test.step( `Select "${ attributeValue }" from the "${ attributeName }" attribute menu`, async () => { + await addAttributeMenu.selectOption( + attributeValue + ); } ); } - await expect( newlyAddedVariationRow ).toBeVisible(); - } ); - } - } ); - } ); + await test.step( 'Click "Save changes"', async () => { + await page + .getByRole( 'button', { + name: 'Save changes', + } ) + .click(); + } ); + + await test.step( `Expect the variation ${ variationToCreate.join( + ', ' + ) } to be successfully saved.`, async () => { + let newlyAddedVariationRow; + + for ( const attributeValue of variationToCreate ) { + newlyAddedVariationRow = ( + newlyAddedVariationRow || variationRows + ).filter( { + has: page.locator( 'option[selected]', { + hasText: attributeValue, + } ), + } ); + } + + await expect( newlyAddedVariationRow ).toBeVisible(); + } ); + } + } ); + } + ); } );