Merge pull request #2729 from woocommerce/dev/fix-add-to-cart-e2e

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/gtag-events.test.js

@@ -17,7 +17,10 @@ import {
 	relatedProductAddToCart,
 	singleProductAddToCart,
 } from '../../utils/customer';
-import { createBlockShopPage } from '../../utils/block-page';
+import {
+	createBlockShopPage,
+	createRelatedProductsPage,
+} from '../../utils/block-page';
 import { getEventData, trackGtagEvent } from '../../utils/track-event';
 
 const config = require( '../../config/default' );
@@ -74,12 +77,12 @@ test.describe( 'GTag events', () => {
 	test( 'Add to cart event is sent from a block shop page', async ( {
 		page,
 	} ) => {
-		await createBlockShopPage();
+		const pageSlug = await createBlockShopPage();
 
 		const event = trackGtagEvent( page, 'add_to_cart' );
 
 		// Go to block shop page
-		await page.goto( 'all-products-block' );
+		await page.goto( pageSlug );
 		await blockProductAddToCart( page );
 
 		await event.then( ( request ) => {
@@ -111,9 +114,45 @@ test.describe( 'GTag events', () => {
 		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' );
 
-		await page.goto( `?p=${ simpleProductID }` );
+		const relatedProductID = await relatedProductAddToCart( page );
+
+		await event.then( ( request ) => {
+			const data = getEventData( request );
+			expect( data.id ).toEqual( 'gla_' + relatedProductID );
+			expect( data.ecomm_pagetype ).toEqual( 'cart' );
+			expect( data.event_category ).toEqual( 'ecommerce' );
+			expect( data.google_business_vertical ).toEqual( 'retail' );
+		} );
+	} );
+
+	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 );
+
 		const relatedProductID = await relatedProductAddToCart( page );
 
 		await event.then( ( request ) => {

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

@@ -1 +1,5 @@
-{"title":"All Products Block","pageContent":"<!-- wp:woocommerce/all-products {\"columns\":3,\"rows\":3,\"alignButtons\":false,\"contentVisibility\":{\"orderBy\":true},\"orderby\":\"date\",\"layoutConfig\":[[\"woocommerce/product-image\"],[\"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;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",
+	"slug": "all-products-block",
+	"pageContent": "<!-- wp:woocommerce/all-products {\"columns\":3,\"rows\":3,\"alignButtons\":false,\"contentVisibility\":{\"orderBy\":true},\"orderby\":\"date\",\"layoutConfig\":[[\"woocommerce/product-image\"],[\"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;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__/related-products.fixture.mjs

@@ -0,0 +1,21 @@
+export default {
+	title: 'Related Products Block',
+	slug: 'related-products-block',
+	pageContent: (
+		productId
+	) => `<!-- 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 -->`,
+};

tests/e2e/utils/block-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.
@@ -41,14 +42,32 @@ export async function createPage( title, content ) {
 
 /**
  * Creates a shop page using blocks.
+ * @return {Promise<string>} Slug of the created page.
  */
 export async function createBlockShopPage() {
 	const {
 		title,
+		slug,
 		pageContent: content,
 	} = require( './__fixtures__/all-products.fixture.json' );
 
 	if ( ! ( await pageExistsByTitle( title ) ) ) {
 		await createPage( title, content );
 	}
+	return slug;
+}
+
+/**
+ * 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;
+
+	if ( ! ( await pageExistsByTitle( title ) ) ) {
+		await createPage( title, pageContent( productId ) );
+	}
+	return slug;
 }

tests/e2e/utils/customer.js

@@ -41,9 +41,9 @@ export async function singleProductAddToCart( 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();