From f2cbfc1c609882a4d6b906e7186a7783a4722d04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Sun, 15 Dec 2024 19:04:54 +0100 Subject: [PATCH 1/4] Make E2E's add-to-cart selector more flexible --- tests/e2e/utils/customer.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/tests/e2e/utils/customer.js b/tests/e2e/utils/customer.js index dded77b124..713eda2a6f 100644 --- a/tests/e2e/utils/customer.js +++ b/tests/e2e/utils/customer.js @@ -41,9 +41,8 @@ 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`; const addToCartButton = await page.locator( addToCart ).first(); await addToCartButton.click(); From ba28986ba95cc8cbc36548d6345c9c86024ee244 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Mon, 16 Dec 2024 22:11:39 +0100 Subject: [PATCH 2/4] Skip when there is no related prodcuts section --- tests/e2e/specs/gtag-events/gtag-events.test.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/tests/e2e/specs/gtag-events/gtag-events.test.js b/tests/e2e/specs/gtag-events/gtag-events.test.js index e7b9e6c88f..15f4ba61d4 100644 --- a/tests/e2e/specs/gtag-events/gtag-events.test.js +++ b/tests/e2e/specs/gtag-events/gtag-events.test.js @@ -111,9 +111,22 @@ 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 ) => { From 93758c84d930b7c44228ce2e594208985fdb92c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Mon, 16 Dec 2024 22:20:55 +0100 Subject: [PATCH 3/4] Add dedicated test for related products block. --- tests/e2e/config/default.json | 7 +++- .../e2e/specs/gtag-events/gtag-events.test.js | 32 +++++++++++++++++-- .../__fixtures__/all-products.fixture.json | 6 +++- .../__fixtures__/related-products.fixture.mjs | 21 ++++++++++++ tests/e2e/utils/block-page.js | 19 +++++++++++ tests/e2e/utils/customer.js | 3 +- 6 files changed, 82 insertions(+), 6 deletions(-) create mode 100644 tests/e2e/utils/__fixtures__/related-products.fixture.mjs 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 15f4ba61d4..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 ) => { @@ -138,6 +141,29 @@ test.describe( 'GTag events', () => { } ); } ); + 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 ) => { + 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 the shop page', async ( { page, } ) => { 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..ee43c279b2 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 {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 {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; } diff --git a/tests/e2e/utils/customer.js b/tests/e2e/utils/customer.js index 713eda2a6f..e31e4a110d 100644 --- a/tests/e2e/utils/customer.js +++ b/tests/e2e/utils/customer.js @@ -42,7 +42,8 @@ export async function singleProductAddToCart( page, productID ) { */ export async function relatedProductAddToCart( page ) { const addToCart = `.related.products .add_to_cart_button.product_type_simple, - .wp-block-woocommerce-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(); From 9510a2beb269ab7b18410b37c801bf0553dde09c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Tue, 17 Dec 2024 15:32:41 +0100 Subject: [PATCH 4/4] Fix type declaration in jsdoc Address https://github.com/woocommerce/google-listings-and-ads/pull/2729#pullrequestreview-2507803613 --- tests/e2e/utils/block-page.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/e2e/utils/block-page.js b/tests/e2e/utils/block-page.js index ee43c279b2..f0bfe95f20 100644 --- a/tests/e2e/utils/block-page.js +++ b/tests/e2e/utils/block-page.js @@ -42,7 +42,7 @@ export async function createPage( title, content ) { /** * Creates a shop page using blocks. - * @return {string} Slug of the created page. + * @return {Promise} Slug of the created page. */ export async function createBlockShopPage() { const { @@ -61,7 +61,7 @@ export async function createBlockShopPage() { * Creates a page with related products block. * * @param {number} productId Product ID. - * @return {string} Slug of the created page. + * @return {Promise} Slug of the created page. */ export async function createRelatedProductsPage( productId ) { const { title, slug, pageContent } = relatedProductPage;