AC-8260: Migration from extjs library to jstree in file js/category-checkbox-tree.js

Author: nishant04412

app/code/Magento/Catalog/view/adminhtml/web/js/category-checkbox-tree.js

@@ -25,8 +25,8 @@
         <click selector="{{WidgetSection.RuleParam}}" stepKey="clickToAddRuleParam"/>
         <click selector="{{WidgetSection.Chooser}}" stepKey="clickToSelectFromList"/>
         <waitForPageLoad stepKey="waitForPageLoadAfterSelectingRuleParam"/>
-        <waitForElementVisible selector="{{WidgetSection.PreCreateCategory(categoryName)}}" stepKey="waitForCategoryElementVisible"/>
-        <click selector="{{WidgetSection.PreCreateCategory(categoryName)}}" stepKey="selectCategoryFromArguments"/>
+        <waitForElementVisible selector="{{WidgetSection.CreateCategory(categoryName)}}" stepKey="waitForCategoryElementVisible"/>
+        <click selector="{{WidgetSection.CreateCategory(categoryName)}}" stepKey="selectCategoryFromArguments"/>
         <click selector="{{AdminNewWidgetSection.applyParameter}}" stepKey="clickApplyButton"/>
         <waitForElementNotVisible selector="{{InsertWidgetSection.categoryTreeWrapper}}" stepKey="waitForCategoryTreeIsNotVisible"/>
     </actionGroup>

app/code/Magento/CatalogWidget/Test/Mftf/ActionGroup/AdminFillCatalogProductsListWidgetCategoryActionGroup.xml

@@ -68,8 +68,8 @@
         <click selector="{{WidgetSection.RuleParam}}" stepKey="clickRuleParam" />
         <waitForElementVisible selector="{{WidgetSection.Chooser}}" stepKey="waitForElement" />
         <click selector="{{WidgetSection.Chooser}}" stepKey="clickChooser" />
-        <waitForElementVisible selector="{{WidgetSection.PreCreateCategory('$simplecategory.name$')}}" stepKey="waitForCategoryVisible" />
-        <click selector="{{WidgetSection.PreCreateCategory('$simplecategory.name$')}}" stepKey="selectCategory" />
+        <waitForElementVisible selector="{{WidgetSection.CreateCategory('$simplecategory.name$')}}" stepKey="waitForCategoryVisible" />
+        <click selector="{{WidgetSection.CreateCategory('$simplecategory.name$')}}" stepKey="selectCategory" />
         <actionGroup ref="AdminClickInsertWidgetActionGroup" stepKey="clickInsertWidget"/>
         <!--Save cms page and go to Storefront-->
         <actionGroup ref="SaveCmsPageActionGroup" stepKey="saveCmsPage"/>

app/code/Magento/CatalogWidget/Test/Mftf/Test/CatalogProductListCheckWidgetOrderTest.xml

@@ -25,6 +25,7 @@
         <element name="CMSPage" type="text" selector="//td[contains(text(),'Home page')]"/>
         <element name="BlockPage" type="text" selector="//td[contains(text(),'{{var1}}')]" parameterized="true"/>
         <element name="PreCreateCategory" type="text" selector=" //span[contains(text(),'{{var1}}')]" parameterized="true"/>
+        <element name="CreateCategory" type="text" selector=" //a[contains(text(),'{{var1}}')]" parameterized="true"/>
         <element name="PreCreateProduct" type="text" selector="//td[contains(text(),'{{var1}}')]" parameterized="true"/>
         <element name="NoOfProductToDisplay" type="input" selector="input[data-ui-id='wysiwyg-widget-options-fieldset-element-text-parameters-products-count']"/>
         <element name="AddParam" type="button" selector=".rule-param-add"/>

app/code/Magento/Cms/Test/Mftf/Section/TinyMCESection/WidgetSection.xml

@@ -57,7 +57,7 @@
         <waitForElementVisible selector="{{WidgetSection.Chooser}}" stepKey="waitForElement" />
         <click selector="{{WidgetSection.Chooser}}" stepKey="clickChooser" />
         <waitForLoadingMaskToDisappear stepKey="waitForLoadingMaskDisappear4" />
-        <click selector="{{WidgetSection.PreCreateCategory('$$createPreReqCategory.name$$')}}" stepKey="selectPreCategory" />
+        <click selector="{{WidgetSection.CreateCategory('$$createPreReqCategory.name$$')}}" stepKey="selectPreCategory" />
 
         <!-- Test that the "<" operand functions correctly -->
         <click selector="{{WidgetSection.AddParam}}" stepKey="clickAddParamBtn2" />

app/code/Magento/Cms/Test/Mftf/Test/AdminAddWidgetToWYSIWYGWithCatalogProductListTypeTest.xml

@@ -49,7 +49,7 @@
         <element name="ruleParameterSelect" type="select" selector="rule[conditions][{{arg}}][operator]" parameterized="true"/>
         <element name="ruleParameterInput" type="input" selector="rule[conditions][{{arg}}][value]" parameterized="true"/>
         <element name="openChooser" type="button" selector="//label[@for='conditions__{{arg}}__value']" parameterized="true"/>
