test: 💍 add some tests

.gitignore

@@ -19,3 +19,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+coverage

dev/App.vue

@@ -70,31 +70,38 @@
     },
     methods: {
       onDel (node) {
+        // eslint-disable-next-line no-console
         console.log(node)
         node.remove()
       },
 
       onChangeName (params) {
+        // eslint-disable-next-line no-console
         console.log(params)
       },
 
       onAddNode (params) {
+        // eslint-disable-next-line no-console
         console.log(params)
       },
 
       onClick (params) {
+        // eslint-disable-next-line no-console
         console.log(params)
       },
 
       drop: function ({node, src, target}) {
+        // eslint-disable-next-line no-console
         console.log('drop', node, src, target)
       },
 
       dropBefore: function ({node, src, target}) {
+        // eslint-disable-next-line no-console
         console.log('drop-before', node, src, target)
       },
 
       dropAfter: function ({node, src, target}) {
+        // eslint-disable-next-line no-console
         console.log('drop-after', node, src, target)
       },
 

jest.config.js

@@ -1,4 +1,6 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest",
+  preset: '@vue/cli-plugin-unit-jest',
-  snapshotSerializers: ["jest-serializer-vue"]
+  snapshotSerializers: ['jest-serializer-vue'],
-};
+  collectCoverageFrom: ['src/**/*.{js,vue}'],
+  coveragePathIgnorePatterns: ['src/index.js']
+}

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "serve": "vue-cli-service serve dev",
     "build": "vue-cli-service build --target lib src/index.js",
-    "test:unit": "vue-cli-service test:unit",
+    "test:unit": "vue-cli-service test:unit --watch",
+    "test:coverage": "vue-cli-service test:unit --coverage",
     "lint": "vue-cli-service lint",
     "commit": "npx git-cz",
     "prepublish": "npm run build"

src/Tree.js

@@ -115,7 +115,7 @@ TreeNode.prototype._beforeInsert = function (target) {
     return false
   }
 
-  // cannot move ancestor to child
+  // cannot insert ancestor to child
   if (this.isTargetChild(target)) {
     return false
   }

src/VueTreeList.vue

@@ -1,12 +1,17 @@
 <template>
   <div class='vtl'>
-    <div v-if="model.name !== 'root'">
+    <div
+      v-if="model.name !== 'root'"
+      :id='model.id'
+      class="vtl-node"
+      :class="{'vtl-leaf-node': model.isLeaf, 'vtl-tree-node': ! model.isLeaf}"
+    >
       <div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
         @drop="dropBefore"
         @dragenter="dragEnterUp"
         @dragover='dragOverUp'
-        @dragleave="dragLeaveUp"></div>
+        @dragleave="dragLeaveUp" />
-      <div :id='model.id' :class="treeNodeClass"
+      <div :class="treeNodeClass"
         :draggable="!model.dragDisabled"
         @dragstart='dragStart'
         @dragover='dragOver'
@@ -73,7 +78,7 @@
       <item v-for="model in model.children"
         :default-tree-node-name="defaultTreeNodeName"
         :default-leaf-node-name="defaultLeafNodeName"
-        v-bind:default-expanded="defaultExpanded"
+        :default-expanded="defaultExpanded"
         :model="model"
         :key='model.id'>
           <slot name="addTreeNodeIcon" slot="addTreeNodeIcon" />
@@ -122,10 +127,6 @@
       }
     },
     computed: {
-      itemIconClass () {
-        return this.model.isLeaf ? 'vtl-icon-file' : 'vtl-icon-folder'
-      },
-
       caretClass () {
         return this.expanded ? 'vtl-icon-caret-down' : 'vtl-icon-caret-right'
       },
@@ -145,7 +146,7 @@
         } = this
 
         return {
-          'vtl-tree-node': true,
+          'vtl-node-main': true,
           'vtl-active': isDragEnterNode,
           'vtl-drag-disabled': dragDisabled,
           'vtl-disabled': disabled
@@ -385,7 +386,7 @@
     }
   }
 
