228 lines
7.9 KiB
JavaScript
228 lines
7.9 KiB
JavaScript
import LinkDirectionGrid from '@/views/charts2/charts/linkMonitor/LinkDirectionGrid'
|
||
import { mount } from '@vue/test-utils'
|
||
import axios from 'axios'
|
||
import ElementPlus from 'element-plus'
|
||
import { mockData } from './MockData/LinkDirectionGrid'
|
||
import { linkInfoData } from './MockData/LinkBlock'
|
||
import { createStore } from 'vuex'
|
||
|
||
const mockGet1 = mockData.common.data1
|
||
const mockGet2 = mockData.common.data2
|
||
|
||
const linkInfo = JSON.stringify(linkInfoData)
|
||
const timeFilter = {
|
||
dateRangeValue: -1,
|
||
startTime: 1673244000000,
|
||
endTime: 1673247600000
|
||
}
|
||
const store = createStore({
|
||
state () {
|
||
return {
|
||
scoreBase: {
|
||
isReady: false,
|
||
establishLatencyMs: {
|
||
p10: null,
|
||
p90: null
|
||
},
|
||
httpResponseLatency: {
|
||
p10: null,
|
||
p90: null
|
||
},
|
||
sslConLatency: {
|
||
p10: null,
|
||
p90: null
|
||
},
|
||
tcpLostlenPercent: {
|
||
p10: null,
|
||
p90: null
|
||
},
|
||
pktRetransPercent: {
|
||
p10: null,
|
||
p90: null
|
||
}
|
||
}
|
||
}
|
||
},
|
||
getters: {
|
||
scoreBaseReady (state) {
|
||
return state.scoreBase.isReady
|
||
}
|
||
}
|
||
})
|
||
/**
|
||
* 进行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/LinkDirectionGrid.vue测试', () => {
|
||
test('鼠标移动到链路网格图第5行第3列，下一跳网格图第3行第1列，测试链路编号和悬浮框dom内容', async () => {
|
||
axiosPostAndMounted()
|
||
// 加载vue组件，获得实例
|
||
// 如需加载悬浮框dom，则此处不需要挂载Element，挂载Element的话，需要触发hover事件获取悬浮框dom
|
||
const wrapper = mount(LinkDirectionGrid, {
|
||
global: {
|
||
plugins: [store]
|
||
},
|
||
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('<1ms')
|
||
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('2.73Mbps')
|
||
expect(score331.text()).toBe('6')
|
||
expect(tcp331.text()).toBe('94ms')
|
||
expect(http331.text()).toBe('168ms')
|
||
expect(ssl331.text()).toBe('<1ms')
|
||
expect(packetLoss331.text()).toBe('0.48%')
|
||
expect(packetRetrans331.text()).toBe('1.39%')
|
||
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].outBitsRate = 0
|
||
list2.data.data.result[6].inBitsRate = 100000000000
|
||
axiosPostAndMounted(list1, list2)
|
||
|
||
const wrapper = mount(LinkDirectionGrid, {
|
||
global: {
|
||
plugins: [ElementPlus, store]
|
||
},
|
||
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))
|
||
})*/
|
||
test('链路网格图、下一跳网格图无数据', async () => {
|
||
const list1 = mockData.empty.data1
|
||
const list2 = mockData.empty.data2
|
||
|
||
axiosPostAndMounted(list1, list2)
|
||
|
||
const wrapper = mount(LinkDirectionGrid, {
|
||
global: {
|
||
plugins: [ElementPlus, store]
|
||
},
|
||
propsData: {
|
||
timeFilter
|
||
}
|
||
})
|
||
|
||
await new Promise(resolve => setTimeout(() => {
|
||
const noData0 = wrapper.find('[test-id="noData0"]')
|
||
expect(noData0.text()).toBe('npm.noData')
|
||
resolve()
|
||
}, 200))
|
||
})
|
||
})
|