diff --git a/tests/e2e/config/default.json b/tests/e2e/config/default.json
index eb0e7a5486..f421e1145b 100644
--- a/tests/e2e/config/default.json
+++ b/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",
diff --git a/tests/e2e/specs/gtag-events/gtag-events.test.js b/tests/e2e/specs/gtag-events/gtag-events.test.js
index e7b9e6c88f..3bda09127b 100644
--- a/tests/e2e/specs/gtag-events/gtag-events.test.js
+++ b/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 ) => {
diff --git a/tests/e2e/utils/__fixtures__/all-products.fixture.json b/tests/e2e/utils/__fixtures__/all-products.fixture.json
index 006e50ee0c..4695ec40e2 100644
--- a/tests/e2e/utils/__fixtures__/all-products.fixture.json
+++ b/tests/e2e/utils/__fixtures__/all-products.fixture.json
@@ -1 +1,5 @@
-{"title":"All Products Block","pageContent":"\n\n"}
+{
+ "title": "All Products Block",
+ "slug": "all-products-block",
+ "pageContent": "\n\n"
+}
diff --git a/tests/e2e/utils/__fixtures__/related-products.fixture.mjs b/tests/e2e/utils/__fixtures__/related-products.fixture.mjs
new file mode 100644
index 0000000000..93e4a900c1
--- /dev/null
+++ b/tests/e2e/utils/__fixtures__/related-products.fixture.mjs
@@ -0,0 +1,21 @@
+export default {
+ title: 'Related Products Block',
+ slug: 'related-products-block',
+ pageContent: (
+ productId
+ ) => `
+
+
Related Products
+
+
+
+
+
+
+
+
+
+
+
+`,
+};
diff --git a/tests/e2e/utils/block-page.js b/tests/e2e/utils/block-page.js
index 990f1a7bc5..f0bfe95f20 100644
--- a/tests/e2e/utils/block-page.js
+++ b/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} 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} 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;
}
diff --git a/tests/e2e/utils/customer.js b/tests/e2e/utils/customer.js
index dded77b124..e31e4a110d 100644
--- a/tests/e2e/utils/customer.js
+++ b/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();