From 431821154efa1b6a68682497b61808194b1db123 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 10 Jan 2023 10:09:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3vue=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95=E5=A4=8D=E6=9D=82=E7=9A=84?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E4=BE=9D=E8=B5=96=EF=BC=8C=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4NetworkOverviewLine=E5=8D=95=E5=85=83?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jest.config.js                                |   2 +
 src/Test.vue                                  |  14 +-
 src/mixins/common.js                          |   5 +-
 src/utils/tools.js                            |   5 -
 .../networkOverview/NetworkOverviewLine.vue   | 358 +++++++++---------
 test/Test.test.js                             |  77 ++--
 test/init.js                                  |  36 ++
 .../NetworkOverviewLine.test.js               |  60 +++
 8 files changed, 340 insertions(+), 217 deletions(-)
 create mode 100644 test/init.js
 create mode 100644 test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js

diff --git a/jest.config.js b/jest.config.js
index 98534c1c..80dae2d8 100644
--- 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}'
diff --git a/src/Test.vue b/src/Test.vue
index 3b723d25..c59f176b 100644
--- 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 () {
diff --git a/src/mixins/common.js b/src/mixins/common.js
index b8c38884..5be4057c 100644
--- 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: {
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 2c17f8ab..e1b92f4a 100644
--- 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'
-    }
   }
 }
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index a7cdf2ce..b82f8d9d 100644
--- 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) {
@@ -223,7 +225,7 @@ export default {
               { analysis: {}, name: 'network.other', class: 'other', show: true, invertTab: true, positioning: 5, data: [], unitType: '' }
             ]
           }
