TreeView: Fix demos and unskip Testcafe tests (React and Vue) (DevExp…

…ress#27526)
jdvictoria · Jun 7, 2024 · cf42f46 · cf42f46
1 parent 2e76977
commit cf42f46
Show file tree

Hide file tree

Showing 14 changed files with 14 additions and 66 deletions.
diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css
@@ -7,11 +7,6 @@
   vertical-align: top;
 }
 
-::ng-deep #treeviewDriveC,
-::ng-deep #treeviewDriveD {
-  margin-top: 10px;
-}
-
 ::ng-deep .dx-treeview-item {
   box-sizing: border-box;
 }
@@ -20,6 +15,7 @@
   min-height: auto;
   padding: 0;
   cursor: default;
+  margin-bottom: 10px;
 }
 
 ::ng-deep .drive-panel {

diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css
@@ -7,11 +7,6 @@
   vertical-align: top;
 }
 
-#treeviewDriveC,
-#treeviewDriveD {
-  margin-top: 10px;
-}
-
 .dx-treeview-item {
   box-sizing: border-box;
 }
@@ -20,6 +15,7 @@
   min-height: auto;
   padding: 0;
   cursor: default;
+  margin-bottom: 10px;
 }
 
 .drive-panel {

diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css
@@ -7,11 +7,6 @@
   vertical-align: top;
 }
 
-#treeviewDriveC,
-#treeviewDriveD {
-  margin-top: 10px;
-}
-
 .dx-treeview-item {
   box-sizing: border-box;
 }
@@ -20,6 +15,7 @@
   min-height: auto;
   padding: 0;
   cursor: default;
+  margin-bottom: 10px;
 }
 
 .drive-panel {

diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue
@@ -203,11 +203,6 @@ function getTopVisibleNode(component) {
   vertical-align: top;
 }
 
-#treeviewDriveC,
-#treeviewDriveD {
-  margin-top: 10px;
-}
-
 .dx-treeview-item {
   box-sizing: border-box;
 }
@@ -216,6 +211,7 @@ function getTopVisibleNode(component) {
   min-height: auto;
   padding: 0;
   cursor: default;
+  margin-bottom: 10px;
 }
 
 .drive-panel {

diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/data.ts b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/data.ts
@@ -79,12 +79,12 @@ const itemsDriveC = [{
 }, {
   id: '14',
   name: 'Description.rtf',
-  icon: 'activefolder',
+  icon: 'file',
   isDirectory: false,
 }, {
   id: '15',
   name: 'Description.txt',
-  icon: 'activefolder',
+  icon: 'file',
   isDirectory: false,
 }];
 

diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css
@@ -7,11 +7,6 @@
   vertical-align: top;
 }
 
-#treeviewDriveC,
-#treeviewDriveD {
-  margin-top: 10px;
-}
-
 .dx-treeview-item {
   box-sizing: border-box;
 }
@@ -20,6 +15,7 @@
   min-height: auto;
   padding: 0;
   cursor: default;
+  margin-bottom: 10px;
 }
 
 .drive-panel {

diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css
@@ -7,11 +7,6 @@
   vertical-align: top;
 }
 
-::ng-deep #treeviewDriveC,
-::ng-deep #treeviewDriveD {
-  margin-top: 10px;
-}
-
 ::ng-deep .dx-treeview-item {
   box-sizing: border-box;
 }
@@ -20,6 +15,7 @@
   min-height: auto;
   padding: 0;
   cursor: default;
+  margin-bottom: 10px;
 }
 
 ::ng-deep .drive-panel {

diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css
@@ -7,11 +7,6 @@
   vertical-align: top;
 }
 
-#treeviewDriveC,
-#treeviewDriveD {
-  margin-top: 10px;
-}
-
 .dx-treeview-item {
   box-sizing: border-box;
 }
@@ -20,6 +15,7 @@
   min-height: auto;
   padding: 0;
   cursor: default;
