fix: 完善单测demo

src/Test.vue

@@ -1,6 +1,7 @@
 <template>
   <span test-id="count">{{count}}</span>
-  <span test-id="title">{{getData.title}}</span>
+  <span test-id="id">{{obj.id}}</span>
+  <span test-id="title">{{obj.title}}</span>
   <button test-id="button" @click="click">click</button>
 </template>
 
@@ -13,16 +14,24 @@ export default {
   data () {
     return {
       count: 0,
-      getData: { id: 1, title: 'title' }
+      obj: { id: 1, title: 'title' }
     }
   },
   methods: {
     click () {
       this.count++
     },
-    async getPosts () {
-      axios.get('/api/posts').then(response => {
-        this.getData = response.data
+    async getObj () {
+      axios.get('/api/getObjId').then(response => {
+        this.obj.id = response.data
+      })
+      axios.get('/api/getObjTitle').then(response => {
+        this.obj.title = response.data
+      })
+    },
+    async getCount () {
+      axios.get('/api/getCount').then(response => {
+        this.count = response.data
       })
     }
   },

test/Test.test.js

@@ -9,7 +9,9 @@ import { getNameByEventType } from '@/utils/tools'
 import axios from 'axios'
 
 // 模拟的axios返回数据
-const mockPostList = { data: { id: 2, title: 'title2' } }
+const mockId = { data: 2 }
+const mockTitle = { data: 'title2' }
+const mockCount = { data: 999 }
 
 describe('单元测试demo', () => {
   test('Vue组件--点击按钮后count的值+1', async () => {
@@ -19,11 +21,11 @@ describe('单元测试demo', () => {
     const textNode = await wrapper.get('[test-id="count"]')
     const button = await wrapper.get('[test-id="button"]')
     // 断言文本dom的内容是否是'0'
-    expect(textNode.text()).toContain('0')
+    expect(textNode.text()).toBe('0')
     // 模拟按钮dom点击，执行click()方法
     await button.trigger('click')
     // 断言点击按钮后文本dom的内容是否是'1'
-    expect(textNode.text()).toContain('1')
+    expect(textNode.text()).toBe('1')
     // 再次点击
     await button.trigger('click')
     // 断言点击按钮后文本dom的内容是否是'2'
@@ -31,22 +33,43 @@ describe('单元测试demo', () => {
 
     /* 更多断言类型：https://jestjs.io/docs/expect */
   })
-
   test('Vue组件--直接获取vue实例中的data和method', async () => {
     // 模拟axios返回数据
-    axios.get.mockResolvedValue(mockPostList)
+    // 测试内容只有一个axios请求的时候
+    axios.get.mockResolvedValue(mockCount)
     // 加载vue组件，获得实例
     const wrapper = mount(Test)
-    const textNode2 = await wrapper.get('[test-id="title"]')
+    const textNode = await wrapper.get('[test-id="count"]')
     // 通过wrapper.vm.xxx直接执行click方法、获取data的数据
-    expect(wrapper.vm.count).toEqual(0)
+    expect(wrapper.vm.count).toBe(0)
     await wrapper.vm.click()
     expect(wrapper.vm.count).toBe(1)
-
-    expect(textNode2.text()).toEqual('title')
-    await wrapper.vm.getPosts()
+    await wrapper.vm.getCount()
     await wrapper.vm.$nextTick(() => {
+      expect(textNode.text()).toBe('999')
+    })
+  })
+  test('Vue组件--多个axios请求', async () => {
+    // 模拟axios返回数据
+    // 测试内容有多个url不同的axios请求的话，需分开写
+    axios.get.mockImplementation(url => {
+      switch (url) {
+        case '/api/getObjId':
+          return Promise.resolve(mockId)
+        case '/api/getObjTitle':
+          return Promise.resolve(mockTitle)
+      }
+    })
+    // 加载vue组件，获得实例
+    const wrapper = mount(Test)
+    const textNode = await wrapper.get('[test-id="id"]')
+    const textNode2 = await wrapper.get('[test-id="title"]')
+    expect(textNode2.text()).toBe('title')
+    await wrapper.vm.getObj()
+    await wrapper.vm.$nextTick(() => {
+      expect(textNode.text()).toBe('2')
       expect(textNode2.text()).toBe('title2')
+      expect(wrapper.vm.obj).toEqual({ id: 2, title: 'title2' })
     })
   })
 

test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js

@@ -24,13 +24,13 @@ describe('NetworkOverviewLine.vue测试', () => {
     const textNode0 = await wrapper.get('[test-id="tabContent0"]')
     const textNode1 = await wrapper.get('[test-id="tabContent1"]')
     const textNode2 = await wrapper.get('[test-id="tabContent2"]')
-    // 延迟1秒等待渲染。使用wrapper.vm.$nextTick有时不管用
+    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
     await new Promise(resolve => setTimeout(() => {
       expect(textNode0.text()).toEqual('112.04Mbps')
       expect(textNode1.text()).toEqual('18.59Mbps')
       expect(textNode2.text()).toEqual('87.56Mbps')
       resolve()
-    }, 1000))
+    }, 200))
   })
   test('Metric=Packets/s', async () => {
     // 模拟axios返回数据
@@ -55,6 +55,6 @@ describe('NetworkOverviewLine.vue测试', () => {
       expect(textNode1.text()).toEqual('4.24Kpackets/s')
       expect(textNode2.text()).toEqual('9.17Kpackets/s')
       resolve()
-    }, 1000))
+    }, 200))
   })
 })