-          res.data.result.forEach((t) => {
+          res.data.result.forEach(t => {
             if (t.type === 'bytes' && val === 'Bits/s') {
               const mpackets = _.cloneDeep(this.mpackets)
               mpackets[0].analysis = t.totalBitsRate.analysis
@@ -377,163 +379,163 @@ export default {
       }
     },
     echartsInit (echartsData, show) {
-      if (this.lineTab) {
-        this.handleActiveBar()
-        echartsData = echartsData.filter(t => t.show === true && t.invertTab === false)
-      } else {
-        echartsData = echartsData.filter(t => t.show === true)
-      }
-      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) => {
-        return {
-          ...chartOption,
-          name: t.name,
-          lineStyle: {
-            color: chartColor3[t.positioning],
-            width: 1
-          },
-          stack: t.name !== 'network.total' ? 'network.total' : '',
-          symbolSize: function (value) {
-            return _this.symbolSizeSortChange(i, value[0])
-          },
-          emphasis: {
-            itemStyle: {
-              borderColor: chartColor4[t.positioning],
-              borderWidth: 2,
-              shadowColor: chartColor4[t.positioning],
-              shadowBlur: this.sizes[t.positioning] + 2
-            }
-          },
-          areaStyle: {
-            opacity: 0.1,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: chartColor3[t.positioning]
-              },
-              {
-                offset: 1,
-                color: chartColor3[t.positioning]
-              }
-            ])
-          },
-          data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
-          markLine: {
-            silent: true,
-            lineStyle: {
-              color: '#B4B1A8'
-            },
-            symbol: 'none',
-            label: {
-              formatter (params) {
-                const arr = unitConvert(params.value, unitTypes.number).join('')
-                return _this.lineRefer + '(' + arr + echartsData[0].unitType + ')'
-              },
-              position: 'insideStartTop',
-              color: '#717171',
-              fontFamily: 'NotoSansSChineseRegular'
-            }
-          }
+      // echarts内容在单元测试时不执行
+      if (!this.isUnitTesting) {
+        if (this.lineTab) {
+          this.handleActiveBar()
+          echartsData = echartsData.filter(t => t.show === true && t.invertTab === false)
+        } else {
+          echartsData = echartsData.filter(t => t.show === true)
         }
-      })
-      if (!show) {
-        this.chartOption.series.forEach((t) => {
-          t.markLine.label.show = false
-          t.markLine = []
-        })
-      }
-      if (this.lineRefer === 'Average' && show) {
-        this.chartOption.series.forEach((t, i) => {
-          t.markLine.label.show = true
-          t.markLine.data = [
-            {
-              yAxis: echartsData[i].analysis.avg
-            }
-          ]
-        })
-      } else if (this.lineRefer === '95th Percentile' && show) {
-        this.chartOption.series.forEach((t, i) => {
-          t.markLine.label.show = true
-          t.markLine.data = [
-            { yAxis: echartsData[i].analysis.p95 }
-          ]
-        })
-      } else if (this.lineRefer === 'Maximum' && show) {
-        this.chartOption.series.forEach((t, i) => {
-          t.markLine.label.show = true
-          t.markLine.data = [
-            { yAxis: echartsData[i].analysis.max }
-          ]
-        })
-      }
-      this.chartOption.tooltip.formatter = (params) => {
-        params.forEach(t => {
-          t.seriesName = this.$t(t.seriesName)
-          this.mpackets.forEach(e => {
-            if (this.$t(e.name) === t.seriesName) {
-              t.borderColor = chartColor3[e.positioning]
-            }
-          })
-        })
-        return stackedLineTooltipFormatter(params)
-      }
-      this.showMarkLine = true
-      this.$nextTick(() => {
-        this.myChart = echarts.init(dom)
-        this.myChart.setOption(this.chartOption)
-        // 设置参见官网：https://echarts.apache.org/zh/api.html#action.brush.brush
-        this.myChart.dispatchAction({
-          // 刷选模式的开关。使用此 action 可将当前鼠标变为可刷选状态。事实上，点击 toolbox 中的 brush 按钮时，就是通过这个 action，将当前普通鼠标变为刷选器的。
-          type: 'takeGlobalCursor',
-          // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
-          key: 'brush',
-          brushOption: {
-            // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
-            brushType: 'lineX',
-            xAxisIndex: 'all',
-            // 单击清除选框
-            brushMode: 'single',
-            // 选择完毕再返回所选数据
-            throttleType: 'debounce'
-          }
-        })
-
-        const self = this
-
-        this.myChart.on('brushEnd', function (params) {
-          self.myChart.dispatchAction({
-            type: 'brush',
-            areas: [] // 删除选框
-          })
-          if (!self.mouseDownFlag) {
-            // 避免点击空白区域报错
-            if (params.areas !== undefined && params.areas.length > 0) {
-              self.brushHistory.unshift({
-                startTime: _.cloneDeep(self.timeFilter.startTime) * 1000,
-                endTime: _.cloneDeep(self.timeFilter.endTime) * 1000
-              })
-
-              const rangeObj = {
-                startTime: Math.ceil(params.areas[0].coordRange[0]),
-                endTime: Math.ceil(params.areas[0].coordRange[1])
+        const _this = this
+        // !this.myChart && (this.myChart = echarts.init(dom))
+        // 此处为验证是否因dom未销毁，导致图表出错，后续可能会改
+        this.chartOption = stackedLineChartOption
+        const chartOption = this.chartOption.series[0]
+        this.chartOption.series = echartsData.map((t, i) => {
+          return {
+            ...chartOption,
+            name: t.name,
+            lineStyle: {
+              color: chartColor3[t.positioning],
+              width: 1
+            },
+            stack: t.name !== 'network.total' ? 'network.total' : '',
+            symbolSize: function (value) {
+              return _this.symbolSizeSortChange(i, value[0])
+            },
+            emphasis: {
+              itemStyle: {
+                borderColor: chartColor4[t.positioning],
+                borderWidth: 2,
+                shadowColor: chartColor4[t.positioning],
+                shadowBlur: this.sizes[t.positioning] + 2
               }
-
-              // todo 目前暂定框选最小范围为5分钟，后续可能会变动
-              if (rangeObj.endTime - rangeObj.startTime < 5 * 60 * 1000) {
-                rangeObj.startTime = rangeObj.endTime - 5 * 60 * 1000
+            },
+            areaStyle: {
+              opacity: 0.1,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: chartColor3[t.positioning]
+                },
+                {
+                  offset: 1,
+                  color: chartColor3[t.positioning]
+                }
+              ])
+            },
+            data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
+            markLine: {
+              silent: true,
+              lineStyle: {
+                color: '#B4B1A8'
+              },
+              symbol: 'none',
+              label: {
+                formatter (params) {
+                  const arr = unitConvert(params.value, unitTypes.number).join('')
+                  return _this.lineRefer + '(' + arr + echartsData[0].unitType + ')'
+                },
+                position: 'insideStartTop',
+                color: '#717171',
+                fontFamily: 'NotoSansSChineseRegular'
               }
-              _this.$store.commit('setRangeEchartsData', rangeObj)
             }
           }
         })
-      })
+        if (!show) {
+          this.chartOption.series.forEach((t) => {
+            t.markLine.label.show = false
+            t.markLine = []
+          })
+        }
+        if (this.lineRefer === 'Average' && show) {
+          this.chartOption.series.forEach((t, i) => {
+            t.markLine.label.show = true
+            t.markLine.data = [
+              {
+                yAxis: echartsData[i].analysis.avg
+              }
+            ]
+          })
+        } else if (this.lineRefer === '95th Percentile' && show) {
+          this.chartOption.series.forEach((t, i) => {
+            t.markLine.label.show = true
+            t.markLine.data = [
+              { yAxis: echartsData[i].analysis.p95 }
+            ]
+          })
+        } else if (this.lineRefer === 'Maximum' && show) {
+          this.chartOption.series.forEach((t, i) => {
+            t.markLine.label.show = true
+            t.markLine.data = [
+              { yAxis: echartsData[i].analysis.max }
+            ]
+          })
+        }
+        this.chartOption.tooltip.formatter = (params) => {
+          params.forEach(t => {
+            t.seriesName = this.$t(t.seriesName)
+            this.mpackets.forEach(e => {
+              if (this.$t(e.name) === t.seriesName) {
+                t.borderColor = chartColor3[e.positioning]
+              }
+            })
+          })
+          return stackedLineTooltipFormatter(params)
+        }
+        this.showMarkLine = true
+        this.$nextTick(() => {
+          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({
+            // 刷选模式的开关。使用此 action 可将当前鼠标变为可刷选状态。事实上，点击 toolbox 中的 brush 按钮时，就是通过这个 action，将当前普通鼠标变为刷选器的。
+            type: 'takeGlobalCursor',
+            // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+            key: 'brush',
+            brushOption: {
+              // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
+              brushType: 'lineX',
+              xAxisIndex: 'all',
+              // 单击清除选框
+              brushMode: 'single',
+              // 选择完毕再返回所选数据
+              throttleType: 'debounce'
+            }
+          })
+
+          const self = this
+
+          this.myChart.on('brushEnd', function (params) {
+            self.myChart.dispatchAction({
+              type: 'brush',
+              areas: [] // 删除选框
+            })
+            if (!self.mouseDownFlag) {
+              // 避免点击空白区域报错
+              if (params.areas !== undefined && params.areas.length > 0) {
+                self.brushHistory.unshift({
+                  startTime: _.cloneDeep(self.timeFilter.startTime) * 1000,
+                  endTime: _.cloneDeep(self.timeFilter.endTime) * 1000
+                })
+
+                const rangeObj = {
+                  startTime: Math.ceil(params.areas[0].coordRange[0]),
+                  endTime: Math.ceil(params.areas[0].coordRange[1])
+                }
+
+                // todo 目前暂定框选最小范围为5分钟，后续可能会变动
+                if (rangeObj.endTime - rangeObj.startTime < 5 * 60 * 1000) {
+                  rangeObj.startTime = rangeObj.endTime - 5 * 60 * 1000
+                }
+                _this.$store.commit('setRangeEchartsData', rangeObj)
+              }
+            }
+          })
+        })
+      }
     },
     activeChange (item, index) {
       if (this.isNoData) return
@@ -606,32 +608,34 @@ 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.lineRefer === 'Average' && this.showMarkLine) {
-        chartOption.series.forEach((t, i) => {
-          if (t.name === echartsData[0].name) {
-            t.markLine.data = [{ yAxis: echartsData[0].analysis.avg }]
-          }
-        })
-      } else if (this.lineRefer === '95th Percentile' && this.showMarkLine) {
-        chartOption.series.forEach((t, i) => {
-          if (t.name === echartsData[0].name) {
-            t.markLine.data = [{ yAxis: echartsData[0].analysis.p95 }]
-          }
-        })
-      } else if (this.lineRefer === 'Maximum' && this.showMarkLine) {
-        chartOption.series.forEach((t, i) => {
-          if (t.name === echartsData[0].name) {
-            t.markLine.data = [{ yAxis: echartsData[0].analysis.max }]
-          }
-        })
+      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) {
+              t.markLine.data = [{ yAxis: echartsData[0].analysis.avg }]
+            }
+          })
+        } else if (this.lineRefer === '95th Percentile' && this.showMarkLine) {
+          chartOption.series.forEach((t, i) => {
+            if (t.name === echartsData[0].name) {
+              t.markLine.data = [{ yAxis: echartsData[0].analysis.p95 }]
+            }
+          })
+        } else if (this.lineRefer === 'Maximum' && this.showMarkLine) {
+          chartOption.series.forEach((t, i) => {
+            if (t.name === echartsData[0].name) {
+              t.markLine.data = [{ yAxis: echartsData[0].analysis.max }]
+            }
+          })
+        }
+        this.myChart.setOption(chartOption)
       }
