gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-863 单测用例--npm服务质量图（5个单值）

Browse Source
This commit is contained in:
hyx
2023-01-20 11:13:07 +08:00
parent 8aa96da577
commit 55fdd3f0e4
2 changed files with 149 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/charts2/charts/npm/localComponents/SingleValue.vue
View File

@@ -5,42 +5,42 @@
<chart-error v-if="npm.message" tooltip :content="npm.message"></chart-error>
</div>
<div class="single-value__content">
<div class="single-value__content-number" v-if="index ===0 || index ===1 || index ===2">
<div class="single-value__content" >
<div class="single-value__content-number" v-if="index ===0 || index ===1 || index ===2" :test-id="`singleValueContent${index}`">
{{ unitConvert(npm.Avg, unitTypes.time).join(' ') }}
</div>
<div class="single-value__content-number" v-else>
<div class="single-value__content-number" v-else :test-id="`singleValueContent${index}`">
{{unitConvert(npm.Avg, unitTypes.percent).join(' ')}}
</div>
<div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;
<span v-if="npm.value <= 5">
<div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red" >
<i class="cn-icon-rise1 cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>&nbsp;
<span v-if="npm.value <= 5" :test-id="`singleValueTrendValue${index}`">
{{ unitConvert(npm.value, unitTypes.percent).join('') }}
</span>
<span v-else>>500.00%</span>
<span v-else :test-id="`singleValueTrendValue${index}`">>500.00%</span>
</div>
<div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-decline cn-icon"></i>&nbsp;
<span v-if="npm.value >= -5">
{{ unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '') }}
<div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green" >
<i class="cn-icon-decline cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>&nbsp;
<span v-if="npm.value >= -5" :test-id="`singleValueTrendValue${index}`">
{{ unitConvert(npm.value, unitTypes.percent).join('') }}
</span>
<span v-else>>500.00%</span>
<span v-else :test-id="`singleValueTrendValue${index}`">>500.00%</span>
</div>
<div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
<div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black" >
<i class="cn-icon-constant cn-icon" :test-id="`singleValueTrendIcon${index}`"></i>
</div>
<div v-else></div>
</div>
<div class="single-value__circle">
<div class="single-value__circle-p95">
<div class="single-value__circle-p95" :test-id="`singleValueP95${index}`">
<span v-if="index ===0 || index ===1 || index ===2">
P95:{{ unitConvert(npm.P95, unitTypes.time).join(' ') }}</span>
<span v-else>
P95:{{ unitConvert(npm.P95, unitTypes.percent).join(' ') }}
</span>
</div>
<div class="single-value__circle-p99">
<div class="single-value__circle-p99" :test-id="`singleValueP99${index}`">
<span v-if="index ===0 || index ===1 || index ===2">
P99:{{ unitConvert(npm.P99, unitTypes.time).join(' ') }}
</span>

133
test/views/charts2/charts/npm/localComponents/SingleValue.test.js Normal file
View File

@@ -0,0 +1,133 @@
import SingleValue from '@/views/charts2/charts/npm/localComponents/SingleValue'
import { mount } from '@vue/test-utils'
const npmNetworkName = [
{ name: 'networkAppPerformance.tcpConnectionEstablishLatency' },
{ name: 'networkAppPerformance.httpResponse' },
{ name: 'networkAppPerformance.sslResponseLatency' },
{ name: 'networkAppPerformance.packetLoss' },
{ name: 'overall.packetRetrans' }
]
const npmNetworkData = [
{
"establishLatencyMsAvg": 90,
"establishLatencyMsP50": 49,
"establishLatencyMsP90": 91,
"establishLatencyMsP95": 164,
"establishLatencyMsP99": 727,
"value": -0.01098901098901099
},
{
"httpResponseLatencyAvg": 178,
"httpResponseLatencyP50": 57,
"httpResponseLatencyP90": 121,
"httpResponseLatencyP95": 256,
"httpResponseLatencyP99": 1616,
"value": 0.017142857142857144
},
{
"sslConLatencyAvg": 0,
"sslConLatencyP50": 0,
"sslConLatencyP90": 0,
"sslConLatencyP95": 0,
"sslConLatencyP99": 0,
"value": "-"
},
{
"tcpLostlenPercentAvg": 0.0088,
"tcpLostlenPercentP50": 0.0057,
"tcpLostlenPercentP90": 0.0184,
"tcpLostlenPercentP95": 0.0226,
"tcpLostlenPercentP99": 0.0397,
"value": 0.10000000000000005
},
{
"pktRetransPercentAvg": 0.0388,
"pktRetransPercentP50": 0.0341,
"pktRetransPercentP90": 0.0614,
"pktRetransPercentP95": 0.0691,
"pktRetransPercentP99": 0.0853,
"value": 0
}
]
describe('views/charts2/charts/npm/localComponents/SingleValue.vue测试', () => {
test('Npm概况信息：服务质量图', async () => {
// 加载vue组件，获得实例
const wrapper = mount(SingleValue, {
propsData: {
npmNetworkName,
npmNetworkData
}
})
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await wrapper.vm.$nextTick(() => {
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('90 ms')
expect(textNode1.text()).toEqual('178 ms')
expect(textNode2.text()).toEqual('0 ms')
expect(textNode3.text()).toEqual('0.88 %')
expect(textNode4.text()).toEqual('3.88 %')
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 === null)
expect(trendIconNode3.classes()).toContain('cn-icon-rise1')
expect(trendIconNode4.classes()).toContain('cn-icon-constant')
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('-1.10%')
expect(trendValueNode1.text()).toEqual('1.71%')
expect(trendValueNode2 === null)
expect(trendValueNode3.text()).toEqual('10.00%')
expect(trendValueNode4 === null)
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:164 ms')
expect(p95Node1.text()).toEqual('P95:256 ms')
expect(p95Node2.text()).toEqual('P95:0 ms')
expect(p95Node3.text()).toEqual('P95:2.26 %')
expect(p95Node4.text()).toEqual('P95:6.91 %')
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:727 ms')
expect(p99Node1.text()).toEqual('P99:1.62 s')
expect(p99Node2.text()).toEqual('P99:0 ms')
expect(p99Node3.text()).toEqual('P99:3.97 %')
expect(p99Node4.text()).toEqual('P99:8.53 %')
})
})
})