-  .vtl-tree-node {
+  .vtl-node-main {
     display: flex;
     align-items: center;
     padding: 5px 0 5px 1rem;

tests/unit/__snapshots__/example.spec.js.snap

@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VueTreeList renders correctly 1`] = `
-<div class="vtl">
-  <!---->
-  <div class="">
-    <div class="vtl">
-      <div>
-        <div class="vtl-border vtl-up"></div>
-        <div id="1" draggable="false" class="vtl-tree-node vtl-drag-disabled"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-right"></i></span> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
-          <div class="vtl-node-content">
-            Node 1
-          </div>
-          <div class="vtl-operation" style="display: none;">
-            <!---->
-            <!---->
-            <!---->
-            <!---->
-          </div>
-        </div>
-        <!---->
-      </div>
-      <div class="vtl-tree-margin" style="display: none;">
-        <div class="vtl">
-          <div>
-            <div class="vtl-border vtl-up"></div>
-            <div id="2" draggable="true" class="vtl-tree-node">
-              <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-file"></i></span>
-              <div class="vtl-node-content">
-                Node 1-2
-              </div>
-              <div class="vtl-operation" style="display: none;">
-                <!---->
-                <!----> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
-            </div>
-            <!---->
-          </div>
-          <!---->
-        </div>
-      </div>
-    </div>
-    <div class="vtl">
-      <div>
-        <div class="vtl-border vtl-up"></div>
-        <div id="3" draggable="true" class="vtl-tree-node vtl-disabled">
-          <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
-          <div class="vtl-node-content">
-            Node 2
-          </div>
-          <div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
-        </div>
-        <!---->
-      </div>
-      <!---->
-    </div>
-    <div class="vtl">
-      <div>
-        <div class="vtl-border vtl-up"></div>
-        <div id="4" draggable="true" class="vtl-tree-node">
-          <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
-          <div class="vtl-node-content">
-            Node 3
-          </div>
-          <div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
-        </div>
-        <!---->
-      </div>
-      <!---->
-    </div>
-  </div>
-</div>
-`;

tests/unit/__snapshots__/render.spec.js.snap

@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render render correctly 1`] = `
+<div class="vtl">
+  <!---->
+  <div class="">
+    <div class="vtl">
+      <div id="1" class="vtl-node vtl-tree-node">
+        <div class="vtl-border vtl-up"></div>
+        <div draggable="false" class="vtl-node-main vtl-drag-disabled"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-right"></i></span> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
+          <div class="vtl-node-content">
+            Node 1
+          </div>
+          <div class="vtl-operation" style="display: none;">
+            <!---->
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div class="vtl-tree-margin" style="display: none;">
+        <div class="vtl">
+          <div id="2" class="vtl-node vtl-leaf-node">
+            <div class="vtl-border vtl-up"></div>
+            <div draggable="true" class="vtl-node-main">
+              <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-file"></i></span>
+              <div class="vtl-node-content">
+                Node 1-2
+              </div>
+              <div class="vtl-operation" style="display: none;">
+                <!---->
+                <!----> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
+            </div>
+            <!---->
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <div class="vtl">
+      <div id="3" class="vtl-node vtl-tree-node">
+        <div class="vtl-border vtl-up"></div>
+        <div draggable="true" class="vtl-node-main vtl-disabled">
+          <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
+          <div class="vtl-node-content">
+            Node 2
+          </div>
+          <div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
+        </div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <div class="vtl">
+      <div id="4" class="vtl-node vtl-tree-node">
+        <div class="vtl-border vtl-up"></div>
+        <div draggable="true" class="vtl-node-main">
+          <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
+          <div class="vtl-node-content">
+            Node 3
+          </div>
+          <div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
+        </div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VueTreeList render correctly 1`] = `
+<div class="vtl">
+  <!---->
+  <div class="">
+    <div class="vtl">
+      <div id="1" class="vtl-node vtl-tree-node">
+        <div class="vtl-border vtl-up"></div>
+        <div draggable="false" class="vtl-node-main vtl-drag-disabled"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-right"></i></span> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
+          <div class="vtl-node-content">
+            Node 1
+          </div>
+          <div class="vtl-operation" style="display: none;">
+            <!---->
+            <!---->
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div class="vtl-tree-margin" style="display: none;">
+        <div class="vtl">
+          <div id="2" class="vtl-node vtl-leaf-node">
+            <div class="vtl-border vtl-up"></div>
+            <div draggable="true" class="vtl-node-main">
+              <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-file"></i></span>
+              <div class="vtl-node-content">
+                Node 1-2
+              </div>
+              <div class="vtl-operation" style="display: none;">
+                <!---->
+                <!----> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
+            </div>
+            <!---->
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <div class="vtl">
+      <div id="3" class="vtl-node vtl-tree-node">
+        <div class="vtl-border vtl-up"></div>
+        <div draggable="true" class="vtl-node-main vtl-disabled">
+          <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
+          <div class="vtl-node-content">
+            Node 2
+          </div>
+          <div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
+        </div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <div class="vtl">
+      <div id="4" class="vtl-node vtl-tree-node">
+        <div class="vtl-border vtl-up"></div>
+        <div draggable="true" class="vtl-node-main">
+          <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
+          <div class="vtl-node-content">
+            Node 3
+          </div>
+          <div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
+        </div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+</div>
+`;

