CN-982: 实体详情--流量折线图开发
This commit is contained in:
刘洪洪
163
test/views/charts2/charts/entityDetail/EntityDetailLine.test.js
Normal file
163
test/views/charts2/charts/entityDetail/EntityDetailLine.test.js
Normal file
@@ -0,0 +1,163 @@
|
||||
import EntityDetailLine from '@/views/charts2/charts/entityDetail/EntityDetailLine'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import axios from 'axios'
|
||||
import mockData from './mockData/EntityDetailLine'
|
||||
|
||||
const timeFilter = {
|
||||
dateRangeValue: -1,
|
||||
startTime: 1673244000000,
|
||||
endTime: 1673247600000
|
||||
}
|
||||
const chart = {
|
||||
id: 2108,
|
||||
name: 'APP流量图',
|
||||
i18n: '',
|
||||
panelId: 20,
|
||||
pid: 0,
|
||||
type: 107,
|
||||
x: 0,
|
||||
y: 6,
|
||||
w: 30,
|
||||
h: 6,
|
||||
children: [],
|
||||
panel: {
|
||||
id: 20,
|
||||
name: 'APP entity detail'
|
||||
},
|
||||
i: 2108,
|
||||
category: 'echarts',
|
||||
firstShow: false,
|
||||
moved: false
|
||||
}
|
||||
|
||||
function init (query) {
|
||||
require('vue-router').useRoute.mockReturnValue({ query: query || {} })
|
||||
}
|
||||
|
||||
describe('views/charts2/charts/entityDetail/EntityDetailLine.vue测试', () => {
|
||||
test('Metric=Bits/s，无数据（空数组）', async () => {
|
||||
init()
|
||||
axios.get.mockResolvedValue(mockData.empty)
|
||||
const wrapper = mount(EntityDetailLine, {
|
||||
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(EntityDetailLine, {
|
||||
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('0bps')
|
||||
expect(textNode1.text()).toEqual('95.23Ebps')
|
||||
expect(textNode2.text()).toEqual('<1bps')
|
||||
resolve()
|
||||
}, 200))
|
||||
})
|
||||
test('Metric=Bits/s，点击第三个tab', async () => {
|
||||
init()
|
||||
// 模拟axios返回数据
|
||||
axios.get.mockResolvedValue(mockData.common)
|
||||
// 加载vue组件，获得实例
|
||||
const wrapper = mount(EntityDetailLine, {
|
||||
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 () => {
|
||||
const query = { entityType: 'app', name: 'uplive', startTime: 1675388605, endTime: 1675410205, range: 60, metric: 'Packets/s' }
|
||||
init(query)
|
||||
// 模拟axios返回数据
|
||||
axios.get.mockResolvedValue(mockData.common)
|
||||
// 加载vue组件，获得实例
|
||||
const wrapper = mount(EntityDetailLine, {
|
||||
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 () => {
|
||||
const query = { entityType: 'app', name: 'uplive', startTime: 1675388605, endTime: 1675410205, range: 60, metric: 'Sessions/s' }
|
||||
init(query)
|
||||
// 模拟axios返回数据
|
||||
axios.get.mockResolvedValue(mockData.common)
|
||||
// 加载vue组件，获得实例
|
||||
const wrapper = mount(EntityDetailLine, {
|
||||
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))
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,207 @@
|
||||
const mockData = {
|
||||
// 空
|
||||
empty: {
|
||||
data: {
|
||||
status: 200,
|
||||
code: 200,
|
||||
data: {
|
||||
resultType: 'object',
|
||||
result: []
|
||||
}
|
||||
}
|
||||
},
|
||||
bytes: {
|
||||
// 边界
|
||||
boundary: {
|
||||
data: {
|
||||
status: 200,
|
||||
code: 200,
|
||||
data: {
|
||||
resultType: 'object',
|
||||
result: [
|
||||
{
|
||||
type: 'bytes',
|
||||
totalBitsRate: {
|
||||
analysis: {
|
||||
avg: '0'
|
||||
}
|
||||
},
|
||||
inboundBitsRate: {
|
||||
analysis: {
|
||||
avg: '0'
|
||||
}
|
||||
},
|
||||
outboundBitsRate: {
|
||||
analysis: {
|
||||
avg: '95229000000000000000'
|
||||
}
|
||||
},
|
||||
internalBitsRate: {
|
||||
analysis: {
|
||||
avg: '0'
|
||||
}
|
||||
},
|
||||
throughBitsRate: {
|
||||
analysis: {
|
||||
avg: '0'
|
||||
}
|
||||
},
|
||||
other: {
|
||||
analysis: {
|
||||
avg: '0.01'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'packets'
|
||||
},
|
||||
{
|
||||
type: 'sessions'
|
||||
}
|
||||
]
|
||||
},
|
||||
msg: 'OK'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 正常数据
|
||||
common: {
|
||||
data: {
|
||||
status: 200,
|
||||
code: 200,
|
||||
data: {
|
||||
resultType: 'object',
|
||||
result: [
|
||||
{
|
||||
type: 'bytes',
|
||||
totalBitsRate: {
|
||||
values: [[1673247564, '96801019.52']],
|
||||
analysis: {
|
||||
avg: '112042808.24',
|
||||
max: '301842105.76',
|
||||
min: '52096324',
|
||||
p95: '168089003.35199997'
|
||||
}
|
||||
},
|
||||
inboundBitsRate: {
|
||||
values: [[1673247564, '11814508.48']],
|
||||
analysis: {
|
||||
avg: '18587597.36',
|
||||
max: '137528138.88',
|
||||
min: '3181142.88',
|
||||
p95: '49561521.447999954'
|
||||
}
|
||||
},
|
||||
outboundBitsRate: {
|
||||
values: [[1673247564, '84282965.52']],
|
||||
analysis: {
|
||||
avg: '87557861.44',
|
||||
max: '290402258',
|
||||
min: '45337684.48',
|
||||
p95: '121041718.81199999'
|
||||
}
|
||||
},
|
||||
internalBitsRate: {
|
||||
values: [[1673247564, '9125.12']],
|
||||
analysis: {
|
||||
avg: '278114.32',
|
||||
max: '2215460.48',
|
||||
min: '0',
|
||||
p95: '923494.5719999998'
|
||||
}
|
||||
},
|
||||
throughBitsRate: {
|
||||
values: [[1673247564, '694420.48']],
|
||||
analysis: {
|
||||
avg: '5619235.12',
|
||||
max: '42455480.24',
|
||||
min: '262607.76',
|
||||
p95: '13559588.195999999'
|
||||
}
|
||||
},
|
||||
other: {
|
||||
values: [[1673247564, '0.00']],
|
||||
analysis: {
|
||||
avg: '0.01',
|
||||
max: '0.08',
|
||||
min: '0.00',
|
||||
p95: '0.08'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'packets',
|
||||
totalPacketsRate: {
|
||||
values: [[1673247564, '12077.53']],
|
||||
analysis: {
|
||||
avg: '14062.37',
|
||||
max: '32840.42',
|
||||
min: '6564.17',
|
||||
p95: '20923.167999999987'
|
||||
}
|
||||
},
|
||||
inboundPacketsRate: {
|
||||
values: [[1673247564, '3865.58']],
|
||||
analysis: {
|
||||
avg: '4241.61',
|
||||
max: '15460.03',
|
||||
min: '1918.22',
|
||||
p95: '8549.799999999997'
|
||||
}
|
||||
},
|
||||
outboundPacketsRate: {
|
||||
values: [[1673247564, '8118.89']],
|
||||
analysis: {
|
||||
avg: '9170.98',
|
||||
max: '27134.58',
|
||||
min: '4510.25',
|
||||
p95: '13690.540999999996'
|
||||
}
|
||||
},
|
||||
internalPacketsRate: {
|
||||
values: [[1673247564, '15.89']],
|
||||
analysis: {
|
||||
avg: '35.95',
|
||||
max: '276.47',
|
||||
min: '0.00',
|
||||
p95: '122.49749999999999'
|
||||
}
|
||||
},
|
||||
throughPacketsRate: {
|
||||
values: [[1673247564, '77.17']],
|
||||
analysis: {
|
||||
avg: '613.82',
|
||||
max: '3768.56',
|
||||
min: '42.92',
|
||||
p95: '1279.757499999999'
|
||||
}
|
||||
},
|
||||
other: {
|
||||
values: [[1673247564, '0.00']],
|
||||
analysis: {
|
||||
avg: '0',
|
||||
max: '0.01',
|
||||
min: '0.00',
|
||||
p95: '0.01'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'sessions',
|
||||
totalSessionsRate: {
|
||||
values: [[1673247564, '29.92']],
|
||||
analysis: {
|
||||
avg: '29.89',
|
||||
max: '29.92',
|
||||
min: '29.67',
|
||||
p95: '29.92'
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
msg: 'OK'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default mockData
|
||||
Reference in New Issue
Block a user