365 lines
16 KiB
JavaScript
365 lines
16 KiB
JavaScript
import NpmNetworkQuantity from '@/views/charts2/charts/npm/NpmNetworkQuantity'
|
||
import { mount } from '@vue/test-utils'
|
||
import axios from 'axios'
|
||
import { mockData } from './mockData/NpmNetworkQuantity'
|
||
|
||
const notDrillDownData = mockData.common.notDrillDown // 未下钻数据
|
||
const drillDownData = mockData.common.drillDown // 下钻数据
|
||
const emptyData = mockData.empty.data // 空数据
|
||
const query = mockData.common.query
|
||
|
||
const timeFilter = {
|
||
dateRangeValue: -1,
|
||
startTime: 1675043912,
|
||
endTime: 1675047512
|
||
}
|
||
|
||
let wrapper = null
|
||
|
||
/**
|
||
* 进行axios请求，并挂载vue实例
|
||
* @param type
|
||
* @param data
|
||
* @param empty
|
||
*/
|
||
function axiosPostAndMounted (type, data, empty) {
|
||
if (type === 'drillDown') {
|
||
require('vue-router').useRoute.mockReturnValue({ query: query })
|
||
if (empty) {
|
||
axios.get.mockResolvedValueOnce(emptyData)
|
||
axios.get.mockResolvedValueOnce(emptyData)
|
||
} else {
|
||
axios.get.mockResolvedValueOnce(data.data1)
|
||
axios.get.mockResolvedValueOnce(data.data2)
|
||
}
|
||
} else {
|
||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||
if (empty) {
|
||
for (let i = 0; i < 10; i++) {
|
||
axios.get.mockResolvedValue(emptyData)
|
||
}
|
||
} else {
|
||
axios.get.mockResolvedValueOnce(data.data1.tcp0)
|
||
axios.get.mockResolvedValueOnce(data.data1.http0)
|
||
axios.get.mockResolvedValueOnce(data.data1.ssl0)
|
||
axios.get.mockResolvedValueOnce(data.data1.tcpPercent0)
|
||
axios.get.mockResolvedValueOnce(data.data1.packetPercent0)
|
||
|
||
axios.get.mockResolvedValueOnce(data.data2.tcp1)
|
||
axios.get.mockResolvedValueOnce(data.data2.http1)
|
||
axios.get.mockResolvedValueOnce(data.data2.ssl1)
|
||
axios.get.mockResolvedValueOnce(data.data2.tcpPercent1)
|
||
axios.get.mockResolvedValueOnce(data.data2.packetPercent1)
|
||
}
|
||
}
|
||
|
||
wrapper = mount(NpmNetworkQuantity, {
|
||
propsData: {
|
||
timeFilter
|
||
}
|
||
})
|
||
}
|
||
|
||
describe('views/charts2/charts/npm/NpmNetworkQuantity.vue测试', () => {
|
||
test('Npm概况信息：服务质量图 下钻', async () => {
|
||
axiosPostAndMounted('drillDown', {
|
||
data1: drillDownData.data1,
|
||
data2: drillDownData.data2
|
||
})
|
||
|
||
await new Promise(resolve => setTimeout(() => {
|
||
const textNode0 = wrapper.get('[test-id="singleValueContent0"]')
|
||
const textNode1 = wrapper.get('[test-id="singleValueContent1"]')
|
||
const textNode2 = wrapper.get('[test-id="singleValueContent2"]')
|
||
const textNode3 = wrapper.get('[test-id="singleValueContent3"]')
|
||
const textNode4 = wrapper.get('[test-id="singleValueContent4"]')
|
||
|
||
expect(textNode0.text()).toEqual('130 ms')
|
||
expect(textNode1.text()).toEqual('598 ms')
|
||
expect(textNode2.text()).toEqual('1 ms')
|
||
expect(textNode3.text()).toEqual('1.08 %')
|
||
expect(textNode4.text()).toEqual('3.79 %')
|
||
|
||
const trendIconNode0 = wrapper.get('[test-id="singleValueTrendIcon0"]')
|
||
const trendIconNode1 = wrapper.get('[test-id="singleValueTrendIcon1"]')
|
||
/*
|
||
* 当元素存在的时候，find 和 get 是一样的；
|
||
* 当找不到元素的时候:
|
||
* (1) find 会返回 null, 不会报错，case 通过
|
||
* (2) get 会报错，case 失败
|
||
* 一般总是使用 get ，除非想要判断一些元素不存在的时候，使用 find；
|
||
*/
|
||
const trendIconNode2 = wrapper.find('[test-id="singleValueTrendIcon2"]')
|
||
const trendIconNode3 = wrapper.get('[test-id="singleValueTrendIcon3"]')
|
||
const trendIconNode4 = wrapper.get('[test-id="singleValueTrendIcon4"]')
|
||
|
||
expect(trendIconNode0.classes()).toContain('cn-icon-rise1')
|
||
expect(trendIconNode1.classes()).toContain('cn-icon-rise1')
|
||
expect(trendIconNode2.classes()).toContain('cn-icon-constant')
|
||
expect(trendIconNode3.classes()).toContain('cn-icon-decline')
|
||
expect(trendIconNode4.classes()).toContain('cn-icon-rise1')
|
||
|
||
const trendValueNode0 = wrapper.get('[test-id="singleValueTrendValue0"]')
|
||
const trendValueNode1 = wrapper.get('[test-id="singleValueTrendValue1"]')
|
||
const trendValueNode2 = wrapper.find('[test-id="singleValueTrendValue2"]')
|
||
const trendValueNode3 = wrapper.get('[test-id="singleValueTrendValue3"]')
|
||
const trendValueNode4 = wrapper.find('[test-id="singleValueTrendValue4"]')
|
||
|
||
expect(trendValueNode0.text()).toEqual('51.22%')
|
||
expect(trendValueNode1.text()).toEqual('91.99%')
|
||
expect(trendValueNode2 === null)
|
||
expect(trendValueNode3.text()).toEqual('-26.53%')
|
||
expect(trendValueNode4.text()).toEqual('6.16%')
|
||
|
||
const p95Node0 = wrapper.get('[test-id="singleValueP950"]')
|
||
const p95Node1 = wrapper.get('[test-id="singleValueP951"]')
|
||
const p95Node2 = wrapper.get('[test-id="singleValueP952"]')
|
||
const p95Node3 = wrapper.get('[test-id="singleValueP953"]')
|
||
const p95Node4 = wrapper.get('[test-id="singleValueP954"]')
|
||
|
||
expect(p95Node0.text()).toEqual('P95: 445 ms')
|
||
expect(p95Node1.text()).toEqual('P95: 2.95 s')
|
||
expect(p95Node2.text()).toEqual('P95: <1 ms')
|
||
expect(p95Node3.text()).toEqual('P95: 3.46 %')
|
||
expect(p95Node4.text()).toEqual('P95: 10.47 %')
|
||
|
||
const p99Node0 = wrapper.get('[test-id="singleValueP990"]')
|
||
const p99Node1 = wrapper.get('[test-id="singleValueP991"]')
|
||
const p99Node2 = wrapper.get('[test-id="singleValueP992"]')
|
||
const p99Node3 = wrapper.get('[test-id="singleValueP993"]')
|
||
const p99Node4 = wrapper.get('[test-id="singleValueP994"]')
|
||
|
||
expect(p99Node0.text()).toEqual('P99: 601 ms')
|
||
expect(p99Node1.text()).toEqual('P99: 4.62 s')
|
||
expect(p99Node2.text()).toEqual('P99: <1 ms')
|
||
expect(p99Node3.text()).toEqual('P99: 13.72 %')
|
||
expect(p99Node4.text()).toEqual('P99: 18.30 %')
|
||
resolve()
|
||
}, 400))
|
||
})
|
||
test('Npm概况信息：服务质量图 未下钻', async () => {
|
||
axiosPostAndMounted('', {
|
||
data1: notDrillDownData.cycle0,
|
||
data2: notDrillDownData.cycle1
|
||
})
|
||
|
||
await new Promise(resolve => setTimeout(async () => {
|
||
const textNode0 = wrapper.get('[test-id="singleValueContent0"]')
|
||
const textNode1 = wrapper.get('[test-id="singleValueContent1"]')
|
||
const textNode2 = wrapper.get('[test-id="singleValueContent2"]')
|
||
const textNode3 = wrapper.get('[test-id="singleValueContent3"]')
|
||
const textNode4 = wrapper.get('[test-id="singleValueContent4"]')
|
||
|
||
expect(textNode0.text()).toEqual('92 ms')
|
||
expect(textNode1.text()).toEqual('193 ms')
|
||
expect(textNode2.text()).toEqual('1 ms')
|
||
expect(textNode3.text()).toEqual('1.56 %')
|
||
expect(textNode4.text()).toEqual('3.82 %')
|
||
|
||
const trendIconNode0 = wrapper.get('[test-id="singleValueTrendIcon0"]')
|
||
const trendIconNode1 = wrapper.get('[test-id="singleValueTrendIcon1"]')
|
||
// /*
|
||
// * 当元素存在的时候，find 和 get 是一样的；
|
||
// * 当找不到元素的时候:
|
||
// * (1) find 会返回 null, 不会报错，case 通过
|
||
// * (2) get 会报错，case 失败
|
||
// * 一般总是使用 get ，除非想要判断一些元素不存在的时候，使用 find；
|
||
// */
|
||
const trendIconNode2 = wrapper.find('[test-id="singleValueTrendIcon2"]')
|
||
const trendIconNode3 = wrapper.get('[test-id="singleValueTrendIcon3"]')
|
||
const trendIconNode4 = wrapper.get('[test-id="singleValueTrendIcon4"]')
|
||
//
|
||
expect(trendIconNode0.classes()).toContain('cn-icon-decline')
|
||
expect(trendIconNode1.classes()).toContain('cn-icon-rise1')
|
||
expect(trendIconNode2.classes()).toContain('cn-icon-constant')
|
||
expect(trendIconNode3.classes()).toContain('cn-icon-decline')
|
||
expect(trendIconNode4.classes()).toContain('cn-icon-decline')
|
||
|
||
const trendValueNode0 = wrapper.get('[test-id="singleValueTrendValue0"]')
|
||
const trendValueNode1 = wrapper.get('[test-id="singleValueTrendValue1"]')
|
||
const trendValueNode2 = wrapper.find('[test-id="singleValueTrendValue2"]')
|
||
const trendValueNode3 = wrapper.get('[test-id="singleValueTrendValue3"]')
|
||
const trendValueNode4 = wrapper.find('[test-id="singleValueTrendValue4"]')
|
||
|
||
expect(trendValueNode0.text()).toEqual('-4.17%')
|
||
expect(trendValueNode1.text()).toEqual('4.89%')
|
||
expect(trendValueNode2 === null)
|
||
expect(trendValueNode3.text()).toEqual('-39.53%')
|
||
expect(trendValueNode4.text()).toEqual('-8.83%')
|
||
|
||
const p95Node0 = wrapper.get('[test-id="singleValueP950"]')
|
||
const p95Node1 = wrapper.get('[test-id="singleValueP951"]')
|
||
const p95Node2 = wrapper.get('[test-id="singleValueP952"]')
|
||
const p95Node3 = wrapper.get('[test-id="singleValueP953"]')
|
||
const p95Node4 = wrapper.get('[test-id="singleValueP954"]')
|
||
|
||
expect(p95Node0.text()).toEqual('P95: 160 ms')
|
||
expect(p95Node1.text()).toEqual('P95: 266 ms')
|
||
expect(p95Node2.text()).toEqual('P95: <1 ms')
|
||
expect(p95Node3.text()).toEqual('P95: 2.23 %')
|
||
expect(p95Node4.text()).toEqual('P95: 6.60 %')
|
||
|
||
const p99Node0 = wrapper.get('[test-id="singleValueP990"]')
|
||
const p99Node1 = wrapper.get('[test-id="singleValueP991"]')
|
||
const p99Node2 = wrapper.get('[test-id="singleValueP992"]')
|
||
const p99Node3 = wrapper.get('[test-id="singleValueP993"]')
|
||
const p99Node4 = wrapper.get('[test-id="singleValueP994"]')
|
||
|
||
expect(p99Node0.text()).toEqual('P99: 789 ms')
|
||
expect(p99Node1.text()).toEqual('P99: 2.09 s')
|
||
expect(p99Node2.text()).toEqual('P99: <1 ms')
|
||
expect(p99Node3.text()).toEqual('P99: 21.87 %')
|
||
expect(p99Node4.text()).toEqual('P99: 9.26 %')
|
||
resolve()
|
||
}, 300))
|
||
})
|
||
test('Npm概况信息：服务质量图 下钻无数据', async () => {
|
||
axiosPostAndMounted('drillDown', '', 'empty1')
|
||
|
||
await new Promise(resolve => setTimeout(() => {
|
||
const textNode0 = wrapper.get('[test-id="singleValueContent0"]')
|
||
const textNode1 = wrapper.get('[test-id="singleValueContent1"]')
|
||
const textNode2 = wrapper.get('[test-id="singleValueContent2"]')
|
||
const textNode3 = wrapper.get('[test-id="singleValueContent3"]')
|
||
const textNode4 = wrapper.get('[test-id="singleValueContent4"]')
|
||
|
||
expect(textNode0.text()).toEqual('-')
|
||
expect(textNode1.text()).toEqual('-')
|
||
expect(textNode2.text()).toEqual('-')
|
||
expect(textNode3.text()).toEqual('-')
|
||
expect(textNode4.text()).toEqual('-')
|
||
|
||
const p95Node0 = wrapper.get('[test-id="singleValueP950"]')
|
||
const p95Node1 = wrapper.get('[test-id="singleValueP951"]')
|
||
const p95Node2 = wrapper.get('[test-id="singleValueP952"]')
|
||
const p95Node3 = wrapper.get('[test-id="singleValueP953"]')
|
||
const p95Node4 = wrapper.get('[test-id="singleValueP954"]')
|
||
|
||
expect(p95Node0.text()).toEqual('P95: -')
|
||
expect(p95Node1.text()).toEqual('P95: -')
|
||
expect(p95Node2.text()).toEqual('P95: -')
|
||
expect(p95Node3.text()).toEqual('P95: -')
|
||
expect(p95Node4.text()).toEqual('P95: -')
|
||
|
||
const p99Node0 = wrapper.get('[test-id="singleValueP990"]')
|
||
const p99Node1 = wrapper.get('[test-id="singleValueP991"]')
|
||
const p99Node2 = wrapper.get('[test-id="singleValueP992"]')
|
||
const p99Node3 = wrapper.get('[test-id="singleValueP993"]')
|
||
const p99Node4 = wrapper.get('[test-id="singleValueP994"]')
|
||
|
||
expect(p99Node0.text()).toEqual('P99: -')
|
||
expect(p99Node1.text()).toEqual('P99: -')
|
||
expect(p99Node2.text()).toEqual('P99: -')
|
||
expect(p99Node3.text()).toEqual('P99: -')
|
||
expect(p99Node4.text()).toEqual('P99: -')
|
||
resolve()
|
||
}, 500))
|
||
})
|
||
test('Npm概况信息：服务质量图 未下钻无数据', async () => {
|
||
axiosPostAndMounted('', '', 'empty')
|
||
|
||
await new Promise(resolve => setTimeout(async () => {
|
||
const textNode0 = wrapper.get('[test-id="singleValueContent0"]')
|
||
const textNode1 = wrapper.get('[test-id="singleValueContent1"]')
|
||
const textNode2 = wrapper.get('[test-id="singleValueContent2"]')
|
||
const textNode3 = wrapper.get('[test-id="singleValueContent3"]')
|
||
const textNode4 = wrapper.get('[test-id="singleValueContent4"]')
|
||
|
||
expect(textNode0.text()).toEqual('-')
|
||
expect(textNode1.text()).toEqual('-')
|
||
expect(textNode2.text()).toEqual('-')
|
||
expect(textNode3.text()).toEqual('-')
|
||
expect(textNode4.text()).toEqual('-')
|
||
|
||
const p95Node0 = wrapper.get('[test-id="singleValueP950"]')
|
||
const p95Node1 = wrapper.get('[test-id="singleValueP951"]')
|
||
const p95Node2 = wrapper.get('[test-id="singleValueP952"]')
|
||
const p95Node3 = wrapper.get('[test-id="singleValueP953"]')
|
||
const p95Node4 = wrapper.get('[test-id="singleValueP954"]')
|
||
|
||
expect(p95Node0.text()).toEqual('P95: -')
|
||
expect(p95Node1.text()).toEqual('P95: -')
|
||
expect(p95Node2.text()).toEqual('P95: -')
|
||
expect(p95Node3.text()).toEqual('P95: -')
|
||
expect(p95Node4.text()).toEqual('P95: -')
|
||
|
||
const p99Node0 = wrapper.get('[test-id="singleValueP990"]')
|
||
const p99Node1 = wrapper.get('[test-id="singleValueP991"]')
|
||
const p99Node2 = wrapper.get('[test-id="singleValueP992"]')
|
||
const p99Node3 = wrapper.get('[test-id="singleValueP993"]')
|
||
const p99Node4 = wrapper.get('[test-id="singleValueP994"]')
|
||
|
||
expect(p99Node0.text()).toEqual('P99: -')
|
||
expect(p99Node1.text()).toEqual('P99: -')
|
||
expect(p99Node2.text()).toEqual('P99: -')
|
||
expect(p99Node3.text()).toEqual('P99: -')
|
||
expect(p99Node4.text()).toEqual('P99: -')
|
||
resolve()
|
||
}, 300))
|
||
})
|
||
test('Npm概况信息：服务质量图 下钻数据为0或极大值', async () => {
|
||
axiosPostAndMounted('drillDown', {
|
||
data1: mockData.boundary.drillDown.data1,
|
||
data2: mockData.boundary.drillDown.data2
|
||
})
|
||
|
||
await new Promise(resolve => setTimeout(() => {
|
||
const textNode0 = wrapper.get('[test-id="singleValueContent0"]')
|
||
const textNode1 = wrapper.get('[test-id="singleValueContent1"]')
|
||
const textNode2 = wrapper.get('[test-id="singleValueContent2"]')
|
||
const textNode3 = wrapper.get('[test-id="singleValueContent3"]')
|
||
const textNode4 = wrapper.get('[test-id="singleValueContent4"]')
|
||
|
||
expect(textNode0.text()).toEqual('3.63 h')
|
||
expect(textNode1.text()).toEqual('1.66 h')
|
||
expect(textNode2.text()).toEqual('2.78 h')
|
||
expect(textNode3.text()).toEqual('10800.00 %')
|
||
expect(textNode4.text()).toEqual('37900.00 %')
|
||
|
||
const trendIconNode0 = wrapper.get('[test-id="singleValueTrendIcon0"]')
|
||
// const trendIconNode1 = wrapper.get('[test-id="singleValueTrendIcon1"]')
|
||
/*
|
||
* 当元素存在的时候，find 和 get 是一样的；
|
||
* 当找不到元素的时候:
|
||
* (1) find 会返回 null, 不会报错，case 通过
|
||
* (2) get 会报错，case 失败
|
||
* 一般总是使用 get ，除非想要判断一些元素不存在的时候，使用 find；
|
||
*/
|
||
const trendIconNode2 = wrapper.find('[test-id="singleValueTrendIcon2"]')
|
||
const trendIconNode3 = wrapper.get('[test-id="singleValueTrendIcon3"]')
|
||
const trendIconNode4 = wrapper.get('[test-id="singleValueTrendIcon4"]')
|
||
|
||
expect(trendIconNode0.classes()).toContain('cn-icon-rise1')
|
||
// expect(trendIconNode1.classes()).toContain('cn-icon-rise1')
|
||
expect(trendIconNode2.classes()).toContain('cn-icon-rise1')
|
||
expect(trendIconNode3.classes()).toContain('cn-icon-decline')
|
||
expect(trendIconNode4.classes()).toContain('cn-icon-rise1')
|
||
|
||
const p95Node0 = wrapper.get('[test-id="singleValueP950"]')
|
||
const p95Node1 = wrapper.get('[test-id="singleValueP951"]')
|
||
const p95Node2 = wrapper.get('[test-id="singleValueP952"]')
|
||
const p95Node3 = wrapper.get('[test-id="singleValueP953"]')
|
||
const p95Node4 = wrapper.get('[test-id="singleValueP954"]')
|
||
|
||
expect(p95Node0.text()).toEqual('P95: <1 ms')
|
||
expect(p95Node1.text()).toEqual('P95: 4.92 m')
|
||
expect(p95Node2.text()).toEqual('P95: 10.00 s')
|
||
expect(p95Node3.text()).toEqual('P95: 3.46 %')
|
||
expect(p95Node4.text()).toEqual('P95: 10.47 %')
|
||
|
||
const p99Node0 = wrapper.get('[test-id="singleValueP990"]')
|
||
const p99Node1 = wrapper.get('[test-id="singleValueP991"]')
|
||
const p99Node2 = wrapper.get('[test-id="singleValueP992"]')
|
||
const p99Node3 = wrapper.get('[test-id="singleValueP993"]')
|
||
const p99Node4 = wrapper.get('[test-id="singleValueP994"]')
|
||
|
||
expect(p99Node0.text()).toEqual('P99: <1 ms')
|
||
expect(p99Node1.text()).toEqual('P99: 7.70 m')
|
||
expect(p99Node2.text()).toEqual('P99: 10.00 s')
|
||
expect(p99Node3.text()).toEqual('P99: 13.72 %')
|
||
expect(p99Node4.text()).toEqual('P99: 18.30 %')
|
||
resolve()
|
||
}, 500))
|
||
})
|
||
})
|