chore: 🤖 add snapshot testing

jest.config.js

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

package-lock.json

@@ -3719,7 +3719,7 @@
     },
     "condense-newlines": {
       "version": "0.2.1",
-      "resolved": "https://registry.npm.taobao.org/condense-newlines/download/condense-newlines-0.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/condense-newlines/-/condense-newlines-0.2.1.tgz",
       "integrity": "sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=",
       "dev": true,
       "requires": {
@@ -3730,7 +3730,7 @@
       "dependencies": {
         "extend-shallow": {
           "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/extend-shallow/download/extend-shallow-2.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
           "dev": true,
           "requires": {
@@ -3739,7 +3739,7 @@
         },
         "kind-of": {
           "version": "3.2.2",
-          "resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-3.2.2.tgz",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
           "dev": true,
           "requires": {
@@ -7396,7 +7396,7 @@
     },
     "is-whitespace": {
       "version": "0.3.0",
-      "resolved": "https://registry.npm.taobao.org/is-whitespace/download/is-whitespace-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/is-whitespace/-/is-whitespace-0.3.0.tgz",
       "integrity": "sha1-Fjnssb4DauxppUy7QBz77XEUq38=",
       "dev": true
     },
@@ -8090,7 +8090,7 @@
     },
     "jest-serializer-vue": {
       "version": "2.0.2",
-      "resolved": "https://registry.npm.taobao.org/jest-serializer-vue/download/jest-serializer-vue-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/jest-serializer-vue/-/jest-serializer-vue-2.0.2.tgz",
       "integrity": "sha1-sjjvKGNX7GtIBCG9RxRQUJh9WbM=",
       "dev": true,
       "requires": {
@@ -10601,7 +10601,7 @@
     },
     "pretty": {
       "version": "2.0.0",
-      "resolved": "https://registry.npm.taobao.org/pretty/download/pretty-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/pretty/-/pretty-2.0.0.tgz",
       "integrity": "sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=",
       "dev": true,
       "requires": {
@@ -10612,7 +10612,7 @@
       "dependencies": {
         "extend-shallow": {
           "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/extend-shallow/download/extend-shallow-2.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
           "dev": true,
           "requires": {

package.json

@@ -25,6 +25,7 @@
     "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"

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

@@ -3,9 +3,7 @@ import { Tree, VueTreeList } from "@/index";
 
 describe("VueTreeList", () => {
   it("renders correctly", () => {
-    const wrapper = mount(VueTreeList, {
+    const tree = new Tree([
-      propsData: {
-        model: new Tree([
       {
         name: "Node 1",
         id: 1,
@@ -35,16 +33,17 @@ describe("VueTreeList", () => {
         id: 4,
         pid: 0
       }
-        ]),
+    ]);
+
+    const wrapper = mount(VueTreeList, {
+      propsData: {
+        model: tree,
         defaultTreeNodeName: "new node",
         defaultLeafNodeName: "new leaf",
         defaultExpanded: false
       }
     });
 
-    expect(wrapper.text()).toMatch(`Node 1················
+    expect(wrapper).toMatchSnapshot();
-            Node 1-2················
-            Node 2················
-            Node 3`);
   });
 });