-      this.myChart.setOption(chartOption)
     },
     symbolSizeSortChange (index, time) {
       const dataIntegrationArray = []
diff --git a/test/Test.test.js b/test/Test.test.js
index 2306ca50..6190636d 100644
--- a/test/Test.test.js
+++ b/test/Test.test.js
@@ -1,34 +1,51 @@
 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 () => {
-  // 加载vue组件，获得实例
-  const wrapper = mount(Test)
-
-  // 取到文本和按钮的dom
-  const textNode = await wrapper.get('[data-test="count"]')
-  const button = await wrapper.get('[data-test="button"]')
-  // 断言文本dom的内容是否是'0'
-  expect(textNode.text()).toContain('0')
-  // 模拟按钮dom点击，执行click()方法
-  await button.trigger('click')
-  // 断言点击按钮后文本dom的内容是否是'1'
-  expect(textNode.text()).toContain('1')
-  // 再次点击
-  await button.trigger('click')
-  // 断言点击按钮后文本dom的内容是否是'2'
-  expect(textNode.text()).toContain('2')
-
-  // 通过wrapper.vm.xxx直接执行click方法、获取data的数据
-  expect(wrapper.vm.count).toEqual(2)
-  await wrapper.vm.click()
-  expect(wrapper.vm.count).toEqual(3)
-
-  // 更多断言类型：https://jestjs.io/zh-Hans/docs/expect
+// 模拟的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('[test-id="count"]')
+    const button = await wrapper.get('[test-id="button"]')
+    // 断言文本dom的内容是否是'0'
+    expect(textNode.text()).toContain('0')
+    // 模拟按钮dom点击，执行click()方法
+    await button.trigger('click')
+    // 断言点击按钮后文本dom的内容是否是'1'
+    expect(textNode.text()).toContain('1')
+    // 再次点击
+    await button.trigger('click')
+    // 断言点击按钮后文本dom的内容是否是'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(0)
+    await wrapper.vm.click()
+    expect(wrapper.vm.count).toBe(1)
+
+    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')
+  })
 })
diff --git a/test/init.js b/test/init.js
new file mode 100644
index 00000000..5d7f01e0
--- /dev/null
+++ 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(() => {})
diff --git a/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js b/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js
new file mode 100644
index 00000000..6009e2c1
--- /dev/null
+++ 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))
+  })
+})