test: drag and drop tests (#21)

* moving the test files into a dedicated folder

* installing jsdom

* replacing the window and document with their jsdom equivalents for all the tests.

* saving the jsdom instance in a global variable.

* removing the test folder from the test coverage report.

* refactoring the code a bit to help with writing simpler tests.

* refactoring the canBeDropped method and writing some tests for it

* refactoring the maybeDrop method and writing some tests for it

* removing some redundant code.

* refactoring the addPlaceholderList method and writing a test for it.

* refactoring the onDragEnter method and writing a new test for it.

Author: Hesam Bahrami

.babelrc

@@ -7,6 +7,11 @@
       }
     }]
   ],
+  "plugins": [
+    ["@babel/plugin-transform-runtime", {
+      "regenerator": true
+    }]
+  ],
   "env": {
     "test": {
       "presets": [["@babel/preset-env"]]

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  setupFiles: [
+    './test/__mocks__/dom.js',
+  ],
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '/test/',
+  ]
+}

package.json

@@ -13,12 +13,14 @@
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
+    "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "7.9.5",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "24.9.0",
     "concurrently": "4.1.2",
     "husky": "^4.2.5",
     "jest": "24.9.0",
+    "jsdom": "^16.4.0",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-commonjs": "10.1.0",

rollup.config.js

@@ -17,6 +17,7 @@ export default [
       commonjs(),
       babel({
         exclude: 'node_modules/**',
+        runtimeHelpers: true,
       }),
     ],
   },

src/main.js

@@ -147,6 +147,12 @@ class NestedSort {
     }
   }
 
