From df90c91f084a52defb027c8c429ecf6ec6a468f6 Mon Sep 17 00:00:00 2001
From: Fernando Marichal <fernando.marichal@automattic.com>
Date: Wed, 27 Mar 2024 11:40:31 -0300
Subject: [PATCH] Add E2E tests for grouped products (#45964)

* Add E2E tests for grouped products

* Add check

* Add changelog

* Fix tests

* Remove comment
---
 .../add-e2e_tests_for_grouped_product         |   4 +
 ...reate-grouped-product-block-editor.spec.js | 159 ++++++++++++++++++
 2 files changed, 163 insertions(+)
 create mode 100644 plugins/woocommerce/changelog/add-e2e_tests_for_grouped_product
 create mode 100644 plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-grouped-product-block-editor.spec.js

diff --git a/plugins/woocommerce/changelog/add-e2e_tests_for_grouped_product b/plugins/woocommerce/changelog/add-e2e_tests_for_grouped_product
new file mode 100644
index 00000000000..d474778ea0c
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-e2e_tests_for_grouped_product
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add E2E tests for grouped products #45964
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-grouped-product-block-editor.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-grouped-product-block-editor.spec.js
new file mode 100644
index 00000000000..3af82c79d98
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-grouped-product-block-editor.spec.js
@@ -0,0 +1,159 @@
+const { test } = require( '../../../../fixtures/block-editor-fixtures' );
+const { expect } = require( '@playwright/test' );
+
+const { clickOnTab } = require( '../../../../utils/simple-products' );
+const { api } = require( '../../../../utils' );
+
+const NEW_EDITOR_ADD_PRODUCT_URL =
+	'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product';
+
+const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
+
+const productData = {
+	name: `Grouped product Name ${ new Date().getTime().toString() }`,
+	summary: 'This is a product summary',
+};
+
+const groupedProductsData = [
+	{
+		name: `Product name 1 ${ new Date().getTime().toString() }`,
+		productPrice: '400',
+		type: 'simple',
+	},
+	{
+		name: `Product name 2 ${ new Date().getTime().toString() }`,
+		productPrice: '600',
+		type: 'simple',
+	},
+];
+
+const productIds = [];
+
+test.describe( 'General tab', () => {
+	test.describe( 'Grouped product', () => {
+		test.beforeAll( async () => {
+			for ( const product of groupedProductsData ) {
+				const id = await api.create.product( product );
+				productIds.push( id );
+			}
+		} );
+
+		test.afterAll( async () => {
+			for ( const productId of productIds ) {
+				await api.deletePost.product( productId );
+			}
+		} );
+		test.skip(
+			isTrackingSupposedToBeEnabled,
+			'The block product editor is not being tested'
+		);
+
+		test( 'can create a grouped product', async ( { page } ) => {
+			await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
+			await clickOnTab( 'General', page );
+			await page
+				.getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
+				.fill( productData.name );
+			await page
+				.locator(
+					'[data-template-block-id="basic-details"] .components-summary-control'
+				)
+				.last()
+				.fill( productData.summary );
+
+			await page
+				.getByRole( 'button', {
+					name: 'Change product type',
+				} )
+				.click();
+
+			await page
+				.locator( '.components-dropdown__content' )
+				.getByText( 'Grouped product' )
+				.click();
+
+			await page.waitForResponse(
+				( response ) =>
+					response.url().includes( '/wp-json/wc/v3/products/' ) &&
+					response.status() === 200
+			);
+
+			await page
+				.locator( '[data-title="Product section"]' )
+				.getByText( 'Add products' )
+				.click();
+
+			await page
+				.getByRole( 'heading', {
+					name: 'Add products to this group',
+				} )
+				.isVisible();
+
+			for ( const product of groupedProductsData ) {
+				await page
+					.locator(
+						'.woocommerce-add-products-modal__form-group-content'
+					)
+					.getByPlaceholder( 'Search for products' )
+					.fill( product.name );
+
+				await page.getByText( product.name ).click();
+			}
+
+			await page
+				.locator( '.woocommerce-add-products-modal__actions' )
+				.getByRole( 'button', {
+					name: 'Add',
+				} )
+				.click();
+
+			await page
+				.locator( '.woocommerce-product-header__actions' )
+				.getByRole( 'button', {
+					name: 'Publish',
+				} )
+				.click();
+
+			await page
+				.locator( '.woocommerce-product-publish-panel__header' )
+				.getByRole( 'button', {
+					name: 'Publish',
+				} )
+				.click();
+
+			const element = page.locator( 'div.components-snackbar__content' );
+			const textContent = await element.innerText();
+
+			await expect( textContent ).toMatch( 'Product type changed.' );
+
+			await page.waitForResponse(
+				( response ) =>
+					response.url().includes( '/wp-json/wc/v3/products/' ) &&
+					response.status() === 200
+			);
+
+			const title = page.locator( '.woocommerce-product-header__title' );
+
+			// Save product ID
+			const productIdRegex = /product%2F(\d+)/;
+			const url = page.url();
+			const productIdMatch = productIdRegex.exec( url );
+			const productId = productIdMatch ? productIdMatch[ 1 ] : null;
+
+			await expect( productId ).toBeDefined();
+			await expect( title ).toHaveText( productData.name );
+
+			await page.goto( `/?post_type=product&p=${ productId }` );
+
+			await expect(
+				page.getByRole( 'heading', { name: productData.name } )
+			).toBeVisible();
+
+			for ( const product of groupedProductsData ) {
+				await expect(
+					page.getByRole( 'link', { name: product.name } ).first()
+				).toBeVisible();
+			}
+		} );
+	} );
+} );