Fixed issue regarding widget form validation

app/code/Magento/CatalogWidget/etc/widget.xml

@@ -26,7 +26,7 @@
                 </depends>
                 <value>5</value>
             </parameter>
-            <parameter name="products_count" xsi:type="text" required="true" visible="true">
+            <parameter name="products_count" xsi:type="text" required="true" visible="true" additional_classes="positive-integer">
                 <label translate="true">Number of Products to Display</label>
                 <value>10</value>
             </parameter>

app/code/Magento/Widget/Block/Adminhtml/Widget/Options.php

@@ -148,7 +148,7 @@ protected function _addField($parameter)
             'name' => $form->addSuffixToName($fieldName, 'parameters'),
             'label' => __($parameter->getLabel()),
             'required' => $parameter->getRequired(),
-            'class' => 'widget-option',
+            'class' => $this->getCssClasses($parameter),
             'note' => __($parameter->getDescription()),
         ];
 
@@ -236,6 +236,23 @@ protected function _addField($parameter)
         return $field;
     }
 
+    /**
+     * Get css classes from xml to apply for validation and/or css styles
+     *
+     * @param \Magento\Framework\DataObject $parameter
+     * @return string
+     */
+    private function getCssClasses(\Magento\Framework\DataObject $parameter) : string
+    {
+        $cssClass = 'widget-option';
+        $additionalClasses = $parameter->getAdditionalClasses();
+        if ($additionalClasses) {
+            $cssClass .= ' '.$additionalClasses;
+        }
+
+        return $cssClass;
+    }
+
     /**
      * Checks whether $fieldType is a class name of custom renderer, and not just a type of input element
      *

app/code/Magento/Widget/Model/Config/Converter.php

@@ -3,12 +3,26 @@
  * Copyright © Magento, Inc. All rights reserved.
  * See COPYING.txt for license details.
  */
+declare(strict_types=1);
+
+/**
+ * Widget Block Converter
+ *
+ * @author      Magento Core Team <[email protected]>
+ */
 namespace Magento\Widget\Model\Config;
 
+/**
+ * Widget Converter Model
+ */
 class Converter implements \Magento\Framework\Config\ConverterInterface
 {
     /**
-     * {@inheritdoc}
+     * Convert dom node to Magento array
+     *
+     * @param \DOMNode $source
+     * @return array
+     * @throws \LogicException
      * @SuppressWarnings(PHPMD.NPathComplexity)
      * @SuppressWarnings(PHPMD.CyclomaticComplexity)
      */
@@ -34,56 +48,101 @@ public function convert($source)
             $widgetId = $widgetAttributes->getNamedItem('id');
             /** @var $widgetSubNode \DOMNode */
             foreach ($widget->childNodes as $widgetSubNode) {
-                switch ($widgetSubNode->nodeName) {
-                    case 'label':
-                        $widgetArray['name'] = $widgetSubNode->nodeValue;
-                        break;
-                    case 'description':
-                        $widgetArray['description'] = $widgetSubNode->nodeValue;
-                        break;
-                    case 'parameters':
-                        /** @var $parameter \DOMNode */
-                        foreach ($widgetSubNode->childNodes as $parameter) {
-                            if ($parameter->nodeName === '#text' || $parameter->nodeName === '#comment') {
-                                continue;
-                            }
-                            $subNodeAttributes = $parameter->attributes;
-                            $parameterName = $subNodeAttributes->getNamedItem('name')->nodeValue;
-                            $widgetArray['parameters'][$parameterName] = $this->_convertParameter($parameter);
-                        }
-                        break;
-                    case 'containers':
-                        if (!isset($widgetArray['supported_containers'])) {
-                            $widgetArray['supported_containers'] = [];
-                        }
-                        foreach ($widgetSubNode->childNodes as $container) {
-                            if ($container->nodeName === '#text' || $container->nodeName === '#comment') {
-                                continue;
-                            }
-                            $widgetArray['supported_containers'] = array_merge(
-                                $widgetArray['supported_containers'],
-                                $this->_convertContainer($container)
-                            );
-                        }
-                        break;
-                    case "#text":
-                        break;
-                    case '#comment':
-                        break;
-                    default:
-                        throw new \LogicException(
-                            sprintf(
-                                "Unsupported child xml node '%s' found in the 'widget' node",
-                                $widgetSubNode->nodeName
-                            )
-                        );
-                }
+                $widgetArray = $this->processWidgetSubNode($widgetSubNode, $widgetArray);
             }
             $widgets[$widgetId->nodeValue] = $widgetArray;
         }
         return $widgets;
     }
 
