cyber-narrator-cn-ui/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js

import NetworkOverviewLine from '@/views/charts2/charts/networkOverview/NetworkOverviewLine'
import { mount } from '@vue/test-utils'
import axios from 'axios'
import mockData from './NetworkOverviewLineMockData'

const timeFilter = {
  dateRangeValue: -1,
  startTime: 1673244000000,
  endTime: 1673247600000
}
const chart = {"id":1,"name":"network overview line","i18n":"","panelId":1,"pid":0,"type":102,"x":0,"y":0,"w":19,"h":6,"children":[],"panel":{"id":1,"name":"Network Overview"},"i":1,"category":"echarts","firstShow":false,"moved":false}

function init () {
  require('vue-router').useRoute.mockReturnValue({ query: {} })
}

describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', () => {
  test('Metric=Bits/s，无数据（空数组）', async () => {
    init()
    axios.get.mockResolvedValue(mockData.empty)
    const wrapper = mount(NetworkOverviewLine, {
      propsData: {
        timeFilter,
        chart
      }
    })
    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
    await new Promise(resolve => setTimeout(async () => {
      const textNode0 = await wrapper.get('[test-id="tabContent0"]')
      const textNode1 = await wrapper.get('[test-id="tabContent1"]')
      const textNode2 = await wrapper.get('[test-id="tabContent2"]')
      const textNode3 = await wrapper.get('[test-id="tabContent3"]')
      const textNode4 = await wrapper.get('[test-id="tabContent4"]')
      const textNode5 = await wrapper.get('[test-id="tabContent5"]')
      expect(textNode0.text()).toEqual('-')
      expect(textNode1.text()).toEqual('-')
      expect(textNode2.text()).toEqual('-')
      expect(textNode3.text()).toEqual('-')
      expect(textNode4.text()).toEqual('-')
      expect(textNode5.text()).toEqual('-')
      resolve()
    }, 200))
  })
  test('Metric=Bits/s，0和大数值', async () => {
    init()
    axios.get.mockResolvedValue(mockData.bytes.boundary)
    const wrapper = mount(NetworkOverviewLine, {
      propsData: {
        timeFilter,
        chart
      }
    })
    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
    await new Promise(resolve => setTimeout(async () => {
      // total页签固定显示，数据是0也一样
      const titleNode0 = await wrapper.get('[test-id="tabTitle0"]')
      const titleNode1 = await wrapper.get('[test-id="tabTitle2"]')
      const titleNode2 = await wrapper.get('[test-id="tabTitle5"]')
      const textNode0 = await wrapper.get('[test-id="tabContent0"]')
      const textNode1 = await wrapper.get('[test-id="tabContent2"]')
      const textNode2 = await wrapper.get('[test-id="tabContent5"]')
      expect(titleNode0.text()).toEqual('network.total')
      expect(titleNode1.text()).toEqual('network.outbound')
      expect(titleNode2.text()).toEqual('network.other')
      expect(textNode0.text()).toEqual('<0.01bps')
      expect(textNode1.text()).toEqual('95.23Ebps')
      expect(textNode2.text()).toEqual('0.01bps')
      resolve()
    }, 200))
  })
  test('Metric=Bits/s，点击第三个tab', async () => {
    init()
    // 模拟axios返回数据
    axios.get.mockResolvedValue(mockData.common)
    // 加载vue组件，获得实例
    const wrapper = mount(NetworkOverviewLine, {
      propsData: {
        timeFilter,
        chart
      }
    })

    // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
    await new Promise(resolve => setTimeout(async () => {
      const textNode0 = await wrapper.get('[test-id="tabContent0"]')
      const textNode1 = await wrapper.get('[test-id="tabContent1"]')
      const textNode2 = await wrapper.get('[test-id="tabContent2"]')
      expect(textNode0.text()).toEqual('112.04Mbps')
      expect(textNode1.text()).toEqual('18.59Mbps')
      expect(textNode2.text()).toEqual('87.56Mbps')
      resolve()
    }, 200))

    // 点击tab后，是否切换高亮状态
    const textNode3 = await wrapper.get('[test-id="tab2"]')
    await textNode3.trigger('click')
    expect(textNode3.classes()).toContain('is-active')
  })
  test('Metric=Packets/s', async () => {
    init()
    // 模拟axios返回数据
    axios.get.mockResolvedValue(mockData.common)
    // 加载vue组件，获得实例
    const wrapper = mount(NetworkOverviewLine, {
      propsData: {
        timeFilter,
        chart,
        metric: 'Packets/s'
      }
    })

    await new Promise(resolve => setTimeout(async () => {
      const textNode0 = await wrapper.get('[test-id="tabContent0"]')
      const textNode1 = await wrapper.get('[test-id="tabContent1"]')
      const textNode2 = await wrapper.get('[test-id="tabContent2"]')
      expect(textNode0.text()).toEqual('14.06Kpackets/s')
      expect(textNode1.text()).toEqual('4.24Kpackets/s')
      expect(textNode2.text()).toEqual('9.17Kpackets/s')
      resolve()
    }, 200))
  })
  test('Metric=Sessions/s', async () => {
    init()
    // 模拟axios返回数据
    axios.get.mockResolvedValue(mockData.common)
    // 加载vue组件，获得实例
    const wrapper = mount(NetworkOverviewLine, {
      propsData: {
        timeFilter,
        chart,
        metric: 'Sessions/s'
      }
    })

    await new Promise(resolve => setTimeout(async () => {
      const textNode0 = await wrapper.get('[test-id="tabContent0"]')
      expect(textNode0.text()).toEqual('29.89sessions/s')
      resolve()
    }, 200))
  })
})