Add e2e tests for notice templates (#44612)

* Add e2e tests for notice templates

* Add changelog entry

* Minor refactor

* Remove child theme zip files

* Generate child theme zip files on the fly

.gitignore

@@ -37,6 +37,9 @@ npm-debug.log
 *.swp
 *.zip
 
+# Allow theme *.zip files for testing purposes
+!plugins/woocommerce-blocks/tests/e2e/bin/themes/*.zip
+
 # Built packages
 build/
 build-module/

plugins/woocommerce-blocks/tests/e2e/bin/pages/cart-shortcode.html

@@ -0,0 +1,3 @@
+<!-- wp:shortcode -->
+[woocommerce_cart]
+<!-- /wp:shortcode -->

plugins/woocommerce-blocks/tests/e2e/bin/pages/checkout-shortcode.html

@@ -0,0 +1,3 @@
+<!-- wp:shortcode -->
+[woocommerce_checkout]
+<!-- /wp:shortcode -->

plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/coupon.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+wp wc shop_coupon create --code=TESTCOUPON --amount=10 --discount_type=fixed_cart --user=1

plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/pages.sh

@@ -74,5 +74,25 @@ post_id=$(wp post create \
 	${script_dir}/mini-cart.html
 )
 
+post_id=$(wp post create \
+	--porcelain \
+	--menu_order=8 \
+	--post_type=page \
+	--post_status=publish \
+	--post_author=1 \
+	--post_title='Cart Shortcode' \
+	${script_dir}/cart-shortcode.html
+)
+
+post_id=$(wp post create \
+	--porcelain \
+	--menu_order=8 \
+	--post_type=page \
+	--post_status=publish \
+	--post_author=1 \
+	--post_title='Checkout Shortcode' \
+	${script_dir}/checkout-shortcode.html
+)
+
 # Create renaming WooCommerce pages using tool
 wp wc tool run install_pages --user=1

plugins/woocommerce-blocks/tests/e2e/bin/scripts/parallel/themes.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+# Get the directory of the current script.
+script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+# The theme dir is two levels up from where this script is running.
+themes_dir="$script_dir/../../themes"
+
+# Delete the child themes if they already exist.
+wp theme delete storefront-child
+wp theme delete twentytwentyfour-child
+
+# Install the child themes.
+wp theme install "$themes_dir/storefront-child.zip"
+wp theme install "$themes_dir/twentytwentyfour-child.zip"

plugins/woocommerce-blocks/tests/e2e/bin/test-env-setup.sh

@@ -6,5 +6,26 @@ script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 head_dir=$(cd "$(dirname "$script_dir")" && cd ../../.. && pwd)
 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")
+for theme in "${themes[@]}"; do
+    # Define the path to the theme directory and the zip file.
+    theme_dir="$themes_dir/$theme"
+    zip_file="$themes_dir/$theme.zip"
+
+    # Check if the zip file exists. If it does, delete it.
+    if [ -f "$zip_file" ]; then
+        echo "Deleting existing zip file for $theme."
+        rm "$zip_file"
+    fi
+
+    # Navigate to the themes directory to ensure the zip contains only the theme folder name.
+    # Then, create a fresh zip file.
+    echo "Creating zip file for $theme."
+    (cd "$themes_dir" && zip -r "$zip_file" "$theme" -x "*.git*" -x "*node_modules*")
+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

plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/style.css

@@ -0,0 +1,4 @@
+/*
+Theme Name: Storefront Child
+Template: storefront
+*/

plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/error.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Show error messages
+ *
+ * This template can be overridden by copying it to yourtheme/woocommerce/notices/error.php.
+ *
+ * HOWEVER, on occasion WooCommerce will need to update template files and you
+ * (the theme developer) will need to copy the new files to your theme to
+ * maintain compatibility. We try to do this as little as possible, but it does
+ * happen. When this occurs the version of the template file will be bumped and
+ * the readme will list any important changes.
+ *
+ * @see     https://woo.com/document/template-structure/
+ * @package WooCommerce\Templates
+ * @version 3.9.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! $notices ) {
+	return;
+}
+
+?>
+
+<ul class="woocommerce-error" role="alert">
+	<?php foreach ( $notices as $notice ) : ?>
+		<li<?php echo wc_get_notice_data_attr( $notice ); ?>>
+			CLASSIC ERROR NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
+		</li>
+	<?php endforeach; ?>
+</ul>

plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/notice.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Show messages
+ *
+ * This template can be overridden by copying it to yourtheme/woocommerce/notices/notice.php.
+ *
+ * HOWEVER, on occasion WooCommerce will need to update template files and you
+ * (the theme developer) will need to copy the new files to your theme to
+ * maintain compatibility. We try to do this as little as possible, but it does
+ * happen. When this occurs the version of the template file will be bumped and
+ * the readme will list any important changes.
+ *
+ * @see     https://woo.com/document/template-structure/
+ * @package WooCommerce\Templates
+ * @version 3.9.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! $notices ) {
+	return;
+}
+
+?>
+
+<?php foreach ( $notices as $notice ) : ?>
+	<div class="woocommerce-info"<?php echo wc_get_notice_data_attr( $notice ); ?>>
+		CLASSIC INFO NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
+	</div>
+<?php endforeach; ?>

