fix: 完善单测demo；升级单测版本

test/Test.test.js

@@ -15,6 +15,9 @@ const mockCount = { data: 999 }
 
 describe('单元测试demo', () => {
   test('Vue组件--点击按钮后count的值+1', async () => {
+    // 若组件中使用了vue-router，需要细化模拟相关内容
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
     // 加载vue组件，获得实例
     const wrapper = mount(Test)
     // 取到文本和按钮的dom
@@ -33,12 +36,39 @@ describe('单元测试demo', () => {
 
     /* 更多断言类型：https://jestjs.io/docs/expect */
   })
+  test('Vue组件--获取路由中的参数', async () => {
+    // query中带上lineTab参数
+    require('vue-router').useRoute.mockReturnValue({ query: { lineTab: 'total' } })
+    require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
+    // 加载vue组件，获得实例
+    const wrapper = mount(Test)
+    // 取到文本和按钮的dom
+    const textNode = await wrapper.get('[test-id="tab"]')
+    expect(textNode.text()).toBe('total')
+  })
+  test('Vue组件--模拟获取localstorage/sessionStorage的内容', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
+    // 模拟getItem
+    jest.spyOn(localStorage.__proto__, 'getItem').mockImplementation(key => key)
+    // 加载vue组件，获得实例
+    const wrapper = mount(Test)
+    expect(wrapper.vm.localstorageValue).toBe('key')
+  })
   test('Vue组件--直接获取vue实例中的data和method', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
     // 模拟axios返回数据
     // 测试内容只有一个axios请求的时候
     axios.get.mockResolvedValue(mockCount)
     // 加载vue组件，获得实例
-    const wrapper = mount(Test)
+    const wrapper = mount(Test, {
+      global: {
+        mocks: {
+          $t: key => key
+        }
+      }
+    })
     const textNode = await wrapper.get('[test-id="count"]')
     // 通过wrapper.vm.xxx直接执行click方法、获取data的数据
     expect(wrapper.vm.count).toBe(0)
@@ -50,6 +80,8 @@ describe('单元测试demo', () => {
     })
   })
   test('Vue组件--多个axios请求', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
     // 模拟axios返回数据
     // 测试内容有多个url不同的axios请求的话，需分开写
     axios.get.mockImplementation(url => {
@@ -69,10 +101,10 @@ describe('单元测试demo', () => {
     await wrapper.vm.$nextTick(() => {
       expect(textNode.text()).toBe('2')
       expect(textNode2.text()).toBe('title2')
+      // 匹配整个对象
       expect(wrapper.vm.obj).toEqual({ id: 2, title: 'title2' })
     })
   })
-
   test('js方法--getNameByEventType', async () => {
     expect(getNameByEventType('http error')).toBe('http error ratio')
   })

test/init.js

@@ -1,5 +1,3 @@
-import 'jest-canvas-mock'
-import axios from 'axios'
 import { config } from '@vue/test-utils'
 
 /* 开启测试 */
@@ -19,18 +17,19 @@ window.$dayJs = dayjs
 /* 模拟vue-router库，否则组件中引用vue-router的代码报错 */
 jest.mock('vue-router', () => {
   return {
-    useRouter: function () { return { currentRoute: '/' } },
-    useRoute: function () { return { query: {} } },
+    useRouter: jest.fn(),
+    useRoute: jest.fn(),
     createWebHashHistory: jest.fn(),
     createRouter: jest.fn().mockReturnValue({
       beforeEach: jest.fn()
     })
   }
 })
-
 /* 模拟axios */
 jest.mock('axios')
 /* 模拟$t */
 config.global.mocks.$t = key => key
+/* 模拟$route，具体用例中需要不同值时重写覆盖即可 */
+config.global.mocks.$route = { query: '' }
 /* 消除warn */
 jest.spyOn(console, 'warn').mockImplementation(() => {})

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

@@ -8,6 +8,7 @@ const mockGet = {
 
 describe('NetworkOverviewLine.vue测试', () => {
   test('Metric=Bits/s', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
     // 模拟axios返回数据
     axios.get.mockResolvedValue(mockGet)
     // 加载vue组件，获得实例
@@ -31,8 +32,14 @@ describe('NetworkOverviewLine.vue测试', () => {
       expect(textNode2.text()).toEqual('87.56Mbps')
       resolve()
     }, 200))
+
+    // 点击tab后，是否切换高亮状态
+    const textNode3 = await wrapper.get('[test-id="tab2"]')
+    await textNode3.trigger('click')
+    expect(textNode3.classes()).toContain('is-active')
   })
   test('Metric=Packets/s', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
     // 模拟axios返回数据
     axios.get.mockResolvedValue(mockGet)
     // 加载vue组件，获得实例