CN-869 feat: 单测用例--npm events 近期事件表格
This commit is contained in:
@changcode
162
test/views/charts2/charts/npm/NpmRecentEvents.test.js
Normal file
162
test/views/charts2/charts/npm/NpmRecentEvents.test.js
Normal file
@@ -0,0 +1,162 @@
|
||||
import NpmRecentEvents from '@/views/charts2/charts/npm/NpmRecentEvents'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import axios from 'axios'
|
||||
import ElementPlus from 'element-plus'
|
||||
// 未下钻
|
||||
const mockGet = {
|
||||
data: {"status":200,"code":200,"queryKey":"68d8aa5867b08b926b5bd38c36add9e5","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":550,"result_rows":5},"job":null,"formatType":"json","meta":[{"name":"event_id","type":"long","category":"Metric"},{"name":"event_severity","type":"string","category":"Metric"},{"name":"event_key","type":"string","category":"Metric"},{"name":"event_type","type":"string","category":"Metric"}],"data":{"resultType":"table","result":[{"eventId":1173511643475208192,"eventSeverity":"critical","eventKey":"114.114.114.114 dns error","eventType":"dns error"},{"eventId":1173504415263352832,"eventSeverity":"high","eventKey":"116.178.78.241 http error","eventType":"http error"},{"eventId":1173492761289025537,"eventSeverity":"medium","eventKey":"223.6.6.6 dns error","eventType":"dns error"},{"eventId":1173489002890651648,"eventSeverity":"low","eventKey":"114.114.114.114 dns error","eventType":"dns error"},{"eventId":1173482380537620480,"eventSeverity":"info","eventKey":"1.1.1.2 dns error","eventType":"http error"},{"eventId":1173482380537620481,"eventSeverity":"critical","eventKey":"1.1.1.2 dns error","eventType":"dns error"}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20event_id%20AS%20event_id%2Cevent_severity%20AS%20event_severity%2C%20event_key%20AS%20event_key%2C%20event_type%20AS%20event_type%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675227528%20AND%20end_time%20%3C%201675231128%20ORDER%20BY%20start_time%20DESC%20%20LIMIT%208%20&format=json&option=real-time","msg":"OK"}
|
||||
}
|
||||
|
||||
// 下钻
|
||||
const mockGet1 = {
|
||||
data: {"status":200,"code":200,"queryKey":"fc0bd92bf3b48a37310d5c004d8b7a7b","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":689,"result_rows":7},"job":null,"formatType":"json","meta":[{"name":"event_id","type":"long","category":"Metric"},{"name":"event_severity","type":"string","category":"Metric"},{"name":"event_type","type":"string","category":"Metric"},{"name":"start_time","type":"long","category":"Metric"}],"data":{"resultType":"table","result":[{"eventId":1132790825086844928,"eventSeverity":"critical","eventType":"http error","startTime":1672802700},{"eventId":1132132403379142657,"eventSeverity":"high","eventType":"dns error","startTime":1672763400},{"eventId":1131441760155688960,"eventSeverity":"low","eventType":"dns error","startTime":1672722300},{"eventId":1131411523384598528,"eventSeverity":"medium","eventType":"http error","startTime":1672720500},{"eventId":1131390214323789824,"eventSeverity":"info","eventType":"dns error","startTime":1672719300},{"eventId":1131306200132968450,"eventSeverity":"critical","eventType":"http error","startTime":1672714200}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20event_id%20AS%20event_id%2Cevent_severity%20AS%20event_severity%2C%20event_type%20AS%20event_type%2C%20start_time%20AS%20start_time%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201672675200%20AND%20start_time%20%3C%201677513600%20AND%20server_ip%20%3D%20%27116.178.236.216%27%20ORDER%20BY%20start_time%20DESC&format=json&option=real-time","msg":"OK"}
|
||||
}
|
||||
|
||||
const query = {
|
||||
curTab: "country",
|
||||
dimensionType: "ip",
|
||||
fourthMenu: "116.178.214.84",
|
||||
fourthPanel: "8",
|
||||
networkOverviewBeforeTab: "ip",
|
||||
panelName: "116.178.214.84",
|
||||
queryCondition: "common_client_ip='116.178.214.84' OR common_server_ip='116.178.214.84'",
|
||||
t: "1675236779453",
|
||||
tabIndex: "1",
|
||||
tabOperationBeforeType: "",
|
||||
tabOperationType: "4",
|
||||
thirdMenu: "network.ips",
|
||||
thirdPanel: "12"
|
||||
}
|
||||
|
||||
const timeFilter = {
|
||||
dateRangeValue: -1,
|
||||
startTime: 1675043912,
|
||||
endTime: 1675047512
|
||||
}
|
||||
|
||||
describe('views/charts2/charts/npm/NpmRecentEvents.vue测试', () => {
|
||||
test('npm events 近期事件表格 未下钻', async () => {
|
||||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||||
// 模拟 axios 返回数据
|
||||
axios.get.mockResolvedValue(mockGet)
|
||||
|
||||
const wrapper = mount(NpmRecentEvents, {
|
||||
propsData: {
|
||||
timeFilter
|
||||
},
|
||||
global: {
|
||||
plugins: [ElementPlus]
|
||||
}
|
||||
})
|
||||
await new Promise(resolve => setTimeout(() => {
|
||||
const severity0 = wrapper.get('[test-id="eventSeverity-critical-0"]')
|
||||
const severity1 = wrapper.get('[test-id="eventSeverity-high-1"]')
|
||||
const severity2 = wrapper.get('[test-id="eventSeverity-medium-2"]')
|
||||
const severity3 = wrapper.get('[test-id="eventSeverity-low-3"]')
|
||||
const severity4 = wrapper.get('[test-id="eventSeverity-info-4"]')
|
||||
const severity5 = wrapper.get('[test-id="eventSeverity-critical-5"]')
|
||||
|
||||
expect(severity0.text()).toEqual('critical')
|
||||
expect(severity1.text()).toEqual('high')
|
||||
expect(severity2.text()).toEqual('medium')
|
||||
expect(severity3.text()).toEqual('low')
|
||||
expect(severity4.text()).toEqual('info')
|
||||
expect(severity5.text()).toEqual('critical')
|
||||
|
||||
expect(severity0.classes()).toContain('critical')
|
||||
expect(severity1.classes()).toContain('high')
|
||||
expect(severity2.classes()).toContain('medium')
|
||||
expect(severity3.classes()).toContain('low')
|
||||
expect(severity4.classes()).toContain('info')
|
||||
expect(severity5.classes()).toContain('critical')
|
||||
|
||||
const eventKey0 = wrapper.get('[test-id="eventKey-114.114.114.114-0"]')
|
||||
const eventKey1 = wrapper.get('[test-id="eventKey-116.178.78.241-1"]')
|
||||
const eventKey2 = wrapper.get('[test-id="eventKey-223.6.6.6-2"]')
|
||||
const eventKey3 = wrapper.get('[test-id="eventKey-114.114.114.114-3"]')
|
||||
const eventKey4 = wrapper.get('[test-id="eventKey-1.1.1.2-4"]')
|
||||
|
||||
expect(eventKey0.text()).toEqual('114.114.114.114')
|
||||
expect(eventKey1.text()).toEqual('116.178.78.241')
|
||||
expect(eventKey2.text()).toEqual('223.6.6.6')
|
||||
expect(eventKey3.text()).toEqual('114.114.114.114')
|
||||
expect(eventKey4.text()).toEqual('1.1.1.2')
|
||||
|
||||
const eventType0 = wrapper.get('[test-id="eventType-dns error-0"]')
|
||||
const eventType1 = wrapper.get('[test-id="eventType-http error-1"]')
|
||||
const eventType2 = wrapper.get('[test-id="eventType-dns error-2"]')
|
||||
const eventType3 = wrapper.get('[test-id="eventType-dns error-3"]')
|
||||
const eventType4 = wrapper.get('[test-id="eventType-http error-4"]')
|
||||
|
||||
expect(eventType0.text()).toEqual('dns error')
|
||||
expect(eventType1.text()).toEqual('http error')
|
||||
expect(eventType2.text()).toEqual('dns error')
|
||||
expect(eventType3.text()).toEqual('dns error')
|
||||
expect(eventType4.text()).toEqual('http error')
|
||||
|
||||
resolve()
|
||||
}, 200))
|
||||
})
|
||||
test('npm events 近期事件表格 下钻', async () => {
|
||||
require('vue-router').useRoute.mockReturnValue({ query: query })
|
||||
// 模拟 axios 返回数据
|
||||
axios.get.mockResolvedValue(mockGet1)
|
||||
|
||||
const wrapper = mount(NpmRecentEvents, {
|
||||
propsData: {
|
||||
timeFilter
|
||||
},
|
||||
global: {
|
||||
plugins: [ElementPlus]
|
||||
}
|
||||
})
|
||||
await new Promise(resolve => setTimeout(() => {
|
||||
const severity0 = wrapper.get('[test-id="eventSeverity-critical-0"]')
|
||||
const severity1 = wrapper.get('[test-id="eventSeverity-high-1"]')
|
||||
const severity2 = wrapper.get('[test-id="eventSeverity-low-2"]')
|
||||
const severity3 = wrapper.get('[test-id="eventSeverity-medium-3"]')
|
||||
const severity4 = wrapper.get('[test-id="eventSeverity-info-4"]')
|
||||
const severity5 = wrapper.get('[test-id="eventSeverity-critical-5"]')
|
||||
|
||||
expect(severity0.text()).toEqual('critical')
|
||||
expect(severity1.text()).toEqual('high')
|
||||
expect(severity2.text()).toEqual('low')
|
||||
expect(severity3.text()).toEqual('medium')
|
||||
expect(severity4.text()).toEqual('info')
|
||||
expect(severity5.text()).toEqual('critical')
|
||||
|
||||
expect(severity0.classes()).toContain('critical')
|
||||
expect(severity1.classes()).toContain('high')
|
||||
expect(severity2.classes()).toContain('low')
|
||||
expect(severity3.classes()).toContain('medium')
|
||||
expect(severity4.classes()).toContain('info')
|
||||
expect(severity5.classes()).toContain('critical')
|
||||
|
||||
const eventType0 = wrapper.get('[test-id="eventType-http error-0"]')
|
||||
const eventType1 = wrapper.get('[test-id="eventType-dns error-1"]')
|
||||
const eventType2 = wrapper.get('[test-id="eventType-dns error-2"]')
|
||||
const eventType3 = wrapper.get('[test-id="eventType-http error-3"]')
|
||||
const eventType4 = wrapper.get('[test-id="eventType-dns error-4"]')
|
||||
|
||||
expect(eventType0.text()).toEqual('http error')
|
||||
expect(eventType1.text()).toEqual('dns error')
|
||||
expect(eventType2.text()).toEqual('dns error')
|
||||
expect(eventType3.text()).toEqual('http error')
|
||||
expect(eventType4.text()).toEqual('dns error')
|
||||
|
||||
const startTime0 = wrapper.get('[test-id="startTime-2023-01-04T11:25:00+08:00-0"]')
|
||||
const startTime1 = wrapper.get('[test-id="startTime-2023-01-04T00:30:00+08:00-1"]')
|
||||
const startTime2 = wrapper.get('[test-id="startTime-2023-01-03T13:05:00+08:00-2"]')
|
||||
const startTime3 = wrapper.get('[test-id="startTime-2023-01-03T12:35:00+08:00-3"]')
|
||||
const startTime4 = wrapper.get('[test-id="startTime-2023-01-03T12:15:00+08:00-4"]')
|
||||
|
||||
expect(startTime0.text()).toEqual('2023-01-04T11:25:00+08:00')
|
||||
expect(startTime1.text()).toEqual('2023-01-04T00:30:00+08:00')
|
||||
expect(startTime2.text()).toEqual('2023-01-03T13:05:00+08:00')
|
||||
expect(startTime3.text()).toEqual('2023-01-03T12:35:00+08:00')
|
||||
expect(startTime4.text()).toEqual('2023-01-03T12:15:00+08:00')
|
||||
|
||||
resolve()
|
||||
}, 300))
|
||||
})
|
||||
})
|
||||
@@ -1,133 +0,0 @@
|
||||
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 %')
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user