CN-866 fix: 单测用例--network overview ddos检测图

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

@@ -29,13 +29,13 @@
 
 <script>
 import { api } from '@/utils/api'
-import { get } from '@/utils/http'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartError from '@/components/common/Error'
 import unitConvert from '@/utils/unit-convert'
 import { unitTypes } from '@/utils/constants'
+import axios from 'axios'
 export default {
   name: 'NetworkOverviewDdosDetection',
   components: {
@@ -67,16 +67,12 @@ export default {
         endTime: this.timeFilter && this.timeFilter.endTime ? getSecond(this.timeFilter.endTime) : ''
       }
       this.toggleLoading(true)
-      get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {
+      axios.get(api.netWorkOverview.ddosEventAnalysis, { params: params }).then(res => {
+        res = res.data
         if (res.code === 200) {
           this.showError = false
           this.isNoData = res.data.result.length === 0
           this.ddosData = res.data.result[0]
-          this.ddosData = {
-            attackEventCount: 1200000,
-            attackerCount: 2687878,
-            victimCount: 36676767
-          }
         } else {
           this.isNoData = false
           this.showError = true
@@ -92,7 +88,9 @@ export default {
     }
   },
   mounted () {
+    this.$nextTick(() => {
       this.ddosDetectDataRequests()
+    })
   },
   beforeUnmount () {
     this.unitConvert = null

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

@@ -2,21 +2,21 @@
  <div class="npm-header">
   <div class="npm-header-body" v-for="(item, index) in chartData" :key=index>
     <div class="npm-header-body-severity">
-      <div class="npm-header-body-severity-icon" :class="item.eventSeverity"></div>
+      <div class="npm-header-body-severity-icon" :class="item.eventSeverity" :test-id="`icon${index}`"></div>
-      <div class="npm-header-body-severity-value">{{item.eventSeverity}}</div>
+      <div class="npm-header-body-severity-value" :test-id="`severity${index}`">{{item.eventSeverity}}</div>
     </div>
     <chart-error v-if="showError" tooltip :content="errorMsg" />
-    <div v-else class="npm-header-body-total">{{item.count}}</div>
+    <div v-else class="npm-header-body-total" :test-id="`total${index}`">{{item.count}}</div>
   </div>
  </div>
 </template>
 
 <script>
 import { getSecond } from '@/utils/date-util'
-import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartError from '@/components/common/Error'
+import axios from 'axios'
 export default {
   name: 'NpmEventsHeader',
   components: { ChartError },
@@ -65,12 +65,13 @@ export default {
   methods: {
     recentEventsListData () {
       const params = {
-        startTime: getSecond(this.timeFilter.startTime),
+        startTime: this.timeFilter && this.timeFilter.startTime ? getSecond(this.timeFilter.startTime) : '',
-        endTime: getSecond(this.timeFilter.endTime),
+        endTime: this.timeFilter && this.timeFilter.endTime ? getSecond(this.timeFilter.endTime) : '',
         type: this.type
       }
       this.toggleLoading(true)
-      get(api.npm.events.list, params).then(res => {
+      axios.get(api.npm.events.list, { params: params }).then(res => {
+        res = res.data
         if (res.code === 200) {
           this.showError = false
           if (res.data.result.length === 0) {
@@ -96,7 +97,9 @@ export default {
     }
   },
   mounted () {
+    this.$nextTick(() => {
       this.recentEventsListData()
+    })
   }
 }
 </script>

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

@@ -1,29 +1,48 @@
 import NetworkOverviewDdosDetection from '@/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection'
 import { mount } from '@vue/test-utils'
 import axios from 'axios'
-const data = {
+
-  attackEventCount: 1200000,
+const mockGet = {
-  attackerCount: 2687878,
+  data: {"status":200,"code":200,"queryKey":"dec6723e173e8fa2b00917dc597bfb27","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":58,"result_rows":1},"job":null,"formatType":"json","meta":[{"name":"attack_event_count","type":"long","category":"Metric"},{"name":"attacker_count","type":"long","category":"Metric"},{"name":"victim_count","type":"long","category":"Metric"}],"data":{"resultType":"object","result":[{"attackEventCount":1200000,"attackerCount":2687878,"victimCount":36676767}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20COUNT%28*%29%20AS%20attack_event_count%2C%20COUNT%28DISTINCT%28offender_ip%29%29%20AS%20attacker_count%2C%20COUNT%28DISTINCT%28victim_ip%29%29%20AS%20victim_count%20FROM%20security_event%20WHERE%20start_time%20%3E%3D%201675043912%20AND%20start_time%20%3C%201675047512%20AND%20security_type%20%3D%20%27ddos%27&format=json&option=real-time","msg":"OK"}
-  victimCount: 36676767
 }
-describe('views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vueC测试', () => {
+
-  test('攻击、受害、攻击数事件：ddos检测图', () => {
+const timeFilter = {
+  dateRangeValue: -1,
+  startTime: 1675043912,
+  endTime: 1675047512
+}
+
+describe('views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue测试', () => {
+  test('攻击、受害、攻击数事件：ddos检测图', async () => {
     require('vue-router').useRoute.mockReturnValue({ query: {} })
-    axios.get.mockResolvedValue(data)
+    // 模拟 axios 返回数据
+    axios.get.mockResolvedValue(mockGet)
     // 加载vue组件，获得实例
     const wrapper = mount(NetworkOverviewDdosDetection, {
       propsData: {
-        data
+        timeFilter
       }
     })
-    setTimeout(() => {
     const attackEventCount = wrapper.get('[test-id="attackEventCount"]')
     const attackerCount = wrapper.get('[test-id="attackerCount"]')
     const victimCount = wrapper.get('[test-id="victimCount"]')
 
+    await new Promise(resolve => setTimeout(() => {
       expect(attackEventCount.text()).toEqual('1.20 M')
       expect(attackerCount.text()).toEqual('2.69 M')
       expect(victimCount.text()).toEqual('36.68 M')
+      resolve()
+    }, 200))
   })
+  test('class 类名', () => {
+    const wrapper = mount(NetworkOverviewDdosDetection)
+
+    const attackEventCount = wrapper.get('[test-id="attackEventCount"]')
+    const attackerCount = wrapper.get('[test-id="attackerCount"]')
+    const victimCount = wrapper.get('[test-id="victimCount"]')
+
+    expect(attackEventCount.classes()).toContain('ddos-event')
+    expect(attackerCount.classes()).toContain('ddos-detection-type-value-number')
+    expect(victimCount.classes()).toContain('ddos-detection-type-value-number')
   })
 })

test/views/charts2/charts/npm/NpmEventsHeader.test.js

@@ -0,0 +1,70 @@
+import NpmEventsHeader from '@/views/charts2/charts/npm/NpmEventsHeader'
+import { mount } from '@vue/test-utils'
+import axios from 'axios'
+
+// 模拟数据
+const chartData = {
+  data: {"status":200,"code":200,"queryKey":"6480498979f7501d822572ebeb9e9665","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":3,"result_size":167,"result_rows":5},"job":null,"formatType":"json","meta":[{"name":"event_severity","type":"string","category":"Dimension"},{"name":"count","type":"long","category":"Metric"}],"data":{"resultType":"table","result":[{"eventSeverity":"critical","count":3},{"eventSeverity":"high","count":1},{"eventSeverity":"info","count":1},{"eventSeverity":"low","count":1},{"eventSeverity":"medium","count":2}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20event_severity%20AS%20event_severity%2C%20COUNT%28*%29%20AS%20count%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675026686%20AND%20end_time%20%3C%201675048286%20GROUP%20BY%20event_severity&format=json&option=real-time","msg":"OK"}
+}
+// type
+const type = 'severity'
+
+describe('views/charts2/charts/npm/NpmEventsHeader.vue测试', () => {
+  test('严重等级各等级个数：npm event 严重等级单值', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 返回数据
+    axios.get.mockResolvedValue(chartData)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmEventsHeader, {
+      propsData: {
+        type
+      }
+    })
+    // 严重等级
+    const severity0 = wrapper.get('[test-id="severity0"]')
+    const severity1 = wrapper.get('[test-id="severity1"]')
+    const severity2 = wrapper.get('[test-id="severity2"]')
+    const severity3 = wrapper.get('[test-id="severity3"]')
+    const severity4 = wrapper.get('[test-id="severity4"]')
+    // 各等级个数
+    const total0 = wrapper.get('[test-id="total0"]')
+    const total1 = wrapper.get('[test-id="total1"]')
+    const total2 = wrapper.get('[test-id="total2"]')
+    const total3 = wrapper.get('[test-id="total3"]')
+    const total4 = wrapper.get('[test-id="total4"]')
+
+    // type
+    expect(wrapper.vm.type).toEqual('severity')
+
+    expect(severity0.text()).toEqual('critical')
+    expect(severity1.text()).toEqual('high')
+    expect(severity2.text()).toEqual('medium')
+    expect(severity3.text()).toEqual('low')
+    expect(severity4.text()).toEqual('info')
+
+    await new Promise(resolve => setTimeout(() => {
+      expect(total0.text()).toEqual('3')
+      expect(total1.text()).toEqual('1')
+      expect(total2.text()).toEqual('2')
+      expect(total3.text()).toEqual('1')
+      expect(total4.text()).toEqual('1')
+      resolve()
+    }, 200))
+  })
+  test('class 严重等级类名', () => {
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmEventsHeader)
+    // 动态添加类名
+    const icon0 = wrapper.get('[test-id="icon0"]')
+    const icon1 = wrapper.get('[test-id="icon1"]')
+    const icon2 = wrapper.get('[test-id="icon2"]')
+    const icon3 = wrapper.get('[test-id="icon3"]')
+    const icon4 = wrapper.get('[test-id="icon4"]')
+
+    expect(icon0.classes()).toContain('critical')
+    expect(icon1.classes()).toContain('high')
+    expect(icon2.classes()).toContain('medium')
+    expect(icon3.classes()).toContain('low')
+    expect(icon4.classes()).toContain('info')
+  })
+})