Add mock theme with Woo Templates for E2E tests (#5920)

This PR adds a block-enabled theme with templates for WooCommerce
which is intended to be used when testing the more complex scenarios
such as template fallbacks.

Additionally, since theme-dependent logic seems to be becoming more
and more useful (see #5913), this PR also adds a utility function used to
explicitly declare theme dependencies of a test (`useTheme`).

Said function will activate the theme before running a given suite and then
reactivate the previous theme, as to make sure to not have any side-effects
(such as the ones described in #5913 above).

Closes #5660

.wp-env.json

@@ -7,7 +7,8 @@
 	],
 	"themes": [
 		"https://downloads.wordpress.org/theme/storefront.latest-stable.zip",
-		"./tests/mocks/emptytheme"
+		"./tests/mocks/emptytheme",
+		"./tests/mocks/theme-with-woo-templates"
 	],
 	"mappings": {
 		".htaccess": "./bin/.htaccess"

tests/e2e/page-utils.js

@@ -20,6 +20,25 @@ export async function elementExists( selector, root = page ) {
 	return !! ( await root.$( selector ) );
 }
 
+/**
+ * Gets data from an HTML element
+ *
+ * @param {string} selector The selector for the desired element
+ * @param {string} dataKey The key in the element data to look for
+ * @param {Page | ElementHandle} root The root from which to search for the selector
+ *
+ * @return {Promise<string | undefined>} The data of that element if it exists
+ */
+export async function getElementData( selector, dataKey, root = page ) {
+	return root.$eval(
+		selector,
+		( $element, key ) => {
+			return $element.dataset[ key ];
+		},
+		dataKey
+	);
+}
+
 /**
  * Gets the text value of an element
  *

tests/e2e/specs/backend/site-editing-templates.test.js

@@ -19,6 +19,7 @@ import {
 	getAllTemplates,
 	goToSiteEditor,
 	saveTemplate,
+	useTheme,
 	waitForCanvas,
 } from '../../utils';
 
@@ -106,16 +107,13 @@ const WOOCOMMERCE_ID = 'woocommerce/woocommerce';
 const WOOCOMMERCE_PARSED_ID = 'WooCommerce';
 
 describe( 'Store Editing Templates', () => {
+	useTheme( 'emptytheme' );
+
 	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );
 	} );
 
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-
 	describe( 'Single Product block template', () => {
 		it( 'default template from WooCommerce Blocks is available on an FSE theme', async () => {
 			const EXPECTED_TEMPLATE = defaultTemplateProps( 'Single Product' );

tests/e2e/utils.js

@@ -3,9 +3,11 @@
  */
 import config from 'config';
 import {
+	activateTheme,
 	disableSiteEditorWelcomeGuide,
 	openGlobalBlockInserter,
 	pressKeyWithModifier,
+	switchUserToAdmin,
 	visitAdminPage,
 	visitSiteEditor,
 } from '@wordpress/e2e-test-utils';
@@ -15,7 +17,7 @@ import { WP_ADMIN_DASHBOARD } from '@woocommerce/e2e-utils';
 /**
  * Internal dependencies
  */
-import { elementExists, getTextContent } from './page-utils';
+import { elementExists, getElementData, getTextContent } from './page-utils';
 
 /**
  * @typedef {import('@types/puppeteer').ElementHandle} ElementHandle
@@ -43,6 +45,9 @@ const SELECTORS = {
 		rows: '.edit-site-list-table-row',
 		templateTitle: '[data-wp-component="Heading"]',
 	},
+	themesPage: {
+		currentTheme: '.theme.active',
+	},
 	toolbar: {
 		confirmSave: '.editor-entities-saved-states__save-button',
 		saveButton: '.edit-site-save-button__button',
@@ -242,3 +247,33 @@ export async function filterCurrentBlocks( predicate ) {
 
 	return blocks.filter( predicate );
 }
+
+/**
+ * Sets up a suite to use a theme without side-effects
+ *
+ * *Note:* this “hook” is supposed to be used within `describe` calls to
+ * make it easier to set theme dependencies for tests without messing
+ * the environment of any other test and to explicitly declare a
+ * dependency.
+ *
+ * @param {string} themeSlug The theme the test suite should use
+ */
+export function useTheme( themeSlug ) {
+	let previousTheme;
+
+	beforeAll( async () => {
+		await switchUserToAdmin();
+		await visitAdminPage( 'themes.php' );
+
+		previousTheme = await getElementData(
+			SELECTORS.themesPage.currentTheme,
+			'slug'
+		);
+
+		await activateTheme( themeSlug );
+	} );
+
+	afterAll( async () => {
+		await activateTheme( previousTheme );
+	} );
+}

tests/mocks/theme-with-woo-templates/block-template-parts/header.html

@@ -0,0 +1,3 @@
+<!-- wp:site-title /-->
+
+<!-- wp:site-tagline /-->

tests/mocks/theme-with-woo-templates/block-template-parts/mini-cart.html

@@ -0,0 +1,38 @@
+<!-- wp:woocommerce/mini-cart-contents {"className":"wc-block-mini-cart__contents"} -->
+<div class="wp-block-woocommerce-mini-cart-contents wc-block-mini-cart__contents">
+	<!-- wp:woocommerce/filled-mini-cart-contents-block -->
+	<div class="wp-block-woocommerce-filled-mini-cart-contents-block">
+		<!-- wp:woocommerce/mini-cart-title-block -->
+		<div class="wp-block-woocommerce-mini-cart-title-block">
+		</div>
+		<!-- /wp:woocommerce/mini-cart-title-block -->
+		<!-- wp:woocommerce/mini-cart-items-block -->
+		<div class="wp-block-woocommerce-mini-cart-items-block">
+			<!-- wp:woocommerce/mini-cart-products-table-block -->
+			<div class="wp-block-woocommerce-mini-cart-products-table-block">
+			</div>
+			<!-- /wp:woocommerce/mini-cart-products-table-block -->
+		</div>
+		<!-- /wp:woocommerce/mini-cart-items-block -->
+		<!-- wp:woocommerce/mini-cart-footer-block -->
+		<div class="wp-block-woocommerce-mini-cart-footer-block">
+		</div>
+		<!-- /wp:woocommerce/mini-cart-footer-block -->
+	</div>
+	<!-- /wp:woocommerce/filled-mini-cart-contents-block -->
+
+	<!-- wp:woocommerce/empty-mini-cart-contents-block -->
+	<div class="wp-block-woocommerce-empty-mini-cart-contents-block">
+		<!-- wp:paragraph {"align":"center"} -->
+		<p class="has-text-align-center">
+			<strong>Your cart is currently empty!</strong>
+		</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:woocommerce/mini-cart-shopping-button-block -->
+		<div class="wp-block-woocommerce-mini-cart-shopping-button-block"></div>
+		<!-- /wp:woocommerce/mini-cart-shopping-button-block -->
+	</div>
+	<!-- /wp:woocommerce/empty-mini-cart-contents-block -->
+</div>
+<!-- /wp:woocommerce/mini-cart-contents -->

tests/mocks/theme-with-woo-templates/block-templates/archive-product.html

@@ -0,0 +1,8 @@
+<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<h2 class="theme-template-title">Template loaded from theme</h2>
+<div class="wp-block-group">
+	<!-- wp:woocommerce/legacy-template {"template":"archive-product"} /-->
+</div>
+<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer"} /-->

tests/mocks/theme-with-woo-templates/block-templates/index.html

@@ -0,0 +1,10 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
+<div class="wp-block-query">
+	<!-- wp:post-template -->
+	<!-- wp:post-title {"isLink":true} /-->
+	<!-- wp:post-excerpt /-->
+	<!-- /wp:post-template -->
+</div>
+<!-- /wp:query -->

tests/mocks/theme-with-woo-templates/block-templates/single-product.html

@@ -0,0 +1,8 @@
+<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<h2 class="theme-template-title">Template loaded from theme</h2>
+<div class="wp-block-group">
+	<!-- wp:woocommerce/legacy-template {"template":"single-product"} /-->
+</div>
+<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer"} /-->

tests/mocks/theme-with-woo-templates/block-templates/singular.html

@@ -0,0 +1,5 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:post-title /-->
+
+<!-- wp:post-content {"layout":{"inherit":true}} /-->

tests/mocks/theme-with-woo-templates/block-templates/taxonomy-product_cat.html

@@ -0,0 +1,8 @@
+<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<h2 class="theme-template-title">Template loaded from theme</h2>
+<div class="wp-block-group">
+	<!-- wp:woocommerce/legacy-template {"template":"taxonomy-product_cat"} /-->
+</div>
+<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer"} /-->

tests/mocks/theme-with-woo-templates/block-templates/taxonomy-product_tag.html

@@ -0,0 +1,8 @@
+<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<h2 class="theme-template-title">Template loaded from theme</h2>
+<div class="wp-block-group">
+	<!-- wp:woocommerce/legacy-template {"template":"taxonomy-product_tag"} /-->
+</div>
+<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer"} /-->

tests/mocks/theme-with-woo-templates/functions.php

@@ -0,0 +1,24 @@
+<?php
+// phpcs:ignoreFile
+
+if ( ! function_exists( 'testtheme_support' ) ) :
+	function testtheme_support()  {
+
+		// Adding support for core block visual styles.
+		add_theme_support( 'wp-block-styles' );
+
+		// Enqueue editor styles.
+		add_editor_style( 'style.css' );
+	}
+	add_action( 'after_setup_theme', 'testtheme_support' );
+endif;
+
+/**
+ * Enqueue scripts and styles.
+ */
+function testtheme_scripts() {
+	// Enqueue theme stylesheet.
+	wp_enqueue_style( 'testtheme-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
+}
+
+add_action( 'wp_enqueue_scripts', 'testtheme_scripts' );

tests/mocks/theme-with-woo-templates/index.php

@@ -0,0 +1,3 @@
+<?php
+	// phpcs:ignoreFile
+

tests/mocks/theme-with-woo-templates/style.css

@@ -0,0 +1,13 @@
+/*
+Theme Name: Theme with Woo Templates
+Theme URI: https://github.com/woocommerce/woocommerce-gutenberg-products-block
+Author: M. L. Giannotta <[email protected]>
+Description: The base for a block-based theme for WooCommerce.
+Requires at least: 5.3
+Tested up to: 5.5
+Requires PHP: 5.6
+Version: 1.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: themewithwootemplates
+*/

tests/mocks/theme-with-woo-templates/styles/variation.json

@@ -0,0 +1,23 @@
+{
+	"version": 2,
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"slug": "foreground",
+					"color": "#3F67C6",
+					"name": "Foreground"
+				}
+			]
+		}
+	},
+	"styles": {
+		"blocks": {
+			"core/post-title": {
+				"typography": {
+					"fontWeight": "700"
+				}
+			}
+		}
+	}
+}

tests/mocks/theme-with-woo-templates/theme.json

@@ -0,0 +1,10 @@
+{
+	"version": 2,
+	"settings": {
+		"appearanceTools": true,
+		"layout": {
+			"contentSize": "840px",
+			"wideSize": "1100px"
+		}
+	}
+}