improved event handlers for prompt widget

magento · Mar 3, 2020 · 21afe21 · 21afe21
1 parent 2d46d98
commit 21afe21
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 0 deletions.
diff --git a/app/code/Magento/Cms/Test/Mftf/ActionGroup/ClickInsertEditImageTinyMCEButtonActionGroup.xml b/app/code/Magento/Cms/Test/Mftf/ActionGroup/ClickInsertEditImageTinyMCEButtonActionGroup.xml
@@ -0,0 +1,19 @@
+<?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="ClickInsertEditImageTinyMCEButtonActionGroup">
+        <annotations>
+            <description>Clicks on the 'Insert/edit image' TinyMCE button.</description>
+        </annotations>
+
+        <click selector="{{TinyMCESection.InsertImageIcon}}" stepKey="clickInsertImageBtn" />
+        <waitForPageLoad stepKey="waitForPageLoad"/>
+    </actionGroup>
+</actionGroups>
diff --git a/app/code/Magento/Cms/Test/Mftf/ActionGroup/CreateImageFolderByEnterKeyActionGroup.xml b/app/code/Magento/Cms/Test/Mftf/ActionGroup/CreateImageFolderByEnterKeyActionGroup.xml
@@ -0,0 +1,18 @@
+<?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="CreateImageFolderByEnterKeyActionGroup" extends="CreateImageFolderActionGroup">
+        <annotations>
+            <description>Creates a folder (by enter key) in the Media Gallery based on the provided Folder.</description>
+        </annotations>
+
+        <pressKey selector="{{MediaGallerySection.FolderName}}" parameterArray="[\Facebook\WebDriver\WebDriverKeys::ENTER]" stepKey="acceptFolderName"/>
+    </actionGroup>
+</actionGroups>
diff --git a/app/code/Magento/Cms/Test/Mftf/ActionGroup/DeleteFolderActionGroup.xml b/app/code/Magento/Cms/Test/Mftf/ActionGroup/DeleteFolderActionGroup.xml
@@ -0,0 +1,28 @@
+<?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="DeleteFolderActionGroup">
+        <annotations>
+            <description>Deletes the provided folder by name from the Media Gallery.</description>
+        </annotations>
+        <arguments>
+            <argument name="ImageFolder" defaultValue="ImageFolder"/>
+        </arguments>
+
+        <click userInput="{{ImageFolder.name}}" stepKey="clickOnCreatedFolder"/>
+        <waitForLoadingMaskToDisappear stepKey="waitForLoading"/>
+        <see selector="{{MediaGallerySection.DeleteFolder}}" userInput="Delete Folder" stepKey="seeDeleteFolderBtn"/>
+        <click selector="{{MediaGallerySection.DeleteFolder}}" stepKey="clickDeleteFolderBtn"/>
+        <waitForText userInput="OK" stepKey="waitForConfirm"/>
+        <click selector="{{MediaGallerySection.confirmDelete}}" stepKey="confirmDelete"/>
+        <waitForPageLoad stepKey="waitForPopUpHide"/>
+        <dontSeeElement selector="{{ImageFolder.name}}" stepKey="dontSeeFolderName"/>
+    </actionGroup>
+</actionGroups>
diff --git a/app/code/Magento/Cms/Test/Mftf/ActionGroup/PressEscImageFolderActionGroup.xml b/app/code/Magento/Cms/Test/Mftf/ActionGroup/PressEscImageFolderActionGroup.xml
@@ -0,0 +1,27 @@
+<?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="PressEscImageFolderActionGroup">
+        <annotations>
+            <description>Opens the 'create folder' modal, fills 'folder name' input with provided folder name,
+                presses escape key to cancel folder creation (close modal).</description>
+        </annotations>
+        <arguments>
+            <argument name="ImageFolder" defaultValue="ImageFolder"/>
+        </arguments>
+
+        <click selector="{{MediaGallerySection.CreateFolder}}" stepKey="createFolder"/>
+        <waitForElementVisible selector="{{MediaGallerySection.FolderName}}" stepKey="waitForPopUp"/>
+        <fillField selector="{{MediaGallerySection.FolderName}}" userInput="{{ImageFolder.name}}" stepKey="fillFolderName"/>
+        <pressKey selector="{{MediaGallerySection.FolderName}}" parameterArray="[\Facebook\WebDriver\WebDriverKeys::ESCAPE]" stepKey="cancelFolderName"/>
+        <waitForPageLoad stepKey="waitForPopUpHide"/>
+        <dontSeeElement selector="{{ImageFolder.name}}" stepKey="dontSeeFolderName"/>
+    </actionGroup>
+</actionGroups>
diff --git a/app/code/Magento/Cms/Test/Mftf/Section/TinyMCESection.xml b/app/code/Magento/Cms/Test/Mftf/Section/TinyMCESection.xml
@@ -51,6 +51,7 @@
         <element name="insertBtn" type="button" selector="#insert"/>
         <element name="InsertFile" type="text" selector="#insert_files"/>
         <element name="CreateFolder" type="button" selector="#new_folder" />
