CN-879 单测用例--npm events 最底下的表格

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

@@ -1,29 +1,11 @@
 <template>
   <div class="npm-app-event">
-<!--    <div class="metric-select">
-      <el-select
-          v-model="metric"
-          class="option__select select-column"
-          popper-class="option-popper common-select"
-          :popper-append-to-body="false"
-          key="tabMetric"
-          @change="changeMetric"
-          size="mini"
-          width="100">
-        <el-option
-            v-for="item in options"
-            :key="item.label"
-            :label="item.label"
-            :value="item.value"
-        />
-      </el-select>
-      <span>{{ $t('network.metric') }}：</span>
-    </div>-->
     <el-table
         id="tabTable"
         ref="dataTable"
         :data="tableData"
         class="npm-app-event-table"
+        :row-class-name="rowClassName"
         height="100%"
         empty-text=""
     >
@@ -33,34 +15,33 @@
             <span class="data-column__span">{{ $t(item.label) }}</span>
           </template>
           <template #default="scope" :column="item">
-            <div class="data-app-event-table">
+            <div class="data-app-event-table"  :test-id="`${item.prop}${scope.row.index}`">
               <template v-if="item.prop === 'domain' ||item.prop === 'appName' ||item.prop === 'serverIp' ">
                 <span class="data-applications">{{ scope.row[item.prop] }}</span>
               </template>
-              <template v-else-if="item.prop === 'eventSeverity'">
+              <template v-else-if="item.prop === 'eventSeverity'" >
                 <template v-if="scope.row[item.prop]==='critical'">
-                  <div v-for="item in 5" class="red-dot" :key="item"></div>
+                  <div v-for="item in 5" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
                 </template>
                 <template v-else-if="scope.row[item.prop]==='high'">
-                  <div v-for="item in 4" class="red-dot" :key="item"></div>
+                  <div v-for="item in 4" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
-                  <div class="grey-dot"></div>
+                  <div v-for="item in 1" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${4+item}`"></div>
                 </template>
                 <template v-else-if="scope.row[item.prop]==='medium'">
-                  <div v-for="item in 3" class="red-dot" :key="item"></div>
+                  <div v-for="item in 3" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
-                  <div v-for="item in 2" class="grey-dot" :key="item"></div>
+                  <div v-for="item in 2" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${3+item}`"></div>
                 </template>
                 <template v-else-if="scope.row[item.prop]==='low'">
-                  <div v-for="item in 2" class="red-dot" :key="item"></div>
+                  <div v-for="item in 2" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
-                  <div v-for="item in 3" class="grey-dot" :key="item"></div>
+                  <div v-for="item in 3" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${2+item}`"></div>
                 </template>
                 <template v-else-if="scope.row[item.prop]==='info'">
-                  <div v-for="item in 1" class="red-dot" :key="item"></div>
+                  <div v-for="item in 1" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
-                  <div v-for="item in 4" class="grey-dot" :key="item"></div>
+                  <div v-for="item in 4" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${1+item}`"></div>
                 </template>
                 <span class="data-severity">{{ scope.row[item.prop] }}</span>
               </template>
               <template v-else-if="item.prop === 'eventType'">
-                <!-- <span class="data-eventType" v-for="type in scope.row[item.prop]">{{type}}</span>-->
                 <span class="data-eventType">{{ scope.row[item.prop] }}</span>
               </template>
               <template v-else-if="item.prop === 'count'">
