CN-866 feat: 单测用例--network overview ddos检测图 编写单测用例

src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue

@@ -11,15 +11,15 @@
      <div class="ddos-detection-type">
        <div class="ddos-detection-type-value">
          <div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div>
-         <div class="ddos-detection-type-value-number">{{unitConvert($_.get(ddosData, 'attackerCount'), unitTypes.number).join(' ') || 0}}</div>
+         <div class="ddos-detection-type-value-number" test-id="attackerCount">{{unitConvert($_.get(ddosData, 'attackerCount'), unitTypes.number).join(' ')}}</div>
        </div>
        <div class="ddos-detection-type-value">
          <div class="ddos-detection-type-value-name">{{$t('network.number0fVictims')}}</div>
-         <div class="ddos-detection-type-value-number">{{unitConvert($_.get(ddosData, 'victimCount'), unitTypes.number).join(' ') || 0}}</div>
+         <div class="ddos-detection-type-value-number" test-id="victimCount">{{unitConvert($_.get(ddosData, 'victimCount'), unitTypes.number).join(' ')}}</div>
        </div>
        <div class="ddos-detection-type-value">
          <div class="ddos-detection-type-value-name">{{$t('network.number0fDetectedAttackEvents')}}</div>
-         <div class="ddos-detection-type-value-number ddos-event">{{unitConvert($_.get(ddosData, 'attackEventCount'), unitTypes.number).join(' ') || 0}}</div>
+         <div class="ddos-detection-type-value-number ddos-event" test-id="attackEventCount">{{unitConvert($_.get(ddosData, 'attackEventCount'), unitTypes.number).join(' ')}}</div>
        </div>
      </div>
      <el-button size="small">{{$t('network.ddosDetection')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
@@ -63,8 +63,8 @@ export default {
   methods: {
     ddosDetectDataRequests () {
       const params = {
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime)
+        startTime: this.timeFilter && this.timeFilter.startTime ? getSecond(this.timeFilter.startTime) : '',
+        endTime: this.timeFilter && this.timeFilter.endTime ? getSecond(this.timeFilter.endTime) : ''
       }
       this.toggleLoading(true)
       get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {

src/views/charts2/charts/npm/NpmNetworkQuantity.vue

@@ -1,47 +1,47 @@
 <template>
-  <div class="npm-network-quantity" test-id="npmOverviewQuantity">
+  <div class="npm-network-quantity">
     <div class="single-value" v-for="(npm, index) in newNpmNetworkData" :key="index">
       <div class="single-value__title" style="display: flex">
         {{ $t(npmNetworkName[index].name) }}
         <chart-error v-if="npm.message" tooltip :content="npm.message"></chart-error>
       </div>
 
-      <div class="single-value__content">
-        <div class="single-value__content-number" v-if="index ===0 || index ===1 || index ===2">
+      <div class="single-value__content" >
+        <div class="single-value__content-number" v-if="index ===0 || index ===1 || index ===2" :test-id="`singleValueContent${index}`">
           {{ unitConvert(npm.Avg, unitTypes.time).join(' ') }}
         </div>
-        <div class="single-value__content-number" v-else>
+        <div class="single-value__content-number" v-else :test-id="`singleValueContent${index}`">
           {{unitConvert(npm.Avg, unitTypes.percent).join(' ')}}
         </div>
-        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
-          <span v-if="npm.value <= 5">
+        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red" >
+          <i class="cn-icon-rise1 cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>&nbsp;
+          <span v-if="npm.value <= 5" :test-id="`singleValueTrendValue${index}`">
             {{ unitConvert(npm.value, unitTypes.percent).join('') }}
         </span>
-          <span v-else>>500.00%</span>
+          <span v-else :test-id="`singleValueTrendValue${index}`">>500.00%</span>
         </div>
-        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-decline cn-icon"></i>&nbsp;
-          <span v-if="npm.value >= -5">
-            {{ unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '') }}
+        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green" >
+          <i class="cn-icon-decline cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>&nbsp;
+          <span v-if="npm.value >= -5" :test-id="`singleValueTrendValue${index}`">
+            {{ unitConvert(npm.value, unitTypes.percent).join('') }}
         </span>
-          <span v-else>>500.00%</span>
+          <span v-else :test-id="`singleValueTrendValue${index}`">>500.00%</span>
         </div>
-        <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
-          <i class="cn-icon-constant cn-icon"></i>
+        <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black" >
+          <i class="cn-icon-constant cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>
         </div>
         <div v-else></div>
       </div>
 
       <div class="single-value__circle">
-        <div class="single-value__circle-p95">
+        <div class="single-value__circle-p95" :test-id="`singleValueP95${index}`">
         <span v-if="index ===0 || index ===1 || index ===2">
           P95:{{ unitConvert(npm.P95, unitTypes.time).join(' ') }}</span>
           <span v-else>
           P95:{{ unitConvert(npm.P95, unitTypes.percent).join(' ') }}
         </span>
         </div>
-        <div class="single-value__circle-p99">
+        <div class="single-value__circle-p99" :test-id="`singleValueP99${index}`">
         <span v-if="index ===0 || index ===1 || index ===2">
           P99:{{ unitConvert(npm.P99, unitTypes.time).join(' ') }}
         </span>
@@ -128,7 +128,6 @@ export default {
         endTime: getSecond(this.timeFilter.endTime),
         cycle: 0
       }
-      console.log(params)
       if (parseFloat(this.tabIndex) === 0) {
         this.side = 'client'
       } else if (parseFloat(this.tabIndex) === 1) {

test/init.js

@@ -13,6 +13,8 @@ dayjs.extend(timezone)
 dayjs.extend(advancedFormat)
 dayjs.extend(weekday)
 window.$dayJs = dayjs
+// 引入 lodash 工具 模拟 lodash
+const _ = require('lodash') // lodash工具
 
 /* 模拟vue-router库，否则组件中引用vue-router的代码报错 */
 jest.mock('vue-router', () => {
@@ -33,5 +35,7 @@ jest.mock('@/indexedDB')
 config.global.mocks.$t = key => key
 /* 模拟$route，具体用例中需要不同值时重写覆盖即可 */
 config.global.mocks.$route = { query: '' }
+/* 模拟 lodash */
+config.global.mocks.$_ = _
 /* 消除warn */
 jest.spyOn(console, 'warn').mockImplementation(() => {})

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

@@ -0,0 +1,29 @@
+import NetworkOverviewDdosDetection from '@/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection'
+import { mount } from '@vue/test-utils'
+import axios from 'axios'
+const data = {
+  attackEventCount: 1200000,
+  attackerCount: 2687878,
+  victimCount: 36676767
+}
+describe('views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vueC测试', () => {
+  test('攻击、受害、攻击数事件：ddos检测图', () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    axios.get.mockResolvedValue(data)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NetworkOverviewDdosDetection, {
+      propsData: {
+        data
+      }
+    })
+    setTimeout(() => {
+      const attackEventCount = wrapper.get('[test-id="attackEventCount"]')
+      const attackerCount = wrapper.get('[test-id="attackerCount"]')
+      const victimCount = wrapper.get('[test-id="victimCount"]')
+
+      expect(attackEventCount.text()).toEqual('1.20 M')
+      expect(attackerCount.text()).toEqual('2.69 M')
+      expect(victimCount.text()).toEqual('36.68 M')
+    })
+  })
+})