Merge pull request #2511 from woocommerce/fix/2507-snackbar-error-mes…

…sage Update Block validation to support error context
woocommerce · Aug 14, 2024 · 0d6e636 · 0d6e636
2 parents 9f669d4 + ea781f6
commit 0d6e636
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 36 deletions.
diff --git a/js/src/blocks/product-date-time-field/edit.js b/js/src/blocks/product-date-time-field/edit.js
@@ -10,6 +10,7 @@ import {
 	useValidation,
 } from '@woocommerce/product-editor';
 import { Flex, FlexBlock } from '@wordpress/components';
+import { isWcVersion } from '@woocommerce/settings'; // eslint-disable-line import/no-unresolved
 
 /**
  * Internal dependencies
@@ -21,11 +22,19 @@ import styles from './editor.module.scss';
  * @typedef {import('../types.js').ProductBasicAttributes} ProductBasicAttributes
  */
 
-async function resolveValidationMessage( inputRef ) {
+async function resolveValidationMessage( inputRef, context ) {
 	const input = inputRef.current;
 
 	if ( ! input.validity.valid ) {
-		return input.validationMessage;
+		// compatibility-code "WC < 9.2"
+		if ( isWcVersion( '9.2.0', '<' ) ) {
+			return input.validationMessage;
+		}
+
+		return {
+			message: input.validationMessage,
+			context,
+		};
 	}
 }
 
@@ -35,8 +44,9 @@ async function resolveValidationMessage( inputRef ) {
  * @param {Object} props React props.
  * @param {ProductBasicAttributes} props.attributes
  * @param {ProductEditorBlockContext} props.context
+ * @param {string} props.clientId
  */
-export default function Edit( { attributes, context } ) {
+export default function Edit( { attributes, context, clientId } ) {
 	const { property } = attributes;
 	const blockProps = useWooBlockProps( attributes );
 	const [ value, setValue ] = useProductEntityProp( property, {
@@ -76,11 +86,11 @@ export default function Edit( { attributes, context } ) {
 	};
 
 	const dateValidation = useValidation( `${ property }-date`, () =>
-		resolveValidationMessage( dateInputRef )
+		resolveValidationMessage( dateInputRef, clientId )
 	);
 
 	const timeValidation = useValidation( `${ property }-time`, () =>
-		resolveValidationMessage( timeInputRef )
+		resolveValidationMessage( timeInputRef, clientId )
 	);
 
 	return (

diff --git a/src/Admin/Input/Integer.php b/src/Admin/Input/Integer.php
@@ -20,6 +20,11 @@ public function __construct() {
 		// the text field block to work around it.
 		parent::__construct( 'integer', 'woocommerce/product-text-field' );
 
-		$this->set_block_attribute( 'type', [ 'value' => 'number' ] );
+		$this->set_block_attribute(
+			'pattern',
+			[
+				'value' => '0|[1-9]\d*',
+			]
+		);
 	}
 }
diff --git a/tests/Unit/Admin/Input/InputCollectionTest.php b/tests/Unit/Admin/Input/InputCollectionTest.php
@@ -108,7 +108,12 @@ public function test_integer() {
 
 		$this->assertEquals( 'integer', $input->get_type() );
 		$this->assertEquals( 'woocommerce/product-text-field', $input->get_block_name() );
-		$this->assertEquals( [ 'value' => 'number' ], $input->get_block_attributes()['type'] );
+		$this->assertEquals(
+			[
+				'value' => '0|[1-9]\d*',
+			],
+			$input->get_block_attributes()['pattern']
+		);
 	}
 
 	public function test_select() {

diff --git a/tests/Unit/Admin/Product/Attributes/Input/AttributeInputCollectionTest.php b/tests/Unit/Admin/Product/Attributes/Input/AttributeInputCollectionTest.php
@@ -485,7 +485,9 @@ public function test_multipack_input() {
 					'property' => 'meta_data._wc_gla_multipack',
 					'label'    => 'Multipack',
 					'tooltip'  => 'The number of identical products in a multipack. Use this attribute to indicate that you\'ve grouped multiple identical products for sale as one item.',
-					'type'     => [ 'value' => 'number' ],
+					'pattern'  => [
+						'value' => '0|[1-9]\d*',
+					],
 					'min'      => [ 'value' => 0 ],
 				],
 			],

diff --git a/tests/e2e/specs/product-editor/block-integration.test.js b/tests/e2e/specs/product-editor/block-integration.test.js
@@ -93,23 +93,18 @@ test.describe( 'Product Block Editor integration', () => {
 		await expect( panel.getByRole( 'combobox' ) ).toHaveCount( 9 );
 
 		/*
-		 * 8 <input type="text|date|time">:
+		 * 9 <input type="text|date|time">:
 		 * - GTIN
 		 * - MPN
 		 * - Size
 		 * - Color
 		 * - Material
 		 * - Pattern
+		 * - Multipack
 		 * - Availability date
 		 * - Availability time
 		 */
-		await expect( panel.getByRole( 'textbox' ) ).toHaveCount( 8 );
-
-		/*
-		 * 1 <input type="number">:
-		 * - Multipack
-		 */
-		await expect( panel.getByRole( 'spinbutton' ) ).toHaveCount( 1 );
+		await expect( panel.getByRole( 'textbox' ) ).toHaveCount( 9 );
 
 		/*
 		 * 16 pairs of <label> and help icon buttons:
@@ -243,16 +238,11 @@ test.describe( 'Product Block Editor integration', () => {
 		 * - Color
 		 * - Material
 		 * - Pattern
+		 * - Multipack
 		 * - Availability date
 		 * - Availability time
 		 */
-		await expect( panel.getByRole( 'textbox' ) ).toHaveCount( 8 );
-
-		/*
-		 * 1 <input type="number"> for variation product:
-		 * - Multipack
-		 */
-		await expect( panel.getByRole( 'spinbutton' ) ).toHaveCount( 1 );
+		await expect( panel.getByRole( 'textbox' ) ).toHaveCount( 9 );
 	} );
 
 	test( 'Channel visibility is disabled when hiding in product catalog', async () => {
@@ -455,7 +445,9 @@ test.describe( 'Product Block Editor integration', () => {
 		 */
 		await dateInput.pressSequentially( '9' );
 
-		await editorUtils.assertUnableSave();
+		await editorUtils.assertUnableSave(
+			'Please enter a valid value. The field is incomplete or has an invalid date.'
+		);
 		await expect( dateHelp ).toBeVisible();
 		await expect( dateHelp ).toHaveText(
 			await editorUtils.evaluateValidationMessage( dateInput )
@@ -465,7 +457,9 @@ test.describe( 'Product Block Editor integration', () => {
 
 		await timeInput.pressSequentially( '9' );
 
-		await editorUtils.assertUnableSave();
+		await editorUtils.assertUnableSave(
+			'Please enter a valid value. The field is incomplete or has an invalid date.'
+		);
 		await expect( timeHelp ).toBeVisible();
 		await expect( timeHelp ).toHaveText(
 			await editorUtils.evaluateValidationMessage( timeInput )
@@ -527,24 +521,49 @@ test.describe( 'Product Block Editor integration', () => {
 		await expect( input ).toHaveValue( '' );
 		await expect( help ).toHaveCount( 0 );
 
+		// Assert invalid values
+
 		await input.fill( '-1' );
 
-		await editorUtils.assertUnableSave(
-			'The minimum value of the field is 0'
-		);
+		await editorUtils.assertUnableSave( 'Invalid value for the field.' );
 		await expect( help ).toBeVisible();
 		await expect( help ).toHaveText(
 			await editorUtils.evaluateValidationMessage( input )
 		);
 
 		await input.fill( '9.5' );
 
-		await editorUtils.assertUnableSave();
+		await editorUtils.assertUnableSave( 'Invalid value for the field.' );
+		await expect( help ).toBeVisible();
+		await expect( help ).toHaveText(
+			await editorUtils.evaluateValidationMessage( input )
+		);
+
+		await input.fill( '00' );
+
+		await editorUtils.assertUnableSave( 'Invalid value for the field.' );
+		await expect( help ).toBeVisible();
+		await expect( help ).toHaveText(
+			await editorUtils.evaluateValidationMessage( input )
+		);
+
+		await input.fill( '01' );
+
+		await editorUtils.assertUnableSave( 'Invalid value for the field.' );
+		await expect( help ).toBeVisible();
+		await expect( help ).toHaveText(
+			await editorUtils.evaluateValidationMessage( input )
+		);
+
+		await input.fill( '2e5' );
+
+		await editorUtils.assertUnableSave( 'Invalid value for the field.' );
 		await expect( help ).toBeVisible();
 		await expect( help ).toHaveText(
 			await editorUtils.evaluateValidationMessage( input )
 		);
 
+		// Assert valid values
 		await input.fill( '0' );
 		await editorUtils.save();
 

diff --git a/tests/e2e/utils/product-editor.js b/tests/e2e/utils/product-editor.js
@@ -577,17 +577,23 @@ export function getProductBlockEditorUtils( page ) {
 		async assertUnableSave( message = 'Please enter a valid value.' ) {
 			await this.clickSave();
 
-			const failureNotice = page
-				.locator( '.components-snackbar__content' )
-				.filter( { hasText: new RegExp( message ) } );
-
-			const failureNoticeDismissButton =
-				failureNotice.getByRole( 'button' );
+			const failureNotice = page.locator(
+				'.components-snackbar__content'
+			);
 
 			await expect( failureNotice ).toBeVisible();
+			await expect( failureNotice ).toContainText( message );
+
+			const failureNoticeButton = failureNotice.getByRole( 'button' );
 
 			// Dismiss the notice.
-			await failureNoticeDismissButton.click();
+			if ( await failureNoticeButton.isVisible() ) {
+				// compatibility-code "WC < 9.2" -- Dismiss by its inner close button.
+				await failureNoticeButton.click();
+			} else {
+				failureNotice.click();
+			}
+
 			await expect( failureNotice ).toHaveCount( 0 );
 		},
 	};