260 lines
12 KiB
JavaScript
260 lines
12 KiB
JavaScript
import NpmAppEventTable from '@/views/charts2/charts/npm/NpmAppEventTable'
|
||
import { mount } from '@vue/test-utils'
|
||
import axios from 'axios'
|
||
import ElementPlus from "element-plus"
|
||
|
||
const timeFilter = {
|
||
dateRangeValue: -1,
|
||
startTime: 1675558657,
|
||
endTime: 1675731457
|
||
}
|
||
|
||
const mockGet = {
|
||
data: {"status":200,"code":200,"queryKey":"88eeb92e0ddb40c0327db494cfe5c74c","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":752,"result_rows":10},"job":null,"formatType":"json","meta":[{"name":"app_name","type":"string","category":"Dimension"},{"name":"event_severity","type":"string","category":"Dimension"},{"name":"event_type","type":"string","category":"Dimension"},{"name":"count","type":"long","category":"Metric"}],"data":{"resultType":"table","result":[{"appName":"youku","eventSeverity":"info","eventType":"http error","count":6},{"appName":"uplive","eventSeverity":"critical","eventType":"http error","count":5},{"appName":"youku","eventSeverity":"low","eventType":"http error","count":4},{"appName":"apple_hls","eventSeverity":"info","eventType":"http error","count":3},{"appName":"apple_hls","eventSeverity":"low","eventType":"http error","count":3},{"appName":"apple_hls","eventSeverity":"medium","eventType":"http error","count":2},{"appName":"uplive","eventSeverity":"high","eventType":"http error","count":2},{"appName":"windows_update","eventSeverity":"medium","eventType":"http error","count":2},{"appName":"apple_hls","eventSeverity":"critical","eventType":"http error","count":1},{"appName":"cloudflare","eventSeverity":"info","eventType":"http error","count":1}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20app_name%20AS%20app_name%2C%20event_severity%20AS%20event_severity%2C%20event_type%20AS%20event_type%2C%20COUNT%28*%29%20AS%20count%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675580110%20AND%20end_time%20%3C%201675752910%20AND%20entity_type%20%3D%20%27app%27%20GROUP%20BY%20app_name%2Cevent_severity%2Cevent_type%20ORDER%20BY%20count%20DESC%20%20LIMIT%2010%20&format=json&option=real-time","msg":"OK"}
|
||
}
|
||
|
||
describe('views/charts2/charts/npm/NpmAppEventTable.vue测试', () => {
|
||
test('Npm 事件：APP事件信息表格 严重程度色块验证', async () => {
|
||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||
// 模拟 axios 数据
|
||
axios.get.mockResolvedValue(mockGet)
|
||
// 加载vue组件，获得实例
|
||
const wrapper = mount(NpmAppEventTable, {
|
||
global: {
|
||
plugins: [ElementPlus]
|
||
},
|
||
propsData: {
|
||
timeFilter
|
||
}
|
||
})
|
||
|
||
await new Promise(resolve => setTimeout(() => {
|
||
// critical
|
||
let criticalArray = [1,8]
|
||
for(let index=0; index < criticalArray.length; index++){
|
||
let rowIndex = criticalArray[index]
|
||
for(let i=1; i<=5 ; i++){
|
||
const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||
expect(eventSeverityRedValue.classes()).toContain('red-dot')
|
||
}
|
||
}
|
||
|
||
// high
|
||
let highArray = [6]
|
||
for(let index=0; index < highArray.length; index++){
|
||
let rowIndex = highArray[index]
|
||
for(let i=1; i<=4 ; i++){
|
||
const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||
expect(eventSeverityRedValue.classes()).toContain('red-dot')
|
||
}
|
||
for(let i=5; i<=5 ; i++){
|
||
const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||
expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
|
||
}
|
||
}
|
||
|
||
// medium
|
||
let mediumArray = [5,7]
|
||
for(let index=0; index < mediumArray.length; index++){
|
||
let rowIndex = mediumArray[index]
|
||
for(let i=1; i<=3 ; i++){
|
||
const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||
expect(eventSeverityRedValue.classes()).toContain('red-dot')
|
||
}
|
||
for(let i=4; i<=5 ; i++){
|
||
const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||
expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
|
||
}
|
||
}
|
||
|
||
// low
|
||
let lowArray = [2,4]
|
||
for(let index=0; index < lowArray.length; index++){
|
||
let rowIndex = lowArray[index]
|
||
for(let i=1; i<=2 ; i++){
|
||
const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||
expect(eventSeverityRedValue.classes()).toContain('red-dot')
|
||
}
|
||
for(let i=3; i<=5 ; i++){
|
||
const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||
expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
|
||
}
|
||
}
|
||
|
||
// info
|
||
let infoArray = [0,3,9]
|
||
for(let index=0; index < infoArray.length; index++){
|
||
let rowIndex = infoArray[index]
|
||
for(let i=1; i<=1 ; i++){
|
||
const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||
expect(eventSeverityRedValue.classes()).toContain('red-dot')
|
||
}
|
||
for(let i=2; i<=5 ; i++){
|
||
const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||
expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
|
||
}
|
||
}
|
||
resolve()
|
||
}, 200))
|
||
})
|
||
test('Npm 事件：APP事件信息表格 数据验证(应用数据列)', async () => {
|
||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||
// 模拟 axios 数据
|
||
axios.get.mockResolvedValue(mockGet)
|
||
// 加载vue组件，获得实例
|
||
const wrapper = mount(NpmAppEventTable, {
|
||
global: {
|
||
plugins: [ElementPlus]
|
||
},
|
||
propsData: {
|
||
timeFilter
|
||
}
|
||
})
|
||
|
||
await new Promise(resolve => setTimeout(() => {
|
||
const textNode0 = wrapper.find('[test-id="appName0"]')
|
||
const textNode1 = wrapper.find('[test-id="appName1"]')
|
||
const textNode2 = wrapper.find('[test-id="appName2"]')
|
||
const textNode3 = wrapper.find('[test-id="appName3"]')
|
||
const textNode4 = wrapper.find('[test-id="appName4"]')
|
||
const textNode5 = wrapper.find('[test-id="appName5"]')
|
||
const textNode6 = wrapper.find('[test-id="appName6"]')
|
||
const textNode7 = wrapper.find('[test-id="appName7"]')
|
||
const textNode8 = wrapper.find('[test-id="appName8"]')
|
||
const textNode9 = wrapper.find('[test-id="appName9"]')
|
||
|
||
expect(textNode0.text()).toEqual('youku')
|
||
expect(textNode1.text()).toEqual('uplive')
|
||
expect(textNode2.text()).toEqual('youku')
|
||
expect(textNode3.text()).toEqual('apple_hls')
|
||
expect(textNode4.text()).toEqual('apple_hls')
|
||
expect(textNode5.text()).toEqual('apple_hls')
|
||
expect(textNode6.text()).toEqual('uplive')
|
||
expect(textNode7.text()).toEqual('windows_update')
|
||
expect(textNode8.text()).toEqual('apple_hls')
|
||
expect(textNode9.text()).toEqual('cloudflare')
|
||
|
||
resolve()
|
||
}, 200))
|
||
})
|
||
test('Npm 事件：APP事件信息表格 数据验证(严重程度数据列)', async () => {
|
||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||
// 模拟 axios 数据
|
||
axios.get.mockResolvedValue(mockGet)
|
||
// 加载vue组件，获得实例
|
||
const wrapper = mount(NpmAppEventTable, {
|
||
global: {
|
||
plugins: [ElementPlus]
|
||
},
|
||
propsData: {
|
||
timeFilter
|
||
}
|
||
})
|
||
|
||
await new Promise(resolve => setTimeout(() => {
|
||
const textNode0 = wrapper.find('[test-id="eventSeverity0"]')
|
||
const textNode1 = wrapper.find('[test-id="eventSeverity1"]')
|
||
const textNode2 = wrapper.find('[test-id="eventSeverity2"]')
|
||
const textNode3 = wrapper.find('[test-id="eventSeverity3"]')
|
||
const textNode4 = wrapper.find('[test-id="eventSeverity4"]')
|
||
const textNode5 = wrapper.find('[test-id="eventSeverity5"]')
|
||
const textNode6 = wrapper.find('[test-id="eventSeverity6"]')
|
||
const textNode7 = wrapper.find('[test-id="eventSeverity7"]')
|
||
const textNode8 = wrapper.find('[test-id="eventSeverity8"]')
|
||
const textNode9 = wrapper.find('[test-id="eventSeverity9"]')
|
||
|
||
expect(textNode0.text()).toEqual('info')
|
||
expect(textNode1.text()).toEqual('critical')
|
||
expect(textNode2.text()).toEqual('low')
|
||
expect(textNode3.text()).toEqual('info')
|
||
expect(textNode4.text()).toEqual('low')
|
||
expect(textNode5.text()).toEqual('medium')
|
||
expect(textNode6.text()).toEqual('high')
|
||
expect(textNode7.text()).toEqual('medium')
|
||
expect(textNode8.text()).toEqual('critical')
|
||
expect(textNode9.text()).toEqual('info')
|
||
|
||
resolve()
|
||
}, 200))
|
||
})
|
||
test('Npm 事件：APP事件信息表格 数据验证(事件类型数据列)', async () => {
|
||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||
// 模拟 axios 数据
|
||
axios.get.mockResolvedValue(mockGet)
|
||
// 加载vue组件，获得实例
|
||
const wrapper = mount(NpmAppEventTable, {
|
||
global: {
|
||
plugins: [ElementPlus]
|
||
},
|
||
propsData: {
|
||
timeFilter
|
||
}
|
||
})
|
||
|
||
await new Promise(resolve => setTimeout(() => {
|
||
const textNode0 = wrapper.find('[test-id="eventType0"]')
|
||
const textNode1 = wrapper.find('[test-id="eventType1"]')
|
||
const textNode2 = wrapper.find('[test-id="eventType2"]')
|
||
const textNode3 = wrapper.find('[test-id="eventType3"]')
|
||
const textNode4 = wrapper.find('[test-id="eventType4"]')
|
||
const textNode5 = wrapper.find('[test-id="eventType5"]')
|
||
const textNode6 = wrapper.find('[test-id="eventType6"]')
|
||
const textNode7 = wrapper.find('[test-id="eventType7"]')
|
||
const textNode8 = wrapper.find('[test-id="eventType8"]')
|
||
const textNode9 = wrapper.find('[test-id="eventType9"]')
|
||
|
||
expect(textNode0.text()).toEqual('http error')
|
||
expect(textNode1.text()).toEqual('http error')
|
||
expect(textNode2.text()).toEqual('http error')
|
||
expect(textNode3.text()).toEqual('http error')
|
||
expect(textNode4.text()).toEqual('http error')
|
||
expect(textNode5.text()).toEqual('http error')
|
||
expect(textNode6.text()).toEqual('http error')
|
||
expect(textNode7.text()).toEqual('http error')
|
||
expect(textNode8.text()).toEqual('http error')
|
||
expect(textNode9.text()).toEqual('http error')
|
||
|
||
resolve()
|
||
}, 200))
|
||
})
|
||
test('Npm 事件：APP事件信息表格 数据验证(事件数量数据列)', async () => {
|
||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||
// 模拟 axios 数据
|
||
axios.get.mockResolvedValue(mockGet)
|
||
// 加载vue组件，获得实例
|
||
const wrapper = mount(NpmAppEventTable, {
|
||
global: {
|
||
plugins: [ElementPlus]
|
||
},
|
||
propsData: {
|
||
timeFilter
|
||
}
|
||
})
|
||
|
||
await new Promise(resolve => setTimeout(() => {
|
||
const textNode0 = wrapper.find('[test-id="count0"]')
|
||
const textNode1 = wrapper.find('[test-id="count1"]')
|
||
const textNode2 = wrapper.find('[test-id="count2"]')
|
||
const textNode3 = wrapper.find('[test-id="count3"]')
|
||
const textNode4 = wrapper.find('[test-id="count4"]')
|
||
const textNode5 = wrapper.find('[test-id="count5"]')
|
||
const textNode6 = wrapper.find('[test-id="count6"]')
|
||
const textNode7 = wrapper.find('[test-id="count7"]')
|
||
const textNode8 = wrapper.find('[test-id="count8"]')
|
||
const textNode9 = wrapper.find('[test-id="count9"]')
|
||
|
||
expect(textNode0.text()).toEqual('6')
|
||
expect(textNode1.text()).toEqual('5')
|
||
expect(textNode2.text()).toEqual('4')
|
||
expect(textNode3.text()).toEqual('3')
|
||
expect(textNode4.text()).toEqual('3')
|
||
expect(textNode5.text()).toEqual('2')
|
||
expect(textNode6.text()).toEqual('2')
|
||
expect(textNode7.text()).toEqual('2')
|
||
expect(textNode8.text()).toEqual('1')
|
||
expect(textNode9.text()).toEqual('1')
|
||
|
||
resolve()
|
||
}, 200))
|
||
})
|
||
}) |