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 @@
- >
- BLOCK ERROR NOTICE -
+ BLOCK ERROR NOTICE:
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 @@
- >
- CLASSIC ERROR NOTICE -
+ CLASSIC ERROR NOTICE:
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;
+
+?>
+
+>
+
+
+
+
+
+
+ - >
+ BLOCK ERROR NOTICE:
+
+
+
+
+
+
+
+
+
+ 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 @@
+
+
+
+
+ - >
+ CLASSIC ERROR NOTICE:
+
+
+
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' ] );
}
/**