diff --git a/plugins/woocommerce-blocks/.wp-env.json b/plugins/woocommerce-blocks/.wp-env.json index d550bd95c5c..2f1ebca5b29 100644 --- a/plugins/woocommerce-blocks/.wp-env.json +++ b/plugins/woocommerce-blocks/.wp-env.json @@ -10,8 +10,8 @@ "mappings": { "wp-content/mu-plugins": "./node_modules/@wordpress/e2e-tests/mu-plugins", "wp-content/plugins/gutenberg-test-plugins": "./node_modules/@wordpress/e2e-tests/plugins", + "wp-content/plugins/woocommerce-blocks-test-plugins": "./tests/e2e/plugins", "wp-cli.yml": "./wp-cli.yml", - "custom-plugins": "./tests/e2e/mocks/custom-plugins", "wp-content/plugins/woocommerce/blocks-bin": "./bin", "wp-content/plugins/woocommerce/blocks-bin/playwright": "./tests/e2e/bin" } diff --git a/plugins/woocommerce-blocks/package.json b/plugins/woocommerce-blocks/package.json index 11f2db05884..8e89a238f54 100644 --- a/plugins/woocommerce-blocks/package.json +++ b/plugins/woocommerce-blocks/package.json @@ -221,7 +221,7 @@ "eslint-import-resolver-typescript": "3.6.1", "eslint-import-resolver-webpack": "0.13.2", "eslint-plugin-import": "2.28.1", - "eslint-plugin-playwright": "0.15.3", + "eslint-plugin-playwright": "1.6.0", "eslint-plugin-rulesdir": "^0.2.2", "eslint-plugin-storybook": "^0.6.15", "eslint-plugin-woocommerce": "file:bin/eslint-plugin-woocommerce", diff --git a/plugins/woocommerce-blocks/tests/e2e/.eslintrc.js b/plugins/woocommerce-blocks/tests/e2e/.eslintrc.js index cbe964d4e57..118f61e8707 100644 --- a/plugins/woocommerce-blocks/tests/e2e/.eslintrc.js +++ b/plugins/woocommerce-blocks/tests/e2e/.eslintrc.js @@ -23,6 +23,7 @@ const config = { 'playwright/prefer-web-first-assertions': 'error', 'playwright/valid-expect': 'error', 'rulesdir/no-raw-playwright-test-import': 'error', + 'playwright/no-hooks': [ 'error', { allow: [ 'beforeEach' ] } ], }, }; diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/databases/.gitkeep b/plugins/woocommerce-blocks/tests/e2e/bin/databases/.gitkeep new file mode 100644 index 00000000000..e69de29bb2d diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/languages.sh b/plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/languages.sh new file mode 100644 index 00000000000..901fbc4d015 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/languages.sh @@ -0,0 +1,4 @@ +#!/usr/bin/env bash + +wp language core install nl_NL +wp language plugin install woocommerce nl_NL diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/test-env-setup.sh b/plugins/woocommerce-blocks/tests/e2e/bin/test-env-setup.sh index 12aebd0c4c8..416a15d3d68 100755 --- a/plugins/woocommerce-blocks/tests/e2e/bin/test-env-setup.sh +++ b/plugins/woocommerce-blocks/tests/e2e/bin/test-env-setup.sh @@ -37,4 +37,3 @@ done # Run the main script in the container for better performance. wp-env run tests-cli -- bash wp-content/plugins/woocommerce/blocks-bin/playwright/scripts/index.sh wp-env run tests-cli wp option update woocommerce_coming_soon 'no' - diff --git a/plugins/woocommerce-blocks/tests/e2e/block-theme-with-templates.setup.ts b/plugins/woocommerce-blocks/tests/e2e/block-theme-with-templates.setup.ts index 4340f77260c..8c26b4a04ee 100644 --- a/plugins/woocommerce-blocks/tests/e2e/block-theme-with-templates.setup.ts +++ b/plugins/woocommerce-blocks/tests/e2e/block-theme-with-templates.setup.ts @@ -1,9 +1,19 @@ /** * External dependencies */ -import { BLOCK_THEME_WITH_TEMPLATES_SLUG } from '@woocommerce/e2e-utils'; -import { test as setup } from '@woocommerce/e2e-playwright-utils'; +import { + BLOCK_THEME_WITH_TEMPLATES_SLUG, + DB_EXPORT_FILE, + cli, +} from '@woocommerce/e2e-utils'; +import { test as setup, expect } from '@woocommerce/e2e-playwright-utils'; setup( 'Sets up the block theme with templates', async ( { requestUtils } ) => { await requestUtils.activateTheme( BLOCK_THEME_WITH_TEMPLATES_SLUG ); + + const cliOutput = await cli( + `npm run wp-env run tests-cli wp db export ${ DB_EXPORT_FILE }` + ); + // eslint-disable-next-line playwright/no-standalone-expect + expect( cliOutput.stdout ).toContain( 'Success: Exported' ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/block-theme.setup.ts b/plugins/woocommerce-blocks/tests/e2e/block-theme.setup.ts index 7d453543af8..940d5e76a2d 100644 --- a/plugins/woocommerce-blocks/tests/e2e/block-theme.setup.ts +++ b/plugins/woocommerce-blocks/tests/e2e/block-theme.setup.ts @@ -1,7 +1,8 @@ +/* eslint-disable playwright/no-standalone-expect */ /** * External dependencies */ -import { BLOCK_THEME_SLUG, cli } from '@woocommerce/e2e-utils'; +import { BLOCK_THEME_SLUG, DB_EXPORT_FILE, cli } from '@woocommerce/e2e-utils'; import { test as setup, expect } from '@woocommerce/e2e-playwright-utils'; setup( 'Sets up the block theme', async () => { @@ -21,4 +22,9 @@ setup( 'Sets up the block theme', async () => { expect( cliOutput.stdout ).toContain( 'Success: Rewrite structure set' ); expect( cliOutput.stdout ).toContain( 'Success: Rewrite rules flushed' ); + + cliOutput = await cli( + `npm run wp-env run tests-cli wp db export ${ DB_EXPORT_FILE }` + ); + expect( cliOutput.stdout ).toContain( 'Success: Exported' ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/classic-theme.setup.ts b/plugins/woocommerce-blocks/tests/e2e/classic-theme.setup.ts index dda016ac3cf..93a74319f79 100644 --- a/plugins/woocommerce-blocks/tests/e2e/classic-theme.setup.ts +++ b/plugins/woocommerce-blocks/tests/e2e/classic-theme.setup.ts @@ -1,9 +1,11 @@ +/* eslint-disable playwright/no-standalone-expect */ /** * External dependencies */ import { CLASSIC_THEME_NAME, CLASSIC_THEME_SLUG, + DB_EXPORT_FILE, cli, } from '@woocommerce/e2e-utils'; import { test as setup, expect } from '@woocommerce/e2e-playwright-utils'; @@ -16,4 +18,9 @@ setup( 'Sets up the classic theme', async ( { admin } ) => { await expect( admin.page.getByText( `Active: ${ CLASSIC_THEME_NAME }` ) ).toBeVisible(); + + const cliOutput = await cli( + `npm run wp-env run tests-cli wp db export ${ DB_EXPORT_FILE }` + ); + expect( cliOutput.stdout ).toContain( 'Success: Exported' ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/global-setup.ts b/plugins/woocommerce-blocks/tests/e2e/global-setup.ts index 5e19112b905..3a46c6a9fa5 100644 --- a/plugins/woocommerce-blocks/tests/e2e/global-setup.ts +++ b/plugins/woocommerce-blocks/tests/e2e/global-setup.ts @@ -41,45 +41,6 @@ const prepareAttributes = async () => { .getByRole( 'button' ) .click(); - await page.goto( BASE_URL + '/wp-admin/post-new.php' ); - - await page.waitForFunction( () => { - return window.wp.data !== undefined; - } ); - - // Disable the welcome guide for the site editor. - await page.evaluate( () => { - return Promise.all( [ - window.wp.data - .dispatch( 'core/preferences' ) - .set( 'core/edit-site', 'welcomeGuide', false ), - window.wp.data - .dispatch( 'core/preferences' ) - .set( 'core/edit-site', 'welcomeGuideStyles', false ), - window.wp.data - .dispatch( 'core/preferences' ) - .set( 'core/edit-site', 'welcomeGuidePage', false ), - window.wp.data - .dispatch( 'core/preferences' ) - .set( 'core/edit-site', 'welcomeGuideTemplate', false ), - window.wp.data - .dispatch( 'core/preferences' ) - .set( 'core/edit-post', 'welcomeGuide', false ), - window.wp.data - .dispatch( 'core/preferences' ) - .set( 'core/edit-post', 'welcomeGuideStyles', false ), - window.wp.data - .dispatch( 'core/preferences' ) - .set( 'core/edit-post', 'welcomeGuidePage', false ), - - window.wp.data - .dispatch( 'core/preferences' ) - .set( 'core/edit-post', 'welcomeGuideTemplate', false ), - ] ); - } ); - - await page.context().storageState( { path: adminFile } ); - await context.close(); await browser.close(); diff --git a/plugins/woocommerce-blocks/tests/e2e/mocks/custom-plugins/index.ts b/plugins/woocommerce-blocks/tests/e2e/mocks/custom-plugins/index.ts deleted file mode 100644 index 04bca77e0de..00000000000 --- a/plugins/woocommerce-blocks/tests/e2e/mocks/custom-plugins/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './utils'; diff --git a/plugins/woocommerce-blocks/tests/e2e/mocks/custom-plugins/readme.md b/plugins/woocommerce-blocks/tests/e2e/mocks/custom-plugins/readme.md deleted file mode 100644 index f37b4045c09..00000000000 --- a/plugins/woocommerce-blocks/tests/e2e/mocks/custom-plugins/readme.md +++ /dev/null @@ -1,70 +0,0 @@ -# Testing WordPress actions and filters - -This documentation covers testing WordPress actions and filters when writing Playwright tests. - -## Table of Contents - -- [Description](#description) -- [Usage](#usage) - -## Description - -You can test an action or filter (change) by creating a custom WordPress plugin, installing it and when you are done, removing it. - -The 3 functions responsible are located inside of `tests/e2e-pw/mocks/custom-plugins/utils.ts`: - -- `createPluginFromPHPFile()` -- `installPluginFromPHPFile()` -- `uninstallPluginFromPHPFile()` - -## Usage - -### Example: Testing a custom Add to Cart text - -1. Create the custom plugin file. - -`update-product-button-text.php`. - -```php - { - await installPluginFromPHPFile( - `${ __dirname }/update-product-button-text.php` - ); - await frontendUtils.goToShop(); - const blocks = await frontendUtils.getBlockByName( blockData.name ); - const buttonWithNewText = await blocks.getByText( 'Buy Now' ).count(); - - const productsDisplayed = 16; - expect( buttonWithNewText ).toEqual( productsDisplayed ); -} ); -``` - -3. Remove the plugin when done testing. - -```javascript -test.afterAll( async () => { - await uninstallPluginFromPHPFile( - `${ __dirname }/update-product-button-text.php` - ); -} ); -``` - -In the above example, the test checks whether the filter `woocommerce_product_add_to_cart_text` is applied correctly. It installs the "Custom Add to Cart Text" plugin, navigates to the shop page using `frontendUtils`, and verifies if the "Buy Now" button text appears as expected. Finally, it cleans the cart and uninstalls the plugin. - -You can adapt this example to test other filters and actions by modifying the code accordingly. diff --git a/plugins/woocommerce-blocks/tests/e2e/mocks/custom-plugins/utils.ts b/plugins/woocommerce-blocks/tests/e2e/mocks/custom-plugins/utils.ts deleted file mode 100644 index 673f278fe76..00000000000 --- a/plugins/woocommerce-blocks/tests/e2e/mocks/custom-plugins/utils.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * External dependencies - */ -import { cli } from '@woocommerce/e2e-utils'; -import path from 'path'; - -const createPluginFromPHPFile = async ( phpFilePath: string ) => { - const absolutePath = path.resolve( phpFilePath ); - const directory = path.dirname( absolutePath ); - const fileName = path.basename( phpFilePath ); - const fileNameZip = fileName.replace( '.php', '' ); - await cli( - `cd ${ directory } && zip ${ fileNameZip }.zip ${ fileName } && mv ${ fileNameZip }.zip ${ __dirname }` - ); -}; - -export const installPluginFromPHPFile = async ( phpFilePath: string ) => { - await createPluginFromPHPFile( phpFilePath ); - const fileName = path.basename( phpFilePath ).replace( '.php', '' ); - await cli( - `npm run wp-env run tests-cli -- wp plugin install /var/www/html/custom-plugins/${ fileName }.zip --activate` - ); -}; - -export const uninstallPluginFromPHPFile = async ( phpFilePath: string ) => { - const fileName = path.basename( phpFilePath ).replace( '.php', '' ); - await cli( - `npm run wp-env run tests-cli -- wp plugin delete ${ fileName }` - ); - await cli( `rm ${ __dirname }/${ fileName }.zip` ); -}; diff --git a/plugins/woocommerce-blocks/tests/e2e/playwright-utils/test.ts b/plugins/woocommerce-blocks/tests/e2e/playwright-utils/test.ts index 1fad1416dd7..ece2f02e473 100644 --- a/plugins/woocommerce-blocks/tests/e2e/playwright-utils/test.ts +++ b/plugins/woocommerce-blocks/tests/e2e/playwright-utils/test.ts @@ -13,6 +13,7 @@ import { import { TemplateApiUtils, STORAGE_STATE_PATH, + DB_EXPORT_FILE, EditorUtils, FrontendUtils, StoreApiUtils, @@ -21,6 +22,7 @@ import { LocalPickupUtils, MiniCartUtils, WPCLIUtils, + cli, } from '@woocommerce/e2e-utils'; import { Post } from '@wordpress/e2e-test-utils-playwright/build-types/request-utils/posts'; @@ -158,14 +160,21 @@ const test = base.extend< await page.evaluate( () => { window.localStorage.clear(); } ); + + const cliOutput = await cli( + `npm run wp-env run tests-cli wp db import ${ DB_EXPORT_FILE }` + ); + if ( ! cliOutput.stdout.includes( 'Success: Imported ' ) ) { + throw new Error( `Failed to import ${ DB_EXPORT_FILE }` ); + } }, pageUtils: async ( { page }, use ) => { await use( new PageUtils( { page } ) ); }, templateApiUtils: async ( {}, use ) => await use( new TemplateApiUtils( baseRequest ) ), - editorUtils: async ( { editor, page }, use ) => { - await use( new EditorUtils( editor, page ) ); + editorUtils: async ( { editor, page, admin }, use ) => { + await use( new EditorUtils( editor, page, admin ) ); }, frontendUtils: async ( { page, requestUtils }, use ) => { await use( new FrontendUtils( page, requestUtils ) ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-checkout-fields-plugin.php b/plugins/woocommerce-blocks/tests/e2e/plugins/additional-checkout-fields.php similarity index 96% rename from plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-checkout-fields-plugin.php rename to plugins/woocommerce-blocks/tests/e2e/plugins/additional-checkout-fields.php index 4a82725e354..a6a7954f761 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-checkout-fields-plugin.php +++ b/plugins/woocommerce-blocks/tests/e2e/plugins/additional-checkout-fields.php @@ -1,8 +1,11 @@ get_cart() as $hash => $value ) { + $value['data']->set_price( 50 ); + } +} + +add_action( 'woocommerce_before_calculate_totals', 'calc_price' ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/basic.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/basic.block_theme.spec.ts index a0038e58923..9c762201fdf 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/basic.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/basic.block_theme.spec.ts @@ -4,7 +4,7 @@ import { test, expect } from '@woocommerce/e2e-playwright-utils'; import { customerFile, guestFile } from '@woocommerce/e2e-utils'; -test.describe( 'Basic role-based functionality tests', async () => { +test.describe( 'Basic role-based functionality tests', () => { test.describe( 'As admin', () => { // Admin is the default user, so no need to set storage state. test( 'Load Dashboard page', async ( { page } ) => { diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.perf.ts b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.perf.ts index d63e61d80ce..1d08ddaaa37 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.perf.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.perf.ts @@ -21,7 +21,6 @@ const test = base.extend< { pageObject: CartPage } >( { test.describe( 'Cart performance', () => { test.beforeEach( async ( { frontendUtils } ) => { await frontendUtils.goToShop(); - await frontendUtils.emptyCart(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.shopper.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.shopper.block_theme.side_effects.spec.ts index ebed24288d4..94c5e06d0f4 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.shopper.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-block.shopper.block_theme.side_effects.spec.ts @@ -2,10 +2,6 @@ * External dependencies */ import { test as base, expect } from '@woocommerce/e2e-playwright-utils'; -import { - installPluginFromPHPFile, - uninstallPluginFromPHPFile, -} from '@woocommerce/e2e-mocks/custom-plugins'; /** * Internal dependencies @@ -33,7 +29,6 @@ test.describe( 'Shopper → Cart block', () => { frontendUtils, } ) => { await frontendUtils.goToShop(); - await frontendUtils.emptyCart(); await frontendUtils.addToCart( DISCOUNTED_PRODUCT_NAME ); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await frontendUtils.goToCart(); @@ -68,13 +63,14 @@ test.describe( 'Shopper → Cart block', () => { test( 'Products with updated prices should not display a discount label', async ( { pageObject, + requestUtils, frontendUtils, } ) => { - await installPluginFromPHPFile( - `${ __dirname }/update-price-plugin.php` + await requestUtils.activatePlugin( + 'woocommerce-blocks-test-update-price' ); + await frontendUtils.goToShop(); - await frontendUtils.emptyCart(); await frontendUtils.addToCart( DISCOUNTED_PRODUCT_NAME ); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await frontendUtils.goToCart(); @@ -125,17 +121,12 @@ test.describe( 'Shopper → Cart block', () => { // Get the text content of the price element and check the price const hoodiePriceText = await hoodiePriceElement.textContent(); expect( hoodiePriceText ).toBe( '$50.00' ); - - await uninstallPluginFromPHPFile( - `${ __dirname }/update-price-plugin.php` - ); } ); test( 'User can view empty cart message', async ( { frontendUtils, page, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToCart(); // Verify cart is empty @@ -257,7 +248,6 @@ test.describe( 'Shopper → Cart block', () => { frontendUtils, page, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); await frontendUtils.goToCart(); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-coupons.shopper.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-coupons.shopper.block_theme.spec.ts index f4276b4300e..7d8555fc7c4 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-coupons.shopper.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-coupons.shopper.block_theme.spec.ts @@ -26,21 +26,11 @@ test.describe( 'Shopper → Coupon', () => { ); } ); - test.afterEach( async ( { wpCliUtils } ) => { - const couponId = await wpCliUtils.getCouponIDByCode( - 'single-use-coupon' - ); - await cli( - `npm run wp-env run tests-cli -- wp wc shop_coupon delete ${ couponId } --force=1 --user=1` - ); - } ); - test( 'Logged in user can apply single-use coupon and place order', async ( { checkoutPageObject, frontendUtils, page, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await frontendUtils.goToCart(); @@ -89,7 +79,6 @@ test.describe( 'Shopper → Coupon', () => { frontendUtils, page, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await frontendUtils.goToCheckout(); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.block_theme.side_effects.spec.ts index 7b986cb80fc..48c5e901fcf 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.block_theme.side_effects.spec.ts @@ -33,20 +33,10 @@ test.describe( 'Shopper → Notice Templates', () => { `npm run wp-env run tests-cli -- wp option update woocommerce_cart_page_id ${ cartShortcodeID }` ); - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); } ); - test.afterEach( async ( { wpCliUtils, frontendUtils } ) => { - const cartID = await wpCliUtils.getPostIDByTitle( 'Cart Shortcode' ); - await cli( - `npm run wp-env run tests-cli -- wp option update woocommerce_cart_page_id ${ cartID }` - ); - - await frontendUtils.emptyCart(); - } ); - test( 'default block notice templates are visible', async ( { frontendUtils, page, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.classic_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.classic_theme.spec.ts index ace75949ec1..8e18e928786 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.classic_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-notices.shopper.classic_theme.spec.ts @@ -34,20 +34,10 @@ test.describe( 'Shopper → Notice Templates', () => { `npm run wp-env run tests-cli -- wp option update woocommerce_cart_page_id ${ cartShortcodeID }` ); - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); } ); - test.afterEach( async ( { wpCliUtils, frontendUtils } ) => { - const cartID = await wpCliUtils.getPostIDByTitle( 'Cart Shortcode' ); - await cli( - `npm run wp-env run tests-cli -- wp option update woocommerce_cart_page_id ${ cartID }` - ); - - await frontendUtils.emptyCart(); - } ); - test( 'default classic notice templates are visible', async ( { frontendUtils, page, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-shipping.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-shipping.block_theme.side_effects.spec.ts index 16edb5dbecb..1b3509b5829 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-shipping.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-shipping.block_theme.side_effects.spec.ts @@ -2,7 +2,7 @@ * External dependencies */ import { expect, test as base } from '@woocommerce/e2e-playwright-utils'; -import { guestFile } from '@woocommerce/e2e-utils'; +import { FrontendUtils } from '@woocommerce/e2e-utils'; /** * Internal dependencies @@ -41,42 +41,52 @@ test.describe( 'Merchant → Shipping', () => { } ); test.describe( 'Shopper → Shipping', () => { - test.use( { storageState: guestFile } ); + test.beforeEach( async ( { shippingUtils } ) => { + await shippingUtils.enableShippingCostsRequireAddress(); + } ); test( 'Guest user can see shipping calculator on cart page', async ( { - frontendUtils, - page, + requestUtils, + browser, } ) => { - await frontendUtils.emptyCart(); - await frontendUtils.goToShop(); - await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); - await frontendUtils.goToCart(); + const guestContext = await browser.newContext(); + const userPage = await guestContext.newPage(); + + const userFrontendUtils = new FrontendUtils( userPage, requestUtils ); + + await userFrontendUtils.goToShop(); + await userFrontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); + await userFrontendUtils.goToCart(); await expect( - page.getByLabel( 'Add an address for shipping options' ) + userPage.getByLabel( 'Add an address for shipping options' ) ).toBeVisible(); } ); test( 'Guest user does not see shipping rates until full address is entered', async ( { - checkoutPageObject, - frontendUtils, - page, + requestUtils, + browser, } ) => { - await frontendUtils.emptyCart(); - await frontendUtils.goToShop(); - await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); - await frontendUtils.goToCheckout(); + const guestContext = await browser.newContext(); + const userPage = await guestContext.newPage(); + + const userFrontendUtils = new FrontendUtils( userPage, requestUtils ); + const userCheckoutPageObject = new CheckoutPage( { page: userPage } ); + + await userFrontendUtils.goToShop(); + await userFrontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); + await userFrontendUtils.goToCheckout(); await expect( - page.getByText( + userPage.getByText( 'Shipping options will be displayed here after entering your full shipping addres' ) ).toBeVisible(); - await checkoutPageObject.fillInCheckoutWithTestData(); + await userCheckoutPageObject.fillInCheckoutWithTestData(); await expect( - page.getByText( + userPage.getByText( 'Shipping options will be displayed here after entering your full shipping addres' ) ).toBeHidden(); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-translations.shopper.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-translations.shopper.block_theme.side_effects.spec.ts index 7cbe314a2a6..5ce842e2f0a 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-translations.shopper.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-translations.shopper.block_theme.side_effects.spec.ts @@ -19,22 +19,10 @@ const test = base.extend< { checkoutPageObject: CheckoutPage } >( { } ); test.describe( 'Shopper → Translations', () => { - test.beforeAll( async () => { - await cli( - `npm run wp-env run tests-cli -- wp language core install nl_NL` - ); + test.beforeEach( async () => { await cli( `npm run wp-env run tests-cli -- wp site switch-language nl_NL` ); - await cli( - `npm run wp-env run tests-cli -- wp language plugin install woocommerce nl_NL` - ); - } ); - - test.afterAll( async () => { - await cli( - `npm run wp-env run tests-cli -- wp site switch-language en_US` - ); } ); test( 'User can view translated Cart block', async ( { diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/cart/update-price-plugin.php b/plugins/woocommerce-blocks/tests/e2e/tests/cart/update-price-plugin.php deleted file mode 100644 index d008b9e6010..00000000000 --- a/plugins/woocommerce-blocks/tests/e2e/tests/cart/update-price-plugin.php +++ /dev/null @@ -1,19 +0,0 @@ -get_cart() as $hash => $value ) { - $value['data']->set_price( 50 ); - } -} - -add_action( 'woocommerce_before_calculate_totals', 'calc_price' ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.guest-shopper.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.guest-shopper.block_theme.side_effects.spec.ts index db1ad9972c2..54ffad7f4be 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.guest-shopper.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.guest-shopper.block_theme.side_effects.spec.ts @@ -3,10 +3,6 @@ */ import { expect, test as base } from '@woocommerce/e2e-playwright-utils'; import { guestFile } from '@woocommerce/e2e-utils'; -import { - installPluginFromPHPFile, - uninstallPluginFromPHPFile, -} from '@woocommerce/e2e-mocks/custom-plugins'; /** * Internal dependencies @@ -26,19 +22,12 @@ const test = base.extend< { checkoutPageObject: CheckoutPage } >( { test.describe( 'Shopper → Additional Checkout Fields', () => { test.describe( 'Guest shopper', () => { test.use( { storageState: guestFile } ); - test.beforeAll( async () => { - await installPluginFromPHPFile( - `${ __dirname }/additional-checkout-fields-plugin.php` - ); - } ); - test.afterAll( async () => { - await uninstallPluginFromPHPFile( - `${ __dirname }/additional-checkout-fields-plugin.php` - ); - } ); - test.beforeEach( async ( { frontendUtils } ) => { - await frontendUtils.emptyCart(); + test.beforeEach( async ( { frontendUtils, requestUtils } ) => { + await requestUtils.activatePlugin( + 'woocommerce-blocks-test-additional-checkout-fields' + ); + await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await frontendUtils.goToCheckout(); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.merchant.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.merchant.block_theme.side_effects.spec.ts index d4f8bd750e7..2bfb45a8ac0 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.merchant.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.merchant.block_theme.side_effects.spec.ts @@ -2,10 +2,6 @@ * External dependencies */ import { expect, test as base } from '@woocommerce/e2e-playwright-utils'; -import { - installPluginFromPHPFile, - uninstallPluginFromPHPFile, -} from '@woocommerce/e2e-mocks/custom-plugins'; /** * Internal dependencies @@ -23,19 +19,11 @@ const test = base.extend< { checkoutPageObject: CheckoutPage } >( { } ); test.describe( 'Merchant → Additional Checkout Fields', () => { - test.beforeAll( async () => { - await installPluginFromPHPFile( - `${ __dirname }/additional-checkout-fields-plugin.php` + test.beforeEach( async ( { requestUtils, frontendUtils } ) => { + await requestUtils.activatePlugin( + 'woocommerce-blocks-test-additional-checkout-fields' ); - } ); - test.afterAll( async () => { - await uninstallPluginFromPHPFile( - `${ __dirname }/additional-checkout-fields-plugin.php` - ); - } ); - test.beforeEach( async ( { frontendUtils } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await frontendUtils.goToCheckout(); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.shopper.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.shopper.block_theme.side_effects.spec.ts index 73369b57c87..5e488d4d198 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.shopper.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/additional-fields.shopper.block_theme.side_effects.spec.ts @@ -3,10 +3,6 @@ */ import { expect, test as base } from '@woocommerce/e2e-playwright-utils'; import { customerFile } from '@woocommerce/e2e-utils'; -import { - installPluginFromPHPFile, - uninstallPluginFromPHPFile, -} from '@woocommerce/e2e-mocks/custom-plugins'; /** * Internal dependencies @@ -26,19 +22,12 @@ const test = base.extend< { checkoutPageObject: CheckoutPage } >( { test.describe( 'Shopper → Additional Checkout Fields', () => { test.describe( 'Logged in shopper', () => { test.use( { storageState: customerFile } ); - test.beforeAll( async () => { - await installPluginFromPHPFile( - `${ __dirname }/additional-checkout-fields-plugin.php` - ); - } ); - test.afterAll( async () => { - await uninstallPluginFromPHPFile( - `${ __dirname }/additional-checkout-fields-plugin.php` - ); - } ); - test.beforeEach( async ( { frontendUtils } ) => { - await frontendUtils.emptyCart(); + test.beforeEach( async ( { requestUtils, frontendUtils } ) => { + await requestUtils.activatePlugin( + 'woocommerce-blocks-test-additional-checkout-fields' + ); + await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await frontendUtils.goToCheckout(); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.merchant.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.merchant.block_theme.spec.ts index a71e0c0a207..e60d18fb270 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.merchant.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.merchant.block_theme.spec.ts @@ -78,7 +78,7 @@ test.describe( 'Merchant → Checkout', () => { } ); test.describe( 'Can adjust T&S and Privacy Policy options', () => { - test.beforeAll( async ( { browser } ) => { + test.beforeEach( async ( { browser } ) => { const page = await browser.newPage(); await page.goto( `${ process.env.WORDPRESS_BASE_URL }/?setup_terms_and_privacy` @@ -89,17 +89,6 @@ test.describe( 'Merchant → Checkout', () => { await page.close(); } ); - test.afterAll( async ( { browser } ) => { - const page = await browser.newPage(); - await page.goto( - `${ process.env.WORDPRESS_BASE_URL }/?teardown_terms_and_privacy` - ); - await expect( - page.getByText( 'Terms & Privacy pages teared down.' ) - ).toBeVisible(); - await page.close(); - } ); - test( 'Merchant can see T&S and Privacy Policy links without checkbox', async ( { frontendUtils, checkoutPageObject, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.shopper.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.shopper.block_theme.side_effects.spec.ts index b825f4bdffe..fa9e2f9fe53 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.shopper.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout-block.shopper.block_theme.side_effects.spec.ts @@ -43,7 +43,7 @@ const blockData: BlockData = { test.describe( 'Shopper → Account (guest user)', () => { test.use( { storageState: guestFile } ); - test.beforeAll( async ( { requestUtils } ) => { + test.beforeEach( async ( { requestUtils, frontendUtils } ) => { await requestUtils.rest( { method: 'PUT', path: 'wc/v3/settings/account/woocommerce_enable_guest_checkout', @@ -54,9 +54,7 @@ test.describe( 'Shopper → Account (guest user)', () => { path: 'wc/v3/settings/account/woocommerce_enable_checkout_login_reminder', data: { value: 'yes' }, } ); - } ); - test.beforeEach( async ( { frontendUtils } ) => { - await frontendUtils.emptyCart(); + await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await frontendUtils.goToCheckout(); @@ -129,27 +127,11 @@ test.describe( 'Shopper → Local pickup', () => { .click(); } ); - test.afterEach( async ( { admin } ) => { - // Enable local pickup. - await admin.visitAdminPage( - 'admin.php', - 'page=wc-settings&tab=shipping§ion=pickup_location' - ); - await admin.page.getByRole( 'button', { name: 'Edit' } ).last().click(); - await admin.page - .getByRole( 'button', { name: 'Delete location' } ) - .click(); - await admin.page - .getByRole( 'button', { name: 'Save changes' } ) - .click(); - } ); - test( 'The shopper can choose a local pickup option', async ( { page, frontendUtils, checkoutPageObject, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); await frontendUtils.goToCheckout(); @@ -172,7 +154,6 @@ test.describe( 'Shopper → Local pickup', () => { frontendUtils, checkoutPageObject, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); await frontendUtils.goToCheckout(); @@ -209,7 +190,6 @@ test.describe( 'Shopper → Payment Methods', () => { frontendUtils, page, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); await frontendUtils.goToCheckout(); @@ -257,62 +237,31 @@ test.describe( 'Shopper → Shipping and Billing Addresses', () => { // `as string` is safe here because we know the variable is a string, it is defined above. const blockSelectorInEditor = blockData.selectors.editor.block as string; - test.beforeEach( - async ( { editor, frontendUtils, admin, editorUtils, page } ) => { - await admin.visitSiteEditor( { - postId: 'woocommerce/woocommerce//page-checkout', - postType: 'wp_template', - } ); - await editorUtils.enterEditMode(); - await editor.openDocumentSettingsSidebar(); - await editor.selectBlocks( - blockSelectorInEditor + - ' [data-type="woocommerce/checkout-shipping-address-block"]' - ); + test.beforeEach( async ( { editor, admin, editorUtils, page } ) => { + await admin.visitSiteEditor( { + postId: 'woocommerce/woocommerce//page-checkout', + postType: 'wp_template', + } ); + await editorUtils.enterEditMode(); + await editor.openDocumentSettingsSidebar(); + await editor.selectBlocks( + blockSelectorInEditor + + ' [data-type="woocommerce/checkout-shipping-address-block"]' + ); - const checkbox = page.getByRole( 'checkbox', { - name: 'Company', - exact: true, - } ); - await checkbox.check(); - await expect( checkbox ).toBeChecked(); - await expect( - editor.canvas.locator( - 'div.wc-block-components-address-form__company' - ) - ).toBeVisible(); - await editorUtils.saveSiteEditorEntities(); - await frontendUtils.emptyCart(); - } - ); - - test.afterEach( - async ( { frontendUtils, admin, editorUtils, editor, page } ) => { - await frontendUtils.emptyCart(); - await admin.visitSiteEditor( { - postId: 'woocommerce/woocommerce//page-checkout', - postType: 'wp_template', - } ); - await editorUtils.enterEditMode(); - await editor.openDocumentSettingsSidebar(); - await editor.selectBlocks( - blockSelectorInEditor + - ' [data-type="woocommerce/checkout-shipping-address-block"]' - ); - const checkbox = page.getByRole( 'checkbox', { - name: 'Company', - exact: true, - } ); - await checkbox.uncheck(); - await expect( checkbox ).not.toBeChecked(); - await expect( - editor.canvas.locator( - '.wc-block-checkout__shipping-fields .wc-block-components-address-form__company' - ) - ).toBeHidden(); - await editorUtils.saveSiteEditorEntities(); - } - ); + const checkbox = page.getByRole( 'checkbox', { + name: 'Company', + exact: true, + } ); + await checkbox.check(); + await expect( checkbox ).toBeChecked(); + await expect( + editor.canvas.locator( + 'div.wc-block-components-address-form__company' + ) + ).toBeVisible(); + await editorUtils.saveSiteEditorEntities(); + } ); test( 'User can add postcodes for different countries', async ( { frontendUtils, @@ -342,7 +291,6 @@ test.describe( 'Shopper → Shipping (customer user)', () => { page, } ) => { await frontendUtils.goToShop(); - await frontendUtils.emptyCart(); await frontendUtils.addToCart( 'Beanie' ); await frontendUtils.goToCheckout(); await expect( @@ -414,7 +362,6 @@ test.describe( 'Shopper → Place Guest Order', () => { frontendUtils, page, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); await frontendUtils.goToCheckout(); @@ -433,7 +380,7 @@ test.describe( 'Shopper → Place Guest Order', () => { } ); test.describe( 'Shopper → Place Virtual Order', () => { - test.beforeAll( async ( { requestUtils } ) => { + test.beforeEach( async ( { requestUtils } ) => { await requestUtils.rest( { method: 'PUT', path: 'wc/v3/settings/general/woocommerce_ship_to_countries', @@ -441,14 +388,6 @@ test.describe( 'Shopper → Place Virtual Order', () => { } ); } ); - test.afterAll( async ( { requestUtils } ) => { - await requestUtils.rest( { - method: 'PUT', - path: 'wc/v3/settings/general/woocommerce_ship_to_countries', - data: { value: 'all' }, - } ); - } ); - test( 'can place a digital order when shipping is disabled', async ( { checkoutPageObject, frontendUtils, @@ -457,7 +396,6 @@ test.describe( 'Shopper → Place Virtual Order', () => { } ) => { await localPickupUtils.disableLocalPickup(); - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); await frontendUtils.goToCart(); @@ -490,7 +428,6 @@ test.describe( 'Shopper → Place Virtual Order', () => { } ) => { await localPickupUtils.enableLocalPickup(); - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); await frontendUtils.goToCart(); @@ -521,7 +458,6 @@ test.describe( 'Shopper → Checkout Form Errors (guest user)', () => { frontendUtils, page, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); await frontendUtils.goToCheckout(); @@ -554,36 +490,40 @@ test.describe( 'Shopper → Checkout Form Errors (guest user)', () => { test.describe( 'Billing Address Form', () => { const blockSelectorInEditor = blockData.selectors.editor.block as string; - test( 'Enable company field', async ( { editor, admin, editorUtils } ) => { + test( 'Enable company field', async ( { + page, + editor, + admin, + editorUtils, + } ) => { await admin.visitSiteEditor( { postId: 'woocommerce/woocommerce//page-checkout', postType: 'wp_template', + canvas: 'edit', } ); - await editorUtils.enterEditMode(); + await editor.openDocumentSettingsSidebar(); + await editor.selectBlocks( blockSelectorInEditor + ' [data-type="woocommerce/checkout-shipping-address-block"]' ); - const checkbox = editor.page.getByRole( 'checkbox', { - name: 'Company', + const companyCheckbox = page.getByLabel( 'Company', { exact: true, } ); - await checkbox.check(); - await expect( checkbox ).toBeChecked(); - await expect( - editor.canvas.locator( - 'div.wc-block-components-address-form__company' - ) - ).toBeVisible(); + await companyCheckbox.check(); + await expect( companyCheckbox ).toBeChecked(); + + const companyInput = editor.canvas.getByLabel( 'Company (optional)' ); + await expect( companyInput ).toBeVisible(); + await editorUtils.saveSiteEditorEntities(); } ); const shippingTestData = { firstname: 'John', lastname: 'Doe', - company: 'Automattic', addressfirstline: '123 Easy Street', addresssecondline: 'Testville', country: 'United States (US)', @@ -595,7 +535,6 @@ test.describe( 'Billing Address Form', () => { const billingTestData = { first_name: '', last_name: '', - company: '', address_1: '', address_2: '', country: 'United States (US)', @@ -613,10 +552,10 @@ test.describe( 'Billing Address Form', () => { page, checkoutPageObject, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); await frontendUtils.goToCheckout(); + await checkoutPageObject.fillShippingDetails( shippingTestData ); await page.getByLabel( 'Use same address for billing' ).uncheck(); @@ -675,10 +614,6 @@ test.describe( 'Billing Address Form', () => { page.locator( '#billing-state input' ) ).toHaveValue( value ); break; - default: - await expect( - page.locator( `#billing-${ key }` ) - ).toHaveValue( value ); } } } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/order-confirmation.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/order-confirmation.block_theme.side_effects.spec.ts index feaa1a9f7fb..9476b5709c6 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/order-confirmation.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/order-confirmation.block_theme.side_effects.spec.ts @@ -49,12 +49,7 @@ test.describe( 'Shopper → Order Confirmation (logged in user)', () => { await editorUtils.transformIntoBlocks(); } ); - test.afterEach( async ( { localPickupUtils } ) => { - await localPickupUtils.enableLocalPickup(); - } ); - test( 'Place order', async ( { frontendUtils, pageObject, page } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); await frontendUtils.addToCart( SIMPLE_VIRTUAL_PRODUCT_NAME ); @@ -131,7 +126,6 @@ test.describe( 'Shopper → Order Confirmation (guest user)', () => { 'User is not logged out' ).toBeVisible(); - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_PHYSICAL_PRODUCT_NAME ); await frontendUtils.goToCheckout(); @@ -203,7 +197,6 @@ test.describe( 'Shopper → Order Confirmation → Downloadable Products', () => let confirmationPageUrl: string; test.beforeEach( async ( { frontendUtils, pageObject } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( SIMPLE_VIRTUAL_PRODUCT_NAME ); await frontendUtils.goToCheckout(); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/classic-template/classic-template.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/classic-template/classic-template.block_theme.side_effects.spec.ts index ead3c3c3646..63898037d99 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/classic-template/classic-template.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/classic-template/classic-template.block_theme.side_effects.spec.ts @@ -4,7 +4,6 @@ import { BlockData } from '@woocommerce/e2e-types'; import { test, expect } from '@woocommerce/e2e-playwright-utils'; import { cli } from '@woocommerce/e2e-utils'; -import { deleteAllTemplates } from '@wordpress/e2e-test-utils'; /** * Internal dependencies @@ -14,94 +13,94 @@ const blockData: Partial< BlockData > = { name: 'woocommerce/legacy-template', }; -const templates = { - 'single-product': { - templateTitle: 'Single Product', +const templates = [ + { + title: 'Single Product', slug: 'single-product', - frontendPage: '/product/single/', + path: '/product/single/', }, - // This test is disabled because archives are disabled for attributes by default. This can be uncommented when this is toggled on. - //'taxonomy-product_attribute': { - // templateTitle: 'Product Attribute', + // This test is disabled because archives are disabled for attributes by + // default. This can be uncommented when this is toggled on. + //{ + // title: 'Product Attribute', // slug: 'taxonomy-product_attribute', - // frontendPage: '/product-attribute/color/', + // path: '/product-attribute/color/', //}, - 'taxonomy-product_cat': { - templateTitle: 'Product Category', + { + title: 'Product Category', slug: 'taxonomy-product_cat', - frontendPage: '/product-category/music/', + path: '/product-category/music/', }, - 'taxonomy-product_tag': { - templateTitle: 'Product Tag', + { + title: 'Product Tag', slug: 'taxonomy-product_tag', - frontendPage: '/product-tag/recommended/', + path: '/product-tag/recommended/', }, - 'archive-product': { - templateTitle: 'Product Catalog', + { + title: 'Product Catalog', slug: 'archive-product', - frontendPage: '/shop/', + path: '/shop/', }, - 'product-search-results': { - templateTitle: 'Product Search Results', + { + title: 'Product Search Results', slug: 'product-search-results', - frontendPage: '/?s=s&post_type=product', + path: '/?s=s&post_type=product', }, -}; +]; -test.beforeAll( async () => { - await cli( - 'npm run wp-env run tests-cli -- wp option update wc_blocks_use_blockified_product_grid_block_as_template false' - ); - await deleteAllTemplates( 'wp_template' ); -} ); +test.describe( `${ blockData.name } Block `, () => { + test.beforeEach( async () => { + await cli( + 'npm run wp-env run tests-cli -- wp option update wc_blocks_use_blockified_product_grid_block_as_template false' + ); + } ); -test.afterAll( async () => { - await cli( - 'npm run wp-env run tests-cli -- wp option delete wc_blocks_use_blockified_product_grid_block_as_template' - ); - await deleteAllTemplates( 'wp_template' ); -} ); - -for ( const { templateTitle, slug } of Object.values( templates ) ) { - test.describe( `${ blockData.name } Block `, () => { - test( `is rendered on ${ templateTitle } template`, async ( { + for ( const template of templates ) { + test( `is rendered on ${ template.title } template`, async ( { admin, - editorUtils, + editor, } ) => { await admin.visitSiteEditor( { - postId: `woocommerce/woocommerce//${ slug }`, + postId: `woocommerce/woocommerce//${ template.slug }`, postType: 'wp_template', + canvas: 'edit', } ); - await editorUtils.enterEditMode(); - const block = await editorUtils.getBlockByName( blockData.name ); + + const block = editor.canvas.locator( + `[data-type="${ blockData.name }"]` + ); await expect( block ).toBeVisible(); } ); - // These tests consistently fail due to the default content of the page--potentially the classic block is not being - // used after another test runs. Reenable this when we have a solution for this. + // These tests consistently fail due to the default content of the + // page--potentially the classic block is not being used after + // another test runs. Reenable this when we have a solution for + // this. // eslint-disable-next-line playwright/no-skipped-test - test.skip( `is rendered on ${ templateTitle } template - frontend side`, async ( { + test.skip( `is rendered on ${ template.title } template - frontend side`, async ( { admin, editor, - editorUtils, page, } ) => { await admin.visitSiteEditor( { - postId: `woocommerce/woocommerce//${ slug }`, + postId: `woocommerce/woocommerce//${ template.slug }`, postType: 'wp_template', + canvas: 'edit', } ); - await editorUtils.enterEditMode(); + await editor.insertBlock( { name: 'core/paragraph', attributes: { content: 'Hello World' }, } ); + await editor.saveSiteEditorEntities(); - await page.goto( frontendPage ); + + await page.goto( template.path ); await expect( page.getByText( 'Hello World' ).first() ).toBeVisible(); } ); - } ); -} + } +} ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/active-filters.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/active-filters.block_theme.spec.ts index 796afcba86e..2b654b72191 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/active-filters.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/active-filters.block_theme.spec.ts @@ -22,7 +22,7 @@ const test = base.extend< { }, } ); -test.describe( 'Product Filter: Active Filters Block', async () => { +test.describe( 'Product Filter: Active Filters Block', () => { test.describe( 'frontend', () => { test( 'Without any filters selected, only a wrapper block is rendered', async ( { page, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/attribute-filter.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/attribute-filter.block_theme.spec.ts index 1901a407cbe..32e7fd1af8b 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/attribute-filter.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/attribute-filter.block_theme.spec.ts @@ -70,7 +70,7 @@ const test = base.extend< { }, } ); -test.describe( 'Product Filter: Attribute Block', async () => { +test.describe( 'Product Filter: Attribute Block', () => { test.describe( 'With default display style', () => { test.describe( 'With show counts enabled', () => { test( 'Renders checkboxes with associated product counts', async ( { diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/basic.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/basic.block_theme.spec.ts index f4b182c392c..9192a97daef 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/basic.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/basic.block_theme.spec.ts @@ -31,7 +31,7 @@ const filterBlocks = [ }, ]; -test.describe( 'Filter blocks registration', async () => { +test.describe( 'Filter blocks registration', () => { test.beforeEach( async ( { admin } ) => { await admin.createNewPost(); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/price-filter.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/price-filter.block_theme.spec.ts index 5de113c3efc..3a34b3c063c 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/price-filter.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/price-filter.block_theme.spec.ts @@ -22,7 +22,7 @@ const test = base.extend< { }, } ); -test.describe( 'Product Filter: Price Filter Block', async () => { +test.describe( 'Product Filter: Price Filter Block', () => { test.describe( 'frontend', () => { test( 'With price filters applied it shows the correct price', async ( { page, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/rating-filter.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/rating-filter.block_theme.spec.ts index 3f037eaa730..14e25b38d7c 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/rating-filter.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/rating-filter.block_theme.spec.ts @@ -22,7 +22,7 @@ const test = base.extend< { }, } ); -test.describe( 'Product Filter: Rating Filter Block', async () => { +test.describe( 'Product Filter: Rating Filter Block', () => { test.describe( 'frontend', () => { test( 'Renders a checkbox list with the available ratings', async ( { page, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/stock-status.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/stock-status.block_theme.spec.ts index 0d6112fa110..f5ab3553abe 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/stock-status.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/stock-status.block_theme.spec.ts @@ -38,7 +38,7 @@ const test = base.extend< { }, } ); -test.describe( 'Product Filter: Stock Status Block', async () => { +test.describe( 'Product Filter: Stock Status Block', () => { test.describe( 'With default display style', () => { test( 'renders a checkbox list with the available stock statuses', async ( { page, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/local-pickup/local-pickup.merchant.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/local-pickup/local-pickup.merchant.block_theme.side_effects.spec.ts index 5373793a168..7e1f311b17a 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/local-pickup/local-pickup.merchant.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/local-pickup/local-pickup.merchant.block_theme.side_effects.spec.ts @@ -25,11 +25,6 @@ test.describe( 'Merchant → Local Pickup Settings', () => { await localPickupUtils.enableLocalPickup(); } ); - test.afterEach( async ( { localPickupUtils } ) => { - await localPickupUtils.deleteLocations(); - await localPickupUtils.setLocalPickupTitle( 'Local Pickup' ); - } ); - test( 'Updating the title in WC Settings updates the local pickup text in the block and vice/versa', async ( { page, localPickupUtils, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart-block.merchant.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart-block.merchant.block_theme.side_effects.spec.ts index d5576e466b3..a0a8c87f6ca 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart-block.merchant.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart-block.merchant.block_theme.side_effects.spec.ts @@ -19,12 +19,6 @@ const blockData: BlockData = { test.describe( 'Merchant → Mini Cart', () => { test.describe( 'in FSE editor', () => { - test.afterAll( async ( { templateApiUtils } ) => { - await templateApiUtils.revertTemplate( - 'woocommerce/woocommerce//single-product' - ); - } ); - test( 'can be inserted in FSE area', async ( { editorUtils, editor, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart-block.shopper.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart-block.shopper.block_theme.side_effects.spec.ts index fad9219e018..60b1395f6fe 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart-block.shopper.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart-block.shopper.block_theme.side_effects.spec.ts @@ -10,22 +10,10 @@ import { cli } from '@woocommerce/e2e-utils'; import { REGULAR_PRICED_PRODUCT_NAME } from '../checkout/constants'; test.describe( 'Shopper → Translations', () => { - test.beforeAll( async () => { - await cli( - `npm run wp-env run tests-cli -- wp language core install nl_NL` - ); + test.beforeEach( async () => { await cli( `npm run wp-env run tests-cli -- wp site switch-language nl_NL` ); - await cli( - `npm run wp-env run tests-cli -- wp language plugin install woocommerce nl_NL` - ); - } ); - - test.afterAll( async () => { - await cli( - `npm run wp-env run tests-cli -- wp site switch-language en_US` - ); } ); test( 'User can see translation in empty Mini-Cart', async ( { @@ -33,7 +21,6 @@ test.describe( 'Shopper → Translations', () => { frontendUtils, miniCartUtils, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await miniCartUtils.openMiniCart(); @@ -70,7 +57,7 @@ test.describe( 'Shopper → Translations', () => { } ); test.describe( 'Shopper → Tax', () => { - test.beforeAll( async () => { + test.beforeEach( async () => { await cli( `npm run wp-env run tests-cli -- wp option set woocommerce_prices_include_tax no` ); @@ -79,20 +66,10 @@ test.describe( 'Shopper → Tax', () => { ); } ); - test.afterAll( async () => { - await cli( - `npm run wp-env run tests-cli -- wp option set woocommerce_prices_include_tax yes` - ); - await cli( - `npm run wp-env run tests-cli -- wp option set woocommerce_tax_display_cart excl` - ); - } ); - test( 'User can see tax label and price including tax', async ( { frontendUtils, page, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await frontendUtils.goToMiniCart(); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts index 06c1ac5e0ef..d52d4c60eb0 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/mini-cart/mini-cart.block_theme.spec.ts @@ -112,7 +112,6 @@ test.describe( `${ blockData.name } Block`, () => { frontendUtils, miniCartUtils, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await miniCartUtils.openMiniCart(); @@ -135,7 +134,6 @@ test.describe( `${ blockData.name } Block`, () => { frontendUtils, miniCartUtils, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await miniCartUtils.openMiniCart(); @@ -150,7 +148,6 @@ test.describe( `${ blockData.name } Block`, () => { frontendUtils, miniCartUtils, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await miniCartUtils.openMiniCart(); @@ -171,7 +168,6 @@ test.describe( `${ blockData.name } Block`, () => { frontendUtils, miniCartUtils, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await miniCartUtils.openMiniCart(); @@ -206,7 +202,6 @@ test.describe( `${ blockData.name } Block`, () => { frontendUtils, miniCartUtils, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await miniCartUtils.openMiniCart(); @@ -229,7 +224,6 @@ test.describe( `${ blockData.name } Block`, () => { frontendUtils, miniCartUtils, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await miniCartUtils.openMiniCart(); @@ -242,7 +236,6 @@ test.describe( `${ blockData.name } Block`, () => { frontendUtils, miniCartUtils, } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart( REGULAR_PRICED_PRODUCT_NAME ); await miniCartUtils.openMiniCart(); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/on-sale-badge/on-sale-badge-single-product-template.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/on-sale-badge/on-sale-badge-single-product-template.block_theme.side_effects.spec.ts index 0ff6eef98b9..423143ce6de 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/on-sale-badge/on-sale-badge-single-product-template.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/on-sale-badge/on-sale-badge-single-product-template.block_theme.side_effects.spec.ts @@ -72,22 +72,13 @@ const getBoundingClientRect = async ( { }; test.describe( `${ blockData.name }`, () => { test.describe( `On the Single Product Template`, () => { - test.beforeEach( - async ( { requestUtils, admin, editorUtils, editor } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); - await admin.visitSiteEditor( { - postId: `woocommerce/woocommerce//${ blockData.slug }`, - postType: 'wp_template', - } ); - await editorUtils.enterEditMode(); - await editor.setContent( '' ); - } - ); - - test.afterEach( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); + test.beforeEach( async ( { admin, editorUtils, editor } ) => { + await admin.visitSiteEditor( { + postId: `woocommerce/woocommerce//${ blockData.slug }`, + postType: 'wp_template', + } ); + await editorUtils.enterEditMode(); + await editor.setContent( '' ); } ); test( 'should be rendered on the editor side', async ( { diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/page-content-wrapper/page-content-wrapper.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/page-content-wrapper/page-content-wrapper.block_theme.side_effects.spec.ts index 3ff9263791f..45c1dd439ad 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/page-content-wrapper/page-content-wrapper.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/page-content-wrapper/page-content-wrapper.block_theme.side_effects.spec.ts @@ -9,6 +9,7 @@ import type { FrontendUtils } from '@woocommerce/e2e-utils'; const templates = [ { title: 'Cart', + slug: 'cart', blockClassName: '.wc-block-cart', visitPage: async ( { frontendUtils, @@ -20,6 +21,7 @@ const templates = [ }, { title: 'Checkout', + slug: 'checkout', blockClassName: '.wc-block-checkout', visitPage: async ( { frontendUtils, @@ -35,21 +37,26 @@ const templates = [ const userText = 'Hello World in the page'; templates.forEach( async ( template ) => { - test.describe( 'Page Content Wrapper', async () => { - test.beforeAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - } ); + test.describe( 'Page Content Wrapper', () => { test( `the content of the ${ template.title } page is correctly rendered in the ${ template.title } template`, async ( { - admin, page, + admin, editorUtils, frontendUtils, + requestUtils, } ) => { - await admin.visitAdminPage( 'edit.php?post_type=page' ); - await page.getByLabel( `“${ template.title }” (Edit)` ).click(); + const pageData = await requestUtils.rest( { + path: 'wp/v2/pages?slug=' + template.slug, + } ); + const pageId = pageData[ 0 ].id; - // Prevent trying to insert the paragraph block before the editor is ready. - await page.locator( template.blockClassName ).waitFor(); + await admin.editPost( pageId ); + + // Prevent trying to insert the paragraph block before the editor is + // ready. + await expect( + page.locator( template.blockClassName ) + ).toBeVisible(); await editorUtils.editor.insertBlock( { name: 'core/paragraph', @@ -61,18 +68,6 @@ templates.forEach( async ( template ) => { // Verify edits are in the template when viewed from the frontend. await template.visitPage( { frontendUtils } ); await expect( page.getByText( userText ).first() ).toBeVisible(); - - // Clean up the paragraph block added before. - await admin.visitAdminPage( 'edit.php?post_type=page' ); - await page.getByLabel( `“${ template.title }” (Edit)` ).click(); - - // Prevent trying to insert the paragraph block before the editor is ready. - await page.locator( template.blockClassName ).waitFor(); - - await editorUtils.removeBlocks( { - name: 'core/paragraph', - } ); - await editorUtils.updatePost(); } ); } ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/price-filter/price-filter.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/price-filter/price-filter.block_theme.side_effects.spec.ts index ab93e8e3a69..0d38d5bb783 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/price-filter/price-filter.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/price-filter/price-filter.block_theme.side_effects.spec.ts @@ -131,12 +131,11 @@ test.describe( `${ blockData.name } Block - with All products Block`, () => { } ); // These tests are disabled because there is an issue with the default contents of this page, possible caused by other tests. test.describe( `${ blockData.name } Block - with PHP classic template`, () => { - test.beforeAll( async () => { + test.beforeEach( async ( { admin, page, editor } ) => { await cli( 'npm run wp-env run tests-cli -- wp option update wc_blocks_use_blockified_product_grid_block_as_template false' ); - } ); - test.beforeEach( async ( { admin, page, editor } ) => { + await admin.visitSiteEditor( { postId: 'woocommerce/woocommerce//archive-product', postType: 'wp_template', @@ -155,12 +154,6 @@ test.describe( `${ blockData.name } Block - with PHP classic template`, () => { await page.goto( `/shop` ); } ); - test.afterEach( async ( { templateApiUtils } ) => { - await templateApiUtils.revertTemplate( - 'woocommerce/woocommerce//archive-product' - ); - } ); - test( 'should show all products', async ( { frontendUtils } ) => { const legacyTemplate = await frontendUtils.getBlockByName( 'woocommerce/legacy-template' @@ -201,10 +194,4 @@ test.describe( `${ blockData.name } Block - with PHP classic template`, () => { await expect( products ).toHaveCount( 1 ); } ); - - test.afterAll( async () => { - await cli( - 'npm run wp-env run tests-cli -- wp option delete wc_blocks_use_blockified_product_grid_block_as_template' - ); - } ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-button/product-button.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-button/product-button.block_theme.side_effects.spec.ts index 0bc5c3eda8d..b94435d10a0 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-button/product-button.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-button/product-button.block_theme.side_effects.spec.ts @@ -2,10 +2,6 @@ * External dependencies */ import { expect, test } from '@woocommerce/e2e-playwright-utils'; -import { - installPluginFromPHPFile, - uninstallPluginFromPHPFile, -} from '@woocommerce/e2e-mocks/custom-plugins'; /** * Internal dependencies @@ -13,11 +9,7 @@ import { import { blockData, handleAddToCartAjaxSetting } from './utils'; test.describe( `${ blockData.name } Block`, () => { - test.beforeAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - } ); - test.beforeEach( async ( { frontendUtils, storeApiUtils } ) => { - await storeApiUtils.cleanCart(); + test.beforeEach( async ( { frontendUtils } ) => { await frontendUtils.goToShop(); } ); @@ -120,10 +112,11 @@ test.describe( `${ blockData.name } Block`, () => { } ); test( 'the filter `woocommerce_product_add_to_cart_text` should be applied', async ( { + requestUtils, frontendUtils, } ) => { - await installPluginFromPHPFile( - `${ __dirname }/update-product-button-text.php` + await requestUtils.activatePlugin( + 'woocommerce-blocks-test-custom-add-to-cart-button-text' ); await frontendUtils.goToShop(); const blocks = await frontendUtils.getBlockByName( blockData.slug ); @@ -132,11 +125,4 @@ test.describe( `${ blockData.name } Block`, () => { blockData.selectors.frontend.productsToDisplay ); } ); - - test.afterAll( async ( { storeApiUtils } ) => { - await storeApiUtils.cleanCart(); - await uninstallPluginFromPHPFile( - `${ __dirname }/update-product-button-text.php` - ); - } ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/compatibility-layer.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/compatibility-layer.block_theme.side_effects.spec.ts index 3ae2b4daac2..4fdf4ea5afc 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/compatibility-layer.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/compatibility-layer.block_theme.side_effects.spec.ts @@ -2,10 +2,6 @@ * External dependencies */ import { test as base, expect } from '@woocommerce/e2e-playwright-utils'; -import { - installPluginFromPHPFile, - uninstallPluginFromPHPFile, -} from '@woocommerce/e2e-mocks/custom-plugins'; /** * Internal dependencies @@ -79,7 +75,6 @@ const multipleOccurrenceScenarios: Scenario[] = [ }, ]; -const compatibilityPluginFileName = 'compatibility-plugin.php'; const test = base.extend< { pageObject: ProductCollectionPage } >( { pageObject: async ( { page, admin, editor, templateApiUtils, editorUtils }, @@ -97,14 +92,12 @@ const test = base.extend< { pageObject: ProductCollectionPage } >( { } ); test.describe( 'Compatibility Layer with Product Collection block', () => { - test.beforeAll( async () => { - await installPluginFromPHPFile( - `${ __dirname }/${ compatibilityPluginFileName }` - ); - } ); + test.describe( 'Product Archive with Product Collection block', () => { + test.beforeEach( async ( { pageObject, requestUtils } ) => { + await requestUtils.activatePlugin( + 'woocommerce-blocks-test-product-collection-compatibility-layer' + ); - test.describe( 'Product Archive with Product Collection block', async () => { - test.beforeEach( async ( { pageObject } ) => { await pageObject.replaceProductsWithProductCollectionInTemplate( 'woocommerce/woocommerce//archive-product' ); @@ -133,11 +126,4 @@ test.describe( 'Compatibility Layer with Product Collection block', () => { } ); } } ); - - test.afterAll( async ( { requestUtils } ) => { - await uninstallPluginFromPHPFile( - `${ __dirname }/${ compatibilityPluginFileName }` - ); - await requestUtils.deleteAllTemplates( 'wp_template' ); - } ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.side_effects.spec.ts index 02ee45003cf..698114b7eb6 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.side_effects.spec.ts @@ -47,7 +47,7 @@ test.describe( 'Product Collection', () => { await expect( pageObject.addToCartButtons ).toHaveCount( 9 ); } ); - test.describe( 'Renders correctly with all Product Elements', async () => { + test.describe( 'Renders correctly with all Product Elements', () => { const insertProductElements = async ( pageObject: ProductCollectionPage ) => { @@ -177,21 +177,23 @@ test.describe( 'Product Collection', () => { test( 'Order By - sort products by title in descending order correctly', async ( { pageObject, } ) => { - await pageObject.setOrderBy( 'title/desc' ); - const allTitles = await pageObject.productTitles.allInnerTexts(); - const expectedTitles = [ ...allTitles ].sort().reverse(); + const sortedTitles = [ + 'WordPress Pennant', + 'V-Neck T-Shirt', + 'T-Shirt with Logo', + 'T-Shirt', + /Sunglasses/, // In the frontend it's "Protected: Sunglasses" + 'Single', + 'Polo', + 'Long Sleeve Tee', + 'Logo Collection', + ]; - expect( allTitles ).toStrictEqual( expectedTitles ); + await pageObject.setOrderBy( 'title/desc' ); + await expect( pageObject.productTitles ).toHaveText( sortedTitles ); await pageObject.publishAndGoToFrontend(); - - const frontendTitles = - await pageObject.productTitles.allInnerTexts(); - expect( - frontendTitles.map( ( title ) => - title.replace( 'Protected: ', '' ) - ) - ).toStrictEqual( expectedTitles ); + await expect( pageObject.productTitles ).toHaveText( sortedTitles ); } ); // Products can be filtered based on 'on sale' status. diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image-next-previous/product-gallery-large-image-next-previous.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image-next-previous/product-gallery-large-image-next-previous.block_theme.side_effects.spec.ts index 877c05a0d90..d84cf6002ca 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image-next-previous/product-gallery-large-image-next-previous.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image-next-previous/product-gallery-large-image-next-previous.block_theme.side_effects.spec.ts @@ -87,9 +87,7 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( { } ); test.describe( `${ blockData.name }`, () => { - test.beforeEach( async ( { requestUtils, admin, editorUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); + test.beforeEach( async ( { admin, editorUtils } ) => { await admin.visitSiteEditor( { postId: `woocommerce/woocommerce//${ blockData.slug }`, postType: 'wp_template', @@ -97,11 +95,6 @@ test.describe( `${ blockData.name }`, () => { await editorUtils.enterEditMode(); } ); - test.afterEach( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); - } ); - // eslint-disable-next-line playwright/no-skipped-test test.skip( 'Renders Next/Previous Button block on the editor side', async ( { editor, @@ -160,28 +153,26 @@ test.describe( `${ blockData.name }`, () => { .locator( blockData.selectors.editor.noArrowsOption ) .click(); - const isVisible = await page - .locator( - '.wc-block-product-gallery-large-image-next-previous-container' - ) - .isVisible(); + const container = page.locator( + '.wc-block-product-gallery-large-image-next-previous-container' + ); - expect( isVisible ).toBe( false ); + await expect( container ).toBeHidden(); await editor.saveSiteEditorEntities(); await page.goto( blockData.productPage ); - const leftArrow = await page - .locator( blockData.selectors.editor.leftArrow.off ) - .isVisible(); + const leftArrow = page.locator( + blockData.selectors.editor.leftArrow.off + ); - const rightArrow = await page - .locator( blockData.selectors.editor.rightArrow.off ) - .isVisible(); + const rightArrow = page.locator( + blockData.selectors.editor.rightArrow.off + ); - expect( leftArrow ).toBe( false ); - expect( rightArrow ).toBe( false ); + await expect( leftArrow ).toBeHidden(); + await expect( rightArrow ).toBeHidden(); } ); // eslint-disable-next-line playwright/no-skipped-test diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.side_effects.spec.ts index 660fc9c4325..78917b2a894 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.side_effects.spec.ts @@ -31,9 +31,7 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( { } ); test.describe( `${ blockData.name }`, () => { - test.beforeEach( async ( { requestUtils, admin, editorUtils, editor } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); + test.beforeEach( async ( { admin, editorUtils, editor } ) => { await admin.visitSiteEditor( { postId: `woocommerce/woocommerce//${ blockData.slug }`, postType: 'wp_template', @@ -42,11 +40,6 @@ test.describe( `${ blockData.name }`, () => { await editor.openDocumentSettingsSidebar(); } ); - test.afterEach( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); - } ); - test( 'Renders Product Gallery Large Image block on the editor and frontend side', async ( { page, editor, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-pager/product-gallery-pager.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-pager/product-gallery-pager.block_theme.side_effects.spec.ts index a9a87e7bacb..746cca37d22 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-pager/product-gallery-pager.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-pager/product-gallery-pager.block_theme.side_effects.spec.ts @@ -44,11 +44,6 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( { } ); test.describe( `${ blockData.name }`, () => { - test.beforeAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); - } ); - test.beforeEach( async ( { admin, editorUtils, editor } ) => { await admin.visitSiteEditor( { postId: `woocommerce/woocommerce//${ blockData.slug }`, @@ -58,11 +53,6 @@ test.describe( `${ blockData.name }`, () => { await editor.openDocumentSettingsSidebar(); } ); - test.afterEach( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); - } ); - test( 'Renders Product Gallery Pager block on the editor and frontend side', async ( { page, editor, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/product-gallery-thumbnails.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/product-gallery-thumbnails.block_theme.side_effects.spec.ts index 46c06677373..0e44415dc30 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/product-gallery-thumbnails.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-thumbnails/product-gallery-thumbnails.block_theme.side_effects.spec.ts @@ -48,9 +48,7 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( { }, } ); test.describe( `${ blockData.name }`, () => { - test.beforeEach( async ( { requestUtils, admin, editorUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); + test.beforeEach( async ( { admin, editorUtils } ) => { await admin.visitSiteEditor( { postId: `woocommerce/woocommerce//${ blockData.slug }`, postType: 'wp_template', @@ -143,11 +141,11 @@ test.describe( `${ blockData.name }`, () => { .locator( blockData.selectors.editor.noThumbnailsOption ) .click(); - const isVisible = await page - .locator( blockData.selectors.editor.thumbnails ) - .isVisible(); + const element = page.locator( + blockData.selectors.editor.thumbnails + ); - expect( isVisible ).toBe( false ); + await expect( element ).toBeHidden(); await editor.saveSiteEditorEntities(); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts index 63aeaed6d45..2ff960b88d2 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts @@ -83,9 +83,7 @@ const getThumbnailImageIdByNth = async ( }; test.describe( `${ blockData.name }`, () => { - test.beforeEach( async ( { requestUtils, admin, editorUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); + test.beforeEach( async ( { admin, editorUtils } ) => { await admin.visitSiteEditor( { postId: `woocommerce/woocommerce//${ blockData.slug }`, postType: 'wp_template', @@ -93,11 +91,6 @@ test.describe( `${ blockData.name }`, () => { await editorUtils.enterEditMode(); } ); - test.afterEach( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); - } ); - test.describe( 'with thumbnails', () => { test( 'should have as first thumbnail, the same image that it is visible in the Large Image block', async ( { page, @@ -570,6 +563,7 @@ test.describe( `${ blockData.name }`, () => { editor, pageObject, } ) => { + await editor.openDocumentSettingsSidebar(); await pageObject.addProductGalleryBlock( { cleanContent: true } ); await page diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/products/products.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/products/products.block_theme.side_effects.spec.ts index 8c6dc21e5cd..4c2590b6bca 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/products/products.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/products/products.block_theme.side_effects.spec.ts @@ -123,10 +123,6 @@ for ( const { legacyBlockName, } of Object.values( templates ) ) { test.describe( `${ templateTitle } template`, () => { - test.afterAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); - } ); test( 'Products block matches with classic template block', async ( { admin, editor, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/single-product-template/single-product-template-compatibility-layer.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/single-product-template/single-product-template-compatibility-layer.spec.ts index 77d6cc511da..e6c1ac75209 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/single-product-template/single-product-template-compatibility-layer.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/single-product-template/single-product-template-compatibility-layer.spec.ts @@ -2,10 +2,6 @@ * External dependencies */ import { test, expect } from '@woocommerce/e2e-playwright-utils'; -import { - installPluginFromPHPFile, - uninstallPluginFromPHPFile, -} from '@woocommerce/e2e-mocks/custom-plugins'; /** * Internal dependencies @@ -87,24 +83,20 @@ const singleOccurranceScenarios: Scenario[] = [ }, ]; -const compatiblityPluginFileName = 'compatibility-plugin.php'; - test.describe( 'Compatibility Layer with Product Collection block', () => { - test.beforeAll( async () => { - await installPluginFromPHPFile( - `${ __dirname }/${ compatiblityPluginFileName }` + test.beforeEach( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( + 'woocommerce-blocks-test-single-product-template-compatibility-layer' ); } ); + // eslint-disable-next-line playwright/valid-describe-callback test.describe( 'Product Archive with Product Collection block', async () => { - test.beforeAll( async ( { page } ) => { - await page.goto( '/product/hoodie/' ); - } ); - for ( const scenario of singleOccurranceScenarios ) { test( `${ scenario.title } is attached to the page`, async ( { page, } ) => { + await page.goto( '/product/hoodie/' ); const hooks = page.getByTestId( scenario.dataTestId ); await expect( hooks ).toHaveCount( scenario.amount ); @@ -113,10 +105,3 @@ test.describe( 'Compatibility Layer with Product Collection block', () => { } } ); } ); - -test.afterAll( async ( { requestUtils } ) => { - await uninstallPluginFromPHPFile( - `${ __dirname }/${ compatiblityPluginFileName }` - ); - await requestUtils.deleteAllTemplates( 'wp_template' ); -} ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/single-product-template/single-product-template.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/single-product-template/single-product-template.block_theme.spec.ts index 20d6da84917..bf8fc6aa377 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/single-product-template/single-product-template.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/single-product-template/single-product-template.block_theme.spec.ts @@ -41,7 +41,7 @@ const products = [ ]; for ( const { classes, product, frontendPage } of products ) { - test.describe( `The Single Product page of the ${ product }`, () => + test.describe( `The Single Product page of the ${ product }`, () => { test( 'add product specific classes to the body', async ( { page, } ) => { @@ -52,7 +52,8 @@ for ( const { classes, product, frontendPage } of products ) { classes.forEach( ( className ) => { expect( bodyClasses?.split( ' ' ) ).toContain( className ); } ); - } ) ); + } ); + } ); } test( 'shows password form in products protected with password', async ( { diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/cart-template.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/cart-template.block_theme.spec.ts index d66b3e0f7d8..2242c6ddefa 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/cart-template.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/cart-template.block_theme.spec.ts @@ -7,7 +7,7 @@ const permalink = '/cart'; const templatePath = 'woocommerce/woocommerce//page-cart'; const templateType = 'wp_template'; -test.describe( 'Test the cart template', async () => { +test.describe( 'Test the cart template', () => { test( 'Template can be opened in the site editor', async ( { admin, page, @@ -32,7 +32,7 @@ test.describe( 'Test the cart template', async () => { page, editorUtils, } ) => { - await admin.visitAdminPage( 'site-editor.php', 'path=%2Fpage' ); + await admin.visitSiteEditor( { path: '/page' } ); await editor.page .getByRole( 'button', { name: 'Cart', exact: true } ) .click(); @@ -63,12 +63,7 @@ test.describe( 'Test the cart template', async () => { } ); } ); -test.describe( 'Test editing the cart template', async () => { - test.afterAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); - } ); - +test.describe( 'Test editing the cart template', () => { test( 'Merchant can transform shortcode block into blocks', async ( { admin, editorUtils, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts index c19515994ab..70d5ece3941 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts @@ -7,7 +7,7 @@ const permalink = '/checkout'; const templatePath = 'woocommerce/woocommerce//page-checkout'; const templateType = 'wp_template'; -test.describe( 'Test the checkout template', async () => { +test.describe( 'Test the checkout template', () => { test( 'Template can be opened in the site editor', async ( { admin, page, @@ -36,7 +36,7 @@ test.describe( 'Test the checkout template', async () => { postId: templatePath, postType: templateType, } ); - await admin.visitAdminPage( 'site-editor.php', 'path=%2Fpage' ); + await admin.visitSiteEditor( { path: '/page' } ); await editor.page .getByRole( 'button', { name: 'Checkout', exact: true } ) .click(); @@ -72,12 +72,7 @@ test.describe( 'Test the checkout template', async () => { } ); } ); -test.describe( 'Test editing the checkout template', async () => { - test.afterAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); - } ); - +test.describe( 'Test editing the checkout template', () => { test( 'Merchant can transform shortcode block into blocks', async ( { admin, editorUtils, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/constants.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/constants.ts index 7a71b862799..236814bc3b1 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/constants.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/constants.ts @@ -87,7 +87,6 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [ }, { visitPage: async ( { frontendUtils } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart(); const block = await frontendUtils.getBlockByName( @@ -110,7 +109,6 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [ }, { visitPage: async ( { frontendUtils } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart(); await frontendUtils.goToCheckout(); @@ -122,7 +120,6 @@ export const CUSTOMIZABLE_WC_TEMPLATES: TemplateCustomizationTest[] = [ }, { visitPage: async ( { frontendUtils } ) => { - await frontendUtils.emptyCart(); await frontendUtils.goToShop(); await frontendUtils.addToCart(); await frontendUtils.goToCheckout(); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/legacy-templates.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/legacy-templates.block_theme.spec.ts index c860cca2268..b02cad43428 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/legacy-templates.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/legacy-templates.block_theme.spec.ts @@ -4,12 +4,8 @@ import { test, expect } from '@woocommerce/e2e-playwright-utils'; import { cli } from '@woocommerce/e2e-utils'; -test.describe( 'Legacy templates', async () => { - test.beforeAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - } ); - - test.afterEach( async ( { requestUtils } ) => { +test.describe( 'Legacy templates', () => { + test.beforeEach( async ( { requestUtils } ) => { await requestUtils.deleteAllTemplates( 'wp_template' ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/order-confirmation.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/order-confirmation.block_theme.spec.ts index 4adef316079..7d2d21834ae 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/order-confirmation.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/order-confirmation.block_theme.spec.ts @@ -3,7 +3,7 @@ */ import { test, expect } from '@woocommerce/e2e-playwright-utils'; -test.describe( 'Test the order confirmation template', async () => { +test.describe( 'Test the order confirmation template', () => { test( 'Template can be opened in the site editor', async ( { page, editorUtils, diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/shop-page.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/shop-page.block_theme.spec.ts index b086f737683..4a9650550bf 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/shop-page.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/shop-page.block_theme.spec.ts @@ -4,7 +4,7 @@ import { test, expect } from '@woocommerce/e2e-playwright-utils'; import { cli } from '@woocommerce/e2e-utils'; -test.describe( 'Shop page', async () => { +test.describe( 'Shop page', () => { test( 'template selector is not visible in the Page editor', async ( { admin, page, @@ -14,7 +14,10 @@ test.describe( 'Shop page', async () => { `npm run wp-env run tests-cli -- wp option get woocommerce_shop_page_id` ); const numberMatch = cliOutput.stdout.match( /\d+/ ); - expect( numberMatch ).not.toBeNull(); + // eslint-disable-next-line playwright/no-conditional-in-test + if ( numberMatch === null ) { + throw new Error( 'Shop page ID not found' ); + } await admin.editPost( numberMatch[ 0 ] ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme.spec.ts index e901142d1d5..8683feadf3c 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme.spec.ts @@ -3,11 +3,7 @@ */ import { test, expect } from '@woocommerce/e2e-playwright-utils'; -test.describe( 'Single Product template', async () => { - test.afterAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - } ); - +test.describe( 'Single Product template', () => { test( 'loads the Single Product template for a specific product', async ( { admin, editor, @@ -24,10 +20,7 @@ test.describe( 'Single Product template', async () => { const userText = 'Hello World in the Belt template'; // Create the specific product template. - await admin.visitAdminPage( - 'site-editor.php', - `path=/${ testData.templateType }` - ); + await admin.visitSiteEditor( { path: `/${ testData.templateType }` } ); await page.getByLabel( 'Add New Template' ).click(); await page .getByRole( 'button', { name: 'Single item: Product' } ) @@ -52,10 +45,9 @@ test.describe( 'Single Product template', async () => { await expect( page.getByText( userText ).first() ).toBeVisible(); // Revert edition. - await admin.visitAdminPage( - 'site-editor.php', - `path=/${ testData.templateType }/all` - ); + await admin.visitSiteEditor( { + path: `/${ testData.templateType }/all`, + } ); await editorUtils.revertTemplateCreation( testData.templateName ); await page.goto( testData.permalink ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme_with_templates.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme_with_templates.spec.ts index 3f1764d812a..c6fc2cbf97e 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme_with_templates.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/single-product-template.block_theme_with_templates.spec.ts @@ -18,11 +18,7 @@ const testData = { const userText = 'Hello World in the Belt template'; const themeTemplateText = 'Single Product Belt template loaded from theme'; -test.describe( 'Single Product Template', async () => { - test.afterAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); - } ); - +test.describe( 'Single Product Template', () => { test( 'loads the theme template for a specific product using the product slug and it can be customized', async ( { admin, editor, @@ -48,10 +44,9 @@ test.describe( 'Single Product Template', async () => { await expect( page.getByText( userText ).first() ).toBeVisible(); // Revert edition and verify the template from the theme is used. - await admin.visitAdminPage( - 'site-editor.php', - `path=/${ testData.templateType }/all` - ); + await admin.visitSiteEditor( { + path: `/${ testData.templateType }/all`, + } ); await editorUtils.revertTemplateCustomizations( testData.templateName ); await page.goto( testData.permalink ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.side_effects.spec.ts index 78f347d1029..fef99109dcb 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.side_effects.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.side_effects.spec.ts @@ -20,11 +20,7 @@ for ( const testData of testToRun ) { const userText = `Hello World in the ${ testData.templateName } template`; const woocommerceTemplateUserText = `Hello World in the WooCommerce ${ testData.templateName } template`; - test.describe( `${ testData.templateName } template`, async () => { - test.afterAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( testData.templateType ); - } ); - + test.describe( `${ testData.templateName } template`, () => { test( `user-modified ${ testData.templateName } template based on the theme template has priority over the user-modified template based on the default WooCommerce template`, async ( { page, admin, @@ -73,10 +69,9 @@ for ( const testData of testToRun ) { // `deleteAllTemplates()`). This way, we verify there are no // duplicate templates with the same name. // See: https://github.com/woocommerce/woocommerce/issues/42220 - await admin.visitAdminPage( - 'site-editor.php', - `path=/${ testData.templateType }/all` - ); + await admin.visitSiteEditor( { + path: `/${ testData.templateType }/all`, + } ); await editorUtils.revertTemplateCustomizations( testData.templateName ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.spec.ts index d0fa03a5bcc..ec878d3cb95 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.spec.ts @@ -14,11 +14,7 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => { const templateTypeName = testData.templateType === 'wp_template' ? 'template' : 'template part'; - test.describe( `${ testData.templateName } template`, async () => { - test.afterAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( testData.templateType ); - } ); - + test.describe( `${ testData.templateName } template`, () => { test( 'can be modified and reverted', async ( { admin, frontendUtils, @@ -48,10 +44,9 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => { await expect( page.getByText( userText ).first() ).toBeVisible(); // Verify the edition can be reverted. - await admin.visitAdminPage( - 'site-editor.php', - `path=/${ testData.templateType }/all` - ); + await admin.visitSiteEditor( { + path: `/${ testData.templateType }/all`, + } ); await editorUtils.revertTemplateCustomizations( testData.templateName ); @@ -85,10 +80,9 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => { ).toBeVisible(); // Verify the edition can be reverted. - await admin.visitAdminPage( - 'site-editor.php', - `path=/${ testData.templateType }/all` - ); + await admin.visitSiteEditor( { + path: `/${ testData.templateType }/all`, + } ); await editorUtils.revertTemplateCustomizations( testData.fallbackTemplate?.templateName || '' ); diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme_with_templates.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme_with_templates.spec.ts index 756ee9ea726..0edd26c84ec 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme_with_templates.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme_with_templates.spec.ts @@ -17,11 +17,7 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => { const templateTypeName = testData.templateType === 'wp_template' ? 'template' : 'template part'; - test.describe( `${ testData.templateName } template`, async () => { - test.afterAll( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( testData.templateType ); - } ); - + test.describe( `${ testData.templateName } template`, () => { test( "theme template has priority over WooCommerce's and can be modified", async ( { admin, editor, @@ -52,10 +48,9 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => { await expect( page.getByText( userText ).first() ).toBeVisible(); // Revert edition and verify the template from the theme is used. - await admin.visitAdminPage( - 'site-editor.php', - `path=/${ testData.templateType }/all` - ); + await admin.visitSiteEditor( { + path: `/${ testData.templateType }/all`, + } ); await editorUtils.revertTemplateCustomizations( testData.templateName ); @@ -97,10 +92,9 @@ CUSTOMIZABLE_WC_TEMPLATES.forEach( ( testData ) => { ).toHaveCount( 0 ); // Revert the edit. - await admin.visitAdminPage( - 'site-editor.php', - `path=/${ testData.templateType }/all` - ); + await admin.visitSiteEditor( { + path: `/${ testData.templateType }/all`, + } ); await editorUtils.revertTemplateCustomizations( testData.fallbackTemplate?.templateName || '' ); diff --git a/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts b/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts index c084a730ef0..6be5530acdb 100644 --- a/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts +++ b/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts @@ -32,3 +32,5 @@ export const customerFile = path.join( 'customer.json' ); export const guestFile = { cookies: [], origins: [] }; + +export const DB_EXPORT_FILE = 'blocks_e2e.sql'; diff --git a/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts b/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts index da0cfbbb39e..1f1d1d270b4 100644 --- a/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts +++ b/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts @@ -2,7 +2,7 @@ * External dependencies */ import { Page } from '@playwright/test'; -import { Editor, expect } from '@wordpress/e2e-test-utils-playwright'; +import { Editor, expect, Admin } from '@wordpress/e2e-test-utils-playwright'; import { BlockRepresentation } from '@wordpress/e2e-test-utils-playwright/build-types/editor/insert-block'; /** @@ -13,9 +13,11 @@ import type { TemplateType } from '../../utils/types'; export class EditorUtils { editor: Editor; page: Page; - constructor( editor: Editor, page: Page ) { + admin: Admin; + constructor( editor: Editor, page: Page, admin: Admin ) { this.editor = editor; this.page = page; + this.admin = admin; } /** @@ -297,22 +299,44 @@ export class EditorUtils { } async closeWelcomeGuideModal() { - const isModalOpen = await this.page - .getByRole( 'dialog', { name: 'Welcome to the site editor' } ) - .locator( 'div' ) - .filter( { - hasText: - 'Edit your siteDesign everything on your site — from the header right down to the', - } ) - .nth( 2 ) - .isVisible(); + await this.page.waitForFunction( () => { + return ( + window.wp && + window.wp.data && + window.wp.data.dispatch( 'core/preferences' ) + ); + } ); - // eslint-disable-next-line playwright/no-conditional-in-test - if ( isModalOpen ) { - await this.page - .getByRole( 'button', { name: 'Get started' } ) - .click(); - } + // Disable the welcome guide for the site editor. + await this.page.evaluate( () => { + return Promise.all( [ + window.wp.data + .dispatch( 'core/preferences' ) + .set( 'core/edit-site', 'welcomeGuide', false ), + window.wp.data + .dispatch( 'core/preferences' ) + .set( 'core/edit-site', 'welcomeGuideStyles', false ), + window.wp.data + .dispatch( 'core/preferences' ) + .set( 'core/edit-site', 'welcomeGuidePage', false ), + window.wp.data + .dispatch( 'core/preferences' ) + .set( 'core/edit-site', 'welcomeGuideTemplate', false ), + window.wp.data + .dispatch( 'core/preferences' ) + .set( 'core/edit-post', 'welcomeGuide', false ), + window.wp.data + .dispatch( 'core/preferences' ) + .set( 'core/edit-post', 'welcomeGuideStyles', false ), + window.wp.data + .dispatch( 'core/preferences' ) + .set( 'core/edit-post', 'welcomeGuidePage', false ), + + window.wp.data + .dispatch( 'core/preferences' ) + .set( 'core/edit-post', 'welcomeGuideTemplate', false ), + ] ); + } ); } async transformIntoBlocks() { @@ -372,6 +396,9 @@ export class EditorUtils { templateType: TemplateType ) { if ( templateType === 'wp_template_part' ) { + await this.admin.visitSiteEditor( { + path: `/${ templateType }/all`, + } ); await this.page.goto( `/wp-admin/site-editor.php?path=/${ templateType }/all` ); @@ -381,9 +408,9 @@ export class EditorUtils { } ); await templateLink.click(); } else { - await this.page.goto( - `/wp-admin/site-editor.php?path=/${ templateType }` - ); + await this.admin.visitSiteEditor( { + path: '/' + templateType, + } ); const templateButton = this.page.getByRole( 'button', { name: templateName, exact: true, @@ -392,7 +419,6 @@ export class EditorUtils { } await this.enterEditMode(); - await this.closeWelcomeGuideModal(); await this.waitForSiteEditorFinishLoading(); // Verify we are editing the correct template and it has the correct title. @@ -495,7 +521,7 @@ export class EditorUtils { productSlug: string, createIfDoesntExist = true ) { - await this.page.goto( '/wp-admin/site-editor.php' ); + await this.admin.visitSiteEditor(); await this.page.getByRole( 'button', { name: 'Templates' } ).click(); const templateButton = this.page.getByRole( 'button', { diff --git a/plugins/woocommerce-blocks/tests/e2e/utils/index.ts b/plugins/woocommerce-blocks/tests/e2e/utils/index.ts index 2ff29f8aa2e..26441a300c1 100644 --- a/plugins/woocommerce-blocks/tests/e2e/utils/index.ts +++ b/plugins/woocommerce-blocks/tests/e2e/utils/index.ts @@ -8,5 +8,4 @@ export * from './mini-cart'; export * from './performance'; export * from './shipping'; export * from './storeApi'; -export * from './use-block-theme'; export * from './wpCli'; diff --git a/plugins/woocommerce-blocks/tests/e2e/utils/use-block-theme.ts b/plugins/woocommerce-blocks/tests/e2e/utils/use-block-theme.ts deleted file mode 100644 index 09ec81fd532..00000000000 --- a/plugins/woocommerce-blocks/tests/e2e/utils/use-block-theme.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * External dependencies - */ -import { test as Test } from '@wordpress/e2e-test-utils-playwright'; - -/** - * Internal dependencies - */ -import { BLOCK_THEME_SLUG } from './constants'; - -export const useBlockTheme = ( test: typeof Test ) => { - test.beforeAll( async ( { requestUtils } ) => { - await requestUtils.activateTheme( BLOCK_THEME_SLUG ); - } ); -}; diff --git a/plugins/woocommerce/changelog/46125-remove-e2e-side-effects b/plugins/woocommerce/changelog/46125-remove-e2e-side-effects new file mode 100644 index 00000000000..1f49d04944e --- /dev/null +++ b/plugins/woocommerce/changelog/46125-remove-e2e-side-effects @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Block E2E: Eliminate side effects through improved test isolation diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f43688c12f1..dead65b4bae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4313,8 +4313,8 @@ importers: specifier: 2.28.1 version: 2.28.1(@typescript-eslint/parser@5.56.0)(eslint-import-resolver-typescript@3.6.1)(eslint-import-resolver-webpack@0.13.2)(eslint@8.55.0) eslint-plugin-playwright: - specifier: 0.15.3 - version: 0.15.3(eslint@8.55.0) + specifier: 1.6.0 + version: 1.6.0(eslint@8.55.0) eslint-plugin-rulesdir: specifier: ^0.2.2 version: 0.2.2 @@ -31910,18 +31910,6 @@ packages: - supports-color dev: true - /eslint-plugin-playwright@0.15.3(eslint@8.55.0): - resolution: {integrity: sha512-LQMW5y0DLK5Fnpya7JR1oAYL2/7Y9wDiYw6VZqlKqcRGSgjbVKNqxraphk7ra1U3Bb5EK444xMgUlQPbMg2M1g==} - peerDependencies: - eslint: '>=7' - eslint-plugin-jest: '>=25' - peerDependenciesMeta: - eslint-plugin-jest: - optional: true - dependencies: - eslint: 8.55.0 - dev: true - /eslint-plugin-playwright@0.22.1(eslint-plugin-jest@23.20.0)(eslint@8.55.0): resolution: {integrity: sha512-xUQ9mJH+CjifLG6vMowl3r49G/8JvW4G10IqHjc1WO44fffdhLZF/i4Def+U3y6LqUEBp0JAMnWUhEck7ksqrw==} peerDependencies: @@ -31936,6 +31924,20 @@ packages: globals: 13.24.0 dev: true + /eslint-plugin-playwright@1.6.0(eslint@8.55.0): + resolution: {integrity: sha512-tI1E/EDbHT4Fx5KvukUG3RTIT0gk44gvTP8bNwxLCFsUXVM98ZJG5zWU6Om5JOzH9FrmN4AhMu/UKyEsu0ZoDA==} + engines: {node: '>=16.6.0'} + peerDependencies: + eslint: '>=8.40.0' + eslint-plugin-jest: '>=25' + peerDependenciesMeta: + eslint-plugin-jest: + optional: true + dependencies: + eslint: 8.55.0 + globals: 13.24.0 + dev: true + /eslint-plugin-prettier@3.4.1(eslint-config-prettier@6.15.0)(eslint@7.32.0)(wp-prettier@2.2.1-beta-1): resolution: {integrity: sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==} engines: {node: '>=6.0.0'}