+    /**
+     * Convert dom sub node to Magento array
+     *
+     * @param \DOMNode $widgetSubNode
+     * @param array $widgetArray
+     * @return array
+     * @throws \LogicException
+     */
+    private function processWidgetSubNode(\DOMNode $widgetSubNode, array $widgetArray) : array
+    {
+        switch ($widgetSubNode->nodeName) {
+            case 'label':
+                $widgetArray['name'] = $widgetSubNode->nodeValue;
+                break;
+            case 'description':
+                $widgetArray['description'] = $widgetSubNode->nodeValue;
+                break;
+            case 'parameters':
+                $widgetArray = $this->processParameters($widgetSubNode, $widgetArray);
+                break;
+            case 'containers':
+                $widgetArray = $this->processContainers($widgetSubNode, $widgetArray);
+                break;
+            case "#text":
+                break;
+            case '#comment':
+                break;
+            default:
+                throw new \LogicException(
+                    sprintf(
+                        "Unsupported child xml node '%s' found in the 'widget' node",
+                        $widgetSubNode->nodeName
+                    )
+                );
+        }
+
+        return $widgetArray;
+    }
+
+    /**
+     * Convert dom sub node to Magento array
+     *
+     * @param \DOMNode $widgetSubNode
+     * @param array $widgetArray
+     * @return array
+     */
+    private function processParameters(\DOMNode $widgetSubNode, array $widgetArray) : array
+    {
+        /** @var $parameter \DOMNode */
+        foreach ($widgetSubNode->childNodes as $parameter) {
+            if ($parameter->nodeName === '#text' || $parameter->nodeName === '#comment') {
+                continue;
+            }
+            $subNodeAttributes = $parameter->attributes;
+            $parameterName = $subNodeAttributes->getNamedItem('name')->nodeValue;
+            $widgetArray['parameters'][$parameterName] = $this->_convertParameter($parameter);
+        }
+
+        return $widgetArray;
+    }
+
+    /**
+     * Convert dom sub node to Magento array
+     *
+     * @param \DOMNode $widgetSubNode
+     * @param array $widgetArray
+     * @return array
+     */
+    private function processContainers(\DOMNode $widgetSubNode, array $widgetArray) : array
+    {
+        if (!isset($widgetArray['supported_containers'])) {
+            $widgetArray['supported_containers'] = [];
+        }
+        $supportedContainers = [[]];
+        foreach ($widgetSubNode->childNodes as $container) {
+            if ($container->nodeName === '#text' || $container->nodeName === '#comment') {
+                continue;
+            }
+            $supportedContainers[] = $this->_convertContainer($container);
+        }
+        $widgetArray['supported_containers'] = array_merge(
+            $widgetArray['supported_containers'],
+            ...$supportedContainers
+        );
+
+        return $widgetArray;
+    }
+
     /**
      * Convert dom Container node to Magento array
      *
@@ -208,6 +267,12 @@ protected function _convertParameter($source)
                     break;
             }
         }
+
+        $additional_classes = $sourceAttributes->getNamedItem('additional_classes');
+        if ($additional_classes) {
+            $parameter['additional_classes'] = $additional_classes->nodeValue;
+        }
+
         return $parameter;
     }
 
@@ -240,7 +305,7 @@ protected function _convertDepends($source)
                 ];
 
                 continue;
-            } else if (!isset($depends[$dependencyName]['values'])) {
+            } elseif (!isset($depends[$dependencyName]['values'])) {
                 $depends[$dependencyName]['values'] = [$depends[$dependencyName]['value']];
                 unset($depends[$dependencyName]['value']);
             }

app/code/Magento/Widget/Test/Mftf/ActionGroup/AdminChooseTypeWidgetOnCmsPagesActionGroup.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+              xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+   <actionGroup name="AdminChooseTypeWidgetOnCmsPagesActionGroup">
+       <annotations>
+           <description>Goes to the CMS Page creation page. Create and choose a widget type the provided Widget.</description>
+       </annotations>
+       <arguments>
+           <argument name="widget" type="string" defaultValue="{{ProductsListWidget.type}}"/>
+       </arguments>
+
+       <amOnPage url="{{CmsPagesPage.url}}" stepKey="amOnCmsList"/>
+       <waitForPageLoad stepKey="waitForCmsList"/>
+       <click selector="{{CmsPagesPageActionsSection.addNewPageButton}}" stepKey="clickAddNewPageButton"/>
+       <fillField selector="{{CmsNewPagePageBasicFieldsSection.pageTitle}}" userInput="{{_newDefaultCmsPage.title}}" stepKey="fillPageTitle"/>
+       <click selector="{{CmsNewPagePageContentSection.header}}" stepKey="expandContentSection"/>
+       <waitForPageLoad stepKey="waitForContentSection"/>
+       <click selector="{{CmsWYSIWYGSection.InsertWidgetBtn}}" stepKey="clickInsertWidgetButton"/>
+       <waitForPageLoad stepKey="waitForSlideOut"/>
+       <selectOption selector="{{WidgetSection.WidgetType}}" userInput="{{widget}}" stepKey="selectWidgetType"/>
+       <waitForPageLoad stepKey="waitForWidgetOptions"/>
+
+   </actionGroup>
+</actionGroups>

app/code/Magento/Widget/Test/Mftf/ActionGroup/AdminVerifyNumberProductFieldActionGroup.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+              xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+   <actionGroup name="AdminVerifyNumberProductFieldActionGroup">
+       <annotations>
+           <description>Check to see an error message appears when filling the incorrect values ​​for the Products Number field.</description>
+       </annotations>
+       <arguments>
+           <argument name="testValue" type="string" defaultValue="{{ProductsListWidget.number_products}}"/>
+       </arguments>
+
+       <fillField selector="{{AdminNewWidgetSection.numberProducts}}" userInput="{{testValue}}" stepKey="fillTestValue" />
+       <see selector="{{AdminNewWidgetSection.messageForNumberProducts}}" userInput="A positive non-decimal number please" stepKey="assertErrorMessage"/>
+       <waitForPageLoad stepKey="waitForWidgetOptions"/>
+   </actionGroup>
+</actionGroups>

app/code/Magento/Widget/Test/Mftf/Data/WidgetsData.xml

@@ -18,6 +18,13 @@
         <data key="condition">SKU</data>
         <data key="display_on">All Pages</data>
         <data key="container">Main Content Area</data>
+        <data key="number_products">10</data>
+    </entity>
+    <entity name="WidgetWithNegativeNumberProduct" type="widget">
+        <data key="number_products">-10</data>
+    </entity>
+    <entity name="WidgetWithStringNumberProduct" type="widget">
+        <data key="number_products">Test</data>
     </entity>
     <entity name="DynamicBlocksRotatorWidget" type="widget">
         <data key="type">Dynamic Blocks Rotator</data>

app/code/Magento/Widget/Test/Mftf/Section/AdminNewWidgetSection.xml

@@ -6,8 +6,7 @@
   */
 -->
 
