CN-869 feat: 单测用例--npm events 近期事件表格

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

@@ -48,7 +48,7 @@
                   <div v-else-if="scope.row.bytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
                     <i class="cn-icon-decline cn-icon"></i>&nbsp;
                     <span v-if="scope.row.bytesRateChainRatio >= -5">
-                        {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
+                        {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replace(/-/g, '')}}
                       </span>
                     <span v-else>>500.00%</span>
                   </div>
@@ -71,7 +71,7 @@
                   <div v-else-if="scope.row.outboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
                     <i class="cn-icon-decline cn-icon"></i>&nbsp;
                     <span v-if="scope.row.outboundBytesRateChainRatio >= -5">
-                        {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
+                        {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replace(/-/g, '')}}
                       </span>
                     <span v-else>>500.00%</span>
                   </div>
@@ -94,7 +94,7 @@
                   <div v-else-if="scope.row.inboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
                     <i class="cn-icon-decline cn-icon"></i>&nbsp;
                     <span v-if="scope.row.inboundBytesRateChainRatio >= -5" :test-id="`inbound-${scope.row.appSubcategory}`">
-                        {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
+                        {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replace(/-/g, '')}}
                       </span>
                     <span v-else :test-id="`inbound-${scope.row.appSubcategory}`">>500.00%</span>
                   </div>
@@ -378,6 +378,9 @@ export default {
   },
   mounted () {
     this.init()
+  },
+  beforeUnmount () {
+    this.unitConvert = null
   }
 }
 </script>

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

@@ -21,15 +21,15 @@
           <template  #default="scope" :column="item">
             <div class="data-recent-table">
               <template v-if="item.prop === 'eventSeverity'">
-                <span class="data-recent-table-severity" :class="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+                <span class="data-recent-table-severity" :class="scope.row[item.prop]" :test-id="`eventSeverity-${scope.row.eventSeverity}-${scope.$index}`">{{scope.row[item.prop]}}</span>
               </template>
               <template v-else-if="item.prop === 'eventKey'">
-                <span class="data-recent-table-entity click-active" @click="jumpPage(scope.row)">{{splitEventKey(scope.row[item.prop])}}</span>
+                <span class="data-recent-table-entity click-active" @click="jumpPage(scope.row)" :test-id="`eventKey-${splitEventKey(scope.row.eventKey)}-${scope.$index}`">{{splitEventKey(scope.row[item.prop])}}</span>
               </template>
               <template v-else-if="item.prop === 'eventType'">
-                <span class="data-recent-table-eventType">{{scope.row[item.prop]}}</span>
+                <span class="data-recent-table-eventType" :test-id="`eventType-${scope.row.eventType}-${scope.$index}`">{{scope.row[item.prop]}}</span>
               </template>
-              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+              <span v-else-if="scope.row[item.prop]" :test-id="`startTime-${scope.row.startTime}-${scope.$index}`">{{scope.row[item.prop]}}</span>
               <span v-else>-</span>
             </div>
           </template>
@@ -48,13 +48,13 @@
 </template>
 
 <script>
