test: 新增单元测试

Author: mathink12

tests/unit/slots.spec.js

@@ -0,0 +1,120 @@
+// 插槽测试
+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: [
+      { name: 'Jerry', age: 1 },
+      { name: 'Tuffy', age: 2 }
+    ]
+  }
+}
+
+const factory = (conf) => {
+  return mount(JsonTree, {
+    propsData: {
+      jsonData: genJsonData(),
+      expandDeep: 2
+    },
+    ...conf
+  })
+}
+
+describe('JsonTree slots 测试', () => {
+  // TODO: 测试 scoped slots
+  it('toggle slot', () => {
+    const wrapper = factory({
+      scopedSlots: {
+        toggle ({ collapse }) {
+          return this.$createElement('i', {
+            'class': collapse ? 'el-icon-caret-right' : 'el-icon-caret-bottom'
+          })
+        }
+      }
+    })
+
+    // 根据 genJsonData() 生成的数据
+    const toggles = wrapper.findAll('.json-tree__toggle:not(.json-tree__toggle--hidden)')
+    // console.log(toggles.length)
+    let expandedCnt = 0
+    let collapsedCnt = 0
+    toggles.wrappers.forEach(v => {
+      // console.log(v.html())
+      if (v.find('.el-icon-caret-bottom').exists()) {
+        expandedCnt++
+      } else if (v.find('.el-icon-caret-right').exists()) {
+        collapsedCnt++
+      }
+    })
+    // console.log(expandedCnt, collapsedCnt)
+    // 应该有 3 个可见的收起图标(.el-icon-caret-bottom), 2 个可见的展开图标(.el-icon-caret-right)
+    // const expandedIcons = toggles.filter(v => v.classes('el-icon-caret-bottom'))
+    // const collapsedIcons = toggles.filter(v => v.classes('el-icon-caret-right'))
+    // console.log(expandedIcons.length, collapsedIcons.length)
+
+    // 应该有 3 个可见的收起图标(.el-icon-caret-bottom)
+    // 2 个可见的展开图标(.el-icon-caret-right)
+    // 注意：以上结果依赖于 expandDeep 和 genJsonData()
+    expect(expandedCnt).toBe(3)
+    expect(collapsedCnt).toBe(2)
+  })
+
+  it('count slot', () => {
+    const wrapper = factory({
+      scopedSlots: {
+        count ({ type, count }) {
+          return this.$createElement('span', {
+            'class': 'slot-count'
+          }, `// 值类型：${type}，共${count}项`)
+        }
+      }
+    })
+
+    expect(wrapper.find('.slot-count').exists()).toBe(true)
+
+    const texts = wrapper.findAll('.slot-count').wrappers.map(v => v.text())
+    expect(texts).toContain('// 值类型：object，共4项')
+  })
+
+  it('key slot', () => {
+    const wrapper = factory({
+      scopedSlots: {
+        key ({ itemKey }) {
+          return this.$createElement('span', { class: 'slot-key' }, itemKey)
+        }
+      }
+    })
+
+    expect(wrapper.find('.slot-key').exists()).toBe(true)
+
+    const texts = wrapper.findAll('.slot-key').wrappers.map(v => v.text())
+    expect(texts).toContain('name')
+    expect(texts).toContain('age')
+    expect(texts).toContain('nums')
+    expect(texts).toContain('friends')
+  })
+
+  it('val slot', () => {
+    const wrapper = factory({
+      scopedSlots: {
+        val ({ itemVal, type }) {
+          return this.$createElement('span', {
+            class: 'slot-val'
+          }, `${itemVal}（${type}）`)
+        }
+      }
+    })
+
+    expect(wrapper.find('.slot-val').exists()).toBe(true)
+    const texts = wrapper.findAll('.slot-val').wrappers.map(v => v.text())
+    expect(texts).toContain('Tom（string）')
+    expect(texts).toContain('2（number）')
+  })
+})

tests/unit/toggle.spec.js

@@ -43,6 +43,7 @@ describe('JsonTree.vue toggle', () => {
   })
 
   it('toggle 切换交互', async () => {
+    const wrapper = factory()
     // 只判定第一个即可
     const rootToggle = wrapper.find('.json-tree__toggle')
     if (rootToggle.classes('json-tree__toggle--collapse')) {
@@ -54,9 +55,4 @@ describe('JsonTree.vue toggle', () => {
       expect(rootToggle.classes('json-tree__toggle--collapse')).toBe(true)
     }
   })
-
-  it('全部收起、全部展开', () => {
-    const wrapper = factory()
-    // wrapper.
-  })
 })