Merge pull request #49 from beyoursun/master

Add unit test

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: "@vue/cli-plugin-unit-jest",
+  snapshotSerializers: ["jest-serializer-vue"]
+};

package.json

@@ -2,28 +2,16 @@
   "name": "vue-tree-list",
   "version": "1.4.0",
   "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
-  "main": "dist/vue-tree-list.umd.min.js",
+  "author": "ayou",
   "scripts": {
-    "commit": "npx git-cz",
     "serve": "vue-cli-service serve dev",
     "build": "vue-cli-service build --target lib src/index.js",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
+    "commit": "npx git-cz",
     "prepublish": "npm run build"
   },
-  "repository": {
+  "main": "dist/vue-tree-list.umd.min.js",
-    "type": "git",
-    "url": "git+https://github.com/ParadeTo/vue-tree-list.git"
-  },
-  "keywords": [
-    "vue",
-    "tree"
-  ],
-  "author": "ayou",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/ParadeTo/vue-tree-list/issues"
-  },
-  "homepage": "https://github.com/ParadeTo/vue-tree-list#readme",
   "dependencies": {
     "core-js": "^3.4.3",
     "vue": "^2.6.10"
@@ -31,10 +19,13 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.1.0",
+    "@vue/cli-plugin-unit-jest": "^4.1.1",
     "@vue/cli-service": "^4.1.0",
+    "@vue/test-utils": "1.0.0-beta.29",
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "jest-serializer-vue": "^2.0.2",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "vue-template-compiler": "^2.6.10"
@@ -53,10 +44,34 @@
     },
     "parserOptions": {
       "parser": "babel-eslint"
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "jest": true
         }
+      }
+    ]
   },
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ]
+  ],
+  "bugs": {
+    "url": "https://github.com/ParadeTo/vue-tree-list/issues"
+  },
+  "homepage": "https://github.com/ParadeTo/vue-tree-list#readme",
+  "keywords": [
+    "vue",
+    "tree"
+  ],
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ParadeTo/vue-tree-list.git"
+  }
 }

src/VueTreeList.vue

@@ -94,9 +94,6 @@
   let compInOperation = null
 
   export default {
-    components: {
-      item: () => import('./VueTreeList')
-    },
     data: function () {
       return {
         isHover: false,
@@ -155,6 +152,9 @@
         }
       }
     },
+    beforeCreate () {
+      this.$options.components.item = require('./VueTreeList').default
+    },
     mounted () {
       const vm = this
       addHandler(window, 'keyup', function (e) {

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

@@ -0,0 +1,72 @@
+// 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/example.spec.js

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