[e2e tests] Add tests for managing product images in block editor (#44470)

plugins/woocommerce/changelog/e2e-add-manage-product-images-block-editor

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

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

@@ -5,5 +5,6 @@ module.exports = {
 		'no-console': 'off',
 		'jest/no-test-callback': 'off',
 		'jest/no-disabled-tests': 'off',
+		'jest/valid-expect': 'off',
 	},
 };

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

@@ -0,0 +1,22 @@
+const base = require( '@playwright/test' );
+const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
+
+exports.test = base.test.extend( {
+	api: async ( { baseURL }, use ) => {
+		const api = new wcApi( {
+			url: baseURL,
+			consumerKey: process.env.CONSUMER_KEY,
+			consumerSecret: process.env.CONSUMER_SECRET,
+			version: 'wc/v3',
+			axiosConfig: {
+				// allow 404s, so we can check if a resource was deleted without try/catch
+				validateStatus( status ) {
+					return ( status >= 200 && status < 300 ) || status === 404;
+				},
+			},
+		} );
+
+		await use( api );
+	},
+} );
+exports.expect = base.expect;

plugins/woocommerce/tests/e2e-pw/playwright.config.js

@@ -53,7 +53,7 @@ const config = {
 		screenshot: { mode: 'only-on-failure', fullPage: true },
 		stateDir: 'tests/e2e-pw/test-results/storage/',
 		trace: 'retain-on-failure',
-		video: 'on-first-retry',
+		video: 'retain-on-failure',
 		viewport: { width: 1280, height: 720 },
 	},
 	projects: [

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

@@ -1,9 +1,6 @@
-const { test: baseTest, expect } = require( '@playwright/test' );
+const { test: baseTest, expect } = require( '../../fixtures' );
-const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
 baseTest.describe( 'Products > Add Simple Product', () => {
-	baseTest.use( { storageState: process.env.ADMINSTATE } );
-
 	const productData = {
 		virtual: {
 			name: `Virtual product ${ Date.now() }`,
@@ -40,17 +37,7 @@ baseTest.describe( 'Products > Add Simple Product', () => {
 	};
 
 	const test = baseTest.extend( {
-		api: async ( { baseURL }, use ) => {
+		storageState: process.env.ADMINSTATE,
-			const api = new wcApi( {
-				url: baseURL,
-				consumerKey: process.env.CONSUMER_KEY,
-				consumerSecret: process.env.CONSUMER_SECRET,
-				version: 'wc/v3',
-			} );
-
-			await use( api );
-		},
-
 		product: async ( { api }, use ) => {
 			const product = {};
 			await use( product );

plugins/woocommerce/tests/e2e-pw/tests/merchant/product-delete.spec.js

@@ -1,29 +1,8 @@
-const { test: baseTest, expect } = require( '@playwright/test' );
+const { test: baseTest, expect } = require( '../../fixtures' );
-const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
 baseTest.describe( 'Products > Delete Product', () => {
-	baseTest.use( { storageState: process.env.ADMINSTATE } );
-
 	const test = baseTest.extend( {
-		api: async ( { baseURL }, use ) => {
+		storageState: process.env.ADMINSTATE,
-			const api = new wcApi( {
-				url: baseURL,
-				consumerKey: process.env.CONSUMER_KEY,
-				consumerSecret: process.env.CONSUMER_SECRET,
-				version: 'wc/v3',
-				axiosConfig: {
-					// allow 404s, so we can check if the product was deleted without try/catch
-					validateStatus( status ) {
-						return (
-							( status >= 200 && status < 300 ) || status === 404
-						);
-					},
-				},
-			} );
-
-			await use( api );
-		},
-
 		product: async ( { api }, use ) => {
 			let product = {
 				id: 0,

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

@@ -1,21 +1,8 @@
-const { test: baseTest, expect } = require( '@playwright/test' );
+const { test: baseTest, expect } = require( '../../fixtures' );
-const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
 baseTest.describe( 'Products > Edit Product', () => {
-	baseTest.use( { storageState: process.env.ADMINSTATE } );
-
 	const test = baseTest.extend( {
-		api: async ( { baseURL }, use ) => {
+		storageState: process.env.ADMINSTATE,
-			const api = new wcApi( {
-				url: baseURL,
-				consumerKey: process.env.CONSUMER_KEY,
-				consumerSecret: process.env.CONSUMER_SECRET,
-				version: 'wc/v3',
-			} );
-
-			await use( api );
-		},
-
 		products: async ( { api }, use ) => {
 			const products = [];
 

plugins/woocommerce/tests/e2e-pw/tests/merchant/product-images.spec.js

@@ -1,5 +1,4 @@
-const { test: baseTest, expect } = require( '@playwright/test' );
+const { test: baseTest, expect } = require( '../../fixtures' );
-const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
 async function addImageFromLibrary( page, imageName, actionButtonName ) {
 	await page.getByRole( 'tab', { name: 'Media Library' } ).click();
@@ -13,19 +12,8 @@ async function addImageFromLibrary( page, imageName, actionButtonName ) {
 }
 
 baseTest.describe( 'Products > Product Images', () => {
-	baseTest.use( { storageState: process.env.ADMINSTATE } );
-
 	const test = baseTest.extend( {
-		api: async ( { baseURL }, use ) => {
+		storageState: process.env.ADMINSTATE,
-			const api = new wcApi( {
-				url: baseURL,
-				consumerKey: process.env.CONSUMER_KEY,
-				consumerSecret: process.env.CONSUMER_SECRET,
-				version: 'wc/v3',
-			} );
-
-			await use( api );
-		},
 		product: async ( { api }, use ) => {
 			let product = {
 				id: 0,

plugins/woocommerce/tests/e2e-pw/tests/merchant/product-linked-producs.spec.js

@@ -1,20 +1,8 @@
-const { test: baseTest, expect } = require( '@playwright/test' );
+const { test: baseTest, expect } = require( '../../fixtures' );
-const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
 baseTest.describe( 'Products > Related products', () => {
-	baseTest.use( { storageState: process.env.ADMINSTATE } );
-
 	const test = baseTest.extend( {
-		api: async ( { baseURL }, use ) => {
+		storageState: process.env.ADMINSTATE,
-			const api = new wcApi( {
-				url: baseURL,
-				consumerKey: process.env.CONSUMER_KEY,
-				consumerSecret: process.env.CONSUMER_SECRET,
-				version: 'wc/v3',
-			} );
-
-			await use( api );
-		},
 		products: async ( { api }, use ) => {
 			const keys = [ 'main', 'linked1', 'linked2' ];
 			const products = {};

plugins/woocommerce/tests/e2e-pw/tests/merchant/product-reviews.spec.js

@@ -1,20 +1,8 @@
-const { test: baseTest, expect } = require( '@playwright/test' );
+const { test: baseTest, expect } = require( '../../fixtures' );
-const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
 
 baseTest.describe( 'Product Reviews > Edit Product Review', () => {
-	baseTest.use( { storageState: process.env.ADMINSTATE } );
-
 	const test = baseTest.extend( {
-		api: async ( { baseURL }, use ) => {
+		storageState: process.env.ADMINSTATE,
-			const api = new wcApi( {
-				url: baseURL,
-				consumerKey: process.env.CONSUMER_KEY,
-				consumerSecret: process.env.CONSUMER_SECRET,
-				version: 'wc/v3',
-			} );
-
-			await use( api );
-		},
 		testData: async ( { api }, use ) => {
 			const timestamp = Date.now().toString();
 			let product = {};

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

@@ -0,0 +1,22 @@
+const { test } = require( '../../../../fixtures' );
+
+exports.test = test.extend( {
+	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',
+			}
+		);
+	},
+	storageState: process.env.ADMINSTATE,
+} );

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

@@ -1,16 +1,11 @@
-const { test, expect } = require( '@playwright/test' );
+const { test } = require( './block-editor-fixtures' );
+const { expect } = require( '@playwright/test' );
 
-const {
+const { clickOnTab } = require( '../../../../utils/simple-products' );
-	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 = {
@@ -24,30 +19,6 @@ test.describe.configure( { mode: 'serial' } );
 
 test.describe( 'General tab', () => {
 	test.describe( 'Simple product form', () => {
-		test.use( { storageState: process.env.ADMINSTATE } );
-
-		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( 'renders each block without error', async ( { page } ) => {
 			await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
 			await clickOnTab( 'General', page );
@@ -61,35 +32,12 @@ test.describe( 'General tab', () => {
 
 	test.describe( '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 );
@@ -172,9 +120,7 @@ test.describe( 'General tab', () => {
 		test( 'can a shopper add the simple product to the cart', async ( {
 			page,
 		} ) => {
-			await page.goto( `/?post_type=product&p=${ productId }`, {
+			await page.goto( `/?post_type=product&p=${ productId }` );
-				waitUntil: 'networkidle',
-			} );
 			await expect(
 				page.getByRole( 'heading', { name: productData.name } )
 			).toBeVisible();
@@ -203,7 +149,6 @@ test.describe( 'General tab', () => {
 			await page
 				.locator( `a.remove[data-product_id='${ productId }']` )
 				.click();
-			await page.waitForLoadState( 'networkidle' );
 			await expect(
 				page.locator( `a.remove[data-product_id='${ productId }']` )
 			).toBeHidden();

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

@@ -1,25 +1,8 @@
-const { test: baseTest, expect } = require( '@playwright/test' );
+const { test: baseTest } = require( './block-editor-fixtures' );
-const {
+const { expect } = require( '../../../../fixtures' );
-	toggleBlockProductEditor,
-} = require( '../../../../utils/simple-products' );
-const wcApi = require( '@woocommerce/woocommerce-rest-api' ).default;
-
 baseTest.describe( 'Products > Edit Product', () => {
-	baseTest.use( { storageState: process.env.ADMINSTATE } );
-
 	const test = baseTest.extend( {
-		api: async ( { baseURL }, use ) => {
+		product: async ( { api }, use ) => {
-			const api = new wcApi( {
-				url: baseURL,
-				consumerKey: process.env.CONSUMER_KEY,
-				consumerSecret: process.env.CONSUMER_SECRET,
-				version: 'wc/v3',
-			} );
-
-			await use( api );
-		},
-
-		product: async ( { page, api }, use ) => {
 			let product;
 
 			await api
@@ -35,15 +18,28 @@ baseTest.describe( 'Products > Edit Product', () => {
 					product = response.data;
 				} );
 
-			await test.step( 'ensure block product editor is enabled', async () => {
-				await toggleBlockProductEditor( 'enable', page );
-			} );
-
 			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',
+				}
+			);
+		},
 	} );
 
 	test( 'can update the general information of a product', async ( {

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

@@ -0,0 +1,252 @@
+const { test: baseTest } = require( './block-editor-fixtures' );
+const { expect } = require( '../../../../fixtures' );
+
+async function selectImagesInLibrary( page, imagesNames ) {
+	const dataIds = [];
+
+	await page.getByRole( 'tab', { name: 'Media Library' } ).click();
+
+	// Select the given images
+	for ( const imageName of imagesNames ) {
+		await page
+			.getByRole( 'searchbox', { name: 'Search' } )
+			.fill( imageName );
+		const imageLocator = page.getByLabel( imageName ).nth( 0 );
+		await imageLocator.click();
+		await expect( imageLocator ).toBeChecked();
+		const dataId = await imageLocator.getAttribute( 'data-id' );
+		dataIds.push( dataId );
+	}
+
+	await page.getByRole( 'button', { name: 'Select', exact: true } ).click();
+
+	return dataIds;
+}
+
+baseTest.describe( 'Products > Edit Product', () => {
+	const test = baseTest.extend( {
+		product: async ( { api }, use ) => {
+			let product;
+
+			await api
+				.post( 'products', {
+					name: `Product ${ Date.now() }`,
+					type: 'simple',
+					description: `This is a 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 } );
+		},
+		productWithGallery: async ( { api, product }, use ) => {
+			let productWithGallery;
+			await api
+				.put( `products/${ product.id }`, {
+					images: [
+						{
+							src: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/T_2_front.jpg',
+						},
+						{
+							src: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/T_2_back.jpg',
+						},
+						{
+							src: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/T_3_front.jpg',
+						},
+					],
+				} )
+				.then( ( response ) => {
+					productWithGallery = response.data;
+				} );
+
+			await use( productWithGallery );
+		},
+	} );
+
+	test( 'can add images', async ( { page, product } ) => {
+		const images = [ 'image-01', 'image-02' ];
+
+		await test.step( 'navigate to product edit page', async () => {
+			await page.goto(
+				`wp-admin/post.php?post=${ product.id }&action=edit`
+			);
+		} );
+
+		await test.step( 'add images', async () => {
+			await page.getByText( 'Choose an image' ).click();
+			const dataIds = await selectImagesInLibrary( page, images );
+
+			await expect(
+				page.getByLabel( 'Block: Product images' ).locator( 'img' )
+			).toHaveCount( images.length );
+
+			for ( const dataId of dataIds ) {
+				await expect(
+					page
+						.getByLabel( 'Block: Product images' )
+						.locator( `img[id="${ dataId }"]` )
+				).toBeVisible();
+			}
+		} );
+
+		await test.step( 'update the product', async () => {
+			await page.getByRole( 'button', { name: 'Update' } ).click();
+			// Verify product was updated
+			await expect(
+				page.getByLabel( 'Dismiss this notice' )
+			).toContainText( 'Product updated' );
+		} );
+
+		await test.step( 'verify product image was set', async () => {
+			// Verify image in store frontend
+			await page.goto( product.permalink );
+
+			for ( const image of images ) {
+				await expect( page.getByTitle( image ) ).toBeVisible();
+			}
+		} );
+	} );
+
+	test( 'can replace an image', async ( { page, productWithGallery } ) => {
+		const initialImagesCount = productWithGallery.images.length;
+		const newImageName = 'image-01';
+		const replacedImgLocator = page
+			.getByLabel( 'Block: Product images' )
+			.locator( 'img' )
+			.nth( 1 );
+		let dataIds = [];
+
+		await test.step( 'navigate to product edit page', async () => {
+			await page.goto(
+				`wp-admin/post.php?post=${ productWithGallery.id }&action=edit`
+			);
+		} );
+
+		await test.step( 'replace an image', async () => {
+			await replacedImgLocator.click();
+			await page
+				.getByRole( 'toolbar', { name: 'Options' } )
+				.getByLabel( 'Options' )
+				.click();
+			await page.getByRole( 'menuitem', { name: 'Replace' } ).click();
+			dataIds = await selectImagesInLibrary( page, [ newImageName ] );
+
+			expect( await replacedImgLocator.getAttribute( 'src' ) ).toContain(
+				newImageName
+			);
+		} );
+
+		await test.step( 'update the product', async () => {
+			await page.getByRole( 'button', { name: 'Update' } ).click();
+			// Verify product was updated
+			await expect(
+				page.getByLabel( 'Dismiss this notice' )
+			).toContainText( 'Product updated' );
+		} );
+
+		await test.step( 'verify product image was set', async () => {
+			await expect( replacedImgLocator ).toHaveId( dataIds[ 0 ] );
+			await expect(
+				page.getByLabel( 'Block: Product images' ).locator( 'img' )
+			).toHaveCount( initialImagesCount );
+
+			// Verify image in store frontend
+			await page.goto( productWithGallery.permalink );
+			await expect( page.getByTitle( newImageName ) ).toBeVisible();
+		} );
+	} );
+
+	test( 'can remove an image', async ( { page, productWithGallery } ) => {
+		const initialImagesCount = productWithGallery.images.length;
+		const removedImgLocator = page
+			.getByLabel( 'Block: Product images' )
+			.locator( 'img' )
+			.nth( 1 );
+
+		await test.step( 'navigate to product edit page', async () => {
+			await page.goto(
+				`wp-admin/post.php?post=${ productWithGallery.id }&action=edit`
+			);
+		} );
+
+		await test.step( 'remove an image', async () => {
+			await removedImgLocator.click();
+			await page
+				.getByRole( 'toolbar', { name: 'Options' } )
+				.getByLabel( 'Options' )
+				.click();
+			await page.getByRole( 'menuitem', { name: 'Remove' } ).click();
+
+			await expect(
+				page.getByLabel( 'Block: Product images' ).locator( 'img' )
+			).toHaveCount( initialImagesCount - 1 );
+		} );
+
+		await test.step( 'update the product', async () => {
+			await page.getByRole( 'button', { name: 'Update' } ).click();
+			// Verify product was updated
+			await expect(
+				page.getByLabel( 'Dismiss this notice' )
+			).toContainText( 'Product updated' );
+		} );
+
+		await test.step( 'verify product image was set', async () => {
+			await expect(
+				page.getByLabel( 'Block: Product images' ).locator( 'img' )
+			).toHaveCount( initialImagesCount - 1 );
+
+			// Verify image in store frontend
+			await page.goto( productWithGallery.permalink );
+			await expect(
+				page.locator( `#product-${ productWithGallery.id } ol img` )
+			).toHaveCount( initialImagesCount - 1 );
+		} );
+	} );
+
+	test( 'can set an image as cover', async ( {
+		page,
+		productWithGallery,
+	} ) => {
+		const newCoverImgLocator = page
+			.getByLabel( 'Block: Product images' )
+			.locator( 'img' )
+			.nth( 1 );
+
+		await test.step( 'navigate to product edit page', async () => {
+			await page.goto(
+				`wp-admin/post.php?post=${ productWithGallery.id }&action=edit`
+			);
+		} );
+
+		const newCoverImgId = await newCoverImgLocator.getAttribute( 'id' );
+
+		await test.step( 'remove an image', async () => {
+			await newCoverImgLocator.click();
+			await page.getByLabel( 'Set as cover' ).click();
+
+			await expect(
+				page.getByRole( 'button', { name: 'Cover' } ).locator( 'img' )
+			).toHaveId( newCoverImgId );
+		} );
+
+		await test.step( 'update the product', async () => {
+			await page.getByRole( 'button', { name: 'Update' } ).click();
+			// Verify product was updated
+			await expect(
+				page.getByLabel( 'Dismiss this notice' )
+			).toContainText( 'Product updated' );
+		} );
+
+		await test.step( 'verify product image was set', async () => {
+			await expect(
+				page.getByRole( 'button', { name: 'Cover' } ).locator( 'img' )
+			).toHaveId( newCoverImgId );
+		} );
+	} );
+} );