tests/unit/drag.spec.js

@@ -0,0 +1,87 @@
+import Vue from 'vue'
+import {mount} from '@vue/test-utils'
+import {Tree, VueTreeList} from '@/index'
+
+describe('Drag', () => {
+  let wrapper
+
+  beforeEach(() => {
+    const tree = new Tree([
+      {
+        name: 'Node 1',
+        id: 't1',
+        pid: 0,
+        children: [
+          {
+            name: 'Node 1-1',
+            id: 't11',
+            isLeaf: true,
+            pid: 't1'
+          },
+          {
+            name: 'Node 1-2',
+            id: 't12',
+            pid: 't1'
+          }
+        ]
+      },
+      {
+        name: 'Node 2',
+        id: 't2',
+        pid: 0
+      },
+      {
+        name: 'Node 3',
+        id: 't3',
+        pid: 0
+      }
+    ])
+    wrapper = mount(VueTreeList, {propsData: {model: new Tree([])}})
+    wrapper.setProps({model: tree})
+  })
+
+  it('drag before', done => {
+    const $tree2 = wrapper.find('#t2 .vtl-node-main')
+    const $tree1Up = wrapper.find('#t1 .vtl-up')
+    $tree2.trigger('dragstart', { dataTransfer: { setData: () => {} }})
+    $tree1Up.trigger('drop')
+    Vue.nextTick(() => {
+      expect(wrapper.find('.vtl-node').attributes('id')).toBe('t2')
+      done()
+    })
+  })
+
+  it('drag after', done => {
+    const $tree3 = wrapper.find('#t3 .vtl-node-main')
+    const $tree1Bottom = wrapper.find('#t1 .vtl-bottom')
+    $tree3.trigger('dragstart', { dataTransfer: { setData: () => {} }})
+    $tree1Bottom.trigger('drop')
+    Vue.nextTick(() => {
+      expect(wrapper.findAll('.vtl-tree-node').at(2).attributes('id')).toBe('t3')
+      done()
+    })
+  })
+
+  it('drag into', done => {
+    const $tree3 = wrapper.find('#t3 .vtl-node-main')
+    const $tree1 = wrapper.find('#t1 .vtl-node-main')
+    $tree3.trigger('dragstart', { dataTransfer: { setData: () => {} }})
+    $tree1.trigger('drop')
+    Vue.nextTick(() => {
+      expect(wrapper.find('#t1 + .vtl-tree-margin .vtl-node').attributes('id')).toBe('t3')
+      done()
+    })
+  })
+
+  it('cannot drag ancestor into child', done => {
+    const snapshot = wrapper.html()
+    const $tree1 = wrapper.find('#t1 .vtl-node-main')
+    const $tree1Child = wrapper.find('#t12 .vtl-node-main')
+    $tree1.trigger('dragstart', { dataTransfer: { setData: () => {} }})
+    $tree1Child.trigger('drop')
+    Vue.nextTick(() => {
+      expect(wrapper.html()).toBe(snapshot)
+      done()
+    })
+  })
+})

tests/unit/operation.spec.js