+  margin-bottom: 10px;
 }
 
 .drive-panel {

diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css
@@ -7,11 +7,6 @@
   vertical-align: top;
 }
 
-#treeviewDriveC,
-#treeviewDriveD {
-  margin-top: 10px;
-}
-
 .dx-treeview-item {
   box-sizing: border-box;
 }
@@ -20,6 +15,7 @@
   min-height: auto;
   padding: 0;
   cursor: default;
+  margin-bottom: 10px;
 }
 
 .drive-panel {

diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue
@@ -213,11 +213,6 @@ function getTopVisibleNode(component) {
   vertical-align: top;
 }
 
-#treeviewDriveC,
-#treeviewDriveD {
-  margin-top: 10px;
-}
-
 .dx-treeview-item {
   box-sizing: border-box;
 }
@@ -226,6 +221,7 @@ function getTopVisibleNode(component) {
   min-height: auto;
   padding: 0;
   cursor: default;
+  margin-bottom: 10px;
 }
 
 .drive-panel {

diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css
@@ -7,11 +7,6 @@
   vertical-align: top;
 }
 
-#treeviewDriveC,
-#treeviewDriveD {
-  margin-top: 10px;
-}
-
 .dx-treeview-item {
   box-sizing: border-box;
 }
@@ -20,6 +15,7 @@
   min-height: auto;
   padding: 0;
   cursor: default;
+  margin-bottom: 10px;
 }
 
 .drive-panel {

diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue
@@ -19,6 +19,7 @@
           {{ item.data.fullName + ' (' + item.data.position + ')' }}
         </template>
       </DxTreeView>
+      {{ ' ' }}
       <div class="selected-container">Selected employees
         <DxList
           id="selected-employees"
@@ -140,7 +141,7 @@ function selectionModeValueChanged(e) {
 
 .selected-container {
   padding: 20px;
-  margin-left: 24px;
+  margin-left: 20px;
   background-color: rgba(191, 191, 191, 0.15);
   font-size: 115%;
   font-weight: bold;

diff --git a/apps/demos/testing/common.test.js b/apps/demos/testing/common.test.js
@@ -143,11 +143,6 @@ const SKIPPED_TESTS = {
       { demo: 'Overview', themes: [THEME.fluent, THEME.material] },
       { demo: 'GroupByDate', themes: [THEME.fluent, THEME.material] },
     ],
-    TreeView: [
-      { demo: 'ItemSelectionAndCustomization', themes: [THEME.material] },
-      { demo: 'DragAndDropHierarchicalDataStructure', themes: [THEME.fluent] },
-      { demo: 'DragAndDropPlainDataStructure', themes: [THEME.fluent] },
-    ],
     TabPanel: [
       { demo: 'SortableClosableTabs', themes: [THEME.fluent, THEME.material] },
     ],
@@ -205,11 +200,6 @@ const SKIPPED_TESTS = {
       { demo: 'DeferredSelection', themes: [THEME.material] },
       { demo: 'CellEditingAndEditingAPI', themes: [THEME.material] },
     ],
-    TreeView: [
-      { demo: 'ItemSelectionAndCustomization', themes: [THEME.material] },
-      { demo: 'DragAndDropPlainDataStructure', themes: [THEME.fluent] },
-      { demo: 'DragAndDropHierarchicalDataStructure', themes: [THEME.fluent] },
-    ],
     TileView: [
       { demo: 'Directions', themes: [THEME.material] },
     ],

diff --git a/apps/demos/utils/visual-tests/matrix-test-helper.js b/apps/demos/utils/visual-tests/matrix-test-helper.js
@@ -254,9 +254,6 @@ const SKIPPED_TESTS = {
     Toolbar: [
       { demo: 'Adaptability', themes: [THEME.fluent, THEME.material] },
     ],
-    TreeView: [
-      { demo: 'ItemSelectionAndCustomization', themes: [THEME.material] },
-    ],
   },
   React: {
     Charts: [