-<sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-          xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
+<sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
     <section name="AdminNewWidgetSection">
         <element name="widgetType" type="select" selector="#code"/>
         <element name="widgetDesignTheme" type="select" selector="#theme_id"/>
@@ -40,5 +39,7 @@
         <element name="displayMode" type="select" selector="select[id*='display_mode']"/>
         <element name="restrictTypes" type="select" selector="select[id*='types']"/>
         <element name="saveAndContinue" type="button" selector="#save_and_edit_button" timeout="30"/>
+        <element name="numberProducts" type="input" selector="//input[@type='text'][contains(@class, 'widget-option positive-integer input-text admin__control-text required-entry _required')]" />
+        <element name="messageForNumberProducts" type="text" selector="//label[contains(text(), 'A positive non-decimal number please')]" />
     </section>
 </sections>

app/code/Magento/Widget/Test/Mftf/Test/AdminVerifyNumbersProductFieldForWidgetTest.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
+
+    <test name="AdminVerifyNumbersProductsFieldForWidgetTest">
+        <annotations>
+            <group value="WYSIWYGDisabled"/>
+            <features value="Widget"/>
+            <title value="Verify Number Products field for New widget"/>
+            <description value="Verify validation Number Products field during creating a New Widget for category product list"/>
+            <group value="Widget"/>
+        </annotations>
+
+        <before>
+            <actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
+            <actionGroup ref="DisabledWYSIWYGActionGroup" stepKey="disableWYSIWYG"/>
+        </before>
+
+        <after>
+            <actionGroup ref="logout" stepKey="logout"/>
+        </after>
+
+        <actionGroup ref="AdminChooseTypeWidgetOnCmsPagesActionGroup" stepKey="chooseWidget">
+            <argument name="widget" value="{{ProductsListWidget.type}}"/>
+        </actionGroup>
+
+        <actionGroup ref="AdminVerifyNumberProductFieldActionGroup" stepKey="fillNegativeValue">
+            <argument name="testValue" value="{{WidgetWithNegativeNumberProduct.number_products}}"/>
+        </actionGroup>
+
+        <actionGroup ref="AdminVerifyNumberProductFieldActionGroup" stepKey="fillStringValue">
+            <argument name="testValue" value="{{WidgetWithStringNumberProduct.number_products}}"/>
+        </actionGroup>
+    </test>
+</tests>

