diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/themes.sh b/plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/themes.sh index bdf110a93f68..913e6b745eb7 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/themes.sh +++ b/plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/themes.sh @@ -7,9 +7,13 @@ script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" themes_dir="$script_dir/../../themes" # Delete the child themes if they already exist. -wp theme delete storefront-child -wp theme delete twentytwentyfour-child +wp theme delete storefront-child__block-notices +wp theme delete storefront-child__classic-notices +wp theme delete twentytwentyfour-child__block-notices +wp theme delete twentytwentyfour-child__classic-notices # Install the child themes. -wp theme install "$themes_dir/storefront-child.zip" -wp theme install "$themes_dir/twentytwentyfour-child.zip" +wp theme install "$themes_dir/storefront-child__block-notices.zip" +wp theme install "$themes_dir/storefront-child__classic-notices.zip" +wp theme install "$themes_dir/twentytwentyfour-child__block-notices.zip" +wp theme install "$themes_dir/twentytwentyfour-child__classic-notices.zip" 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 4058803eb828..71450bbd6a9f 100755 --- a/plugins/woocommerce-blocks/tests/e2e/bin/test-env-setup.sh +++ b/plugins/woocommerce-blocks/tests/e2e/bin/test-env-setup.sh @@ -9,7 +9,12 @@ relative_path=${script_dir#$head_dir/} # Generate the child themes zip files before running the tests. # By doing so, we ensure that the zip files are up-to-date. themes_dir="$script_dir/themes" -themes=("storefront-child" "twentytwentyfour-child") +themes=( + "storefront-child__block-notices" + "storefront-child__classic-notices" + "twentytwentyfour-child__block-notices" + "twentytwentyfour-child__classic-notices" +) for theme in "${themes[@]}"; do # Define the path to the theme directory and the zip file. theme_dir="$themes_dir/$theme" diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/style.css b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/style.css deleted file mode 100644 index 96c0119d61b1..000000000000 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/style.css +++ /dev/null @@ -1,4 +0,0 @@ -/* -Theme Name: Storefront Child -Template: storefront -*/ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/style.css b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/style.css new file mode 100644 index 000000000000..0ec1fa1e065e --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/style.css @@ -0,0 +1,4 @@ +/* +Theme Name: Storefront Child (Block Notices) +Template: storefront +*/ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/error.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/woocommerce/notices/error.php similarity index 92% rename from plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/error.php rename to plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/woocommerce/notices/error.php index 0be8e86e73ff..87f78b2ab54f 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/error.php +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/woocommerce/notices/error.php @@ -37,13 +37,13 @@ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/notice.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/woocommerce/notices/notice.php similarity index 94% rename from plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/notice.php rename to plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/woocommerce/notices/notice.php index 13ec97ee1466..631ce24dc867 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/notice.php +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/woocommerce/notices/notice.php @@ -31,7 +31,7 @@
- BLOCK INFO NOTICE - + BLOCK INFO NOTICE:
diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/success.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/woocommerce/notices/success.php similarity index 94% rename from plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/success.php rename to plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/woocommerce/notices/success.php index 4705393a2d82..22eef2d36f66 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/success.php +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__block-notices/woocommerce/notices/success.php @@ -31,7 +31,7 @@
- BLOCK SUCCESS NOTICE - + BLOCK SUCCESS NOTICE:
diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/style.css b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/style.css new file mode 100644 index 000000000000..5848c4f9885a --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/style.css @@ -0,0 +1,4 @@ +/* +Theme Name: Storefront Child (Classic Notices) +Template: storefront +*/ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/error.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/woocommerce/notices/error.php similarity index 91% rename from plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/error.php rename to plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/woocommerce/notices/error.php index 516b9e7ddc9f..b8752e084591 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/error.php +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/woocommerce/notices/error.php @@ -28,7 +28,7 @@ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/notice.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/woocommerce/notices/notice.php similarity index 91% rename from plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/notice.php rename to plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/woocommerce/notices/notice.php index 33f1b85ac483..9b38f0784f4a 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/notice.php +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/woocommerce/notices/notice.php @@ -27,6 +27,6 @@
> - CLASSIC INFO NOTICE - + CLASSIC INFO NOTICE:
diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/success.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/woocommerce/notices/success.php similarity index 91% rename from plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/success.php rename to plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/woocommerce/notices/success.php index 9f3a3ec225f4..bdd97fe4dd41 100644 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/success.php +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child__classic-notices/woocommerce/notices/success.php @@ -27,6 +27,6 @@
role="alert"> - CLASSIC SUCCESS NOTICE - + CLASSIC SUCCESS NOTICE:
diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/style.css b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/style.css deleted file mode 100644 index b13e057ea0e0..000000000000 --- a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/style.css +++ /dev/null @@ -1,4 +0,0 @@ -/* -Theme Name: Twenty Twenty-Four Child -Template: twentytwentyfour -*/ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices/style.css b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices/style.css new file mode 100644 index 000000000000..1d879baa7674 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices/style.css @@ -0,0 +1,4 @@ +/* +Theme Name: Twenty Twenty-Four Child (Block Notices) +Template: twentytwentyfour +*/ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices/woocommerce/notices/error.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices/woocommerce/notices/error.php new file mode 100644 index 000000000000..87f78b2ab54f --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices/woocommerce/notices/error.php @@ -0,0 +1,51 @@ + 1; + +?> + + + + + +
role="alert"> + +
+ BLOCK INFO NOTICE: +
+
+ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices/woocommerce/notices/success.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices/woocommerce/notices/success.php new file mode 100644 index 000000000000..22eef2d36f66 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__block-notices/woocommerce/notices/success.php @@ -0,0 +1,37 @@ + + + +
role="alert"> + +
+ BLOCK SUCCESS NOTICE: +
+
+ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/style.css b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/style.css new file mode 100644 index 000000000000..45f4f8e54fa0 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/style.css @@ -0,0 +1,4 @@ +/* +Theme Name: Twenty Twenty-Four Child (Classic Notices) +Template: twentytwentyfour +*/ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/woocommerce/notices/error.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/woocommerce/notices/error.php new file mode 100644 index 000000000000..b8752e084591 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/woocommerce/notices/error.php @@ -0,0 +1,34 @@ + + + diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/woocommerce/notices/notice.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/woocommerce/notices/notice.php new file mode 100644 index 000000000000..9b38f0784f4a --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/woocommerce/notices/notice.php @@ -0,0 +1,32 @@ + + + +
> + CLASSIC INFO NOTICE: +
+ diff --git a/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/woocommerce/notices/success.php b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/woocommerce/notices/success.php new file mode 100644 index 000000000000..bdd97fe4dd41 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child__classic-notices/woocommerce/notices/success.php @@ -0,0 +1,32 @@ + + + +
role="alert"> + CLASSIC SUCCESS NOTICE: +
+ 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 ee6e46bf4c47..ccf7f20397f4 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 @@ -5,7 +5,8 @@ import { expect, test as base } from '@woocommerce/e2e-playwright-utils'; import { cli, BLOCK_THEME_SLUG, - BLOCK_CHILD_THEME_SLUG, + BLOCK_CHILD_THEME_WITH_BLOCK_NOTICES_SLUG, + BLOCK_CHILD_THEME_WITH_CLASSIC_NOTICES_SLUG, } from '@woocommerce/e2e-utils'; /** * Internal dependencies @@ -22,7 +23,7 @@ const test = base.extend< { checkoutPageObject: CheckoutPage } >( { }, } ); -test.describe( 'Shopper → Block Notice Templates', () => { +test.describe( 'Shopper → Notice Templates', () => { test.beforeEach( async ( { wpCliUtils, frontendUtils } ) => { const cartShortcodeID = await wpCliUtils.getPostIDByTitle( 'Cart Shortcode' @@ -45,7 +46,7 @@ test.describe( 'Shopper → Block Notice Templates', () => { await frontendUtils.emptyCart(); } ); - test( 'default templates are visible', async ( { + test( 'default block notice templates are visible', async ( { frontendUtils, page, } ) => { @@ -59,10 +60,9 @@ test.describe( 'Shopper → Block Notice Templates', () => { } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-success + // We're explicitly checking the CSS classes and that the SVG is visible. await expect( - page.locator( '.wc-block-components-notice-banner.is-success' ) + page.locator( '.wc-block-components-notice-banner.is-success svg' ) ).toBeVisible(); await page.reload(); @@ -75,10 +75,9 @@ test.describe( 'Shopper → Block Notice Templates', () => { } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-error + // We're explicitly checking the CSS classes and that the SVG is visible. await expect( - page.locator( '.wc-block-components-notice-banner.is-error' ) + page.locator( '.wc-block-components-notice-banner.is-error svg' ) ).toBeVisible(); await page.getByLabel( 'Remove Polo from cart' ).click(); @@ -89,16 +88,70 @@ test.describe( 'Shopper → Block Notice Templates', () => { } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-success + // We're explicitly checking the CSS classes and that the SVG is visible. await expect( - page.locator( '.wc-block-components-notice-banner.is-success' ) + page.locator( '.wc-block-components-notice-banner.is-success svg' ) ).toBeVisible(); } ); - test( 'custom templates are visible', async ( { frontendUtils, page } ) => { + test( 'custom block notice templates are visible', async ( { + frontendUtils, + page, + } ) => { + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_CHILD_THEME_WITH_BLOCK_NOTICES_SLUG }` + ); + + await frontendUtils.goToCartShortcode(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( + 'BLOCK SUCCESS NOTICE: Coupon code applied successfully.' + ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-success svg' ) + ).toBeVisible(); + + await page.reload(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( 'BLOCK ERROR NOTICE: Coupon code already applied!' ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-error svg' ) + ).toBeVisible(); + + await page.getByLabel( 'Remove Polo from cart' ).click(); + + await expect( + page.getByText( 'BLOCK INFO NOTICE: Your cart is currently empty.' ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-success svg' ) + ).toBeVisible(); + + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_THEME_SLUG }` + ); + } ); + + test( 'custom classic notice templates are visible', async ( { + frontendUtils, + page, + } ) => { await cli( - `npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_CHILD_THEME_SLUG }` + `npm run wp-env run tests-cli -- wp theme activate ${ BLOCK_CHILD_THEME_WITH_CLASSIC_NOTICES_SLUG }` ); await frontendUtils.goToCartShortcode(); @@ -107,14 +160,13 @@ test.describe( 'Shopper → Block Notice Templates', () => { await expect( page.getByText( - 'BLOCK SUCCESS NOTICE - Coupon code applied successfully.' + 'CLASSIC SUCCESS NOTICE: Coupon code applied successfully.' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-success + // We're explicitly checking the CSS classes. await expect( - page.locator( '.wc-block-components-notice-banner.is-success' ) + page.locator( '.woocommerce-notices-wrapper .woocommerce-message' ) ).toBeVisible(); await page.reload(); @@ -123,28 +175,26 @@ test.describe( 'Shopper → Block Notice Templates', () => { await expect( page.getByText( - 'BLOCK ERROR NOTICE - Coupon code already applied!' + 'CLASSIC ERROR NOTICE: Coupon code already applied!' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-error + // We're explicitly checking the CSS classes. await expect( - page.locator( '.wc-block-components-notice-banner.is-error' ) + page.locator( '.woocommerce-notices-wrapper .woocommerce-error' ) ).toBeVisible(); await page.getByLabel( 'Remove Polo from cart' ).click(); await expect( page.getByText( - 'BLOCK INFO NOTICE – Your cart is currently empty.' + 'CLASSIC INFO NOTICE: Your cart is currently empty.' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .wc-block-components-notice-banner.is-success + // We're explicitly checking the CSS classes. await expect( - page.locator( '.wc-block-components-notice-banner.is-success' ) + page.locator( '.woocommerce-notices-wrapper .woocommerce-info' ) ).toBeVisible(); await cli( 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 d23c81e0197b..731c4b05bca9 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 @@ -5,7 +5,8 @@ import { expect, test as base } from '@woocommerce/e2e-playwright-utils'; import { cli, CLASSIC_THEME_SLUG, - CLASSIC_CHILD_THEME_SLUG, + CLASSIC_CHILD_THEME_WITH_CLASSIC_NOTICES_SLUG, + CLASSIC_CHILD_THEME_WITH_BLOCK_NOTICES_SLUG, } from '@woocommerce/e2e-utils'; /** @@ -23,7 +24,7 @@ const test = base.extend< { checkoutPageObject: CheckoutPage } >( { }, } ); -test.describe( 'Shopper → Classic Notice Templates', () => { +test.describe( 'Shopper → Notice Templates', () => { test.beforeEach( async ( { wpCliUtils, frontendUtils } ) => { const cartShortcodeID = await wpCliUtils.getPostIDByTitle( 'Cart Shortcode' @@ -46,7 +47,7 @@ test.describe( 'Shopper → Classic Notice Templates', () => { await frontendUtils.emptyCart(); } ); - test( 'default templates are visible', async ( { + test( 'default classic notice templates are visible', async ( { frontendUtils, page, } ) => { @@ -60,8 +61,7 @@ test.describe( 'Shopper → Classic Notice Templates', () => { } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-message + // We're explicitly checking the CSS classes. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-message' ) ).toBeVisible(); @@ -74,8 +74,7 @@ test.describe( 'Shopper → Classic Notice Templates', () => { page.getByText( 'Coupon code already applied!', { exact: true } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-message + // We're explicitly checking the CSS classes. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-error' ) ).toBeVisible(); @@ -86,16 +85,18 @@ test.describe( 'Shopper → Classic Notice Templates', () => { page.getByText( 'Your cart is currently empty.', { exact: true } ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-info + // We're explicitly checking the CSS classes. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-info' ) ).toBeVisible(); } ); - test( 'custom templates are visible', async ( { frontendUtils, page } ) => { + test( 'custom classic notice templates are visible', async ( { + frontendUtils, + page, + } ) => { await cli( - `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_CHILD_THEME_SLUG }` + `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_CHILD_THEME_WITH_CLASSIC_NOTICES_SLUG }` ); await frontendUtils.goToCartShortcode(); @@ -104,12 +105,11 @@ test.describe( 'Shopper → Classic Notice Templates', () => { await expect( page.getByText( - 'CLASSIC SUCCESS NOTICE - Coupon code applied successfully.' + 'CLASSIC SUCCESS NOTICE: Coupon code applied successfully.' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-message + // We're explicitly checking the CSS classes. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-message' ) ).toBeVisible(); @@ -120,12 +120,11 @@ test.describe( 'Shopper → Classic Notice Templates', () => { await expect( page.getByText( - 'CLASSIC ERROR NOTICE - Coupon code already applied!' + 'CLASSIC ERROR NOTICE: Coupon code already applied!' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-message + // We're explicitly checking the CSS classes. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-error' ) ).toBeVisible(); @@ -134,12 +133,11 @@ test.describe( 'Shopper → Classic Notice Templates', () => { await expect( page.getByText( - 'CLASSIC INFO NOTICE - Your cart is currently empty.' + 'CLASSIC INFO NOTICE: Your cart is currently empty.' ) ).toBeVisible(); - // We're explicitly checking for the following CSS classes here: - // .woocommerce-notices-wrapper .woocommerce-info + // We're explicitly checking the CSS classes. await expect( page.locator( '.woocommerce-notices-wrapper .woocommerce-info' ) ).toBeVisible(); @@ -148,4 +146,56 @@ test.describe( 'Shopper → Classic Notice Templates', () => { `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_THEME_SLUG }` ); } ); + + test( 'custom block notice templates are visible', async ( { + frontendUtils, + page, + } ) => { + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_CHILD_THEME_WITH_BLOCK_NOTICES_SLUG }` + ); + + await frontendUtils.goToCartShortcode(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( + 'BLOCK SUCCESS NOTICE: Coupon code applied successfully.' + ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-success svg' ) + ).toBeVisible(); + + await page.reload(); + await page.getByPlaceholder( 'Coupon code' ).fill( 'testcoupon' ); + await page.getByRole( 'button', { name: 'Apply coupon' } ).click(); + + await expect( + page.getByText( 'BLOCK ERROR NOTICE: Coupon code already applied!' ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-error svg' ) + ).toBeVisible(); + + await page.getByLabel( 'Remove Polo from cart' ).click(); + + await expect( + page.getByText( 'BLOCK INFO NOTICE: Your cart is currently empty.' ) + ).toBeVisible(); + + // We're explicitly checking the CSS classes and that the SVG is visible. + await expect( + page.locator( '.wc-block-components-notice-banner.is-success svg' ) + ).toBeVisible(); + + await cli( + `npm run wp-env run tests-cli -- wp theme activate ${ CLASSIC_THEME_SLUG }` + ); + } ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts b/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts index e8aefe5ac3bb..432d46ac5bf0 100644 --- a/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts +++ b/plugins/woocommerce-blocks/tests/e2e/utils/constants.ts @@ -7,24 +7,19 @@ export const BLOCK_THEME_WITH_TEMPLATES_SLUG = 'theme-with-woo-templates'; export const BLOCK_THEME_WITH_TEMPLATES_NAME = 'Theme with Woo Templates'; export const BLOCK_THEME_SLUG = 'twentytwentyfour'; export const BLOCK_THEME_NAME = 'Twenty Twenty-Four'; -export const BLOCK_CHILD_THEME_SLUG = `${ BLOCK_THEME_SLUG }-child`; +export const BLOCK_CHILD_THEME_WITH_BLOCK_NOTICES_SLUG = `${ BLOCK_THEME_SLUG }-child__block-notices`; +export const BLOCK_CHILD_THEME_WITH_CLASSIC_NOTICES_SLUG = `${ BLOCK_THEME_SLUG }-child__classic-notices`; export const CLASSIC_THEME_SLUG = 'storefront'; export const CLASSIC_THEME_NAME = 'Storefront'; -export const CLASSIC_CHILD_THEME_SLUG = `${ CLASSIC_THEME_SLUG }-child`; +export const CLASSIC_CHILD_THEME_WITH_BLOCK_NOTICES_SLUG = `${ CLASSIC_THEME_SLUG }-child__block-notices`; +export const CLASSIC_CHILD_THEME_WITH_CLASSIC_NOTICES_SLUG = `${ CLASSIC_THEME_SLUG }-child__classic-notices`; export const BASE_URL = 'http://localhost:8889'; - -export const WP_ARTIFACTS_PATH = - process.env.WP_ARTIFACTS_PATH || - path.join( process.cwd(), 'tests/e2e/artifacts' ); - -export const STORAGE_STATE_PATH = - process.env.STORAGE_STATE_PATH || - path.join( WP_ARTIFACTS_PATH, 'storage-states/admin.json' ); - -// User roles storage states -export const adminFile = STORAGE_STATE_PATH; -export const customerFile = path.join( - path.dirname( STORAGE_STATE_PATH ), - 'customer.json' +export const STORAGE_STATE_PATH = path.join( + process.cwd(), + 'artifacts/storage-states/admin.json' ); -export const guestFile = { cookies: [], origins: [] }; + +// User roles file paths +export const adminFile = '.auth/admin.json'; +export const customerFile = '.auth/customer.json'; +export const guestFile = '.auth/guest.json'; diff --git a/plugins/woocommerce/changelog/45164-update-44538-allow-block-notices-for-classic-themes b/plugins/woocommerce/changelog/45164-update-44538-allow-block-notices-for-classic-themes new file mode 100644 index 000000000000..43cfd3a667c6 --- /dev/null +++ b/plugins/woocommerce/changelog/45164-update-44538-allow-block-notices-for-classic-themes @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Allow usage of block notice templates when using classic themes. diff --git a/plugins/woocommerce/src/Blocks/Domain/Services/Notices.php b/plugins/woocommerce/src/Blocks/Domain/Services/Notices.php index 5f97485bff8b..21fab55b507c 100644 --- a/plugins/woocommerce/src/Blocks/Domain/Services/Notices.php +++ b/plugins/woocommerce/src/Blocks/Domain/Services/Notices.php @@ -42,11 +42,11 @@ public function __construct( Package $package ) { */ public function init() { if ( wp_is_block_theme() ) { - add_filter( 'woocommerce_kses_notice_allowed_tags', [ $this, 'add_kses_notice_allowed_tags' ] ); add_filter( 'wc_get_template', [ $this, 'get_notices_template' ], 10, 5 ); - add_action( 'wp_head', [ $this, 'enqueue_notice_styles' ] ); } + add_filter( 'woocommerce_kses_notice_allowed_tags', [ $this, 'add_kses_notice_allowed_tags' ] ); + add_action( 'wp_head', [ $this, 'enqueue_notice_styles' ] ); } /**