[e2e tests] Add tests for product inventory in product block editor

plugins/woocommerce/changelog/e2e-product-inventory-block-editor

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+E2E tests: add tests for product inventory in product block editor

plugins/woocommerce/tests/e2e-pw/fixtures.js

@@ -18,5 +18,15 @@ exports.test = base.test.extend( {
 
 		await use( api );
 	},
+	wcAdminApi: async ( { baseURL }, use ) => {
+		const wcAdminApi = new wcApi( {
+			url: baseURL,
+			consumerKey: process.env.CONSUMER_KEY,
+			consumerSecret: process.env.CONSUMER_SECRET,
+			version: 'wc-admin', // Use wc-admin namespace
+		} );
+
+		await use( wcAdminApi );
+	},
 } );
 exports.expect = base.expect;

plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/block-editor-fixtures.js

@@ -1,16 +1,23 @@
 const { test } = require( '../../../../fixtures' );
 
 exports.test = test.extend( {
-	page: async ( { page, api }, use ) => {
+	page: async ( { page, api, wcAdminApi }, use ) => {
+		// Enable product block editor
 		await api.put(
 			'settings/advanced/woocommerce_feature_product_block_editor_enabled',
 			{
 				value: 'yes',
 			}
 		);
 
+		// Disable the product editor tour
+		await wcAdminApi.post( 'options', {
+			woocommerce_block_product_tour_shown: 'yes',
+		} );
+
 		await use( page );
 
+		// Disable product block editor
 		await api.put(
 			'settings/advanced/woocommerce_feature_product_block_editor_enabled',
 			{

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

@@ -1,118 +1,100 @@
 const { test: baseTest } = require( './block-editor-fixtures' );
 const { expect } = require( '../../../../fixtures' );
-baseTest.describe( 'Products > Edit Product', () => {
-	const test = baseTest.extend( {
-		product: async ( { api }, use ) => {
-			let product;
-
-			await api
-				.post( 'products', {
-					id: 0,
-					name: `Product ${ Date.now() }`,
-					type: 'simple',
-					description: `This product is a longer description of the awesome product ${ Date.now() }`,
-					short_description: `This product is pretty awesome ${ Date.now() }`,
-					regular_price: '12.99',
-				} )
-				.then( ( response ) => {
-					product = response.data;
-				} );
-
-			await use( product );
-
-			// Cleanup
-			await api.delete( `products/${ product.id }`, { force: true } );
-		},
-		page: async ( { page, api }, use ) => {
-			await api.put(
-				'settings/advanced/woocommerce_feature_product_block_editor_enabled',
-				{
-					value: 'yes',
-				}
-			);
-
-			await use( page );
-
-			await api.put(
-				'settings/advanced/woocommerce_feature_product_block_editor_enabled',
-				{
-					value: 'no',
-				}
-			);
-		},
+
+const test = baseTest.extend( {
+	product: async ( { api }, use ) => {
+		let product;
+
+		await api
+			.post( 'products', {
+				id: 0,
+				name: `Product ${ Date.now() }`,
+				type: 'simple',
+				description: `This product is a longer description of the awesome product ${ Date.now() }`,
+				short_description: `This product is pretty awesome ${ Date.now() }`,
+				regular_price: '12.99',
+			} )
+			.then( ( response ) => {
+				product = response.data;
+			} );
+
+		await use( product );
+
+		// Cleanup
+		await api.delete( `products/${ product.id }`, { force: true } );
+	},
+} );
+
+test( 'can update the general information of a product', async ( {
+	page,
+	product,
+} ) => {
+	await page.goto( `wp-admin/post.php?post=${ product.id }&action=edit` );
+
+	const updatedProduct = {
+		name: `Product ${ Date.now() }`,
+		description: `Updated description for the awesome product ${ Date.now() }`,
+		short_description: `Updated summary for the awesome product ${ Date.now() }`,
+		regularPrice: '100.05',
+		salePrice: '99.05',
+	};
+
+	const nameTextbox = page.getByLabel( 'Name' ).getByRole( 'textbox' );
+	const summaryTextbox = page
+		.getByLabel( 'Block: Product textarea block' )
+		.getByRole( 'textbox' );
+	const descriptionTextbox = page
+		.getByLabel( 'Block: Product description' )
+		.getByRole( 'textbox' );
+	const listPriceTextbox = page.getByRole( 'textbox', {
+		name: 'List price',
 	} );
+	const salePriceTextbox = page.getByRole( 'textbox', {
+		name: 'Sale price',
+	} );
+
+	await test.step( 'edit the product name', async () => {
+		await nameTextbox.fill( updatedProduct.name );
+	} );
+
+	await test.step( 'edit the product price', async () => {
+		await listPriceTextbox.fill( updatedProduct.regularPrice );
+		await salePriceTextbox.fill( updatedProduct.salePrice );
+	} );
+
+	await test.step( 'edit the product description and summary', async () => {
+		// Need to clear the textbox before filling it, otherwise the text will be appended.
+		await descriptionTextbox.clear();
+		await descriptionTextbox.fill( updatedProduct.description );
+
+		await summaryTextbox.clear();
+		await summaryTextbox.fill( updatedProduct.short_description );
+	} );
+
+	await test.step( 'publish the updated product', async () => {
+		await page.getByRole( 'button', { name: 'Update' } ).click();
+
+		await expect( page.getByLabel( 'Dismiss this notice' ) ).toContainText(
+			'Product updated'
+		);
+	} );
+
+	await test.step( 'verify the changes', async () => {
+		await expect.soft( nameTextbox ).toHaveValue( updatedProduct.name );
+
+		await expect
+			.soft( summaryTextbox )
+			.toHaveText( updatedProduct.short_description );
+
+		await expect
+			.soft( descriptionTextbox )
+			.toHaveText( updatedProduct.description );
 
-	test( 'can update the general information of a product', async ( {
-		page,
-		product,
-	} ) => {
-		await page.goto( `wp-admin/post.php?post=${ product.id }&action=edit` );
-
-		const updatedProduct = {
-			name: `Product ${ Date.now() }`,
-			description: `Updated description for the awesome product ${ Date.now() }`,
-			short_description: `Updated summary for the awesome product ${ Date.now() }`,
-			regularPrice: '100.05',
-			salePrice: '99.05',
-		};
-
-		const nameTextbox = page.getByLabel( 'Name' ).getByRole( 'textbox' );
-		const summaryTextbox = page
-			.getByLabel( 'Block: Product textarea block' )
-			.getByRole( 'textbox' );
-		const descriptionTextbox = page
-			.getByLabel( 'Block: Product description' )
-			.getByRole( 'textbox' );
-		const listPriceTextbox = page.getByRole( 'textbox', {
-			name: 'List price',
-		} );
-		const salePriceTextbox = page.getByRole( 'textbox', {
-			name: 'Sale price',
-		} );
-
-		await test.step( 'edit the product name', async () => {
-			await nameTextbox.fill( updatedProduct.name );
-		} );
-
-		await test.step( 'edit the product price', async () => {
-			await listPriceTextbox.fill( updatedProduct.regularPrice );
-			await salePriceTextbox.fill( updatedProduct.salePrice );
-		} );
-
-		await test.step( 'edit the product description and summary', async () => {
-			// Need to clear the textbox before filling it, otherwise the text will be appended.
-			await descriptionTextbox.clear();
-			await descriptionTextbox.fill( updatedProduct.description );
-
-			await summaryTextbox.clear();
-			await summaryTextbox.fill( updatedProduct.short_description );
-		} );
-
-		await test.step( 'publish the updated product', async () => {
-			await page.getByRole( 'button', { name: 'Update' } ).click();
-
-			await expect(
-				page.getByLabel( 'Dismiss this notice' )
-			).toContainText( 'Product updated' );
-		} );
-
-		await test.step( 'verify the changes', async () => {
-			await expect.soft( nameTextbox ).toHaveValue( updatedProduct.name );
-
-			await expect
-				.soft( summaryTextbox )
-				.toHaveText( updatedProduct.short_description );
-
-			await expect
-				.soft( descriptionTextbox )
-				.toHaveText( updatedProduct.description );
-
-			await expect
-				.soft( listPriceTextbox )
-				.toHaveValue( updatedProduct.regularPrice );
-			await expect
-				.soft( salePriceTextbox )
-				.toHaveValue( updatedProduct.salePrice );
-		} );
+		await expect
+			.soft( listPriceTextbox )
+			.toHaveValue( updatedProduct.regularPrice );
+		await expect
+			.soft( salePriceTextbox )
+			.toHaveValue( updatedProduct.salePrice );
 	} );
 } );