[E2E test coverage]: Disable block product editor

plugins/woocommerce/changelog/add-39411_tests_to_general_tab

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+[E2E test coverage]: General tab #39411

plugins/woocommerce/changelog/add-39417_disable_block_product_editor

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+[E2E test coverage]: Disable block product editor #39417

plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-simple-product-block-editor.spec.js

@@ -0,0 +1,175 @@
+const { test, expect } = require( '@playwright/test' );
+
+const {
+	clickOnTab,
+	isBlockProductEditorEnabled,
+	toggleBlockProductEditor,
+} = require( '../../../../utils/simple-products' );
+
+const NEW_EDITOR_ADD_PRODUCT_URL =
+	'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product';
+
+let isNewProductEditorEnabled = false;
+
+const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
+
+const productData = {
+	name: `Simple product Name ${ new Date().getTime().toString() }`,
+	summary: 'This is a product summary',
+	productPrice: '100',
+	salePrice: '90',
+};
+
+test.describe( 'General tab', () => {
+	test.describe.serial( 'Create product', () => {
+		let productId;
+		test.use( { storageState: process.env.ADMINSTATE } );
+
+		test.skip(
+			isTrackingSupposedToBeEnabled,
+			'The block product editor is not being tested'
+		);
+
+		test.beforeEach( async ( { browser } ) => {
+			const context = await browser.newContext();
+			const page = await context.newPage();
+			isNewProductEditorEnabled = await isBlockProductEditorEnabled(
+				page
+			);
+			if ( ! isNewProductEditorEnabled ) {
+				await toggleBlockProductEditor( 'enable', page );
+			}
+		} );
+
+		test.afterEach( async ( { browser } ) => {
+			const context = await browser.newContext();
+			const page = await context.newPage();
+			isNewProductEditorEnabled = await isBlockProductEditorEnabled(
+				page
+			);
+			if ( isNewProductEditorEnabled ) {
+				await toggleBlockProductEditor( 'disable', page );
+			}
+		} );
+
+		test( 'can create a simple 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( '.components-summary-control' )
+				.fill( productData.summary );
+			await page
+				.locator(
+					'[id^="wp-block-woocommerce-product-regular-price-field"]'
+				)
+				.first()
+				.fill( productData.productPrice );
+			await page
+				.locator(
+					'[id^="wp-block-woocommerce-product-sale-price-field"]'
+				)
+				.first()
+				.fill( productData.salePrice );
+
+			await page
+				.locator( '.woocommerce-product-header__actions' )
+				.getByRole( 'button', {
+					name: 'Add',
+				} )
+				.click();
+
+			const element = await page.locator(
+				'div.components-snackbar__content'
+			);
+			const textContent = await element.innerText();
+
+			await expect( textContent ).toMatch( /Product added/ );
+
+			const title = await page.locator(
+				'.woocommerce-product-header__title'
+			);
+
+			// Save product ID
+			const productIdRegex = /product%2F(\d+)/;
+			const url = await page.url();
+			const productIdMatch = productIdRegex.exec( url );
+			productId = productIdMatch ? productIdMatch[ 1 ] : null;
+
+			await expect( productId ).toBeDefined();
+			await expect( title ).toHaveText( productData.name );
+		} );
+		test( 'can not create a product with duplicated SKU', async ( {
+			page,
+		} ) => {
+			await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
+			await clickOnTab( 'General', page );
+			await page
+				.locator( '//input[@placeholder="e.g. 12 oz Coffee Mug"]' )
+				.fill( productData.name );
+			await page
+				.locator( '.components-summary-control' )
+				.fill( productData.summary );
+			await page
+				.locator(
+					'[id^="wp-block-woocommerce-product-regular-price-field"]'
+				)
+				.first()
+				.fill( productData.productPrice );
+			await page
+				.locator( '.woocommerce-product-header__actions' )
+				.getByRole( 'button', {
+					name: 'Add',
+				} )
+				.click();
+
+			const element = await page.locator(
+				'div.components-snackbar__content'
+			);
+			const textContent = await element.innerText();
+
+			await expect( textContent ).toMatch( /Invalid or duplicated SKU./ );
+		} );
+		test( 'can a shopper add the simple product to the cart', async ( {
+			page,
+		} ) => {
+			await page.goto( `/?post_type=product&p=${ productId }`, {
+				waitUntil: 'networkidle',
+			} );
+			await expect( page.locator( '.product_title' ) ).toHaveText(
+				productData.name
+			);
+			const productPriceElements = await page
+				.locator( '.summary .woocommerce-Price-amount' )
+				.all();
+
+			let foundProductPrice = false;
+			let foundSalePrice = false;
+			for ( const element of productPriceElements ) {
+				const textContent = await element.innerText();
+				if ( textContent.includes( productData.productPrice ) ) {
+					foundProductPrice = true;
+				}
+				if ( textContent.includes( productData.salePrice ) ) {
+					foundSalePrice = true;
+				}
+			}
+			await expect( foundProductPrice && foundSalePrice ).toBeTruthy();
+
+			await page.getByRole( 'button', { name: 'Add to cart' } ).click();
+			await page.getByRole( 'link', { name: 'View cart' } ).click();
+			await expect(
+				page.locator( 'td[data-title=Product]' ).first()
+			).toContainText( productData.name );
+			await page
+				.locator( `a.remove[data-product_id='${ productId }']` )
+				.click();
+			await page.waitForLoadState( 'networkidle' );
+			await expect(
+				page.locator( `a.remove[data-product_id='${ productId }']` )
+			).not.toBeVisible();
+		} );
+	} );
+} );

plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/disable-block-product-editor.spec.js

@@ -0,0 +1,86 @@
+const { test } = require( '@playwright/test' );
+const {
+	clickAddNewMenuItem,
+	expectBlockProductEditor,
+	expectOldProductEditor,
+	isBlockProductEditorEnabled,
+	toggleBlockProductEditor,
+} = require( '../../../../utils/simple-products' );
+
+const ALL_PRODUCTS_URL = 'wp-admin/edit.php?post_type=product';
+const NEW_EDITOR_ADD_PRODUCT_URL =
+	'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product';
+const SETTINGS_URL =
+	'wp-admin/admin.php?page=wc-settings&tab=advanced&section=features';
+
+let isNewProductEditorEnabled = false;
+
+const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
+
+async function dismissFeedbackModalIfShown( page ) {
+	if ( ! isTrackingSupposedToBeEnabled ) {
+		// no modal should be shown, so don't even look for button
+		return;
+	}
+
+	try {
+		await page
+			.locator( '.woocommerce-product-mvp-feedback-modal' )
+			.getByRole( 'button', { name: 'Skip' } )
+			.click( { timeout: 5000 } );
+	} catch ( error ) {}
+}
+
+test.describe.serial( 'Disable block product editor', () => {
+	test.use( { storageState: process.env.ADMINSTATE } );
+
+	test.beforeEach( async ( { page } ) => {
+		isNewProductEditorEnabled = await isBlockProductEditorEnabled( page );
+		if ( ! isNewProductEditorEnabled ) {
+			await toggleBlockProductEditor( 'enable', page );
+		}
+	} );
+
+	test.afterEach( async ( { browser } ) => {
+		const context = await browser.newContext();
+		const page = await context.newPage();
+		isNewProductEditorEnabled = await isBlockProductEditorEnabled( page );
+		if ( isNewProductEditorEnabled ) {
+			await toggleBlockProductEditor( 'disable', page );
+		}
+	} );
+
+	test.skip(
+		isNewProductEditorEnabled && isTrackingSupposedToBeEnabled,
+		'The block product editor is not being tested'
+	);
+
+	test( 'is hooked up to sidebar "Add New"', async ( { page } ) => {
+		await page.goto( ALL_PRODUCTS_URL );
+		await clickAddNewMenuItem( page );
+		await expectBlockProductEditor( page );
+	} );
+
+	test( 'can be disabled from the header', async ( { page } ) => {
+		await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
+
+		// turn off block product editor from the header
+		await page
+			.locator( '.components-dropdown-menu' )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await page
+			.getByRole( 'menuitem', {
+				name: 'Turn off the new product form',
+			} )
+			.click();
+		await dismissFeedbackModalIfShown( page );
+		await expectOldProductEditor( page );
+	} );
+	test( 'can be disabled from settings', async ( { page } ) => {
+		await toggleBlockProductEditor( 'disable', page );
+		await page.goto( ALL_PRODUCTS_URL );
+		await clickAddNewMenuItem( page );
+		await expectOldProductEditor( page );
+	} );
+} );

plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/enable-block-product-editor.spec.js

@@ -1,6 +1,8 @@
 const { test, expect } = require( '@playwright/test' );
 const {
 	clickAddNewMenuItem,
+	expectBlockProductEditor,
+	expectOldProductEditor,
 	isBlockProductEditorEnabled,
 	toggleBlockProductEditor,
 } = require( '../../../../utils/simple-products' );
@@ -13,18 +15,6 @@ let isNewProductEditorEnabled = false;
 
 const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
 
-async function expectOldProductEditor( page ) {
-	await expect(
-		page.locator( '#woocommerce-product-data h2' )
-	).toContainText( 'Product data' );
-}
-
-async function expectBlockProductEditor( page ) {
-	await expect(
-		page.locator( '.woocommerce-product-header__inner h1' )
-	).toContainText( 'Add new product' );
-}
-
 async function disableNewEditorIfEnabled( browser ) {
 	const context = await browser.newContext();
 	const page = await context.newPage();

plugins/woocommerce/tests/e2e-pw/utils/simple-products.js

@@ -1,3 +1,5 @@
+const { expect } = require( '@playwright/test' );
+
 const SETTINGS_URL =
 	'wp-admin/admin.php?page=wc-settings&tab=advanced&section=features';
 
@@ -54,8 +56,47 @@ async function clickAddNewMenuItem( page ) {
 		.click();
 }
 
+/**
+ * This function checks if the old product editor is visible.
+ *
+ * @param {Page} page
+ */
+async function expectOldProductEditor( page ) {
+	await expect(
+		page.locator( '#woocommerce-product-data h2' )
+	).toContainText( 'Product data' );
+}
+
+/**
+ * This function checks if the block product editor is visible.
+ *
+ * @param {Page} page
+ */
+async function expectBlockProductEditor( page ) {
+	await expect(
+		page.locator( '.woocommerce-product-header__inner h1' )
+	).toContainText( 'Add new product' );
+}
+
+/**
+ * Click on a block editor tab.
+ *
+ * @param {Page} page
+ * @param {string} tabName
+ */
+async function clickOnTab( tabName, page ) {
+	await page
+		// .locator( '.woocommerce-product-tab__general-content' )
+		.locator( '.woocommerce-product-tabs' )
+		.getByRole( 'button', { name: tabName } )
+		.click();
+}
+
 module.exports = {
+	expectBlockProductEditor,
+	expectOldProductEditor,
 	clickAddNewMenuItem,
+	clickOnTab,
 	isBlockProductEditorEnabled,
 	toggleBlockProductEditor,
 };