From 0bd57dfdec5b14ffd2f5ecc65c6259095506031c Mon Sep 17 00:00:00 2001
From: Roy Ho <roykho77@gmail.com>
Date: Mon, 6 Nov 2023 07:17:25 -0800
Subject: [PATCH] Product Gallery: Add e2e tests for crop image option (#11559)

---
 .../product-gallery/block-settings/index.tsx  |  1 +
 src/Utils/ProductGalleryUtils.php             |  4 +-
 ...t-gallery.block_theme.side_effects.spec.ts | 48 ++++++++++++++++++-
 3 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/assets/js/blocks/product-gallery/block-settings/index.tsx b/assets/js/blocks/product-gallery/block-settings/index.tsx
index cea7839f110..d396fc2da45 100644
--- a/assets/js/blocks/product-gallery/block-settings/index.tsx
+++ b/assets/js/blocks/product-gallery/block-settings/index.tsx
@@ -69,6 +69,7 @@ export const ProductGalleryBlockSettings = ( {
 							cropImages: ! cropImages,
 						} )
 					}
+					className="wc-block-product-gallery__crop-images"
 				/>
 				<ToggleControl
 					label={ __(
diff --git a/src/Utils/ProductGalleryUtils.php b/src/Utils/ProductGalleryUtils.php
index be7af89898a..a3a490ed5d4 100644
--- a/src/Utils/ProductGalleryUtils.php
+++ b/src/Utils/ProductGalleryUtils.php
@@ -129,8 +129,8 @@ public static function maybe_generate_intermediate_image( $attachment_id, $size
 		$image_path     = wp_get_original_image_path( $attachment_id );
 		$image_metadata = wp_get_attachment_metadata( $attachment_id );
 
-		// If image doesn't exist, we can't generate the intermediate size. Bail.
-		if ( ! isset( $image_metadata['path'] ) ) {
+		// If image sizes are not available. Bail.
+		if ( ! isset( $image_metadata['width'], $image_metadata['height'] ) ) {
 			return;
 		}
 
diff --git a/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts b/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts
index 17a58caa4bb..422bf6e5d59 100644
--- a/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts
+++ b/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts
@@ -13,7 +13,12 @@ const blockData = {
 	name: 'woocommerce/product-gallery',
 	selectors: {
 		frontend: {},
-		editor: {},
+		editor: {
+			settings: {
+				cropImagesOption:
+					'.wc-block-product-gallery__crop-images .components-form-toggle__input',
+			},
+		},
 	},
 	slug: 'single-product',
 	productPage: '/product/logo-collection/',
@@ -234,4 +239,45 @@ test.describe( `${ blockData.name }`, () => {
 			await expect( page.locator( 'dialog' ) ).toBeHidden();
 		} );
 	} );
+
+	test( 'should show (square) cropped main product images when crop option is enabled', async ( {
+		page,
+		editorUtils,
+		pageObject,
+	} ) => {
+		await pageObject.addProductGalleryBlock( { cleanContent: true } );
+
+		const block = await pageObject.getMainImageBlock( {
+			page: 'editor',
+		} );
+
+		await expect( block ).toBeVisible();
+
+		await page
+			.locator( blockData.selectors.editor.settings.cropImagesOption )
+			.click();
+
+		await editorUtils.saveTemplate();
+
+		await expect(
+			page.locator( blockData.selectors.editor.settings.cropImagesOption )
+		).toBeChecked();
+
+		await page.goto( blockData.productPage, {
+			waitUntil: 'commit',
+		} );
+
+		const image = await page
+			.locator(
+				'img.wc-block-woocommerce-product-gallery-large-image__image'
+			)
+			.first()
+			.boundingBox();
+
+		const height = image?.height;
+		const width = image?.width;
+
+		// Allow 1 pixel of difference.
+		expect( width === height + 1 || width === height - 1 ).toBeTruthy();
+	} );
 } );