@@ -0,0 +1,86 @@
+import Vue from 'vue'
+import {mount} from '@vue/test-utils'
+import {Tree, VueTreeList} from '@/index'
+
+describe('Operation', () => {
+  let wrapper
+
+  beforeEach(() => {
+    const tree = new Tree([
+      {
+        name: 'Node 1',
+        id: 't1',
+        pid: 0,
+        children: [
+          {
+            name: 'Node 1-1',
+            id: 't11',
+            isLeaf: true,
+            pid: 't1'
+          }
+        ]
+      },
+      {
+        name: 'Node 2',
+        id: 't2',
+        pid: 0
+      }
+    ])
+    wrapper = mount(VueTreeList, {propsData: {model: new Tree([])}})
+    wrapper.setProps({model: tree})
+  })
+
+  it('delete leaf node', done => {
+    const $node11Trash = wrapper.find('#t11 [title="delete"]')
+    $node11Trash.trigger('click')
+    wrapper.emitted('delete-node')[0][0].remove()
+    Vue.nextTick(() => {
+      expect(wrapper.findAll('.vtl-node').length).toBe(2)
+      done()
+    })
+  })
+
+  it('delete tree node', done => {
+    const $node11Trash = wrapper.find('#t1 [title="delete"]')
+    $node11Trash.trigger('click')
+    wrapper.emitted('delete-node')[0][0].remove()
+    Vue.nextTick(() => {
+      expect(wrapper.findAll('.vtl-node').length).toBe(1)
+      done()
+    })
+  })
+
+  it('add leaf node', done => {
+    const $node1AddLeafNode = wrapper.find('#t1 [title="add leaf node"]')
+    $node1AddLeafNode.trigger('click')
+    Vue.nextTick(() => {
+      expect(wrapper.findAll('.vtl-leaf-node').length).toBe(2)
+      done()
+    })
+  })
+
+  it('add tree node', done => {
+    const $node1AddTreeNode = wrapper.find('#t1 [title="add tree node"]')
+    $node1AddTreeNode.trigger('click')
+    Vue.nextTick(() => {
+      expect(wrapper.findAll('.vtl-tree-node').length).toBe(3)
+      done()
+    })
+  })
+
+  it('change node name', done => {
+    const $node1Edit = wrapper.find('#t1 [title="edit"]')
+    $node1Edit.trigger('click')
+    Vue.nextTick(() => {
+      const $input = wrapper.find('#t1 .vtl-input')
+      $input.element.value = 'New Node 1'
+      $input.trigger('input')
+      var event = new KeyboardEvent('keyup', {keyCode: 13})
+      window.dispatchEvent(event)
+      Vue.nextTick(() => {
+        expect(wrapper.find('#t1').text()).toBe('New Node 1')
+        done()
+      })
+    })
+  })
+})

tests/unit/render.spec.js

@@ -1,11 +1,11 @@
-import { mount } from "@vue/test-utils";
+import {mount} from '@vue/test-utils'
-import { Tree, VueTreeList } from "@/index";
+import {Tree, VueTreeList} from '@/index'
 
-describe("VueTreeList", () => {
+describe('Render', () => {
-  it("renders correctly", () => {
+  it('render correctly', () => {
     const tree = new Tree([
       {
-        name: "Node 1",
+        name: 'Node 1',
         id: 1,
         pid: 0,
         dragDisabled: true,
@@ -15,7 +15,7 @@ describe("VueTreeList", () => {
         delNodeDisabled: true,
         children: [
           {
-            name: "Node 1-2",
+            name: 'Node 1-2',
             id: 2,
             isLeaf: true,
             pid: 1
@@ -23,27 +23,27 @@ describe("VueTreeList", () => {
         ]
       },
       {
-        name: "Node 2",
+        name: 'Node 2',
         id: 3,
         pid: 0,
         disabled: true
       },
       {
-        name: "Node 3",
+        name: 'Node 3',
         id: 4,
         pid: 0
       }
-    ]);
+    ])
 
     const wrapper = mount(VueTreeList, {
       propsData: {
         model: tree,
-        defaultTreeNodeName: "new node",
+        defaultTreeNodeName: 'new node',
-        defaultLeafNodeName: "new leaf",
+        defaultLeafNodeName: 'new leaf',
         defaultExpanded: false
       }
-    });
+    })
 
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper).toMatchSnapshot()
-  });
+  })
-});
+})