-import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond, dateFormatByAppearance } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import ChartError from '@/components/common/Error'
+import axios from 'axios'
 
 export default {
   name: 'NpmRecentEvents',
@@ -99,7 +99,7 @@ export default {
         endTime: getSecond(this.timeFilter.endTime),
         limit: 8
       }
-      if (condition.length > 1 && this.dimensionType) {
+      if (condition && condition.length > 1 && this.dimensionType) {
         params.param = condition[1]
         params.type = this.dimensionType
         if (params.type === 'serverIp' || params.type === 'clientIp') params.type = 'ip'
@@ -114,7 +114,8 @@ export default {
         url = api.npm.events.recentEvents
       }
       this.toggleLoading(true)
-      get(url, params).then(res => {
+      axios.get(url, { params: params }).then(res => {
+        res = res.data
         if (res.code === 200) {
           this.showError = false
           this.isNoData = res.data.result.length === 0

src/views/charts2/charts/npm/localComponents/SingleValue.vue

@@ -1,125 +0,0 @@
-<template>
-  <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" :test-id="`singleValueContent${index}`">
-        {{ unitConvert(npm.Avg, unitTypes.time).join(' ') }}
-      </div>
-      <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" :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 :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" :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 :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" :test-id="`singleValueTrendIcon${index}`"></i>
-      </div>
-      <div v-else></div>
-    </div>
-
-    <div class="single-value__circle">
-      <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" :test-id="`singleValueP99${index}`">
-        <span v-if="index ===0 || index ===1 || index ===2">
-          P99:{{ unitConvert(npm.P99, unitTypes.time).join(' ') }}
-        </span>
-        <span v-else>
-          P99:{{ unitConvert(npm.P99, unitTypes.percent).join(' ') }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { unitTypes } from '@/utils/constants'
-import unitConvert from '@/utils/unit-convert'
-import ChartError from '@/components/common/Error'
-
-export default {
-  name: 'SingleValue',
-  components: { ChartError },
-  props: {
-    npmNetworkName: Array,
-    npmNetworkData: Array
-  },
-  data () {
-    return {
-      unitTypes,
-      unitConvert,
-      newNpmNetworkData: [] // 整合处理传过来的数据列表
-    }
-  },
-  watch: {
-    npmNetworkData: {
-      deep: true,
-      handler () {
-        this.initData()
-      }
-    }
-  },
-  mounted () {
-    this.initData()
-  },
-  methods: {
-    /**
-    * 初始化数据
-    */
-    initData () {
-      // 传过来的数据
-      const npmNetworkData = this.npmNetworkData
-      // 处理数据后的数组
-      const dealList = []
-
-      if (npmNetworkData !== undefined && npmNetworkData.length > 0) {
-        npmNetworkData.forEach((item) => {
-          const tempObj = {}
-          for (const i in item) {
-            if (item.msg || item.message) {
-              // 为了兼容字段为msg的情况
-              tempObj.message = item.msg ? item.msg : item.message
-            } else {
-              // 将含有avg、p90等关键字使用avg、p90来代替，形成统一属性
-              if (i.indexOf('Avg') > -1) {
-                tempObj.Avg = item[i]
-              } else if (i.indexOf('P50') > -1) {
-                tempObj.P50 = item[i]
-              } else if (i.indexOf('P90') > -1) {
-                tempObj.P90 = item[i]
-              } else if (i.indexOf('P95') > -1) {
-                tempObj.P95 = item[i]
-              } else if (i.indexOf('P99') > -1) {
-                tempObj.P99 = item[i]
-              }
-              tempObj.value = item.value
-            }
-          }
-          dealList.push(tempObj)
-        })
-        this.newNpmNetworkData = dealList
-      }
-    }
-  }
-}
-</script>

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

@@ -0,0 +1,162 @@
+import NpmRecentEvents from '@/views/charts2/charts/npm/NpmRecentEvents'
+import { mount } from '@vue/test-utils'
+import axios from 'axios'
+import ElementPlus from 'element-plus'
+// 未下钻
+const mockGet = {
+  data: {"status":200,"code":200,"queryKey":"68d8aa5867b08b926b5bd38c36add9e5","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":550,"result_rows":5},"job":null,"formatType":"json","meta":[{"name":"event_id","type":"long","category":"Metric"},{"name":"event_severity","type":"string","category":"Metric"},{"name":"event_key","type":"string","category":"Metric"},{"name":"event_type","type":"string","category":"Metric"}],"data":{"resultType":"table","result":[{"eventId":1173511643475208192,"eventSeverity":"critical","eventKey":"114.114.114.114 dns error","eventType":"dns error"},{"eventId":1173504415263352832,"eventSeverity":"high","eventKey":"116.178.78.241 http error","eventType":"http error"},{"eventId":1173492761289025537,"eventSeverity":"medium","eventKey":"223.6.6.6 dns error","eventType":"dns error"},{"eventId":1173489002890651648,"eventSeverity":"low","eventKey":"114.114.114.114 dns error","eventType":"dns error"},{"eventId":1173482380537620480,"eventSeverity":"info","eventKey":"1.1.1.2 dns error","eventType":"http error"},{"eventId":1173482380537620481,"eventSeverity":"critical","eventKey":"1.1.1.2 dns error","eventType":"dns error"}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20event_id%20AS%20event_id%2Cevent_severity%20AS%20event_severity%2C%20event_key%20AS%20event_key%2C%20event_type%20AS%20event_type%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675227528%20AND%20end_time%20%3C%201675231128%20ORDER%20BY%20start_time%20DESC%20%20LIMIT%208%20&format=json&option=real-time","msg":"OK"}
+}
+
+// 下钻
+const mockGet1 = {
+  data: {"status":200,"code":200,"queryKey":"fc0bd92bf3b48a37310d5c004d8b7a7b","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":689,"result_rows":7},"job":null,"formatType":"json","meta":[{"name":"event_id","type":"long","category":"Metric"},{"name":"event_severity","type":"string","category":"Metric"},{"name":"event_type","type":"string","category":"Metric"},{"name":"start_time","type":"long","category":"Metric"}],"data":{"resultType":"table","result":[{"eventId":1132790825086844928,"eventSeverity":"critical","eventType":"http error","startTime":1672802700},{"eventId":1132132403379142657,"eventSeverity":"high","eventType":"dns error","startTime":1672763400},{"eventId":1131441760155688960,"eventSeverity":"low","eventType":"dns error","startTime":1672722300},{"eventId":1131411523384598528,"eventSeverity":"medium","eventType":"http error","startTime":1672720500},{"eventId":1131390214323789824,"eventSeverity":"info","eventType":"dns error","startTime":1672719300},{"eventId":1131306200132968450,"eventSeverity":"critical","eventType":"http error","startTime":1672714200}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20event_id%20AS%20event_id%2Cevent_severity%20AS%20event_severity%2C%20event_type%20AS%20event_type%2C%20start_time%20AS%20start_time%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201672675200%20AND%20start_time%20%3C%201677513600%20AND%20server_ip%20%3D%20%27116.178.236.216%27%20ORDER%20BY%20start_time%20DESC&format=json&option=real-time","msg":"OK"}
+}
+
+const query = {
+  curTab: "country",
+  dimensionType: "ip",
+  fourthMenu: "116.178.214.84",
+  fourthPanel: "8",
+  networkOverviewBeforeTab: "ip",
+  panelName: "116.178.214.84",
+  queryCondition: "common_client_ip='116.178.214.84' OR common_server_ip='116.178.214.84'",
+  t: "1675236779453",
+  tabIndex: "1",
+  tabOperationBeforeType: "",
+  tabOperationType: "4",
+  thirdMenu: "network.ips",
+  thirdPanel: "12"
+}
+
+const timeFilter = {
+  dateRangeValue: -1,
+  startTime: 1675043912,
+  endTime: 1675047512
+}
+
+describe('views/charts2/charts/npm/NpmRecentEvents.vue测试', () => {
+  test('npm events 近期事件表格 未下钻', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟 axios 返回数据
+    axios.get.mockResolvedValue(mockGet)
+
+    const wrapper = mount(NpmRecentEvents, {
+      propsData: {
+        timeFilter
+      },
+      global: {
+        plugins: [ElementPlus]
+      }
+    })
+    await new Promise(resolve => setTimeout(() => {
+      const severity0 = wrapper.get('[test-id="eventSeverity-critical-0"]')
+      const severity1 = wrapper.get('[test-id="eventSeverity-high-1"]')
+      const severity2 = wrapper.get('[test-id="eventSeverity-medium-2"]')
+      const severity3 = wrapper.get('[test-id="eventSeverity-low-3"]')
+      const severity4 = wrapper.get('[test-id="eventSeverity-info-4"]')
+      const severity5 = wrapper.get('[test-id="eventSeverity-critical-5"]')
+
+      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')
+      expect(severity5.text()).toEqual('critical')
+
+      expect(severity0.classes()).toContain('critical')
+      expect(severity1.classes()).toContain('high')
+      expect(severity2.classes()).toContain('medium')
+      expect(severity3.classes()).toContain('low')
+      expect(severity4.classes()).toContain('info')
+      expect(severity5.classes()).toContain('critical')
+
+      const eventKey0 = wrapper.get('[test-id="eventKey-114.114.114.114-0"]')
+      const eventKey1 = wrapper.get('[test-id="eventKey-116.178.78.241-1"]')
+      const eventKey2 = wrapper.get('[test-id="eventKey-223.6.6.6-2"]')
+      const eventKey3 = wrapper.get('[test-id="eventKey-114.114.114.114-3"]')
+      const eventKey4 = wrapper.get('[test-id="eventKey-1.1.1.2-4"]')
+
+      expect(eventKey0.text()).toEqual('114.114.114.114')
+      expect(eventKey1.text()).toEqual('116.178.78.241')
+      expect(eventKey2.text()).toEqual('223.6.6.6')
+      expect(eventKey3.text()).toEqual('114.114.114.114')
+      expect(eventKey4.text()).toEqual('1.1.1.2')
+
+      const eventType0 = wrapper.get('[test-id="eventType-dns error-0"]')
+      const eventType1 = wrapper.get('[test-id="eventType-http error-1"]')
+      const eventType2 = wrapper.get('[test-id="eventType-dns error-2"]')
+      const eventType3 = wrapper.get('[test-id="eventType-dns error-3"]')
+      const eventType4 = wrapper.get('[test-id="eventType-http error-4"]')
+
+      expect(eventType0.text()).toEqual('dns error')
+      expect(eventType1.text()).toEqual('http error')
+      expect(eventType2.text()).toEqual('dns error')
+      expect(eventType3.text()).toEqual('dns error')
+      expect(eventType4.text()).toEqual('http error')
+
+      resolve()
+    }, 200))
+  })
+  test('npm events 近期事件表格 下钻', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: query })
+    // 模拟 axios 返回数据
+    axios.get.mockResolvedValue(mockGet1)
+
+    const wrapper = mount(NpmRecentEvents, {
+      propsData: {
+        timeFilter
+      },
+      global: {
+        plugins: [ElementPlus]
+      }
+    })
+    await new Promise(resolve => setTimeout(() => {
+      const severity0 = wrapper.get('[test-id="eventSeverity-critical-0"]')
+      const severity1 = wrapper.get('[test-id="eventSeverity-high-1"]')
+      const severity2 = wrapper.get('[test-id="eventSeverity-low-2"]')
+      const severity3 = wrapper.get('[test-id="eventSeverity-medium-3"]')
+      const severity4 = wrapper.get('[test-id="eventSeverity-info-4"]')
+      const severity5 = wrapper.get('[test-id="eventSeverity-critical-5"]')
+
+      expect(severity0.text()).toEqual('critical')
+      expect(severity1.text()).toEqual('high')
+      expect(severity2.text()).toEqual('low')
+      expect(severity3.text()).toEqual('medium')
+      expect(severity4.text()).toEqual('info')
+      expect(severity5.text()).toEqual('critical')
+
+      expect(severity0.classes()).toContain('critical')
+      expect(severity1.classes()).toContain('high')
+      expect(severity2.classes()).toContain('low')
+      expect(severity3.classes()).toContain('medium')
+      expect(severity4.classes()).toContain('info')
+      expect(severity5.classes()).toContain('critical')
+
+      const eventType0 = wrapper.get('[test-id="eventType-http error-0"]')
+      const eventType1 = wrapper.get('[test-id="eventType-dns error-1"]')
+      const eventType2 = wrapper.get('[test-id="eventType-dns error-2"]')
+      const eventType3 = wrapper.get('[test-id="eventType-http error-3"]')
+      const eventType4 = wrapper.get('[test-id="eventType-dns error-4"]')
+
+      expect(eventType0.text()).toEqual('http error')
+      expect(eventType1.text()).toEqual('dns error')
+      expect(eventType2.text()).toEqual('dns error')
+      expect(eventType3.text()).toEqual('http error')
+      expect(eventType4.text()).toEqual('dns error')
+
+      const startTime0 = wrapper.get('[test-id="startTime-2023-01-04T11:25:00+08:00-0"]')
+      const startTime1 = wrapper.get('[test-id="startTime-2023-01-04T00:30:00+08:00-1"]')
+      const startTime2 = wrapper.get('[test-id="startTime-2023-01-03T13:05:00+08:00-2"]')
+      const startTime3 = wrapper.get('[test-id="startTime-2023-01-03T12:35:00+08:00-3"]')
+      const startTime4 = wrapper.get('[test-id="startTime-2023-01-03T12:15:00+08:00-4"]')
+
+      expect(startTime0.text()).toEqual('2023-01-04T11:25:00+08:00')
+      expect(startTime1.text()).toEqual('2023-01-04T00:30:00+08:00')
+      expect(startTime2.text()).toEqual('2023-01-03T13:05:00+08:00')
+      expect(startTime3.text()).toEqual('2023-01-03T12:35:00+08:00')
+      expect(startTime4.text()).toEqual('2023-01-03T12:15:00+08:00')
+
+      resolve()
+    }, 300))
+  })
+})

test/views/charts2/charts/npm/localComponents/SingleValue.test.js

@@ -1,133 +0,0 @@
-import SingleValue from '@/views/charts2/charts/npm/localComponents/SingleValue'
-import { mount } from '@vue/test-utils'
-
-const npmNetworkName = [
-  { name: 'networkAppPerformance.tcpConnectionEstablishLatency' },
-  { name: 'networkAppPerformance.httpResponse' },
-  { name: 'networkAppPerformance.sslResponseLatency' },
-  { name: 'networkAppPerformance.packetLoss' },
-  { name: 'overall.packetRetrans' }
-]
-const npmNetworkData = [
-  {
-    "establishLatencyMsAvg": 90,
-    "establishLatencyMsP50": 49,
-    "establishLatencyMsP90": 91,
-    "establishLatencyMsP95": 164,
-    "establishLatencyMsP99": 727,
-    "value": -0.01098901098901099
-  },
-  {
-    "httpResponseLatencyAvg": 178,
-    "httpResponseLatencyP50": 57,
-    "httpResponseLatencyP90": 121,
-    "httpResponseLatencyP95": 256,
-    "httpResponseLatencyP99": 1616,
-    "value": 0.017142857142857144
-  },
-  {
-    "sslConLatencyAvg": 0,
-    "sslConLatencyP50": 0,
-    "sslConLatencyP90": 0,
-    "sslConLatencyP95": 0,
-    "sslConLatencyP99": 0,
-    "value": "-"
-  },
-  {
-    "tcpLostlenPercentAvg": 0.0088,
-    "tcpLostlenPercentP50": 0.0057,
-    "tcpLostlenPercentP90": 0.0184,
-    "tcpLostlenPercentP95": 0.0226,
-    "tcpLostlenPercentP99": 0.0397,
-    "value": 0.10000000000000005
-  },
-  {
-    "pktRetransPercentAvg": 0.0388,
-    "pktRetransPercentP50": 0.0341,
-    "pktRetransPercentP90": 0.0614,
-    "pktRetransPercentP95": 0.0691,
-    "pktRetransPercentP99": 0.0853,
-    "value": 0
-  }
-]
-
-describe('views/charts2/charts/npm/localComponents/SingleValue.vue测试', () => {
-  test('Npm概况信息：服务质量图', async () => {
-    // 加载vue组件，获得实例
-    const wrapper = mount(SingleValue, {
-      propsData: {
-        npmNetworkName,
-        npmNetworkData
-      }
-    })
-    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
-    await wrapper.vm.$nextTick(() => {
-      const textNode0 = wrapper.get('[test-id="singleValueContent0"]')
-      const textNode1 = wrapper.get('[test-id="singleValueContent1"]')
-      const textNode2 = wrapper.get('[test-id="singleValueContent2"]')
-      const textNode3 = wrapper.get('[test-id="singleValueContent3"]')
-      const textNode4 = wrapper.get('[test-id="singleValueContent4"]')
-
-      expect(textNode0.text()).toEqual('90 ms')
-      expect(textNode1.text()).toEqual('178 ms')
-      expect(textNode2.text()).toEqual('0 ms')
-      expect(textNode3.text()).toEqual('0.88 %')
-      expect(textNode4.text()).toEqual('3.88 %')
-
-      const trendIconNode0 = wrapper.get('[test-id="singleValueTrendIcon0"]')
-      const trendIconNode1 = wrapper.get('[test-id="singleValueTrendIcon1"]')
-      /*
-       * 当元素存在的时候，find 和 get 是一样的；
-       * 当找不到元素的时候:
-       *    (1) find 会返回 null, 不会报错，case 通过
-       *    (2) get 会报错，case 失败
-       * 一般总是使用 get ，除非想要判断一些元素不存在的时候，使用 find；
-       */
-      const trendIconNode2 = wrapper.find('[test-id="singleValueTrendIcon2"]')
-      const trendIconNode3 = wrapper.get('[test-id="singleValueTrendIcon3"]')
-      const trendIconNode4 = wrapper.get('[test-id="singleValueTrendIcon4"]')
-
-      expect(trendIconNode0.classes()).toContain('cn-icon-decline')
-      expect(trendIconNode1.classes()).toContain('cn-icon-rise1')
-      expect(trendIconNode2 === null)
-      expect(trendIconNode3.classes()).toContain('cn-icon-rise1')
-      expect(trendIconNode4.classes()).toContain('cn-icon-constant')
-
-      const trendValueNode0 = wrapper.get('[test-id="singleValueTrendValue0"]')
-      const trendValueNode1 = wrapper.get('[test-id="singleValueTrendValue1"]')
-      const trendValueNode2 = wrapper.find('[test-id="singleValueTrendValue2"]')
-      const trendValueNode3 = wrapper.get('[test-id="singleValueTrendValue3"]')
-      const trendValueNode4 = wrapper.find('[test-id="singleValueTrendValue4"]')
-
-      expect(trendValueNode0.text()).toEqual('-1.10%')
-      expect(trendValueNode1.text()).toEqual('1.71%')
-      expect(trendValueNode2 === null)
-      expect(trendValueNode3.text()).toEqual('10.00%')
-      expect(trendValueNode4 === null)
-
-      const p95Node0 = wrapper.get('[test-id="singleValueP950"]')
-      const p95Node1 = wrapper.get('[test-id="singleValueP951"]')
-      const p95Node2 = wrapper.get('[test-id="singleValueP952"]')
-      const p95Node3 = wrapper.get('[test-id="singleValueP953"]')
-      const p95Node4 = wrapper.get('[test-id="singleValueP954"]')
-
-      expect(p95Node0.text()).toEqual('P95:164 ms')
-      expect(p95Node1.text()).toEqual('P95:256 ms')
-      expect(p95Node2.text()).toEqual('P95:0 ms')
-      expect(p95Node3.text()).toEqual('P95:2.26 %')
-      expect(p95Node4.text()).toEqual('P95:6.91 %')
-
-      const p99Node0 = wrapper.get('[test-id="singleValueP990"]')
-      const p99Node1 = wrapper.get('[test-id="singleValueP991"]')
-      const p99Node2 = wrapper.get('[test-id="singleValueP992"]')
-      const p99Node3 = wrapper.get('[test-id="singleValueP993"]')
-      const p99Node4 = wrapper.get('[test-id="singleValueP994"]')
-
-      expect(p99Node0.text()).toEqual('P99:727 ms')
-      expect(p99Node1.text()).toEqual('P99:1.62 s')
-      expect(p99Node2.text()).toEqual('P99:0 ms')
-      expect(p99Node3.text()).toEqual('P99:3.97 %')
-      expect(p99Node4.text()).toEqual('P99:8.53 %')
-    })
-  })
-})