plugins/woocommerce-blocks/tests/e2e/bin/themes/storefront-child/woocommerce/notices/success.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Show messages
+ *
+ * This template can be overridden by copying it to yourtheme/woocommerce/notices/success.php.
+ *
+ * HOWEVER, on occasion WooCommerce will need to update template files and you
+ * (the theme developer) will need to copy the new files to your theme to
+ * maintain compatibility. We try to do this as little as possible, but it does
+ * happen. When this occurs the version of the template file will be bumped and
+ * the readme will list any important changes.
+ *
+ * @see     https://woo.com/document/template-structure/
+ * @package WooCommerce\Templates
+ * @version 3.9.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! $notices ) {
+	return;
+}
+
+?>
+
+<?php foreach ( $notices as $notice ) : ?>
+	<div class="woocommerce-message"<?php echo wc_get_notice_data_attr( $notice ); ?> role="alert">
+		CLASSIC SUCCESS NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
+	</div>
+<?php endforeach; ?>

plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/style.css

@@ -0,0 +1,4 @@
+/*
+Theme Name: Twenty Twenty-Four Child
+Template: twentytwentyfour
+*/

plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/error.php

@@ -0,0 +1,51 @@
+<?php
+/**
+ * Show error messages
+ *
+ * This template can be overridden by copying it to yourtheme/woocommerce/notices/error.php.
+ *
+ * HOWEVER, on occasion WooCommerce will need to update template files and you
+ * (the theme developer) will need to copy the new files to your theme to
+ * maintain compatibility. We try to do this as little as possible, but it does
+ * happen. When this occurs the version of the template file will be bumped and
+ * the readme will list any important changes.
+ *
+ * @see     https://docs.woocommerce.com/document/template-structure/
+ * @package WooCommerce\Templates
+ * @version 8.5.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $notices ) || ! is_array( $notices ) ) {
+	return;
+}
+
+$multiple = count( $notices ) > 1;
+
+?>
+
+<div class="wc-block-components-notice-banner is-error" role="alert" <?php echo $multiple ? '' : wc_get_notice_data_attr( $notices[0] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+		<path d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"></path>
+	</svg>
+	<div class="wc-block-components-notice-banner__content">
+		<?php if ( $multiple ) { ?>
+			<p class="wc-block-components-notice-banner__summary"><?php esc_html_e( 'The following problems were found:', 'woocommerce' ); ?></p>
+			<ul>
+			<?php foreach ( $notices as $notice ) : ?>
+				<li<?php echo wc_get_notice_data_attr( $notice ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
+					BLOCK ERROR NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
+				</li>
+			<?php endforeach; ?>
+			</ul>
+			<?php
+		} else {
+			echo 'BLOCK ERROR NOTICE - ' . wc_kses_notice( $notices[0]['notice'] );
+		}
+		?>
+	</div>
+</div>
+<?php

plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/notice.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Show info messages
+ *
+ * This template can be overridden by copying it to yourtheme/woocommerce/notices/notice.php.
+ *
+ * HOWEVER, on occasion WooCommerce will need to update template files and you
+ * (the theme developer) will need to copy the new files to your theme to
+ * maintain compatibility. We try to do this as little as possible, but it does
+ * happen. When this occurs the version of the template file will be bumped and
+ * the readme will list any important changes.
+ *
+ * @see     https://docs.woocommerce.com/document/template-structure/
+ * @package WooCommerce\Templates
+ * @version 8.5.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! $notices ) {
+	return;
+}
+
+?>
+
+<?php foreach ( $notices as $notice ) : ?>
+	<div class="wc-block-components-notice-banner is-info"<?php echo wc_get_notice_data_attr( $notice ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> role="alert">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+			<path d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"></path>
+		</svg>
+		<div class="wc-block-components-notice-banner__content">
+			BLOCK INFO NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
+		</div>
+	</div>
+<?php endforeach; ?>

plugins/woocommerce-blocks/tests/e2e/bin/themes/twentytwentyfour-child/woocommerce/notices/success.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Show success messages
+ *
+ * This template can be overridden by copying it to yourtheme/woocommerce/notices/success.php.
+ *
+ * HOWEVER, on occasion WooCommerce will need to update template files and you
+ * (the theme developer) will need to copy the new files to your theme to
+ * maintain compatibility. We try to do this as little as possible, but it does
+ * happen. When this occurs the version of the template file will be bumped and
+ * the readme will list any important changes.
+ *
+ * @see     https://docs.woocommerce.com/document/template-structure/
+ * @package WooCommerce\Templates
+ * @version 8.5.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! $notices ) {
+	return;
+}
+
+?>
+
+<?php foreach ( $notices as $notice ) : ?>
+	<div class="wc-block-components-notice-banner is-success"<?php echo wc_get_notice_data_attr( $notice ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> role="alert">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+			<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"></path>
+		</svg>
+		<div class="wc-block-components-notice-banner__content">
+			BLOCK SUCCESS NOTICE - <?php echo wc_kses_notice( $notice['notice'] ); ?>
+		</div>
+	</div>
+<?php endforeach; ?>