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

2023-01-30 14:02:28 +08:00
parent 7ce190f3c7
commit 049d5f92b4
4 changed files with 119 additions and 29 deletions
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
+++ b/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.ddosDetectDataRequests()
+    this.$nextTick(() => {
+      this.ddosDetectDataRequests()
+    })
  },
  beforeUnmount () {
    this.unitConvert = null
--- a/src/views/charts2/charts/npm/NpmEventsHeader.vue
+++ b/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-value">{{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" :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),
-        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) : '',
        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.recentEventsListData()
+    this.$nextTick(() => {
+      this.recentEventsListData()
+    })
  }
 }
 </script>
--- a/test/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.test.js
+++ b/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,
-  attackerCount: 2687878,
-  victimCount: 36676767
+
+const mockGet = {
+  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"}
 }
-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"]')
+    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')
  })
 })
--- a/test/views/charts2/charts/npm/NpmEventsHeader.test.js
+++ b/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')
+  })
+})