+  removeClassFromEl(el, className) {
+    if (el && el.classList.contains(className)) {
+      el.classList.remove(className)
+    }
+  }
+
   onDragStart(e) {
     this.draggedNode = e.target;
     this.draggedNode.classList.add(this.classNames.dragged);
@@ -158,35 +164,25 @@ class NestedSort {
   }
 
   onDragEnter(e) {
-    if (!this.draggedNode) return
+    if (!(this.draggedNode && ['LI', 'UL'].includes(e.target.nodeName))) return
 
-    if (['LI', 'UL'].includes(e.target.nodeName)) {
-      e.preventDefault(); // prevent default to allow drop
-
-      if (this.targetedNode) this.targetedNode.classList.remove(this.classNames.targeted);
-      this.targetedNode = e.target;
-      e.target.classList.add(this.classNames.targeted);
-    }
+    if (this.targetedNode) this.targetedNode.classList.remove(this.classNames.targeted)
+    this.targetedNode = e.target
+    this.targetedNode.classList.add(this.classNames.targeted)
   }
 
   onDragLeave(e) {
-    e.preventDefault();
-    e.target.removeEventListener('dragover', this.onDrop);
-    e.target.removeEventListener('drop', this.onDrop);
-    e.target.removeEventListener('dragleave', this.onDragLeave);
   }
 
   onDragEnd(e) {
-    e.preventDefault();
     e.stopPropagation()
-    this.draggedNode.classList.remove(this.classNames.dragged);
-    this.targetedNode.classList.remove(this.classNames.targeted)
+    this.removeClassFromEl(this.draggedNode, this.classNames.dragged)
+    this.removeClassFromEl(this.targetedNode, this.classNames.targeted)
     this.cleanupPlaceholderLists();
     this.draggedNode = null
   }
 
   onDrop(e) {
-    e.preventDefault();
     e.stopPropagation()
     this.maybeDrop();
     this.cleanupPlaceholderLists();
@@ -206,29 +202,23 @@ class NestedSort {
     this.calcMouseToTargetedElDist();
   }
 
-  maybeDrop(e) {
-    if (!this.canBeDropped()) {
-      return;
-    }
-
-    let dropLocation;
-    if (this.targetedNode.nodeName === 'LI' && !this.cursorIsIndentedEnough()) {
-      dropLocation = 'before';
-    } else if (this.targetedNode.nodeName === 'UL') {
-      dropLocation = 'inside';
+  getDropLocation() {
+    if (this.canBeDropped()) {
+      if (this.targetedNode.nodeName === 'LI' && !this.cursorIsIndentedEnough()) return 'before'
+      else if (this.targetedNode.nodeName === 'UL') return 'inside'
     }
+  }
 
-    if (dropLocation) this.dropTheItem(dropLocation, e);
+  maybeDrop(e) {
+    const location = this.getDropLocation()
+    if (location) this.dropTheItem(location, e)
   }
 
   dropTheItem(place, e) {
     switch (place) {
       case 'before':
         this.targetedNode.parentNode.insertBefore(this.draggedNode, this.targetedNode);
         break;
-      case 'after':
-        this.insertAfter(this.draggedNode, this.targetedNode);
-        break;
       case 'inside':
         this.targetedNode.appendChild(this.draggedNode);
         break;
@@ -269,10 +259,6 @@ class NestedSort {
     return this.cursor.Y - this.targetNode.Y < this.distances.droppingEdge;
   }
 
-  insertAfter(newNode, referenceNode) {
-    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
-  }
-
   managePlaceholderLists(e) {
 
     let actions = this.analysePlaceHolderSituation(e);
@@ -286,8 +272,6 @@ class NestedSort {
         case 'cleanup':
           this.cleanupPlaceholderLists();
           break;
-        default:
-          break;
       }
     });
   }
@@ -316,26 +300,38 @@ class NestedSort {
     return actions;
   }
 
-  addPlaceholderList() {
-    const list = this.getPlaceholderList();
-    list.style.minHeight = '0';
-    this.targetedNode.appendChild(list);
-    list.style.transition = 'min-height ease .2s';
-    list.style.minHeight = `${this.draggedNode.offsetHeight}px`;
+  animatePlaceholderList() {
+    this.placeholderInUse.style.minHeight = '0'
+    this.placeholderInUse.style.transition = 'min-height ease .2s'
+    this.placeholderInUse.style.minHeight = `${this.draggedNode.offsetHeight}px`
+  }
+
+  async addPlaceholderList() {
+    this.getPlaceholderList()
+    await this.targetedNode.appendChild(this.placeholderInUse)
+    this.animatePlaceholderList()
   }
 
   targetNodeIsIdentified() {
     return !!this.targetedNode;
   }
 
-  canBeDropped() {
-    let result = true;
+  targetNodeIsBeingDragged() {
+    return this.targetNodeIsIdentified()
+      && this.targetedNode === this.draggedNode
+  }
 
-    result &= this.targetNodeIsIdentified() && this.targetedNode !== this.draggedNode;
-    result &= this.targetNodeIsIdentified() && !(this.targetedNode.nodeName === 'UL' && this.targetedNode.querySelectorAll('li').length);
-    result &= !this.areNested(this.targetedNode, this.draggedNode);
+  targetNodeIsListWithItems() {
+    return this.targetNodeIsIdentified()
+      && this.targetedNode.nodeName === 'UL'
+      && this.targetedNode.querySelectorAll('li').length
+  }
 
-    return result;
+  canBeDropped() {
+    return this.targetNodeIsIdentified()
+      && !this.targetNodeIsBeingDragged()
+      && !this.targetNodeIsListWithItems()
+      && !this.areNested(this.targetedNode, this.draggedNode)
   }
 
   cleanupPlaceholderLists() {

src/main.test.js

@@ -0,0 +1,5 @@
+import { JSDOM } from 'jsdom'
+const dom = new JSDOM()
+global.jsdom = dom
+global.document = dom.window.document
+global.window = dom.window

test/__mocks__/dom.js

@@ -1,4 +1,4 @@
-import DataEngine from './data-engine'
+import DataEngine from '../src/data-engine'
 
 describe('DataEngine class', () => {
   let list