cyber-narrator-cn-ui/test/views/charts2/charts/linkMonitor/LinkDirectionGrid.test.js

import LinkDirectionGrid from '@/views/charts2/charts/linkMonitor/LinkDirectionGrid'
import { mount } from '@vue/test-utils'
import axios from 'axios'
import ElementPlus from 'element-plus'

const mockGet1 = {
  data: { status: 200, code: 200, queryKey: '610b4a743fa62b58cf5d70dab84b8b6f', success: true, message: null, statistics: { elapsed: 5, rows_read: 14027, bytes_read: 1416727, result_size: 25460, result_rows: 101 }, job: null, formatType: 'json', meta: [{ name: 'egress_link_id', type: 'long', category: 'Dimension' }, { name: 'ingress_link_id', type: 'long', category: 'Dimension' }, { name: 'total_bytes', type: 'long', category: 'Metric' }, { name: 'egress_bytes', type: 'long', category: 'Metric' }, { name: 'ingress_bytes', type: 'long', category: 'Metric' }, { name: 'establish_latency_ms', type: 'double', category: 'Metric' }, { name: 'http_response_latency', type: 'double', category: 'Metric' }, { name: 'ssl_con_latency', type: 'double', category: 'Metric' }, { name: 'tcp_lostlen_percent', type: 'double', category: 'Metric' }, { name: 'pkt_retrans_percent', type: 'double', category: 'Metric' }], data: { resultType: 'table', result: [{ egressLinkId: '0', ingressLinkId: '0', totalBytes: '434765502450', totalBitsRate: 966145560.96, egressBytes: '363544351329', egressBitsRate: 807876336.32, ingressBytes: '41292202303', ingressBitsRate: 91760449.6, establishLatencyMs: 90.0669, httpResponseLatency: 184.3881, sslConLatency: 0, tcpLostlenPercent: 0.0101, pktRetransPercent: 0.0226 }, { egressLinkId: '256', ingressLinkId: '257', totalBytes: '534995002', totalBitsRate: 1188877.76, egressBytes: '447206140', egressBitsRate: 993791.44, ingressBytes: '36435444', ingressBitsRate: 80967.68, establishLatencyMs: 75.5612, httpResponseLatency: 240.396, sslConLatency: 0, tcpLostlenPercent: 0.0029, pktRetransPercent: 0.0111, usageMore90: false, score: 6, scoreLow3: false }, { egressLinkId: '512', ingressLinkId: '257', totalBytes: '382047632', totalBitsRate: 848994.72, egressBytes: '352856271', egressBitsRate: 784125.04, ingressBytes: '18385230', ingressBitsRate: 40856.08, establishLatencyMs: 98.59, httpResponseLatency: 100.5516, sslConLatency: 0, tcpLostlenPercent: 0.0127, pktRetransPercent: 0.0137, usageMore90: false, score: 6, scoreLow3: false }, { egressLinkId: '768', ingressLinkId: '257', totalBytes: '301459240', totalBitsRate: 669909.44, egressBytes: '245480754', egressBitsRate: 545512.8, ingressBytes: '34220091', ingressBitsRate: 76044.64, establishLatencyMs: 108.9343, httpResponseLatency: 160.9725, sslConLatency: 0, tcpLostlenPercent: 0.0022, pktRetransPercent: 0.0173, usageMore90: false, score: 5, scoreLow3: false }, { egressLinkId: '1024', ingressLinkId: '257', totalBytes: '428032397', totalBitsRate: 951183.12, egressBytes: '376399588', egressBitsRate: 836443.52, ingressBytes: '37870336', ingressBitsRate: 84156.32, establishLatencyMs: 88.6706, httpResponseLatency: 131.524, sslConLatency: 0, tcpLostlenPercent: 0.0019, pktRetransPercent: 0.0126, usageMore90: false, score: 6, scoreLow3: false }, { egressLinkId: '1280', ingressLinkId: '257', totalBytes: '593122664', totalBitsRate: 1318050.4, egressBytes: '555791176', egressBitsRate: 1235091.52, ingressBytes: '18981210', ingressBitsRate: 42180.48, establishLatencyMs: 101.3537, httpResponseLatency: 254.3362, sslConLatency: 0, tcpLostlenPercent: 0.0044, pktRetransPercent: 0.0135, usageMore90: false, score: 5, scoreLow3: false }, { egressLinkId: '1536', ingressLinkId: '257', totalBytes: '377183386', totalBitsRate: 838185.28, egressBytes: '327968719', egressBitsRate: 728819.36, ingressBytes: '24566904', ingressBitsRate: 54593.12, establishLatencyMs: 79.7386, httpResponseLatency: 95.8814, sslConLatency: 0, tcpLostlenPercent: 0.012, pktRetransPercent: 0.0086, usageMore90: false, score: 6, scoreLow3: false }, { egressLinkId: '1792', ingressLinkId: '257', totalBytes: '301778612', totalBitsRate: 670619.12, egressBytes: '280107213', egressBitsRate: 622460.48, ingressBytes: '10638455', ingressBitsRate: 23641.04, establishLatencyMs: 91.1497, httpResponseLatency: 152.3226, sslConLatency: 0, tcpLostlenPercent: 0.0013, pktRetransPercent: 0.0181, usageMore90: false, score: 5, scoreLow3: false }, { egressLinkId: '2048', ingressLinkId: '257', totalBytes: '412927429', totalBitsRate: 917616.48, egressBytes: 
}
const mockGet2 = {
  data: { status: 200, code: 200, queryKey: '3b148e81873eb2621bbd77fffbd0a008', success: true, message: null, statistics: { elapsed: 4, rows_read: 14027, bytes_read: 1611437, result_size: 2393, result_rows: 9 }, job: null, formatType: 'json', meta: [{ name: 'egress_link_direction', type: 'string', category: 'Dimension' }, { name: 'ingress_link_direction', type: 'string', category: 'Dimension' }, { name: 'total_bytes', type: 'long', category: 'Metric' }, { name: 'egress_bytes', type: 'long', category: 'Metric' }, { name: 'ingress_bytes', type: 'long', category: 'Metric' }, { name: 'establish_latency_ms', type: 'double', category: 'Metric' }, { name: 'http_response_latency', type: 'double', category: 'Metric' }, { name: 'ssl_con_latency', type: 'double', category: 'Metric' }, { name: 'tcp_lostlen_percent', type: 'double', category: 'Metric' }, { name: 'pkt_retrans_percent', type: 'double', category: 'Metric' }], data: { resultType: 'table', result: [{ egressLinkDirection: '太原', ingressLinkDirection: '太原', totalBytes: '16535105415', totalBitsRate: 36744678.72, egressBytes: '14184016558', egressBitsRate: 31520036.8, ingressBytes: '1688597600', ingressBitsRate: 3752439.12, establishLatencyMs: 88.0242, httpResponseLatency: 203.7159, sslConLatency: 0, tcpLostlenPercent: 0.0054, pktRetransPercent: 0.0166, usageMore90: false, score: 5, scoreLow3: false }, { egressLinkDirection: '西安', ingressLinkDirection: '太原', totalBytes: '7944206231', totalBitsRate: 17653791.6, egressBytes: '6777682761', egressBitsRate: 15061517.28, ingressBytes: '885954326', ingressBitsRate: 1968787.36, establishLatencyMs: 83.1217, httpResponseLatency: 157.7391, sslConLatency: 0, tcpLostlenPercent: 0.0046, pktRetransPercent: 0.0173, usageMore90: false, score: 6, scoreLow3: false }, { egressLinkDirection: '西宁', ingressLinkDirection: '太原', totalBytes: '2857306724', totalBitsRate: 6349570.48, egressBytes: '2128232085', egressBitsRate: 4729404.64, ingressBytes: '404099210', ingressBitsRate: 897998.24, establishLatencyMs: 98.8892, httpResponseLatency: 136.1593, sslConLatency: 0, tcpLostlenPercent: 0.0068, pktRetransPercent: 0.0147, usageMore90: false, score: 6, scoreLow3: false }, { egressLinkDirection: '太原', ingressLinkDirection: '西安', totalBytes: '6373421289', totalBitsRate: 14163158.4, egressBytes: '5353700094', egressBitsRate: 11897111.36, ingressBytes: '734848747', ingressBitsRate: 1632997.2, establishLatencyMs: 92.7275, httpResponseLatency: 137.1145, sslConLatency: 0, tcpLostlenPercent: 0.0057, pktRetransPercent: 0.0162, usageMore90: false, score: 6, scoreLow3: false }, { egressLinkDirection: '西安', ingressLinkDirection: '西安', totalBytes: '4103560375', totalBitsRate: 9119023.04, egressBytes: '3571039189', egressBitsRate: 7935642.64, ingressBytes: '377089010', ingressBitsRate: 837975.6, establishLatencyMs: 85.6573, httpResponseLatency: 201.6159, sslConLatency: 0, tcpLostlenPercent: 0.0069, pktRetransPercent: 0.0144, usageMore90: false, score: 6, scoreLow3: false }, { egressLinkDirection: '西宁', ingressLinkDirection: '西安', totalBytes: '1183207657', totalBitsRate: 2629350.32, egressBytes: '1058261055', egressBitsRate: 2351691.2, ingressBytes: '87176633', ingressBitsRate: 193725.84, establishLatencyMs: 91.4916, httpResponseLatency: 117.5389, sslConLatency: 0, tcpLostlenPercent: 0.0024, pktRetransPercent: 0.0104, usageMore90: false, score: 6, scoreLow3: false }, { egressLinkDirection: '太原', ingressLinkDirection: '西宁', totalBytes: '2924709918', totalBitsRate: 6499355.36, egressBytes: '2584008489', egressBitsRate: 5742241.12, ingressBytes: '181573168', ingressBitsRate: 403495.92, establishLatencyMs: 89.4893, httpResponseLatency: 151.1124, sslConLatency: 0, tcpLostlenPercent: 0.0053, pktRetransPercent: 0.0224, usageMore90: false, score: 5, scoreLow3: false }, { egressLinkDirection: '西安', ingressLinkDirection: '西宁', totalBytes: '1227926954', totalBitsRate: 2728726.56, egressBytes: '1085741718', egressBitsRate: 2412759.36, ingressBytes: '102066992', ingressBitsRate: 226815.52, establishLatencyMs: 93.9175, h
}
const linkInfoData = [{ originalLinkId: '256', linkId: 'Hundredgige1', direction: 'egress', nextHop: '西安', bandwidth: 100000000000 }, { originalLinkId: '257', linkId: 'Hundredgige1', direction: 'ingress', nextHop: '西安', bandwidth: 100000000000 }, { originalLinkId: '512', linkId: 'Hundredgige2', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '513', linkId: 'Hundredgige2', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '768', linkId: 'Hundredgige3', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '769', linkId: 'Hundredgige3', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '1024', linkId: 'Hundredgige4', direction: 'egress', nextHop: '西宁', bandwidth: 100000000000 }, { originalLinkId: '1025', linkId: 'Hundredgige4', direction: 'ingress', nextHop: '西宁', bandwidth: 100000000000 }, { originalLinkId: '1280', linkId: 'Hundredgige5', direction: 'egress', nextHop: '西安', bandwidth: 100000000000 }, { originalLinkId: '1281', linkId: 'Hundredgige5', direction: 'ingress', nextHop: '西安', bandwidth: 100000000000 }, { originalLinkId: '1536', linkId: 'Hundredgige6', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '1537', linkId: 'Hundredgige6', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '1792', linkId: 'Hundredgige7', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '1793', linkId: 'Hundredgige7', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '2048', linkId: 'Hundredgige8', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '2049', linkId: 'Hundredgige8', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '2304', linkId: 'Hundredgige9', direction: 'egress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '2305', linkId: 'Hundredgige9', direction: 'ingress', nextHop: '太原', bandwidth: 100000000000 }, { originalLinkId: '2816', linkId: 'Hundredgige10', direction: 'egress', nextHop: '西安', bandwidth: 100000000000 }, { originalLinkId: '2817', linkId: 'Hundredgige10', direction: 'ingress', nextHop: '西安', bandwidth: 100000000000 }]

const linkInfo = JSON.stringify(linkInfoData)
const timeFilter = {
  dateRangeValue: -1,
  startTime: 1673244000000,
  endTime: 1673247600000
}

/**
 * 进行axios请求，并挂载vue实例
 * @param list1
 * @param list2
 */
function axiosPostAndMounted (list1, list2) {
  require('vue-router').useRoute.mockReturnValue({ query: {} })

  const data1 = list1 || mockGet1
  const data2 = list2 || mockGet2
  // 模拟axios返回数据
  axios.get.mockImplementation(url => {
    switch (url) {
      case '/interface/link/overview/bigramAnalysis':
        return Promise.resolve(data1)
      case '/interface/link/overview/bigramNextHopAnalysis':
        return Promise.resolve(data2)
    }
  })

  // 模拟localStorage获取数据
  // eslint-disable-next-line no-proto
  jest.spyOn(localStorage.__proto__, 'getItem').mockImplementation(() => linkInfo)
}

describe('views/charts2/charts/linkMonitor/LinkBlock.vue测试', () => {
  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(() => {
      /**
       * 此为左侧链路网格图dom
       */
      const fromLinkId5 = wrapper.find('[test-id="fromLinkId5"]')
      const toLinkId3 = wrapper.find('[test-id="toLinkId3"]')
      // 出入流量占比dom，egressUsage10-5-3，10-5-3表示，10行10列的左侧网格图第5行第3列的上行流量
      const egressUsage1053 = wrapper.find('[test-id="egressUsage10-5-3"]')
      const ingressUsage1053 = wrapper.find('[test-id="ingressUsage10-5-3"]')
      // 总流量
      const totalBitsRate1053 = wrapper.find('[test-id="totalBitsRate10-5-3"]')
      // 评分
      const score1053 = wrapper.find('[test-id="score10-5-3"]')
      // TCP连接建立延迟
      const tcp1053 = wrapper.find('[test-id="tcp10-5-3"]')
      // HTTP响应延迟
      const http1053 = wrapper.find('[test-id="http10-5-3"]')
      // SSL响应延迟
      const ssl1053 = wrapper.find('[test-id="ssl10-5-3"]')
      // 数据包丢失
      const packetLoss1053 = wrapper.find('[test-id="packetLoss10-5-3"]')
      // 重传率
      const packetRetrans1053 = wrapper.find('[test-id="packetRetrans10-5-3"]')

      expect(fromLinkId5.text()).toBe('Hundredgige5')
      expect(toLinkId3.text()).toBe('Hundredgige3')
      expect(egressUsage1053.text()).toBe('< 0.01%')
      expect(ingressUsage1053.text()).toBe('< 0.01%')
      expect(totalBitsRate1053.text()).toBe('576.94Kbps')
      expect(score1053.text()).toBe('6')
      expect(tcp1053.text()).toBe('83ms')
      expect(http1053.text()).toBe('107ms')
      expect(ssl1053.text()).toBe('0ms')
      expect(packetLoss1053.text()).toBe('0.38%')
      expect(packetRetrans1053.text()).toBe('0.91%')

      /**
       * 此为右侧下一跳网络网格图dom
       */
      const toNextHop3 = wrapper.find('[test-id="toNextHop3"]')
      const toNextHop1 = wrapper.find('[test-id="toNextHop1"]')
      // 出入流量占比dom，egressUsage3-3-1，3-3-1表示，3行3列的右侧网格图第3行第1列的上行流量
      const egressUsage331 = wrapper.find('[test-id="egressUsage3-3-1"]')
      const ingressUsage331 = wrapper.find('[test-id="ingressUsage3-3-1"]')
      // 总流量
      const totalBitsRate331 = wrapper.find('[test-id="totalBitsRate3-3-1"]')
      // 评分
      const score331 = wrapper.find('[test-id="score3-3-1"]')
      // TCP连接建立延迟
      const tcp331 = wrapper.find('[test-id="tcp3-3-1"]')
      // HTTP响应延迟
      const http331 = wrapper.find('[test-id="http3-3-1"]')
      // SSL响应延迟
      const ssl331 = wrapper.find('[test-id="ssl3-3-1"]')
      // 数据包丢失
      const packetLoss331 = wrapper.find('[test-id="packetLoss3-3-1"]')
      // 重传率
      const packetRetrans331 = wrapper.find('[test-id="packetRetrans3-3-1"]')

      expect(toNextHop3.text()).toBe('西宁')
      expect(toNextHop1.text()).toBe('太原')
      expect(egressUsage331.text()).toBe('< 0.01%')
      expect(ingressUsage331.text()).toBe('< 0.01%')
      expect(totalBitsRate331.text()).toBe('6.50Mbps')
      expect(score331.text()).toBe('5')
      expect(tcp331.text()).toBe('89ms')
      expect(http331.text()).toBe('151ms')
      expect(ssl331.text()).toBe('0ms')
      expect(packetLoss331.text()).toBe('0.53%')
      expect(packetRetrans331.text()).toBe('2.24%')
      resolve()
    }, 200))
  })
  test('链路网格图第5行第3列，下一跳网格图第3行第1列，测试网格颜色随评分和流量占比变化', async () => {
    const list1 = JSON.parse(JSON.stringify(mockGet1))
    const list2 = JSON.parse(JSON.stringify(mockGet2))
    // 修改链路评分为-，使得网格颜色为前绿后红
    list1.data.data.result[43].establishLatencyMs = null
    list1.data.data.result[43].httpResponseLatency = null
    list1.data.data.result[43].sslConLatency = null
    list1.data.data.result[43].tcpLostlenPercent = null
    list1.data.data.result[43].pktRetransPercent = null

    // 修改下一跳的流量占比为100%，使得网格颜色为前红后绿
    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
       */
      const scorePoint1053 = wrapper.find('[test-id="scorePoint10-5-3"]')
      const usagePoint1053 = wrapper.find('[test-id="usagePoint10-5-3"]')
      expect(scorePoint1053.classes()).toContain('data-item__point-red')
      expect(usagePoint1053.classes()).toContain('data-item__point')
      /**
       * 此为右侧下一跳网络网格图dom
       */
      const usagePoint331 = wrapper.find('[test-id="usagePoint3-3-1"]')
      const scorePoint331 = wrapper.find('[test-id="scorePoint3-3-1"]')
      expect(usagePoint331.classes()).toContain('data-item__point-red')
      expect(scorePoint331.classes()).toContain('data-item__point')
      resolve()
    }, 200))
  })
})