-        <element name="categoryCheckbox" type="checkbox" selector="//span[contains(text(), '{{arg}}')]/parent::a/preceding-sibling::input[@type='checkbox']" parameterized="true"/>
+        <element name="categoryCheckbox" type="checkbox" selector="//a[contains(text(), '{{arg}}')]" parameterized="true"/>
         <element name="newCondition" type="button" selector=".rule-param.rule-param-new-child" timeout="30"/>
         <element name="conditionSelect" type="select" selector="select[name='rule[conditions][1][new_child]']"/>
         <element name="targetEllipsis" type="input" selector="//ul[contains(@id, 'conditions')]//a[.='...']"/>

app/code/Magento/SalesRule/Test/Mftf/Section/AdminCartPriceRulesFormSection.xml

@@ -14,9 +14,9 @@
         <element name="firstProductAttributeSelected" type="select" selector="#conditions__1__children .rule-param:nth-of-type(2) a:nth-child(1)"/>
         <element name="changeCategoriesButton" type="text" selector="#conditions__1--1__children>li>span.rule-param:nth-of-type(2)>a"/>
         <element name="categoriesChooser" type="text" selector="#conditions__1--1__children>li>span.rule-param:nth-of-type(2)>span>label>a"/>
-        <element name="treeRoot" type="text" selector=".x-tree-root-ct.x-tree-lines"/>
-        <element name="lastTreeNode" type="text" selector=".x-tree-root-ct.x-tree-lines > div > li > ul > li:last-child div img.x-tree-elbow-end-plus"/>
-        <element name="subcategory4level" type="text" selector=".x-tree-root-ct.x-tree-lines > div > li > ul > li > ul > li > ul > li > ul > li > div img.x-tree-elbow-end-plus"/>
+        <element name="treeRoot" type="text" selector=".jstree-container-ul.jstree-children"/>
+        <element name="lastTreeNode" type="text" selector="//li[contains(@class,'jstree-node') and contains(@class,'jstree-closed')]//i[contains(@class,'jstree-ocl')]"/>
+        <element name="subcategory4level" type="text" selector=".jstree-container-ul .jstree-children li > ul > li > ul > li > ul > li i.jstree-ocl"/>
 
         <element name="ruleParamLink" type="button" selector="//*[@id='conditions__{{var1}}__children']/li[{{var2}}]/span[{{var3}}]/a" parameterized="true"/>
         <element name="operatorByIndex" type="input" selector="#conditions__{{var1}}--{{var2}}__operator" parameterized="true"/>

app/code/Magento/SalesRule/Test/Mftf/Section/PriceRuleConditionsSection.xml

@@ -59,8 +59,9 @@
         <waitForElement selector="{{PriceRuleConditionsSection.treeRoot}}" stepKey="wait3"/>
         <click selector="{{PriceRuleConditionsSection.lastTreeNode}}" stepKey="openLatestTreeNode1"/>
         <click selector="{{PriceRuleConditionsSection.lastTreeNode}}" stepKey="openLatestTreeNode2"/>
-        <click selector="{{PriceRuleConditionsSection.lastTreeNode}}" stepKey="openLatestTreeNode3"/>
         <waitForAjaxLoad stepKey="ajaxLoad4"/>
+        <click selector="{{PriceRuleConditionsSection.lastTreeNode}}" stepKey="openLatestTreeNode3"/>
+        <waitForAjaxLoad stepKey="ajaxLoad5"/>
         <waitForElement selector="{{PriceRuleConditionsSection.subcategory4level}}" stepKey="wait4"/>
         <click selector="{{PriceRuleConditionsSection.subcategory4level}}" stepKey="openLatestTreeNode4"/>
         <scrollToTopOfPage stepKey="scrollToTop"/>

app/code/Magento/SalesRule/Test/Mftf/Test/PriceRuleCategoryNestingTest.xml

@@ -1,7 +1,21 @@
-// /**
-//  * Copyright © Magento, Inc. All rights reserved.
-//  * See COPYING.txt for license details.
-//  */
+/************************************************************************
+ *
+ * ADOBE CONFIDENTIAL
+ * ___________________
+ *
+ * Copyright 2015 Adobe
+ * All Rights Reserved.
+ *
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ *************************************************************************
+ */
 
 //
 //  Rule tree component
@@ -12,9 +26,13 @@
 }
 
 .rule-tree {
+    /**
+    * @codingStandardsIgnoreStart
+    */
     .admin__field-control & {
         padding-top: .3rem;
     }
+    //@codingStandardsIgnoreEnd
 
     ul {
         border-left: 1px dotted @color-gray52;
@@ -36,6 +54,15 @@
         line-height: normal !important;
     }
 
+    .jstree ul {
+        border-left: none !important;
+        padding-left: 0 !important;
+    }
+
+    .jstree li {
+        margin: 0 0 0 2.4rem;
+    }
+
     .legend {
         font-weight: @font-weight__semibold;
     }