Fix related products E2Es for WC9.5

tests/e2e/config/default.json

@@ -14,7 +14,12 @@
 		"simple": {
 			"name": "Simple product",
 			"type": "simple",
-			"regular_price": "9.99"
+			"regular_price": "9.99",
+			"tags": [
+				{
+					"name": "related"
+				}
+			]
 		},
 		"variable": {
 			"name": "Variable product",

tests/e2e/specs/gtag-events/blocks-pages.test.js

@@ -20,6 +20,7 @@ import {
 	createAllProductsBlockShopPage,
 	createProductCollectionBlockShopPage,
 	createProductsBlockShopPage,
+	createRelatedProductsPage,
 } from '../../utils/create-page';
 import { getEventData, trackGtagEvent } from '../../utils/track-event';
 
@@ -337,9 +338,47 @@ test.describe( 'GTag events on block pages', () => {
 		page,
 	} ) => {
 		await createSimpleProduct(); // Create an additional product for related to show up.
+		await page.goto( `?p=${ simpleProductID }` );
+
+		// Check if it has the related products section.
+		const hasRelatedProducts = await page
+			.getByRole( 'heading', {
+				name: 'Related products',
+			} )
+			.isVisible();
+
+		test.skip(
+			! hasRelatedProducts,
+			'This WC setup does not have "Related products" section on the single product page.'
+		);
+
 		const event = trackGtagEvent( page, 'add_to_cart' );
+		const relatedProductID = await relatedProductAddToCart( page );
+
+		await event.then( ( request ) => {
+			const data = getEventData( request, 'add_to_cart' );
+			expect( data.product1 ).toEqual( {
+				id: relatedProductID.toString(),
+				nm: 'Simple product',
+				ca: 'Uncategorized',
+				qt: '1',
+				pr: simpleProductPrice.toString(),
+			} );
+		} );
+	} );
+
+	test( 'Add to cart event is sent from related products block', async ( {
+		page,
+	} ) => {
+		await createSimpleProduct(); // Create an additional product for related to show up.
+
+		const pageSlug = await createRelatedProductsPage( simpleProductID );
+
+		const event = trackGtagEvent( page, 'add_to_cart' );
+
+		// Go to block page
+		await page.goto( pageSlug );
 
-		await page.goto( `?p=${ simpleProductID }` );
 		const relatedProductID = await relatedProductAddToCart( page );
 
 		await event.then( ( request ) => {

tests/e2e/utils/create-page.js

@@ -7,6 +7,7 @@ import { cleanForSlug } from '@wordpress/url';
  * Internal dependencies
  */
 import { apiWP } from './api';
+import relatedProductPage from './fixtures/related-products.fixture.mjs';
 
 /**
  * Check if a page exists from a title.
@@ -135,3 +136,18 @@ export async function createAllProductsBlockShopPage() {
 		( await createPage( title, pageContent ) )
 	);
 }
+
+/**
+ * Creates a page with related products block.
+ *
+ * @param {number} productId Product ID.
+ * @return {Promise<string>} Slug of the created page.
+ */
+export async function createRelatedProductsPage( productId ) {
+	const { title, slug, pageContent } = relatedProductPage( productId );
+
+	if ( ! ( await pageExistsByTitle( title ) ) ) {
+		await createPage( title, pageContent );
+	}
+	return slug;
+}

tests/e2e/utils/customer.js

@@ -65,9 +65,9 @@ export async function variableProductAddToCart( page, productID ) {
  * @return {number} Product ID of the added product.
  */
 export async function relatedProductAddToCart( page ) {
-	const addToCart = ( await page.locator( '.related.products' ).isVisible() )
-		? '.related.products .add_to_cart_button.product_type_simple'
-		: '.wp-block-woocommerce-related-products .add_to_cart_button.product_type_simple';
+	const addToCart = `.related.products .add_to_cart_button.product_type_simple,
+		.wp-block-woocommerce-related-products .add_to_cart_button.product_type_simple,
+		[data-collection="woocommerce/product-collection/related"] .add_to_cart_button.product_type_simple`;
 
 	const addToCartButton = await page.locator( addToCart ).first();
 	await addToCartButton.click();

tests/e2e/utils/fixtures/all-products.fixture.json

@@ -1 +1,4 @@
-{"title":"All Products Block Shop","pageContent":"<!-- wp:woocommerce/all-products {\"columns\":3,\"rows\":3,\"alignButtons\":false,\"contentVisibility\":{\"orderBy\":true},\"orderby\":\"date\",\"layoutConfig\":[[\"woocommerce/product-image\",{\"imageSizing\":\"thumbnail\"}],[\"woocommerce/product-title\"],[\"woocommerce/product-price\"],[\"woocommerce/product-rating\"],[\"woocommerce/product-button\"]]} -->\n<div class=\"wp-block-woocommerce-all-products wc-block-all-products\" data-attributes=\"{&quot;alignButtons&quot;:false,&quot;columns&quot;:3,&quot;contentVisibility&quot;:{&quot;orderBy&quot;:true},&quot;isPreview&quot;:false,&quot;layoutConfig&quot;:[[&quot;woocommerce/product-image&quot;,{&quot;imageSizing&quot;:&quot;thumbnail&quot;}],[&quot;woocommerce/product-title&quot;],[&quot;woocommerce/product-price&quot;],[&quot;woocommerce/product-rating&quot;],[&quot;woocommerce/product-button&quot;]],&quot;orderby&quot;:&quot;date&quot;,&quot;rows&quot;:3}\"></div>\n<!-- /wp:woocommerce/all-products -->"}
+{
+	"title": "All Products Block Shop",
+	"pageContent": "<!-- wp:woocommerce/all-products {\"columns\":3,\"rows\":3,\"alignButtons\":false,\"contentVisibility\":{\"orderBy\":true},\"orderby\":\"date\",\"layoutConfig\":[[\"woocommerce/product-image\",{\"imageSizing\":\"thumbnail\"}],[\"woocommerce/product-title\"],[\"woocommerce/product-price\"],[\"woocommerce/product-rating\"],[\"woocommerce/product-button\"]]} -->\n<div class=\"wp-block-woocommerce-all-products wc-block-all-products\" data-attributes=\"{&quot;alignButtons&quot;:false,&quot;columns&quot;:3,&quot;contentVisibility&quot;:{&quot;orderBy&quot;:true},&quot;isPreview&quot;:false,&quot;layoutConfig&quot;:[[&quot;woocommerce/product-image&quot;,{&quot;imageSizing&quot;:&quot;thumbnail&quot;}],[&quot;woocommerce/product-title&quot;],[&quot;woocommerce/product-price&quot;],[&quot;woocommerce/product-rating&quot;],[&quot;woocommerce/product-button&quot;]],&quot;orderby&quot;:&quot;date&quot;,&quot;rows&quot;:3}\"></div>\n<!-- /wp:woocommerce/all-products -->"
+}

tests/e2e/utils/fixtures/product-collection.fixture.json

@@ -1 +1,4 @@
-{"title":"Product Collection Block Shop","pageContent":"<!-- wp:woocommerce/product-collection {\"id\":\"6ec42bd9-442e-43ac-85f9-75b234103549\",\"queryId\":0,\"query\":{\"perPage\":9,\"pages\":0,\"offset\":0,\"postType\":\"product\",\"order\":\"desc\",\"orderBy\":\"date\",\"search\":\"\",\"exclude\":[],\"inherit\":false,\"taxQuery\":{},\"isProductCollectionBlock\":true,\"featured\":false,\"woocommerceOnSale\":false,\"woocommerceStockStatus\":[\"instock\",\"outofstock\",\"onbackorder\"],\"woocommerceAttributes\":[],\"woocommerceHandPickedProducts\":[]},\"tagName\":\"div\",\"displayLayout\":{\"type\":\"flex\",\"columns\":3,\"shrinkColumns\":true}} -->\n<div class=\"wp-block-woocommerce-product-collection\"><!-- wp:woocommerce/product-template -->\n<!-- wp:woocommerce/product-image {\"imageSizing\":\"thumbnail\",\"isDescendentOfQueryLoop\":true} /-->\n\n<!-- wp:post-title {\"textAlign\":\"center\",\"level\":3,\"isLink\":true,\"style\":{\"spacing\":{\"margin\":{\"bottom\":\"0.75rem\",\"top\":\"0\"}}},\"fontSize\":\"medium\",\"__woocommerceNamespace\":\"woocommerce/product-collection/product-title\"} /-->\n\n<!-- wp:woocommerce/product-price {\"isDescendentOfQueryLoop\":true,\"textAlign\":\"center\",\"fontSize\":\"small\"} /-->\n\n<!-- wp:woocommerce/product-button {\"textAlign\":\"center\",\"isDescendentOfQueryLoop\":true,\"fontSize\":\"small\"} /-->\n<!-- /wp:woocommerce/product-template -->\n\n<!-- wp:query-pagination {\"layout\":{\"type\":\"flex\",\"justifyContent\":\"center\"}} -->\n<!-- wp:query-pagination-previous /-->\n\n<!-- wp:query-pagination-numbers /-->\n\n<!-- wp:query-pagination-next /-->\n<!-- /wp:query-pagination -->\n\n<!-- wp:woocommerce/product-collection-no-results -->\n<!-- wp:group {\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\",\"justifyContent\":\"center\",\"flexWrap\":\"wrap\"}} -->\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"fontSize\":\"medium\"} -->\n<p class=\"has-medium-font-size\"><strong>No results found</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can try <a href=\"#\" class=\"wc-link-clear-any-filters\">clearing any filters</a> or head to our <a href=\"#\" class=\"wc-link-stores-home\">store's home</a></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:group -->\n<!-- /wp:woocommerce/product-collection-no-results --></div>\n<!-- /wp:woocommerce/product-collection -->"}
+{
+	"title": "Product Collection Block Shop",
+	"pageContent": "<!-- wp:woocommerce/product-collection {\"id\":\"6ec42bd9-442e-43ac-85f9-75b234103549\",\"queryId\":0,\"query\":{\"perPage\":9,\"pages\":0,\"offset\":0,\"postType\":\"product\",\"order\":\"desc\",\"orderBy\":\"date\",\"search\":\"\",\"exclude\":[],\"inherit\":false,\"taxQuery\":{},\"isProductCollectionBlock\":true,\"featured\":false,\"woocommerceOnSale\":false,\"woocommerceStockStatus\":[\"instock\",\"outofstock\",\"onbackorder\"],\"woocommerceAttributes\":[],\"woocommerceHandPickedProducts\":[]},\"tagName\":\"div\",\"displayLayout\":{\"type\":\"flex\",\"columns\":3,\"shrinkColumns\":true}} -->\n<div class=\"wp-block-woocommerce-product-collection\"><!-- wp:woocommerce/product-template -->\n<!-- wp:woocommerce/product-image {\"imageSizing\":\"thumbnail\",\"isDescendentOfQueryLoop\":true} /-->\n\n<!-- wp:post-title {\"textAlign\":\"center\",\"level\":3,\"isLink\":true,\"style\":{\"spacing\":{\"margin\":{\"bottom\":\"0.75rem\",\"top\":\"0\"}}},\"fontSize\":\"medium\",\"__woocommerceNamespace\":\"woocommerce/product-collection/product-title\"} /-->\n\n<!-- wp:woocommerce/product-price {\"isDescendentOfQueryLoop\":true,\"textAlign\":\"center\",\"fontSize\":\"small\"} /-->\n\n<!-- wp:woocommerce/product-button {\"textAlign\":\"center\",\"isDescendentOfQueryLoop\":true,\"fontSize\":\"small\"} /-->\n<!-- /wp:woocommerce/product-template -->\n\n<!-- wp:query-pagination {\"layout\":{\"type\":\"flex\",\"justifyContent\":\"center\"}} -->\n<!-- wp:query-pagination-previous /-->\n\n<!-- wp:query-pagination-numbers /-->\n\n<!-- wp:query-pagination-next /-->\n<!-- /wp:query-pagination -->\n\n<!-- wp:woocommerce/product-collection-no-results -->\n<!-- wp:group {\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\",\"justifyContent\":\"center\",\"flexWrap\":\"wrap\"}} -->\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"fontSize\":\"medium\"} -->\n<p class=\"has-medium-font-size\"><strong>No results found</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can try <a href=\"#\" class=\"wc-link-clear-any-filters\">clearing any filters</a> or head to our <a href=\"#\" class=\"wc-link-stores-home\">store's home</a></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:group -->\n<!-- /wp:woocommerce/product-collection-no-results --></div>\n<!-- /wp:woocommerce/product-collection -->"
+}

tests/e2e/utils/fixtures/products.fixture.json

@@ -1 +1,4 @@
-{"title":"Products Block Shop","pageContent":"<!-- wp:query {\"queryId\":0,\"query\":{\"perPage\":9,\"pages\":0,\"offset\":0,\"postType\":\"product\",\"order\":\"desc\",\"orderBy\":\"date\",\"author\":\"\",\"search\":\"\",\"exclude\":[],\"sticky\":\"\",\"inherit\":false,\"__woocommerceAttributes\":[],\"__woocommerceStockStatus\":[\"instock\",\"outofstock\",\"onbackorder\"]},\"namespace\":\"woocommerce/product-query\"} -->\n<div class=\"wp-block-query\"><!-- wp:post-template {\"className\":\"products-block-post-template\",\"layout\":{\"type\":\"grid\",\"columnCount\":3},\"__woocommerceNamespace\":\"woocommerce/product-query/product-template\"} -->\n<!-- wp:woocommerce/product-image {\"imageSizing\":\"thumbnail\",\"isDescendentOfQueryLoop\":true} /-->\n\n<!-- wp:post-title {\"textAlign\":\"center\",\"level\":3,\"isLink\":true,\"style\":{\"spacing\":{\"margin\":{\"bottom\":\"0.75rem\",\"top\":\"0\"}}},\"fontSize\":\"medium\",\"__woocommerceNamespace\":\"woocommerce/product-query/product-title\"} /-->\n\n<!-- wp:woocommerce/product-price {\"isDescendentOfQueryLoop\":true,\"textAlign\":\"center\",\"fontSize\":\"small\"} /-->\n\n<!-- wp:woocommerce/product-button {\"textAlign\":\"center\",\"isDescendentOfQueryLoop\":true,\"fontSize\":\"small\"} /-->\n<!-- /wp:post-template -->\n\n<!-- wp:query-pagination {\"layout\":{\"type\":\"flex\",\"justifyContent\":\"center\"}} -->\n<!-- wp:query-pagination-previous /-->\n\n<!-- wp:query-pagination-numbers /-->\n\n<!-- wp:query-pagination-next /-->\n<!-- /wp:query-pagination -->\n\n<!-- wp:query-no-results -->\n<!-- wp:paragraph {\"placeholder\":\"Add text or blocks that will display when a query returns no results.\"} -->\n<p></p>\n<!-- /wp:paragraph -->\n<!-- /wp:query-no-results --></div>\n<!-- /wp:query -->"}
+{
+	"title": "Products Block Shop",
+	"pageContent": "<!-- wp:query {\"queryId\":0,\"query\":{\"perPage\":9,\"pages\":0,\"offset\":0,\"postType\":\"product\",\"order\":\"desc\",\"orderBy\":\"date\",\"author\":\"\",\"search\":\"\",\"exclude\":[],\"sticky\":\"\",\"inherit\":false,\"__woocommerceAttributes\":[],\"__woocommerceStockStatus\":[\"instock\",\"outofstock\",\"onbackorder\"]},\"namespace\":\"woocommerce/product-query\"} -->\n<div class=\"wp-block-query\"><!-- wp:post-template {\"className\":\"products-block-post-template\",\"layout\":{\"type\":\"grid\",\"columnCount\":3},\"__woocommerceNamespace\":\"woocommerce/product-query/product-template\"} -->\n<!-- wp:woocommerce/product-image {\"imageSizing\":\"thumbnail\",\"isDescendentOfQueryLoop\":true} /-->\n\n<!-- wp:post-title {\"textAlign\":\"center\",\"level\":3,\"isLink\":true,\"style\":{\"spacing\":{\"margin\":{\"bottom\":\"0.75rem\",\"top\":\"0\"}}},\"fontSize\":\"medium\",\"__woocommerceNamespace\":\"woocommerce/product-query/product-title\"} /-->\n\n<!-- wp:woocommerce/product-price {\"isDescendentOfQueryLoop\":true,\"textAlign\":\"center\",\"fontSize\":\"small\"} /-->\n\n<!-- wp:woocommerce/product-button {\"textAlign\":\"center\",\"isDescendentOfQueryLoop\":true,\"fontSize\":\"small\"} /-->\n<!-- /wp:post-template -->\n\n<!-- wp:query-pagination {\"layout\":{\"type\":\"flex\",\"justifyContent\":\"center\"}} -->\n<!-- wp:query-pagination-previous /-->\n\n<!-- wp:query-pagination-numbers /-->\n\n<!-- wp:query-pagination-next /-->\n<!-- /wp:query-pagination -->\n\n<!-- wp:query-no-results -->\n<!-- wp:paragraph {\"placeholder\":\"Add text or blocks that will display when a query returns no results.\"} -->\n<p></p>\n<!-- /wp:paragraph -->\n<!-- /wp:query-no-results --></div>\n<!-- /wp:query -->"
+}

tests/e2e/utils/fixtures/related-products.fixture.mjs

@@ -0,0 +1,19 @@
+export default ( productId ) => ( {
+	title: `Related Products Block ${ productId }`,
+	slug: `related-products-block-${ productId }`,
+	pageContent: `<!-- wp:woocommerce/product-collection {"queryId":12,"query":{"perPage":4,"pages":1,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"featured":false,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[],"filterable":false,"relatedBy":{"categories":false,"tags":true},"productReference":${ productId }},"tagName":"div","displayLayout":{"type":"flex","columns":4,"shrinkColumns":true},"dimensions":{"widthType":"fill"},"collection":"woocommerce/product-collection/related","hideControls":["inherit"],"queryContextIncludes":["collection"],"__privatePreviewState":{"isPreview":false,"previewMessage":"Actual products will vary depending on the page being viewed."}} -->
+<div class="wp-block-woocommerce-product-collection"><!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"bottom":"1rem"}}}} -->
+<h2 class="wp-block-heading has-text-align-center" style="margin-bottom:1rem">Related Products</h2>
+<!-- /wp:heading -->
+
+<!-- wp:woocommerce/product-template -->
+<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
+
+<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-collection/product-title"} /-->
+
+<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
+
+<!-- wp:woocommerce/product-button {"textAlign":"center","isDescendentOfQueryLoop":true,"fontSize":"small"} /-->
+<!-- /wp:woocommerce/product-template --></div>
+<!-- /wp:woocommerce/product-collection -->`,
+} );