+        <element name="DeleteFolder" type="button" selector="#delete_folder" />
         <element name="DeleteSelectedBtn" type="text" selector="#delete_files"/>
         <element name="CancelBtn" type="button" selector="#cancel" />
         <element name="FolderName" type="button" selector="input[data-role='promptField']" />

diff --git a/...nto/Cms/Test/Mftf/Test/AdminCheckCreateFolderEscapeAndEnterHandlesForWYSIWYGBlockTest.xml b/...nto/Cms/Test/Mftf/Test/AdminCheckCreateFolderEscapeAndEnterHandlesForWYSIWYGBlockTest.xml
@@ -0,0 +1,53 @@
+<?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="AdminCheckCreateFolderEscapeAndEnterHandlesForWYSIWYGBlockTest">
+        <annotations>
+            <features value="Cms"/>
+            <stories value="WYSIWYG toolbar configuration with Magento Media Gallery"/>
+            <group value="Cms"/>
+            <title value="Admin should be able to cancel and close 'create folder' modal window using ESC key and
+                to add image to new folder (using enter key) for WYSIWYG content of Block"/>
+            <description value="Admin should be able to cancel and close 'create folder' modal window using ESC key and
+                to add image to new folder (using enter key) for WYSIWYG content of Block"/>
+        </annotations>
+
+        <before>
+            <createData entity="_defaultBlock" stepKey="createPreReqBlock" />
+            <actionGroup ref="LoginActionGroup" stepKey="login"/>
+            <actionGroup ref="EnabledWYSIWYGActionGroup" stepKey="enableWYSIWYG"/>
+            <actionGroup ref="SwitchToVersion4ActionGroup" stepKey="switchToTinyMCE4" />
+        </before>
+
+        <after>
+            <deleteData createDataKey="createPreReqBlock" stepKey="deletePreReqBlock" />
+            <actionGroup ref="DisabledWYSIWYGActionGroup" stepKey="disableWYSIWYG"/>
+            <actionGroup ref="logout" stepKey="logout"/>
+        </after>
+
+        <actionGroup ref="NavigateToCreatedCMSBlockPageActionGroup" stepKey="navigateToCreatedCMSBlockPage">
+            <argument name="CMSBlockPage" value="$$createPreReqBlock$$"/>
+        </actionGroup>
+        <actionGroup ref="ClickInsertEditImageTinyMCEButtonActionGroup" stepKey="clickInsertImageIcon"/>
+        <actionGroup ref="ClickBrowseBtnOnUploadPopupActionGroup" stepKey="clickBrowserBtn"/>
+        <actionGroup ref="VerifyMediaGalleryStorageActionsActionGroup" stepKey="VerifyMediaGalleryStorageBtn"/>
+
+        <actionGroup ref="CreateImageFolderByEnterKeyActionGroup" stepKey="CreateImageFolderByEnterKeyPress">
+            <argument name="ImageFolder" value="ImageFolder"/>
+        </actionGroup>
+
+        <actionGroup ref="DeleteFolderActionGroup" stepKey="DeleteCreatedFolder">
+            <argument name="ImageFolder" value="ImageFolder"/>
+        </actionGroup>
+
+        <actionGroup ref="PressEscImageFolderActionGroup" stepKey="CancelImageFolderCreation">
+            <argument name="ImageFolder" value="ImageFolder"/>
+        </actionGroup>
+    </test>
+</tests>
diff --git a/app/code/Magento/Ui/view/base/web/js/modal/prompt.js b/app/code/Magento/Ui/view/base/web/js/modal/prompt.js
@@ -27,6 +27,44 @@ define([
             value: '',
             validation: false,
             validationRules: [],
+            keyEventHandlers: {
+
+                /**
+                 * Enter key press handler,
+                 * submit result and close modal window
+                 * @param {Object} event - event
+                 */
+                enterKey: function (event) {
+                    if (this.options.isOpen && this.modal.find(document.activeElement).length ||
+                        this.options.isOpen && this.modal[0] === document.activeElement) {
+                        this.closeModal(true);
+                        event.preventDefault();
+                    }
+                },
+
+                /**
+                 * Tab key press handler,
+                 * set focus to elements
+                 */
+                tabKey: function () {
+                    if (document.activeElement === this.modal[0]) {
+                        this._setFocus('start');
+                    }
+                },
+
+                /**
+                 * Escape key press handler,
+                 * cancel and close modal window
+                 * @param {Object} event - event
+                 */
+                escapeKey: function (event) {
+                    if (this.options.isOpen && this.modal.find(document.activeElement).length ||
+                        this.options.isOpen && this.modal[0] === document.activeElement) {
+                        this.closeModal();
+                        event.preventDefault();
+                    }
+                }
+            },
             actions: {
 
                 /**