fix: 完善link流量流向网格图单测用例

src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue

@@ -98,7 +98,7 @@ export default {
                 // 分数低于3分，赋红点
                 d.score = this.localComputeScore(d)
 
-                d.scoreLow3 = d.score < 3
+                d.scoreLow3 = d.score < 3 || d.score === '-'
 
                 if (data) {
                   const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
@@ -185,7 +185,7 @@ export default {
                 // 分数低于3分，赋红点
                 d.score = this.localComputeScore(d)
 
-                d.scoreLow3 = d.score < 3
+                d.scoreLow3 = d.score < 3 || d.score === '-'
 
                 if (data) {
                   const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)

src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue

@@ -26,8 +26,8 @@
           <el-popover :width="item.popoverWidth" placement="right" trigger="click">
             <template #reference>
               <div class="data-item data-item__hover">
-                <div :class="item.usageMore90 ? 'data-item__point-red':'data-item__point'"></div>
+                <div :test-id="`usagePoint${gridData.length}-${index2+1}-${index3+1}`" :class="item.usageMore90 ? 'data-item__point-red':'data-item__point'">{</div>
-                <div :class="item.scoreLow3 ? 'data-item__point-red':'data-item__point'"></div>
+                <div :test-id="`scorePoint${gridData.length}-${index2+1}-${index3+1}`" :class="item.scoreLow3 ? 'data-item__point-red':'data-item__point'"></div>
               </div>
             </template>
 

test/views/charts2/charts/linkMonitor/LinkDirectionGrid.test.js

@@ -2,6 +2,7 @@ import LinkDirectionGrid from '@/views/charts2/charts/linkMonitor/LinkDirectionG
 import { mount } from '@vue/test-utils'
 import axios from 'axios'
 import { mockGet1, mockGet2, linkInfoData } from './LinkDirectionGridData'
+import ElementPlus from 'element-plus'
 
 const linkInfo = JSON.stringify(linkInfoData)
 const timeFilter = {
@@ -10,8 +11,6 @@ const timeFilter = {
   endTime: 1673247600000
 }
 
-var wrapper = null
-
 /**
  * 进行axios请求，并挂载vue实例
  * @param list1
@@ -34,18 +33,18 @@ function axiosPostAndMounted (list1, list2) {
 
   // 模拟localStorage获取数据
   jest.spyOn(localStorage.__proto__, 'getItem').mockImplementation(key => linkInfo)
-
-  // 加载vue组件，获得实例
-  wrapper = mount(LinkDirectionGrid, {
-    propsData: {
-      timeFilter
-    }
-  })
 }
 
 describe('views/charts2/charts/linkMonitor/LinkBlock.vue测试', () => {
-  test('鼠标移动到链路网格图第5行第3列，下一跳网格图第3行第1列，测试界面内容', async () => {
+  test('鼠标移动到链路网格图第5行第3列，下一跳网格图第3行第1列，测试链路编号和悬浮框dom内容', async () => {
     axiosPostAndMounted()
+    // 加载vue组件，获得实例
+    // 如需加载悬浮框dom，则此处不需要挂载Element，挂载Element的话，需要触发hover事件获取悬浮框dom
+    const wrapper = mount(LinkDirectionGrid, {
+      propsData: {
+        timeFilter
+      }
+    })
 
     await new Promise(resolve => setTimeout(() => {
       /**
@@ -120,52 +119,45 @@ describe('views/charts2/charts/linkMonitor/LinkBlock.vue测试', () => {
       resolve()
     }, 200))
   })
-  test('鼠标移动到链路网格图第5行第3列，下一跳网格图第3行第1列，测试total和上下行流量占比', async () => {
+  test('链路网格图第5行第3列，下一跳网格图第3行第1列，测试网格颜色随评分和流量占比变化', async () => {
     const list1 = JSON.parse(JSON.stringify(mockGet1))
     const list2 = JSON.parse(JSON.stringify(mockGet2))
-    // 5行3列的位置顺序为1053，因为数组index从0开始，在数组中键值即为43
+    // 修改链路评分为-，使得网格颜色为前绿后红
-    // totalBitsRate原为576935.76，即576.94Kbps，修改后为57.69Mbps
+    list1.data.data.result[43].establishLatencyMs = null
-    list1.data.data.result[43].totalBitsRate = 57693576
+    list1.data.data.result[43].httpResponseLatency = null
-    list1.data.data.result[43].egressBitsRate = 100000000000
+    list1.data.data.result[43].sslConLatency = null
-    list1.data.data.result[43].ingressBitsRate = 0
+    list1.data.data.result[43].tcpLostlenPercent = null
+    list1.data.data.result[43].pktRetransPercent = null
 
-    // 下一跳是3行3列，所以3行1列位置是7，键值为6
+    // 修改下一跳的流量占比为100%，使得网格颜色为前红后绿
-    list2.data.data.result[6].totalBitsRate = 87726000
     list2.data.data.result[6].egressBitsRate = 0
     list2.data.data.result[6].ingressBitsRate = 100000000000
     axiosPostAndMounted(list1, list2)
 
+    const wrapper = mount(LinkDirectionGrid, {
+      global: {
+        plugins: [ElementPlus]
+      },
+      propsData: {
+        timeFilter
+      }
+    })
+
     await new Promise(resolve => setTimeout(() => {
       /**
        * 此为左侧链路网格图dom
        */
-      // 出入流量占比dom，egressUsage10-5-3，表示第5行第3列的上行流量
+      const scorePoint1053 = wrapper.find('[test-id="scorePoint10-5-3"]')
-      const egressUsage1053 = wrapper.get('[test-id="egressUsage10-5-3"]')
+      const usagePoint1053 = wrapper.find('[test-id="usagePoint10-5-3"]')
-      const ingressUsage1053 = wrapper.get('[test-id="ingressUsage10-5-3"]')
+      expect(scorePoint1053.classes()).toContain('data-item__point-red')
-      // 总流量
+      expect(usagePoint1053.classes()).toContain('data-item__point')
-      const totalBitsRate1053 = wrapper.get('[test-id="totalBitsRate10-5-3"]')
-      // 评分
-      const score1053 = wrapper.get('[test-id="score10-5-3"]')
-
-      expect(egressUsage1053.text()).toBe('100.00%')
-      expect(ingressUsage1053.text()).toBe('0%')
-      expect(totalBitsRate1053.text()).toBe('57.69Mbps')
-      expect(score1053.text()).toBe('6')
-
       /**
        * 此为右侧下一跳网络网格图dom
        */
-      const egressUsage331 = wrapper.find('[test-id="egressUsage3-3-1"]')
+      const usagePoint331 = wrapper.find('[test-id="usagePoint3-3-1"]')
-      const ingressUsage331 = wrapper.find('[test-id="ingressUsage3-3-1"]')
+      const scorePoint331 = wrapper.find('[test-id="scorePoint3-3-1"]')
-      // 总流量
+      expect(usagePoint331.classes()).toContain('data-item__point-red')
-      const totalBitsRate331 = wrapper.find('[test-id="totalBitsRate3-3-1"]')
+      expect(scorePoint331.classes()).toContain('data-item__point')
-      // 评分
-      const score331 = wrapper.find('[test-id="score3-3-1"]')
-
-      expect(egressUsage331.text()).toBe('0%')
-      expect(ingressUsage331.text()).toBe('100.00%')
-      expect(totalBitsRate331.text()).toBe('87.73Mbps')
-      expect(score331.text()).toBe('5')
       resolve()
     }, 200))
   })