@@ -153,6 +134,10 @@ export default {
     this.init()
   },
   methods: {
+    rowClassName ({ row, rowIndex }) {
+      // 把每一行的索引放进row
+      row.index = rowIndex
+    },
     init () {
       this.toggleLoading(true)
       this.isNoData = false

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

@@ -0,0 +1,260 @@
+import NpmAppEventTable from '@/views/charts2/charts/npm/NpmAppEventTable'
+import { mount } from '@vue/test-utils'
+import axios from 'axios'
+import ElementPlus from "element-plus"
+
+const timeFilter = {
+  dateRangeValue: -1,
+  startTime: 1675558657,
+  endTime: 1675731457
+}
+
+const mockGet = {
+  data: {"status":200,"code":200,"queryKey":"88eeb92e0ddb40c0327db494cfe5c74c","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":752,"result_rows":10},"job":null,"formatType":"json","meta":[{"name":"app_name","type":"string","category":"Dimension"},{"name":"event_severity","type":"string","category":"Dimension"},{"name":"event_type","type":"string","category":"Dimension"},{"name":"count","type":"long","category":"Metric"}],"data":{"resultType":"table","result":[{"appName":"youku","eventSeverity":"info","eventType":"http error","count":6},{"appName":"uplive","eventSeverity":"critical","eventType":"http error","count":5},{"appName":"youku","eventSeverity":"low","eventType":"http error","count":4},{"appName":"apple_hls","eventSeverity":"info","eventType":"http error","count":3},{"appName":"apple_hls","eventSeverity":"low","eventType":"http error","count":3},{"appName":"apple_hls","eventSeverity":"medium","eventType":"http error","count":2},{"appName":"uplive","eventSeverity":"high","eventType":"http error","count":2},{"appName":"windows_update","eventSeverity":"medium","eventType":"http error","count":2},{"appName":"apple_hls","eventSeverity":"critical","eventType":"http error","count":1},{"appName":"cloudflare","eventSeverity":"info","eventType":"http error","count":1}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20app_name%20AS%20app_name%2C%20event_severity%20AS%20event_severity%2C%20event_type%20AS%20event_type%2C%20COUNT%28*%29%20AS%20count%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675580110%20AND%20end_time%20%3C%201675752910%20AND%20entity_type%20%3D%20%27app%27%20GROUP%20BY%20app_name%2Cevent_severity%2Cevent_type%20ORDER%20BY%20count%20DESC%20%20LIMIT%2010%20&format=json&option=real-time","msg":"OK"}
+}
+
+describe('views/charts2/charts/npm/NpmAppEventTable.vue测试', () => {
+  test('Npm 事件：APP事件信息表格 严重程度色块验证', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmAppEventTable, {
+      global: {
+        plugins: [ElementPlus]
+      },
+      propsData: {
+        timeFilter
+      }
+    })
+
+    await new Promise(resolve => setTimeout(() => {
+      // critical
+      let criticalArray = [1,8]
+      for(let index=0; index < criticalArray.length; index++){
+        let rowIndex = criticalArray[index]
+        for(let i=1; i<=5 ; i++){
+          const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
+          expect(eventSeverityRedValue.classes()).toContain('red-dot')
+        }
+      }
+
+      // high
+      let highArray = [6]
+      for(let index=0; index < highArray.length; index++){
+        let rowIndex = highArray[index]
+        for(let i=1; i<=4 ; i++){
+          const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
+          expect(eventSeverityRedValue.classes()).toContain('red-dot')
+        }
+        for(let i=5; i<=5 ; i++){
+          const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
+          expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
+        }
+      }
+
+      // medium
+      let mediumArray = [5,7]
+      for(let index=0; index < mediumArray.length; index++){
+        let rowIndex = mediumArray[index]
+        for(let i=1; i<=3 ; i++){
+          const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
+          expect(eventSeverityRedValue.classes()).toContain('red-dot')
+        }
+        for(let i=4; i<=5 ; i++){
+          const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
+          expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
+        }
+      }
+
+      // low
+      let lowArray = [2,4]
+      for(let index=0; index < lowArray.length; index++){
+        let rowIndex = lowArray[index]
+        for(let i=1; i<=2 ; i++){
+          const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
+          expect(eventSeverityRedValue.classes()).toContain('red-dot')
+        }
+        for(let i=3; i<=5 ; i++){
+          const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
+          expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
+        }
+      }
+
+      // info
+      let infoArray = [0,3,9]
+      for(let index=0; index < infoArray.length; index++){
+        let rowIndex = infoArray[index]
+        for(let i=1; i<=1 ; i++){
+          const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
+          expect(eventSeverityRedValue.classes()).toContain('red-dot')
+        }
+        for(let i=2; i<=5 ; i++){
+          const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
+          expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
+        }
+      }
+      resolve()
+    }, 200))
+  })
+  test('Npm 事件：APP事件信息表格 数据验证(应用数据列)', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmAppEventTable, {
+      global: {
+        plugins: [ElementPlus]
+      },
+      propsData: {
+        timeFilter
+      }
+    })
+
+    await new Promise(resolve => setTimeout(() => {
+      const textNode0 = wrapper.find('[test-id="appName0"]')
+      const textNode1 = wrapper.find('[test-id="appName1"]')
+      const textNode2 = wrapper.find('[test-id="appName2"]')
+      const textNode3 = wrapper.find('[test-id="appName3"]')
+      const textNode4 = wrapper.find('[test-id="appName4"]')
+      const textNode5 = wrapper.find('[test-id="appName5"]')
+      const textNode6 = wrapper.find('[test-id="appName6"]')
+      const textNode7 = wrapper.find('[test-id="appName7"]')
+      const textNode8 = wrapper.find('[test-id="appName8"]')
+      const textNode9 = wrapper.find('[test-id="appName9"]')
+
+      expect(textNode0.text()).toEqual('youku')
+      expect(textNode1.text()).toEqual('uplive')
+      expect(textNode2.text()).toEqual('youku')
+      expect(textNode3.text()).toEqual('apple_hls')
+      expect(textNode4.text()).toEqual('apple_hls')
+      expect(textNode5.text()).toEqual('apple_hls')
+      expect(textNode6.text()).toEqual('uplive')
+      expect(textNode7.text()).toEqual('windows_update')
+      expect(textNode8.text()).toEqual('apple_hls')
+      expect(textNode9.text()).toEqual('cloudflare')
+
+      resolve()
+    }, 200))
+  })
+  test('Npm 事件：APP事件信息表格 数据验证(严重程度数据列)', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmAppEventTable, {
+      global: {
+        plugins: [ElementPlus]
+      },
+      propsData: {
+        timeFilter
+      }
+    })
+
+    await new Promise(resolve => setTimeout(() => {
+      const textNode0 = wrapper.find('[test-id="eventSeverity0"]')
+      const textNode1 = wrapper.find('[test-id="eventSeverity1"]')
+      const textNode2 = wrapper.find('[test-id="eventSeverity2"]')
+      const textNode3 = wrapper.find('[test-id="eventSeverity3"]')
+      const textNode4 = wrapper.find('[test-id="eventSeverity4"]')
+      const textNode5 = wrapper.find('[test-id="eventSeverity5"]')
+      const textNode6 = wrapper.find('[test-id="eventSeverity6"]')
+      const textNode7 = wrapper.find('[test-id="eventSeverity7"]')
+      const textNode8 = wrapper.find('[test-id="eventSeverity8"]')
+      const textNode9 = wrapper.find('[test-id="eventSeverity9"]')
+
+      expect(textNode0.text()).toEqual('info')
+      expect(textNode1.text()).toEqual('critical')
+      expect(textNode2.text()).toEqual('low')
+      expect(textNode3.text()).toEqual('info')
+      expect(textNode4.text()).toEqual('low')
+      expect(textNode5.text()).toEqual('medium')
+      expect(textNode6.text()).toEqual('high')
+      expect(textNode7.text()).toEqual('medium')
+      expect(textNode8.text()).toEqual('critical')
+      expect(textNode9.text()).toEqual('info')
+
+      resolve()
+    }, 200))
+  })
+  test('Npm 事件：APP事件信息表格 数据验证(事件类型数据列)', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmAppEventTable, {
+      global: {
+        plugins: [ElementPlus]
+      },
+      propsData: {
+        timeFilter
+      }
+    })
+
+    await new Promise(resolve => setTimeout(() => {
+      const textNode0 = wrapper.find('[test-id="eventType0"]')
+      const textNode1 = wrapper.find('[test-id="eventType1"]')
+      const textNode2 = wrapper.find('[test-id="eventType2"]')
+      const textNode3 = wrapper.find('[test-id="eventType3"]')
+      const textNode4 = wrapper.find('[test-id="eventType4"]')
+      const textNode5 = wrapper.find('[test-id="eventType5"]')
+      const textNode6 = wrapper.find('[test-id="eventType6"]')
+      const textNode7 = wrapper.find('[test-id="eventType7"]')
+      const textNode8 = wrapper.find('[test-id="eventType8"]')
+      const textNode9 = wrapper.find('[test-id="eventType9"]')
+
+      expect(textNode0.text()).toEqual('http error')
+      expect(textNode1.text()).toEqual('http error')
+      expect(textNode2.text()).toEqual('http error')
+      expect(textNode3.text()).toEqual('http error')
+      expect(textNode4.text()).toEqual('http error')
+      expect(textNode5.text()).toEqual('http error')
+      expect(textNode6.text()).toEqual('http error')
+      expect(textNode7.text()).toEqual('http error')
+      expect(textNode8.text()).toEqual('http error')
+      expect(textNode9.text()).toEqual('http error')
+
+      resolve()
+    }, 200))
+  })
+  test('Npm 事件：APP事件信息表格 数据验证(事件数量数据列)', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NpmAppEventTable, {
+      global: {
+        plugins: [ElementPlus]
+      },
+      propsData: {
+        timeFilter
+      }
+    })
+
+    await new Promise(resolve => setTimeout(() => {
+      const textNode0 = wrapper.find('[test-id="count0"]')
+      const textNode1 = wrapper.find('[test-id="count1"]')
+      const textNode2 = wrapper.find('[test-id="count2"]')
+      const textNode3 = wrapper.find('[test-id="count3"]')
+      const textNode4 = wrapper.find('[test-id="count4"]')
+      const textNode5 = wrapper.find('[test-id="count5"]')
+      const textNode6 = wrapper.find('[test-id="count6"]')
+      const textNode7 = wrapper.find('[test-id="count7"]')
+      const textNode8 = wrapper.find('[test-id="count8"]')
+      const textNode9 = wrapper.find('[test-id="count9"]')
+
+      expect(textNode0.text()).toEqual('6')
+      expect(textNode1.text()).toEqual('5')
+      expect(textNode2.text()).toEqual('4')
+      expect(textNode3.text()).toEqual('3')
+      expect(textNode4.text()).toEqual('3')
+      expect(textNode5.text()).toEqual('2')
+      expect(textNode6.text()).toEqual('2')
+      expect(textNode7.text()).toEqual('2')
+      expect(textNode8.text()).toEqual('1')
+      expect(textNode9.text()).toEqual('1')
+
+      resolve()
+    }, 200))
+  })
+})