app/code/Magento/Widget/etc/widget.xsd

@@ -76,6 +76,7 @@
         <xs:attribute name="visible" type="xs:boolean" />
         <xs:attribute name="sort_order" type="xs:int" />
         <xs:attribute name="required" type="xs:string" />
+        <xs:attribute name="additional_classes" type="xs:string" />
     </xs:complexType>
 
     <xs:complexType name="dependsParameterType">

app/code/Magento/Widget/etc/widget_file.xsd

@@ -76,6 +76,7 @@
         <xs:attribute name="visible" type="xs:boolean" />
         <xs:attribute name="sort_order" type="xs:int" />
         <xs:attribute name="required" type="xs:string" />
+        <xs:attribute name="additional_classes" type="xs:string" />
     </xs:complexType>
 
     <xs:complexType name="dependsParameterType">

lib/web/i18n/en_US.csv

@@ -30,6 +30,7 @@ Submit,Submit
 "No marginal white space please","No marginal white space please"
 "Your ZIP-code must be in the range 902xx-xxxx to 905-xx-xxxx","Your ZIP-code must be in the range 902xx-xxxx to 905-xx-xxxx"
 "A positive or negative non-decimal number please","A positive or negative non-decimal number please"
+"A positive non-decimal number please","A positive non-decimal number please"
 "The specified vehicle identification number (VIN) is invalid.","The specified vehicle identification number (VIN) is invalid."
 "Please enter a correct date","Please enter a correct date"
 "Please enter a valid time, between 00:00 and 23:59","Please enter a valid time, between 00:00 and 23:59"