Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

# Conflicts: # src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
2023-01-10 12:27:15 +08:00
parent b5d897608c 431821154e
commit a608ac72f6
8 changed files with 339 additions and 216 deletions
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,6 +2,8 @@ module.exports = {
  roots: [
    '<rootDir>/test'
  ],
+  verbose: true,
+  setupFilesAfterEnv: ['<rootDir>/test/init.js'],
  testMatch: [
    '<rootDir>/test/**/__tests__/**/*.{vue,js,jsx,ts,tsx}',
    '<rootDir>/test/**/*.{spec,test}.{vue,js,jsx,ts,tsx}'
--- a/src/Test.vue
+++ b/src/Test.vue
@@ -1,21 +1,29 @@
 <template>
-  <span data-test="count">{{count}}</span>
-  <button data-test="button" @click="click">click</button>
+  <span test-id="count">{{count}}</span>
+  <span test-id="title">{{getData.title}}</span>
+  <button test-id="button" @click="click">click</button>
 </template>

 <script>
 /* vue-jest的测试示例 */
 import VueRouter from 'vue-router'
+import axios from 'axios'
 export default {
  name: 'Test',
  data () {
    return {
-      count: 0
+      count: 0,
+      getData: { id: 1, title: 'title' }
    }
  },
  methods: {
    click () {
      this.count++
+    },
+    async getPosts () {
+      axios.get('/api/posts').then(response => {
+        this.getData = response.data
+      })
    }
  },
  created () {
--- a/src/mixins/common.js
+++ b/src/mixins/common.js
@@ -1,6 +1,5 @@
 import { hasButton } from '@/permission'
 import { dateFormatByAppearance } from '@/utils/date-util'
-import { storageKey } from '@/utils/constants'
 export default {
  data () {
    return {
@@ -21,7 +20,9 @@ export default {
        query: false
      },
      timeout: null,
-      debounceFunc: null
+      debounceFunc: null,
+      // 是否正在单元测试
+      isUnitTesting: false
    }
  },
  methods: {
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1103,10 +1103,5 @@ export function getNameByEventType (type) {
    case 'high dns response time': {
      return 'dns response time'
    }
-    // 目前ui并未找到此类型，添加以防不测
-    case 'high http resopnse time':
-    default: {
-      return 'http response time'
-    }
  }
 }
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -17,10 +17,11 @@
              <div :class="item.class"></div>
              <div class="mpackets-name">{{$t(item.name)}}</div>
            </div>
-            <div class="line-value-unit">
+            <div class="line-value-unit" :test-id="`tabContent${index}`">
              <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
              <span class="line-value-unit-number2">
-                <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
+                <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span>
+                <span v-if="item.unitType">{{item.unitType}}</span>
              </span>
            </div>
          </div>
@@ -46,7 +47,7 @@
    </div>
    <div style="height: calc(100% - 74px); position: relative">
      <chart-no-data v-if="isNoData && !showError"></chart-no-data>
-      <div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" id="overviewLineChart"></div>
+      <div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" ref="overviewLineChart"></div>
 <!--      todo 后续改动，此处为框选返回-->
 <!--      <div id="brushBtn" style="position: absolute;left: 0;top: 0;" v-show="mouseDownFlag">-->
 <!--        <el-button @click.stop="backBrushHistory">返回</el-button>-->
@@ -63,7 +64,7 @@ import { unitTypes, chartColor3, chartColor4 } from '@/utils/constants.js'
 import { ref, shallowRef } from 'vue'
 import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 import _ from 'lodash'
-import { get } from '@/utils/http'
+import axios from 'axios'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
@@ -205,7 +206,8 @@ export default {
      }
      this.toggleLoading(true)

-      get(api.netWorkOverview.totalTrafficAnalysis, params).then((res) => {
+      axios.get(api.netWorkOverview.totalTrafficAnalysis, { params: params }).then(response => {
+        const res = response.data
        this.errorMsg = res.message

        if (res.code === 200) {
@@ -260,6 +262,8 @@ export default {
      }
    },
    echartsInit (echartsData, show) {
+      // echarts内容在单元测试时不执行
+      if (!this.isUnitTesting) {
        if (this.lineTab) {
          this.handleActiveBar()
          echartsData = echartsData.filter(t => t.show === true && t.invertTab === false)
@@ -269,9 +273,6 @@ export default {
        const _this = this
        // !this.myChart && (this.myChart = echarts.init(dom))
        // 此处为验证是否因dom未销毁，导致图表出错，后续可能会改
-      let dom = null
-      dom = document.getElementById('overviewLineChart')
-
        this.chartOption = stackedLineChartOption
        const chartOption = this.chartOption.series[0]
        this.chartOption.series = echartsData.map((t, i) => {
@@ -369,7 +370,7 @@ export default {
        }
        this.showMarkLine = true
        this.$nextTick(() => {
-        this.myChart = echarts.init(dom)
+          this.myChart = echarts.init(this.$refs.overviewLineChart)
          this.myChart.setOption(this.chartOption)
          // 设置参见官网：https://echarts.apache.org/zh/api.html#action.brush.brush
          this.myChart.dispatchAction({
@@ -417,6 +418,7 @@ export default {
            }
          })
        })
+      }
    },
    activeChange (item, index) {
      if (this.isNoData) return
@@ -489,12 +491,13 @@ export default {
    referenceSelectChange (val) {
      this.lineRefer = val
      let echartsData
-      const chartOption = this.myChart.getOption()
      if (this.lineTab) {
        echartsData = this.mpackets.filter(t => t.show === true && t.invertTab === false)
      } else {
        echartsData = this.mpackets.filter(t => t.show === true)
      }
+      if (!this.isUnitTesting) {
+        const chartOption = this.myChart.getOption()
        if (this.lineRefer === 'Average' && this.showMarkLine) {
          chartOption.series.forEach((t, i) => {
            if (t.name === echartsData[0].name) {
@@ -515,6 +518,7 @@ export default {
          })
        }
        this.myChart.setOption(chartOption)
+      }
    },
    symbolSizeSortChange (index, time) {
      const dataIntegrationArray = []
--- a/test/Test.test.js
+++ b/test/Test.test.js
@@ -1,19 +1,18 @@
 import Test from '../src/Test'
 import { mount } from '@vue/test-utils'
+import { getNameByEventType } from '@/utils/tools'
+import axios from 'axios'

-// 模拟vue-router库，否则组件中引用vue-router的代码报错
-jest.mock('vue-router', () => {
-  return {
-    useRouter: function () { return { currentRoute: '/' } }
-  }
-})
-test('点击按钮后count的值+1', async () => {
+// 模拟的axios返回数据
+const mockPostList = { data: { id: 2, title: 'title2' } }
+
+describe('单元测试demo', () => {
+  test('Vue组件--点击按钮后count的值+1', async () => {
    // 加载vue组件，获得实例
    const wrapper = mount(Test)
-
    // 取到文本和按钮的dom
-  const textNode = await wrapper.get('[data-test="count"]')
-  const button = await wrapper.get('[data-test="button"]')
+    const textNode = await wrapper.get('[test-id="count"]')
+    const button = await wrapper.get('[test-id="button"]')
    // 断言文本dom的内容是否是'0'
    expect(textNode.text()).toContain('0')
    // 模拟按钮dom点击，执行click()方法
@@ -23,12 +22,30 @@ test('点击按钮后count的值+1', async () => {
    // 再次点击
    await button.trigger('click')
    // 断言点击按钮后文本dom的内容是否是'2'
-  expect(textNode.text()).toContain('2')
+    expect(textNode.text()).toBe('2')

+    /* 更多断言类型：https://jestjs.io/zh-Hans/docs/expect */
+  })
+
+  test('Vue组件--直接获取vue实例中的data和method', async () => {
+    // 模拟axios返回数据
+    axios.get.mockResolvedValue(mockPostList)
+    // 加载vue组件，获得实例
+    const wrapper = mount(Test)
+    const textNode2 = await wrapper.get('[test-id="title"]')
    // 通过wrapper.vm.xxx直接执行click方法、获取data的数据
-  expect(wrapper.vm.count).toEqual(2)
+    expect(wrapper.vm.count).toEqual(0)
    await wrapper.vm.click()
-  expect(wrapper.vm.count).toEqual(3)
+    expect(wrapper.vm.count).toBe(1)

-  // 更多断言类型：https://jestjs.io/zh-Hans/docs/expect
+    expect(textNode2.text()).toEqual('title')
+    await wrapper.vm.getPosts()
+    await wrapper.vm.$nextTick(() => {
+      expect(textNode2.text()).toBe('title2')
+    })
+  })
+
+  test('js方法--getNameByEventType', async () => {
+    expect(getNameByEventType('http error')).toBe('http error ratio')
+  })
 })
--- a/test/init.js
+++ b/test/init.js
@@ -0,0 +1,36 @@
+import 'jest-canvas-mock'
+import axios from 'axios'
+import { config } from '@vue/test-utils'
+
+/* 开启测试 */
+config.global.mocks.isUnitTesting = true
+/* 初始化dayjs */
+const dayjs = require('dayjs')
+const utc = require('dayjs/plugin/utc')
+const timezone = require('dayjs/plugin/timezone')
+const advancedFormat = require('dayjs/plugin/advancedFormat')
+const weekday = require('dayjs/plugin/weekday')
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(advancedFormat)
+dayjs.extend(weekday)
+window.$dayJs = dayjs
+
+/* 模拟vue-router库，否则组件中引用vue-router的代码报错 */
+jest.mock('vue-router', () => {
+  return {
+    useRouter: function () { return { currentRoute: '/' } },
+    useRoute: function () { return { query: {} } },
+    createWebHashHistory: jest.fn(),
+    createRouter: jest.fn().mockReturnValue({
+      beforeEach: jest.fn()
+    })
+  }
+})
+
+/* 模拟axios */
+jest.mock('axios')
+/* 模拟$t */
+config.global.mocks.$t = key => key
+/* 消除warn */
+jest.spyOn(console, 'warn').mockImplementation(() => {})
--- a/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js
+++ b/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js
@@ -0,0 +1,60 @@
+import NetworkOverviewLine from '@/views/charts2/charts/networkOverview/NetworkOverviewLine'
+import { mount } from '@vue/test-utils'
+import axios from 'axios'
+
+const mockGet = {
+  data: {"status":200,"code":200,"success":true,"message":null,"formatType":"json","data":{"resultType":"object","result":[{"type":"bytes","totalBitsRate":{"values":[[1673247564,"96801019.52"]],"analysis":{"avg":"112042808.24","max":"301842105.76","min":"52096324","p95":"168089003.35199997"}},"inboundBitsRate":{"values":[[1673247564,"11814508.48"]],"analysis":{"avg":"18587597.36","max":"137528138.88","min":"3181142.88","p95":"49561521.447999954"}},"outboundBitsRate":{"values":[[1673247564,"84282965.52"]],"analysis":{"avg":"87557861.44","max":"290402258","min":"45337684.48","p95":"121041718.81199999"}},"internalBitsRate":{"values":[[1673247564,"9125.12"]],"analysis":{"avg":"278114.32","max":"2215460.48","min":"0","p95":"923494.5719999998"}},"throughBitsRate":{"values":[[1673247564,"694420.48"]],"analysis":{"avg":"5619235.12","max":"42455480.24","min":"262607.76","p95":"13559588.195999999"}},"other":{"values":[[1673247564,"0.00"]],"analysis":{"avg":"0.01","max":"0.08","min":"0.00","p95":"0.08"}}},{"type":"packets","totalPacketsRate":{"values":[[1673247564,"12077.53"]],"analysis":{"avg":"14062.37","max":"32840.42","min":"6564.17","p95":"20923.167999999987"}},"inboundPacketsRate":{"values":[[1673247564,"3865.58"]],"analysis":{"avg":"4241.61","max":"15460.03","min":"1918.22","p95":"8549.799999999997"}},"outboundPacketsRate":{"values":[[1673247564,"8118.89"]],"analysis":{"avg":"9170.98","max":"27134.58","min":"4510.25","p95":"13690.540999999996"}},"internalPacketsRate":{"values":[[1673247564,"15.89"]],"analysis":{"avg":"35.95","max":"276.47","min":"0.00","p95":"122.49749999999999"}},"throughPacketsRate":{"values":[[1673247564,"77.17"]],"analysis":{"avg":"613.82","max":"3768.56","min":"42.92","p95":"1279.757499999999"}},"other":{"values":[[1673247564,"0.00"]],"analysis":{"avg":"0","max":"0.01","min":"0.00","p95":"0.01"}}},{"type":"sessions","totalSessionsRate":{"values":[[1673247564,"29.92"]],"analysis":{"avg":"29.89","max":"29.92","min":"29.67","p95":"29.92"}}}]},"msg":"OK"}
+}
+
+describe('NetworkOverviewLine.vue测试', () => {
+  test('Metric=Bits/s', async () => {
+    // 模拟axios返回数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NetworkOverviewLine, {
+      propsData: {
+        timeFilter: {
+          dateRangeValue: -1,
+          startTime: 1673244000000,
+          endTime: 1673247600000
+        },
+        chart: {"id":1,"name":"network overview line","i18n":"","panelId":1,"pid":0,"type":102,"x":0,"y":0,"w":19,"h":6,"params":{},"cby":1,"ctime":"2022-07-06 16:59:22","uby":1,"utime":"2022-07-06 16:59:22","remark":"","state":1,"system":0,"buildIn":0,"uuser":{"id":1,"name":null,"username":"admin","salt":null,"lang":null,"theme":null,"lastLoginIp":null,"lastLoginTime":null,"ctime":null,"cby":null,"email":null,"mobile":null,"status":null,"source":null,"buildIn":null,"roleIds":null,"usergroupIds":null,"roles":null,"apiKeyId":null},"cuser":{"id":1,"name":null,"username":"admin","salt":null,"lang":null,"theme":null,"lastLoginIp":null,"lastLoginTime":null,"ctime":null,"cby":null,"email":null,"mobile":null,"status":null,"source":null,"buildIn":null,"roleIds":null,"usergroupIds":null,"roles":null,"apiKeyId":null},"children":[],"parent":null,"panel":{"id":1,"name":"Network Overview","i18n":null,"type":null,"params":null,"cby":null,"ctime":null,"uby":null,"utime":null,"remark":null,"state":null,"buildIn":null,"uuser":null,"cuser":null},"i":1,"category":"echarts","firstShow":false,"moved":false}
+      }
+    })
+    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有时不管用
+    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))
+  })
+  test('Metric=Packets/s', async () => {
+    // 模拟axios返回数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NetworkOverviewLine, {
+      propsData: {
+        timeFilter: {
+          dateRangeValue: -1,
+          startTime: 1673244000000,
+          endTime: 1673247600000
+        },
+        metric: 'Packets/s',
+        chart: {"id":1,"name":"network overview line","i18n":"","panelId":1,"pid":0,"type":102,"x":0,"y":0,"w":19,"h":6,"params":{},"cby":1,"ctime":"2022-07-06 16:59:22","uby":1,"utime":"2022-07-06 16:59:22","remark":"","state":1,"system":0,"buildIn":0,"uuser":{"id":1,"name":null,"username":"admin","salt":null,"lang":null,"theme":null,"lastLoginIp":null,"lastLoginTime":null,"ctime":null,"cby":null,"email":null,"mobile":null,"status":null,"source":null,"buildIn":null,"roleIds":null,"usergroupIds":null,"roles":null,"apiKeyId":null},"cuser":{"id":1,"name":null,"username":"admin","salt":null,"lang":null,"theme":null,"lastLoginIp":null,"lastLoginTime":null,"ctime":null,"cby":null,"email":null,"mobile":null,"status":null,"source":null,"buildIn":null,"roleIds":null,"usergroupIds":null,"roles":null,"apiKeyId":null},"children":[],"parent":null,"panel":{"id":1,"name":"Network Overview","i18n":null,"type":null,"params":null,"cby":null,"ctime":null,"uby":null,"utime":null,"remark":null,"state":null,"buildIn":null,"uuser":null,"cuser":null},"i":1,"category":"echarts","firstShow":false,"moved":false}
+      }
+    })
+    const textNode0 = await wrapper.get('[test-id="tabContent0"]')
+    const textNode1 = await wrapper.get('[test-id="tabContent1"]')
+    const textNode2 = await wrapper.get('[test-id="tabContent2"]')
+    await new Promise(res => setTimeout(() => {
+      expect(textNode0.text()).toEqual('14.06Kpackets/s')
+      expect(textNode1.text()).toEqual('4.24Kpackets/s')
+      expect(textNode2.text()).toEqual('9.17Kpackets/s')
+      res()
+    }, 1000))
+  })
+})