test: 新增单元测试

Author: mathink12

.eslintrc.js

@@ -15,6 +15,15 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },
   overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    },
     {
       files: [
         '**/__tests__/*.{j,t}s?(x)',

package-lock.json

@@ -2,36 +2,23 @@
   "name": "json-tree",
   "version": "1.0.0",
   "description": "JSON tree view for Vue",
-  "main": "lib/JsonTree.common.js",
+  "author": "",
   "scripts": {
-    "lib": "vue-cli-service build --target lib --name JsonTree --dest lib src/index.js",
-    "publish": "npm run lib && npm publish --registry https://www.npmjs.com/",
-    "docs:dev": "vuepress dev docs",
+    "test:unit": "vue-cli-service test:unit",
+    "deploy": "bash scripts/deploy.sh",
     "docs:build": "vuepress build docs",
-    "deploy": "bash deploy.sh"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mathink12/json-tree.git"
-  },
-  "keywords": [
-    "JSON",
-    "tree",
-    "vue",
-    "view"
-  ],
-  "author": "",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/mathink12/json-tree/issues"
+    "docs:dev": "vuepress dev docs",
+    "lib": "vue-cli-service build --target lib --name JsonTree --dest lib src/index.js",
+    "publish": "npm run lib && npm publish --registry https://www.npmjs.com/"
   },
-  "homepage": "https://github.com/mathink12/json-tree#readme",
+  "main": "lib/JsonTree.common.js",
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.9",
     "@vue/cli-plugin-eslint": "^4.5.9",
     "@vue/cli-plugin-unit-jest": "^4.5.9",
     "@vue/cli-service": "^4.5.9",
     "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/test-utils": "^1.0.3",
     "@vuepress/plugin-back-to-top": "^1.7.1",
     "async-validator": "^1.11.5",
     "babel-eslint": "^10.1.0",
@@ -50,13 +37,28 @@
     "vue-template-compiler": "^2.6.12",
     "vuepress": "^1.7.1"
   },
+  "bugs": {
+    "url": "https://github.com/mathink12/json-tree/issues"
+  },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
+  "homepage": "https://github.com/mathink12/json-tree#readme",
+  "keywords": [
+    "JSON",
+    "tree",
+    "vue",
+    "view"
+  ],
+  "license": "MIT",
   "lint-staged": {
     "*.{js,jsx,vue}": [
       "vue-cli-service lint",
       "git add"
     ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mathink12/json-tree.git"
   }
 }

package.json

@@ -0,0 +1,47 @@
+// Prop: showLine(是否显示连接线)
+import { mount } from '@vue/test-utils'
+import JsonTree from '@/index.js'
+
+// 使用这个方法生成的 json 结构数据
+// 根据 JsonTree 的默认项
+// 将会全部展开(默认展开两级), 并显示 3 条连接线
+const genJsonData = () => {
+  return {
+    name: 'Tom',
+    age: 2,
+    nums: [1, 1, 2, 3, 5, 8],
+    friends: ['Jerry', 'Tuffy', 'Spike', 'Tyke']
+  }
+}
+
+const factory = (propsData) => {
+  return mount(JsonTree, {
+    propsData: {
+      jsonData: genJsonData(),
+      ...propsData
+    }
+  })
+}
+
+// 只要值类型是 object 或 array 就会生成连接线
+// 连接线是否显示是通过 'display: none' 来控制的
+describe('JsonTree.vue props:showLine', () => {
+  it('默认情况下显示的连接线个数正确', () => {
+    const wrapper = factory()
+
+    // 根据 json 数据的结构, 会生成相应个数的连接线
+    // 默认情况下显示连接线
+    expect(wrapper.findAll('.json-tree__connector-line').length).toBe(3)
+  })
+
+  it('通过 showLine prop 控制连接线的显示', async () => {
+    const wrapper = factory({ showLine: false })
+
+    expect(wrapper.findAll('.json-tree__connector-line').length).toBe(0)
+
+    await wrapper.setProps({ showLine: true })
+    expect(wrapper.findAll('.json-tree__connector-line').length).toBe(3)
+  })
+
+  // TODO: 连接线的可见性
+})