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

import linkBlock from '@/views/charts2/charts/linkMonitor/LinkBlock'
import { mount } from '@vue/test-utils'
import axios from 'axios'
import { mockData, linkInfoData } from './MockData/LinkBlock'

const mockGet1 = mockData.common.data1
const mockGet2 = mockData.common.data2

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

var wrapper = null

/**
 * 进行axios请求，并挂载vue实例
 *
 */
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/analysis':
        return Promise.resolve(data1)
      case '/interface/link/overview/nextHopAnalysis':
        return Promise.resolve(data2)
    }
  })

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

  // 加载vue组件，获得实例
  wrapper = mount(linkBlock, {
    propsData: {
      timeFilter
    }
  })
}

describe('views/charts2/charts/linkMonitor/LinkBlock.vue测试', () => {
  test('测试链路蜂窝图和下一跳蜂窝图从大到小排列', async () => {
    axiosPostAndMounted()

    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
    await new Promise(resolve => setTimeout(() => {
      const linkBlockTotal0 = wrapper.get('[test-id="linkBlockTotal0"]')
      const linkBlockTotal1 = wrapper.get('[test-id="linkBlockTotal1"]')
      const linkBlockTotal2 = wrapper.get('[test-id="linkBlockTotal2"]')
      const linkBlockTotal3 = wrapper.get('[test-id="linkBlockTotal3"]')
      const linkBlockTotal4 = wrapper.get('[test-id="linkBlockTotal4"]')
      const linkBlockTotal5 = wrapper.get('[test-id="linkBlockTotal5"]')
      const linkBlockTotal6 = wrapper.get('[test-id="linkBlockTotal6"]')
      const linkBlockTotal7 = wrapper.get('[test-id="linkBlockTotal7"]')
      const linkBlockTotal8 = wrapper.get('[test-id="linkBlockTotal8"]')
      const linkBlockTotal9 = wrapper.get('[test-id="linkBlockTotal9"]')

      expect(linkBlockTotal0.text()).toBe('13.88 Mbps')
      expect(linkBlockTotal1.text()).toBe('11.99 Mbps')
      expect(linkBlockTotal2.text()).toBe('11.86 Mbps')
      expect(linkBlockTotal3.text()).toBe('10.56 Mbps')
      expect(linkBlockTotal4.text()).toBe('10.49 Mbps')
      expect(linkBlockTotal5.text()).toBe('10.31 Mbps')
      expect(linkBlockTotal6.text()).toBe('10.19 Mbps')
      expect(linkBlockTotal7.text()).toBe('10.14 Mbps')
      expect(linkBlockTotal8.text()).toBe('9.85 Mbps')
      expect(linkBlockTotal9.text()).toBe('9.54 Mbps')

      const nextHopTotal0 = wrapper.get('[test-id="nextHopTotal0"]')
      const nextHopTotal1 = wrapper.get('[test-id="nextHopTotal1"]')
      const nextHopTotal2 = wrapper.get('[test-id="nextHopTotal2"]')

      expect(nextHopTotal0.text()).toBe('67.97 Mbps')
      expect(nextHopTotal1.text()).toBe('30.35 Mbps')
      expect(nextHopTotal2.text()).toBe('10.49 Mbps')
      resolve()
    }, 200))
  })
  test('链路蜂窝图和下一跳蜂窝图均无数据', async () => {
    const list1 = mockData.empty.data1
    const list2 = mockData.empty.data2

    axiosPostAndMounted(list1, list2)

    await new Promise(resolve => setTimeout(() => {
      const linkBlockNoData = wrapper.get('[test-id="linkBlockNoData"]')
      const nextHpNoData = wrapper.get('[test-id="nextHpNoData"]')

      expect(linkBlockNoData.text()).toBe('npm.noData')
      expect(nextHpNoData.text()).toBe('npm.noData')
      resolve()
    }, 200))
  })
  test('链路蜂窝图上行流量大数值', async () => {
    const list1 = mockData.boundary.data1

    axiosPostAndMounted(list1)

    await new Promise(resolve => setTimeout(() => {
      const linkBlockTotal0 = wrapper.get('[test-id="linkBlockTotal0"]')
      const linkBlockEgressUsage0 = wrapper.get('[test-id="linkBlockEgressUsage0"]')
      const linkBlockEgressUsage1 = wrapper.get('[test-id="linkBlockEgressUsage1"]')
      const linkBlockEgressUsage2 = wrapper.get('[test-id="linkBlockEgressUsage2"]')
      const linkBlockEgressUsage3 = wrapper.get('[test-id="linkBlockEgressUsage3"]')
      const linkBlockEgressUsage4 = wrapper.get('[test-id="linkBlockEgressUsage4"]')
      const linkBlockEgressUsage5 = wrapper.get('[test-id="linkBlockEgressUsage5"]')
      const linkBlockEgressUsage6 = wrapper.get('[test-id="linkBlockEgressUsage6"]')
      const linkBlockEgressUsage7 = wrapper.get('[test-id="linkBlockEgressUsage7"]')
      const linkBlockEgressUsage8 = wrapper.get('[test-id="linkBlockEgressUsage8"]')
      const linkBlockEgressUsage9 = wrapper.get('[test-id="linkBlockEgressUsage9"]')

      // 超大流量时total显示
      expect(linkBlockTotal0.text()).toBe('100 Gbps')
      // 超大上行流量，上行占比情况
      expect(linkBlockEgressUsage0.text()).toBe('100.00%')
      expect(linkBlockEgressUsage1.text()).toBe('100.00%')
      expect(linkBlockEgressUsage2.text()).toBe('100.00%')
      expect(linkBlockEgressUsage3.text()).toBe('100.00%')
      expect(linkBlockEgressUsage4.text()).toBe('100.00%')
      expect(linkBlockEgressUsage5.text()).toBe('100.00%')
      expect(linkBlockEgressUsage6.text()).toBe('100.00%')
      expect(linkBlockEgressUsage7.text()).toBe('100.00%')
      expect(linkBlockEgressUsage8.text()).toBe('100.00%')
      expect(linkBlockEgressUsage9.text()).toBe('100.00%')
      resolve()
    }, 200))
  })
  test('下一跳蜂窝图下行流量大数值', async () => {
    const list1 = mockData.common.data1
    const list2 = mockData.boundary.data2

    axiosPostAndMounted(list1, list2)

    await new Promise(resolve => setTimeout(() => {
      const nextHopTotal0 = wrapper.get('[test-id="nextHopTotal0"]')
      const nextHopIngressUsage0 = wrapper.get('[test-id="nextHopIngressUsage0"]')
      const nextHopIngressUsage1 = wrapper.get('[test-id="nextHopIngressUsage1"]')
      const nextHopIngressUsage2 = wrapper.get('[test-id="nextHopIngressUsage2"]')
      const nextHopEgressUsage0 = wrapper.get('[test-id="nextHopEgressUsage0"]')
      const nextHopEgressUsage1 = wrapper.get('[test-id="nextHopEgressUsage1"]')
      const nextHopEgressUsage2 = wrapper.get('[test-id="nextHopEgressUsage2"]')

      // 超大流量时total显示
      expect(nextHopTotal0.text()).toBe('30 Tbps')
      // 超大上行流量，上行、下行占比情况
      expect(nextHopEgressUsage0.text()).toBe('0%')
      expect(nextHopEgressUsage1.text()).toBe('0%')
      expect(nextHopEgressUsage2.text()).toBe('0%')
      expect(nextHopIngressUsage0.text()).toBe('100.00%')
      expect(nextHopIngressUsage1.text()).toBe('100.00%')
      expect(nextHopIngressUsage2.text()).toBe('100.00%')
      resolve()
    }, 200))
  })
})