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

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')
+  })
+})